@beyondwork/docx-react-component 1.0.0

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

@@ -0,0 +1,118 @@
+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") {
+    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

@@ -0,0 +1,52 @@
+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;
+}
+
+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 } = 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>
+        </div>
+        <p className="text-sm text-secondary">{block.detail}</p>
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+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;
+}

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

@@ -0,0 +1,215 @@
+import React, { type FocusEventHandler, useEffect, useMemo, useRef } from "react";
+import { EditorView } from "prosemirror-view";
+
+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 { createPMStateFromSnapshot } from "./pm-state-from-snapshot";
+import {
+  createCommandBridgePlugins,
+  type CommandBridgeCallbacks,
+} from "./pm-command-bridge";
+import { buildDecorations } from "./pm-decorations";
+import type { PositionMap } from "./pm-position-map";
+import { tableNodeViews } from "./tw-table-node-view";
+
+/**
+ * Same props interface as the legacy TwEditorSurface — drop-in replacement.
+ */
+export interface TwProseMirrorSurfaceProps {
+  currentUser: EditorUser;
+  snapshot: RuntimeRenderSnapshot;
+  reviewMode: "editing" | "review";
+  markupDisplay: MarkupDisplay;
+  activeRevisionId?: string;
+  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 TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
+  const {
+    currentUser,
+    snapshot,
+    markupDisplay,
+    onFocus,
+    onBlur,
+  } = props;
+  const surface = snapshot.surface;
+
+  const canEdit = Boolean(
+    surface && snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError,
+  );
+
+  const mountRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const positionMapRef = useRef<PositionMap | null>(null);
+  const callbacksRef = useRef<CommandBridgeCallbacks | null>(null);
+
+  // Keep callbacks ref up to date (avoids stale closures in PM plugins)
+  callbacksRef.current = {
+    onInsertText: (text) => props.onInsertText?.(text),
+    onDeleteBackward: () => props.onDeleteBackward?.(),
+    onDeleteForward: () => props.onDeleteForward?.(),
+    onSplitParagraph: () => props.onSplitParagraph?.(),
+    onInsertHardBreak: () => props.onInsertHardBreak?.(),
+    onInsertTab: () => props.onInsertTab?.(),
+    onUndo: () => {}, // Handled by toolbar, not PM
+    onRedo: () => {}, // Handled by toolbar, not PM
+    onSelectionChange: (sel) => props.onSelectionChange?.(sel),
+    getPositionMap: () => positionMapRef.current,
+  };
+
+  // Comment/revision decoration models
+  const commentModel = useMemo(
+    () => createCommentDecorationModel(snapshot.comments),
+    [snapshot.comments],
+  );
+  const showTrackedChanges = props.showTrackedChanges !== false;
+  // Always create the revision model — needed for deletion hiding in clean mode
+  // even when the tracked changes display toggle is off.
+  const revisionModel = useMemo(
+    () => createRevisionDecorationModel(snapshot.trackedChanges, props.activeRevisionId),
+    [snapshot.trackedChanges, props.activeRevisionId],
+  );
+
+  // Create PM plugins (stable across renders — callbacks accessed via ref)
+  const plugins = useMemo(() => {
+    return createCommandBridgePlugins({
+      onInsertText: (text) => callbacksRef.current?.onInsertText(text),
+      onDeleteBackward: () => callbacksRef.current?.onDeleteBackward(),
+      onDeleteForward: () => callbacksRef.current?.onDeleteForward(),
+      onSplitParagraph: () => callbacksRef.current?.onSplitParagraph(),
+      onInsertHardBreak: () => callbacksRef.current?.onInsertHardBreak(),
+      onInsertTab: () => callbacksRef.current?.onInsertTab(),
+      onUndo: () => callbacksRef.current?.onUndo(),
+      onRedo: () => callbacksRef.current?.onRedo(),
+      onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
+      getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
+    });
+  }, []);
+
+  // Create or update PM view whenever surface becomes available or changes.
+  // The view is created lazily — if surface is null on first render (loading),
+  // it will be created when the runtime provides a real snapshot.
+  useEffect(() => {
+    if (!mountRef.current || !surface) return;
+
+    const { state, positionMap } = createPMStateFromSnapshot(
+      surface,
+      snapshot.selection,
+      plugins,
+    );
+    positionMapRef.current = positionMap;
+
+    const decorations = buildDecorations(
+      state.doc,
+      positionMap,
+      commentModel,
+      revisionModel,
+      markupDisplay,
+      showTrackedChanges,
+    );
+
+    if (!viewRef.current) {
+      // First time surface is available — create the EditorView
+      const view = new EditorView(mountRef.current, {
+        state,
+        nodeViews: tableNodeViews,
+        editable: () => canEdit,
+        decorations: () => decorations,
+        dispatchTransaction(tr) {
+          const newState = view.state.apply(tr);
+          view.updateState(newState);
+        },
+      });
+      viewRef.current = view;
+    } else {
+      // View exists — update state and decorations
+      viewRef.current.setProps({
+        editable: () => canEdit,
+        decorations: () => decorations,
+      });
+      viewRef.current.updateState(state);
+    }
+  }, [snapshot.revisionToken, surface, commentModel, revisionModel, markupDisplay, canEdit]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = null;
+    };
+  }, []);
+
+  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">
+      {/* ProseMirror mount point — document content including headings is editable */}
+      {surface ? (
+        <div
+          ref={mountRef}
+          role="textbox"
+          aria-multiline="true"
+          className={`px-12 py-10 ${fontClass} text-[15px] text-primary leading-relaxed prosemirror-surface outline-none`}
+          onFocus={onFocus as unknown as React.FocusEventHandler<HTMLDivElement>}
+          onBlur={onBlur as unknown as React.FocusEventHandler<HTMLDivElement>}
+          onClick={(e) => {
+            // Activate comment or revision when clicking on decorated text
+            const target = e.target as HTMLElement;
+            const commentEl = target.closest?.("[data-comment-id]");
+            if (commentEl) {
+              const commentId = commentEl.getAttribute("data-comment-id");
+              if (commentId) {
+                props.onCommentActivated?.(commentId);
+                return;
+              }
+            }
+            const revisionEl = target.closest?.("[data-revision-id]");
+            if (revisionEl) {
+              const revisionId = revisionEl.getAttribute("data-revision-id");
+              if (revisionId) {
+                props.onRevisionActivated?.(revisionId);
+              }
+            }
+          }}
+          aria-label="Document surface"
+        />
+      ) : (
+        <div className="px-12 pb-10">
+          <p className="text-sm text-secondary leading-relaxed">
+            Loading the review surface...
+          </p>
+        </div>
+      )}
+
+      {snapshot.fatalError ? (
+        <div className="px-12 pb-10">
+          <p className="text-sm text-danger">
+            Fatal runtime error: {snapshot.fatalError.message}
+          </p>
+        </div>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,111 @@
+import React from "react";
+
+import type { SelectionSnapshot, SurfaceInlineSegment } from "../../api/public-types";
+import type { CommentDecorationModel } from "../../ui/headless/comment-decoration-model";
+import { getCommentHighlightClass, getCommentRangeState, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
+import { getRevisionHighlightClass, shouldHideInCleanMode } from "../../ui/headless/revision-decoration-model";
+import { createSelectionSnapshot, selectionTouchesRange } from "../../ui/headless/selection-helpers";
+import { TwInlineToken } from "./tw-inline-token";
+
+export interface TwSegmentViewProps {
+  segment: SurfaceInlineSegment;
+  selection: SelectionSnapshot;
+  markupDisplay: MarkupDisplay;
+  commentDecorations?: CommentDecorationModel;
+  revisionDecorations?: RevisionDecorationModel;
+  onSelectionChange?: (selection: SelectionSnapshot) => void;
+  onCommentActivated?: (commentId: string) => void;
+  onRevisionActivated?: (revisionId: string) => void;
+}
+
+export function TwSegmentView(props: TwSegmentViewProps) {
+  const { segment, selection, markupDisplay } = props;
+
+  // Non-text segments delegate to TwInlineToken
+  if (segment.kind === "tab" || segment.kind === "hard_break" || segment.kind === "image" || segment.kind === "opaque_inline") {
+    return (
+      <TwInlineToken
+        segment={segment}
+        selection={selection}
+        markupDisplay={markupDisplay}
+        commentDecorations={props.commentDecorations}
+        onSelectionChange={props.onSelectionChange}
+      />
+    );
+  }
+
+  if (segment.kind !== "text") {
+    return null;
+  }
+
+  // Text segment: render character-by-character for click-to-position editing
+  const characters = Array.from(segment.text);
+
+  return (
+    <>
+      {characters.map((character, index) => {
+        const from = segment.from + index;
+        const to = from + 1;
+        const isSelected = selectionTouchesRange(selection, from, to);
+
+        // Hide deletions in clean mode
+        if (shouldHideInCleanMode(props.revisionDecorations, from, to) && markupDisplay === "clean") {
+          return null;
+        }
+
+        const commentClass = getCommentHighlightClass(props.commentDecorations, from, to, markupDisplay);
+        const revisionClass = getRevisionHighlightClass(props.revisionDecorations, from, to, markupDisplay);
+
+        // Check if clicking this char should activate a comment or revision
+        const commentState = getCommentRangeState(props.commentDecorations, from, to);
+        const overlappingComment = commentState.overlapping[0];
+
+        // Build mark classes
+        let markClasses = "";
+        if (segment.marks) {
+          if (segment.marks.includes("bold")) markClasses += "font-bold ";
+          if (segment.marks.includes("italic")) markClasses += "italic ";
+          if (segment.marks.includes("underline")) markClasses += "underline ";
+          if (segment.marks.includes("strikethrough")) markClasses += "line-through ";
+        }
+
+        const hyperlinkClass = segment.hyperlinkHref
+          ? "text-accent underline decoration-1 underline-offset-2 "
+          : "";
+
+        return (
+          <button
+            key={`${segment.segmentId}-${from}`}
+            type="button"
+            tabIndex={-1}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              props.onSelectionChange?.(createSelectionSnapshot(to));
+
+              // Activate comment/revision on click if decorated
+              if (overlappingComment) {
+                props.onCommentActivated?.(overlappingComment.commentId);
+              }
+            }}
+            data-comment-id={overlappingComment?.commentId}
+            className={[
+              "relative inline border-none bg-transparent cursor-text whitespace-pre p-0 m-0",
+              "text-[15px] text-primary leading-normal",
+              commentClass,
+              revisionClass,
+              markClasses,
+              hyperlinkClass,
+              isSelected ? "bg-surface-hover rounded-[3px]" : "",
+            ].filter(Boolean).join(" ")}
+          >
+            {character}
+            {selection.isCollapsed && selection.anchor === from ? (
+              <span aria-hidden="true" className="absolute left-0 top-[0.1em] w-0.5 h-[1em] bg-accent rounded-full animate-wre-blink pointer-events-none" />
+            ) : null}
+          </button>
+        );
+      })}
+    </>
+  );
+}