@beyondwork/docx-react-component 1.0.0 → 1.0.1

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

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

@@ -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;
-}

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

@@ -1,215 +0,0 @@
-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

@@ -1,111 +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, 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>
-        );
-      })}
-    </>
-  );
-}