@beyondwork/docx-react-component 1.0.27 → 1.0.29

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -1,61 +0,0 @@
-import type {
-  EditorStoryTarget,
-  EditorSurfaceSnapshot,
-} from "../../api/public-types.ts";
-
-const surfaceIdentityMap = new WeakMap<EditorSurfaceSnapshot, number>();
-let nextSurfaceIdentity = 0;
-
-function getSurfaceIdentity(surface: EditorSurfaceSnapshot): number {
-  const cached = surfaceIdentityMap.get(surface);
-  if (cached !== undefined) {
-    return cached;
-  }
-  const identity = nextSurfaceIdentity;
-  nextSurfaceIdentity += 1;
-  surfaceIdentityMap.set(surface, identity);
-  return identity;
-}
-
-export function createSurfaceDocumentBuildKey(input: {
-  surface: EditorSurfaceSnapshot | null | undefined;
-  activeStory: EditorStoryTarget;
-  mediaPreviewKey: string;
-}): string {
-  return JSON.stringify({
-    surfaceIdentity:
-      input.surface === undefined || input.surface === null
-        ? "loading"
-        : getSurfaceIdentity(input.surface),
-    activeStory: input.activeStory,
-    mediaPreviewKey: input.mediaPreviewKey,
-  });
-}
-
-export function createSurfaceDecorationKey(input: {
-  markupDisplay: string;
-  showTrackedChanges: boolean;
-  canEdit: boolean;
-  activeCommentId?: string;
-  activeRevisionId?: string;
-  workflowScopeSignature?: string;
-  workflowCandidateSignature?: string;
-  workflowBlockedSignature?: string;
-  activeWorkflowWorkItemId?: string | null;
-  activeWorkflowScopeIds?: readonly string[];
-  suggestionsEnabled?: boolean;
-}): string {
-  return JSON.stringify({
-    markupDisplay: input.markupDisplay,
-    showTrackedChanges: input.showTrackedChanges,
-    canEdit: input.canEdit,
-    activeCommentId: input.activeCommentId ?? null,
-    activeRevisionId: input.activeRevisionId ?? null,
-    workflowScopeSignature: input.workflowScopeSignature ?? null,
-    workflowCandidateSignature: input.workflowCandidateSignature ?? null,
-    workflowBlockedSignature: input.workflowBlockedSignature ?? null,
-    activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
-    activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
-    suggestionsEnabled: input.suggestionsEnabled ?? false,
-  });
-}

package/src/ui-tailwind/editor-surface/tw-caret.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-
-import type { SelectionSnapshot } from "../../api/public-types";
-
-export function renderTwCaret(selection: SelectionSnapshot, position: number) {
-  return selection.isCollapsed && selection.anchor === position ? (
-    <span
-      aria-hidden="true"
-      className="inline-block w-0.5 h-[1.2em] bg-accent rounded-full align-middle animate-wre-blink"
-    />
-  ) : null;
-}

package/src/ui-tailwind/editor-surface/tw-editor-surface.tsx

@@ -1,150 +0,0 @@
-import React, { type FocusEventHandler, useMemo } from "react";
-
-import type {
-  EditorUser,
-  RuntimeRenderSnapshot,
-  SelectionSnapshot,
-} from "../../api/public-types";
-import {
-  createCommentDecorationModel,
-  type MarkupDisplay,
-} from "../../ui/headless/comment-decoration-model";
-import { createRevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
-import { createEditorKeyboardHandler } from "../../ui/headless/use-editor-keyboard";
-import { TwOpaqueBlock } from "./tw-opaque-block";
-import { TwParagraphBlock } from "./tw-paragraph-block";
-
-export interface TwEditorSurfaceProps {
-  currentUser: EditorUser;
-  snapshot: RuntimeRenderSnapshot;
-  reviewMode: "editing" | "review";
-  markupDisplay: MarkupDisplay;
-  activeRevisionId?: string;
-  /** When false, revision decorations are suppressed in the document surface. */
-  showTrackedChanges?: boolean;
-  onFocus: FocusEventHandler<HTMLDivElement>;
-  onBlur: FocusEventHandler<HTMLDivElement>;
-  onSelectionChange?: (selection: SelectionSnapshot) => void;
-  onInsertText?: (text: string) => void;
-  onDeleteBackward?: () => void;
-  onDeleteForward?: () => void;
-  onInsertTab?: () => void;
-  onInsertHardBreak?: () => void;
-  onSplitParagraph?: () => void;
-  onCommentActivated?: (commentId: string) => void;
-  onRevisionActivated?: (revisionId: string) => void;
-}
-
-export function TwEditorSurface(props: TwEditorSurfaceProps) {
-  const { currentUser, markupDisplay, onBlur, onFocus, snapshot } = props;
-  const surface = snapshot.surface;
-
-  const canEdit = Boolean(
-    surface && snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError,
-  );
-
-  const commentDecorations = useMemo(
-    () => createCommentDecorationModel(snapshot.comments),
-    [snapshot.comments],
-  );
-
-  const showTrackedChanges = props.showTrackedChanges !== false;
-  const revisionDecorations = useMemo(
-    () => showTrackedChanges
-      ? createRevisionDecorationModel(snapshot.trackedChanges, props.activeRevisionId)
-      : undefined,
-    [snapshot.trackedChanges, props.activeRevisionId, showTrackedChanges],
-  );
-
-  const handleKeyDown = useMemo(() => {
-    if (!surface) return undefined;
-    return createEditorKeyboardHandler(
-      {
-        selection: snapshot.selection,
-        storySize: surface.storySize,
-        canEdit,
-      },
-      {
-        onSelectionChange: props.onSelectionChange,
-        onInsertText: props.onInsertText,
-        onDeleteBackward: props.onDeleteBackward,
-        onDeleteForward: props.onDeleteForward,
-        onInsertTab: props.onInsertTab,
-        onInsertHardBreak: props.onInsertHardBreak,
-        onSplitParagraph: props.onSplitParagraph,
-      },
-    );
-  }, [surface, snapshot.selection, canEdit, props]);
-
-  const fontClass = markupDisplay === "clean"
-    ? "font-[family-name:var(--font-legal-sans)]"
-    : "font-[family-name:var(--font-legal-serif)]";
-
-  return (
-    <section aria-label="Document canvas" className="min-w-0">
-      <div
-        aria-label="Document surface"
-        aria-multiline="true"
-        role="textbox"
-        tabIndex={0}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={handleKeyDown}
-        className={`bg-transparent border-none px-12 py-10 outline-offset-1 ${fontClass}`}
-      >
-        {/* Document header */}
-        <div className="flex justify-between gap-4 items-start mb-5">
-          <div>
-            <h1 className="font-[family-name:var(--font-legal-serif)] text-2xl leading-tight text-primary">
-              {snapshot.sourceLabel ?? "Document draft"}
-            </h1>
-            <p className="text-xs text-secondary mt-2">
-              {snapshot.sessionId} · {snapshot.documentStats.storyLength} chars
-            </p>
-          </div>
-          <span className="text-xs text-secondary whitespace-nowrap">
-            Reviewer {currentUser.displayName}
-          </span>
-        </div>
-
-        {/* Document blocks */}
-        <div className="space-y-4 pl-10 relative">
-          {surface ? (
-            surface.blocks.map((block) =>
-              block.kind === "paragraph" ? (
-                <TwParagraphBlock
-                  key={block.blockId}
-                  block={block}
-                  selection={snapshot.selection}
-                  markupDisplay={markupDisplay}
-                  commentDecorations={commentDecorations}
-                  revisionDecorations={revisionDecorations}
-                  onSelectionChange={props.onSelectionChange}
-                  onCommentActivated={props.onCommentActivated}
-                  onRevisionActivated={props.onRevisionActivated}
-                />
-              ) : block.kind === "opaque_block" ? (
-                <TwOpaqueBlock
-                  key={block.blockId}
-                  block={block}
-                  selection={snapshot.selection}
-                  onSelectionChange={props.onSelectionChange}
-                />
-              ) : null,
-            )
-          ) : (
-            <p className="text-sm text-secondary leading-relaxed">
-              Loading the review surface. Compatibility cues and edit actions appear here once
-              the runtime snapshot is ready.
-            </p>
-          )}
-          {snapshot.fatalError ? (
-            <p className="text-sm text-danger">
-              Fatal runtime error: {snapshot.fatalError.message}
-            </p>
-          ) : null}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/ui-tailwind/editor-surface/tw-inline-token.tsx

@@ -1,129 +0,0 @@
-import React from "react";
-
-import type { SelectionSnapshot, SurfaceInlineSegment } from "../../api/public-types";
-import type { CommentDecorationModel } from "../../ui/headless/comment-decoration-model";
-import { getCommentHighlightClass, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
-import { createSelectionSnapshot, selectionTouchesRange } from "../../ui/headless/selection-helpers";
-import { renderTwCaret } from "./tw-caret";
-
-export interface TwInlineTokenProps {
-  segment: SurfaceInlineSegment;
-  selection: SelectionSnapshot;
-  markupDisplay: MarkupDisplay;
-  commentDecorations?: CommentDecorationModel;
-  onSelectionChange?: (selection: SelectionSnapshot) => void;
-}
-
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
-
-export function TwInlineToken(props: TwInlineTokenProps) {
-  const { segment, selection } = props;
-  const selected = selectionTouchesRange(selection, segment.from, segment.to);
-  const commentClass = getCommentHighlightClass(
-    props.commentDecorations,
-    segment.from,
-    segment.to,
-    props.markupDisplay,
-  );
-
-  const showSymbols = props.markupDisplay !== "clean";
-
-  if (segment.kind === "tab") {
-    return (
-      <button
-        type="button"
-        tabIndex={-1}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
-        }}
-        className={`inline-flex items-center border-none bg-transparent cursor-text ${commentClass} ${selected ? "bg-surface-hover" : ""} ${focusRingClass} ${showSymbols ? "mx-0.5 text-tertiary/50" : "w-8"}`}
-        title="Tab character"
-      >
-        {renderTwCaret(selection, segment.from)}
-        {showSymbols ? <span className="text-xs">→</span> : <span className="w-8" />}
-        {renderTwCaret(selection, segment.to)}
-      </button>
-    );
-  }
-
-  if (segment.kind === "hard_break") {
-    return (
-      <>
-        <button
-          type="button"
-          tabIndex={-1}
-          onMouseDown={(e) => {
-            e.preventDefault();
-            props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
-          }}
-          className={`inline-flex items-center border-none bg-transparent cursor-text ${commentClass} ${selected ? "bg-surface-hover" : ""} ${focusRingClass} ${showSymbols ? "mx-0.5 text-tertiary/40" : ""}`}
-          title="Line break"
-        >
-          {renderTwCaret(selection, segment.from)}
-          {showSymbols ? <span className="text-xs">↵</span> : null}
-          {renderTwCaret(selection, segment.to)}
-        </button>
-        <br />
-      </>
-    );
-  }
-
-  if (segment.kind === "image") {
-    const isMissing = segment.state === "missing";
-    return (
-      <button
-        type="button"
-        tabIndex={-1}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
-        }}
-        className={`inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border-none cursor-pointer ${commentClass} ${
-          isMissing ? "text-danger bg-delete-soft" : "text-secondary bg-surface"
-        } ${selected ? "ring-1 ring-accent/30" : ""} ${focusRingClass}`}
-        title={segment.detail ?? segment.altText ?? "Inline image"}
-      >
-        {renderTwCaret(selection, segment.from)}
-        <span>📷</span>
-        {segment.altText ?? (isMissing ? "Missing image" : "Image")}
-        {renderTwCaret(selection, segment.to)}
-      </button>
-    );
-  }
-
-  // opaque_inline
-  if (segment.kind === "opaque_inline") {
-    if (segment.presentation === "quiet-marker") {
-      return (
-        <span
-          aria-label={segment.label}
-          title={segment.detail}
-          className="inline-block h-0 w-0 overflow-hidden align-baseline"
-          data-inline-presentation="quiet-marker"
-        />
-      );
-    }
-
-    return (
-      <button
-        type="button"
-        tabIndex={-1}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
-        }}
-        className={`inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-comment bg-warning-soft border-none cursor-pointer ${commentClass} ${selected ? "ring-1 ring-accent/30" : ""} ${focusRingClass}`}
-        title={segment.detail}
-      >
-        {renderTwCaret(selection, segment.from)}
-        <span>🔒</span>
-        {segment.label}
-        {renderTwCaret(selection, segment.to)}
-      </button>
-    );
-  }
-
-  return null;
-}

package/src/ui-tailwind/editor-surface/tw-opaque-block.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-
-import type { SelectionSnapshot, SurfaceBlockSnapshot } from "../../api/public-types";
-import { selectionTouchesRange, createSelectionSnapshot } from "../../ui/headless/selection-helpers";
-
-export interface TwOpaqueBlockProps {
-  block: Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>;
-  selection: SelectionSnapshot;
-  onSelectionChange?: (selection: SelectionSnapshot) => void;
-  workflowTargeted?: boolean;
-}
-
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
-
-export function TwOpaqueBlock(props: TwOpaqueBlockProps) {
-  const { block, selection, workflowTargeted } = props;
-  const selected = selectionTouchesRange(selection, block.from, block.to);
-
-  return (
-    <div className="group relative">
-      <div className="absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right">
-        <div className="flex items-center gap-0.5">
-          <span className="text-[10px] text-tertiary/60 font-medium">Lock</span>
-          <span className="inline-block h-1 w-1 rounded-full" style={{ backgroundColor: "var(--color-comment)" }} />
-        </div>
-      </div>
-      <button
-        type="button"
-        tabIndex={-1}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          props.onSelectionChange?.(createSelectionSnapshot(block.from, block.to));
-        }}
-        className={[
-          "w-full text-left border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20",
-          "cursor-pointer transition-colors",
-          selected ? "ring-1 ring-accent/30 bg-warning-soft/40" : "hover:bg-warning-soft/30",
-          focusRingClass,
-        ].join(" ")}
-      >
-        <div className="flex items-center gap-1.5 text-xs text-tertiary mb-1">
-          <span>🔒</span>
-          <span>{block.label}</span>
-          <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-comment bg-warning-soft">
-            preserve-only
-          </span>
-          {workflowTargeted && (
-            <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-amber-700 bg-amber-100">
-              workflow-targeted
-            </span>
-          )}
-        </div>
-        <p className="text-sm text-secondary">{block.detail}</p>
-      </button>
-    </div>
-  );
-}

package/src/ui-tailwind/editor-surface/tw-paragraph-block.tsx

@@ -1,151 +0,0 @@
-import React from "react";
-
-import type { SelectionSnapshot, SurfaceBlockSnapshot, SurfaceInlineSegment } from "../../api/public-types";
-import type { CommentDecorationModel } from "../../ui/headless/comment-decoration-model";
-import { getCommentRangeState, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
-import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
-import { getRevisionRangeState } from "../../ui/headless/revision-decoration-model";
-import { createSelectionSnapshot } from "../../ui/headless/selection-helpers";
-import { renderTwCaret } from "./tw-caret";
-import { TwSegmentView } from "./tw-segment-view";
-
-export interface TwParagraphBlockProps {
-  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
-  selection: SelectionSnapshot;
-  markupDisplay: MarkupDisplay;
-  commentDecorations?: CommentDecorationModel;
-  revisionDecorations?: RevisionDecorationModel;
-  onSelectionChange?: (selection: SelectionSnapshot) => void;
-  onCommentActivated?: (commentId: string) => void;
-  onRevisionActivated?: (revisionId: string) => void;
-}
-
-export function TwParagraphBlock(props: TwParagraphBlockProps) {
-  const { block, selection, markupDisplay } = props;
-  const headingLevel = inferHeadingLevel(block.styleId);
-  const hasComment = getCommentRangeState(props.commentDecorations, block.from, block.to).hasComments;
-  const hasChange = getRevisionRangeState(props.revisionDecorations, block.from, block.to).hasChanges;
-
-  // Margin indicator per mode
-  let marginClass = "";
-  if (markupDisplay === "simple" && (hasComment || hasChange)) {
-    if (hasComment && hasChange) marginClass = "border-l-2 border-l-comment/50 pl-3 ";
-    else if (hasComment) marginClass = "border-l-2 border-l-comment/40 pl-3 ";
-    else marginClass = "border-l-2 border-l-insert/40 pl-3 ";
-  }
-
-  // Dot markers for gutter
-  const dots: string[] = [];
-  if (markupDisplay === "clean" && hasComment) {
-    dots.push("var(--color-comment)");
-  } else if (markupDisplay !== "simple") {
-    if (hasComment) dots.push("var(--color-comment)");
-    if (hasChange) dots.push("var(--color-insert)");
-  }
-
-  const segmentElements = (
-    <>
-      <CaretButton
-        position={block.from}
-        selection={selection}
-        onSelectionChange={props.onSelectionChange}
-      />
-      {block.segments.length > 0 ? (
-        block.segments.map((segment) => (
-          <TwSegmentView
-            key={segment.segmentId}
-            segment={segment}
-            selection={selection}
-            markupDisplay={markupDisplay}
-            commentDecorations={props.commentDecorations}
-            revisionDecorations={props.revisionDecorations}
-            onSelectionChange={props.onSelectionChange}
-            onCommentActivated={props.onCommentActivated}
-            onRevisionActivated={props.onRevisionActivated}
-          />
-        ))
-      ) : (
-        <span className="text-secondary italic">Empty paragraph</span>
-      )}
-      <CaretButton
-        position={block.to}
-        selection={selection}
-        onSelectionChange={props.onSelectionChange}
-      />
-    </>
-  );
-
-  return (
-    <div className="group relative">
-      <BlockHint
-        label={headingLevel ? `H${headingLevel}` : "P"}
-        dots={dots.length > 0 ? dots : undefined}
-      />
-      {headingLevel ? (
-        <div className={`${marginClass}transition-colors`}>
-          <HeadingElement level={headingLevel}>{segmentElements}</HeadingElement>
-        </div>
-      ) : (
-        <p className={`text-base leading-[1.75] text-primary ${marginClass}transition-colors`}>
-          {segmentElements}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function CaretButton(props: {
-  position: number;
-  selection: SelectionSnapshot;
-  onSelectionChange?: (selection: SelectionSnapshot) => void;
-}) {
-  const isActive = props.selection.isCollapsed && props.selection.anchor === props.position;
-  return (
-    <button
-      type="button"
-      tabIndex={-1}
-      onMouseDown={(e) => {
-        e.preventDefault();
-        props.onSelectionChange?.(createSelectionSnapshot(props.position));
-      }}
-      aria-label={`Set caret at ${props.position}`}
-      className={`p-0 m-0 border-none bg-transparent cursor-text inline-flex items-center ${isActive ? "min-w-[2px] h-[22px]" : "w-0 h-0 overflow-hidden"}`}
-    >
-      {renderTwCaret(props.selection, props.position)}
-    </button>
-  );
-}
-
-function BlockHint(props: { label: string; dots?: string[] }) {
-  return (
-    <div className="absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right">
-      <div className="flex items-center gap-0.5">
-        <span className="text-[10px] text-tertiary/60 font-medium">{props.label}</span>
-        {props.dots?.map((color, i) => (
-          <span
-            key={i}
-            className="inline-block h-1 w-1 rounded-full"
-            style={{ backgroundColor: color }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function HeadingElement(props: { level: 1 | 2 | 3; children: React.ReactNode }) {
-  switch (props.level) {
-    case 1: return <h2 className="text-2xl font-medium text-primary leading-tight">{props.children}</h2>;
-    case 2: return <h3 className="text-xl font-medium text-primary leading-snug">{props.children}</h3>;
-    case 3: return <h4 className="text-lg font-medium text-primary leading-snug">{props.children}</h4>;
-  }
-}
-
-function inferHeadingLevel(styleId?: string): 1 | 2 | 3 | null {
-  if (!styleId) return null;
-  const lower = styleId.toLowerCase();
-  if (lower === "heading1") return 1;
-  if (lower === "heading2") return 2;
-  if (lower === "heading3") return 3;
-  return null;
-}