@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -34,8 +34,9 @@ export function createPMStateFromSnapshot(
   selection: SelectionSnapshot,
   plugins: Plugin[],
   mediaPreviews: Record<string, MediaPreviewDescriptor> = {},
+  showUnsupportedObjectPreviews = true,
 ): PMStateResult {
-  const doc = buildPMDoc(surface, mediaPreviews);
+  const doc = buildPMDoc(surface, mediaPreviews, showUnsupportedObjectPreviews);
   const positionMap = buildPositionMap(surface);
   const pmSelection = createPMSelectionFromSnapshot(doc, positionMap, selection);
 
@@ -109,8 +110,9 @@ function resolveInlineBoundary(
 function buildPMDoc(
   surface: EditorSurfaceSnapshot,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
-  const blocks = buildPMBlocks(surface.blocks, mediaPreviews);
+  const blocks = buildPMBlocks(surface.blocks, mediaPreviews, showUnsupportedObjectPreviews);
 
   // Ensure at least one block (PM requires non-empty doc)
   if (blocks.length === 0) {
@@ -123,6 +125,7 @@ function buildPMDoc(
 function buildPMBlocks(
   blocks: SurfaceBlockSnapshot[],
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode[] {
   const nodes: PMNode[] = [];
 
@@ -134,11 +137,19 @@ function buildPMBlocks(
     const nextParagraph = nextBlock?.kind === "paragraph" ? nextBlock : null;
 
     if (block.kind === "paragraph") {
-      nodes.push(buildParagraph(block, previousParagraph, nextParagraph, mediaPreviews));
+      nodes.push(
+        buildParagraph(
+          block,
+          previousParagraph,
+          nextParagraph,
+          mediaPreviews,
+          showUnsupportedObjectPreviews,
+        ),
+      );
     } else if (block.kind === "table") {
-      nodes.push(buildTable(block, mediaPreviews));
+      nodes.push(buildTable(block, mediaPreviews, showUnsupportedObjectPreviews));
     } else if (block.kind === "sdt_block") {
-      nodes.push(buildSdtBlock(block, mediaPreviews));
+      nodes.push(buildSdtBlock(block, mediaPreviews, showUnsupportedObjectPreviews));
     } else {
       nodes.push(buildOpaqueBlock(block));
     }
@@ -152,10 +163,22 @@ function buildParagraph(
   previousParagraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
   nextParagraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   const content: PMNode[] = [];
-  const tabStops = block.tabStops ?? [];
+  const paragraphLayout = resolveParagraphLayout(block);
+  const tabStops = paragraphLayout.tabStops;
   let tabIndex = 0;
+  const textSegments = block.segments.filter(
+    (segment): segment is Extract<SurfaceInlineSegment, { kind: "text" }> => segment.kind === "text",
+  );
+  const fullyVanishedParagraph =
+    textSegments.length > 0 &&
+    textSegments.every((segment) => segment.marks?.includes("vanish")) &&
+    block.segments.every((segment) => segment.kind === "text");
+
+  if (fullyVanishedParagraph) {
+  }
 
   for (const segment of block.segments) {
     if (segment.kind === "tab" && tabIndex < tabStops.length) {
@@ -177,7 +200,7 @@ function buildParagraph(
       );
       tabIndex++;
     } else {
-      const nodes = buildInlineContent(segment, mediaPreviews);
+      const nodes = buildInlineContent(segment, mediaPreviews, showUnsupportedObjectPreviews);
       content.push(...nodes);
     }
   }
@@ -211,18 +234,20 @@ function buildParagraph(
         (block as typeof block & { numberingSuffix?: string }).numberingSuffix ??
         null,
       alignment: block.alignment ?? null,
-      spacingBefore: block.spacing?.before ?? null,
-      spacingAfter: block.spacing?.after ?? null,
-      lineSpacing: block.spacing?.line ?? null,
-      lineRule: block.spacing?.lineRule ?? null,
+      spacingBefore: paragraphLayout.spacing?.before ?? null,
+      spacingAfter: paragraphLayout.spacing?.after ?? null,
+      lineSpacing: paragraphLayout.spacing?.line ?? null,
+      lineRule: paragraphLayout.spacing?.lineRule ?? null,
       contextualSpacing: block.contextualSpacing ?? null,
       listContinuation: listContinuation || null,
       contextualSpacingBefore: contextualSpacingBefore || null,
       contextualSpacingAfter: contextualSpacingAfter || null,
-      indentLeft: block.indentation?.left ?? null,
-      indentRight: block.indentation?.right ?? null,
-      indentFirstLine: block.indentation?.firstLine ?? null,
-      indentHanging: block.indentation?.hanging ?? null,
+      indentLeft: paragraphLayout.indentation?.left ?? null,
+      indentRight: paragraphLayout.indentation?.right ?? null,
+      indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
+      indentHanging: paragraphLayout.indentation?.hanging ?? null,
+      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
+      numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       shadingFill: block.shading?.fill ?? null,
       borderTop: (block.borders as Record<string, unknown>)?.top ?? null,
       borderBottom: (block.borders as Record<string, unknown>)?.bottom ?? null,
@@ -231,14 +256,38 @@ function buildParagraph(
       outlineLevel: block.outlineLevel ?? null,
       bidi: block.bidi ?? null,
       pageBreakBefore: block.pageBreakBefore ?? null,
+      hiddenTextOnly: fullyVanishedParagraph || null,
     },
     content.length > 0 ? Fragment.from(content) : undefined,
   );
 }
 
+function resolveParagraphLayout(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): {
+  spacing: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["spacing"];
+  indentation: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"];
+  tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+  markerLane: NonNullable<
+    NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]>["geometry"]["markerLane"]
+  > | undefined;
+  markerJustification: NonNullable<
+    NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]>["geometry"]["markerJustification"]
+  > | undefined;
+} {
+  return {
+    spacing: block.resolvedNumbering?.geometry.spacing ?? block.spacing,
+    indentation: block.resolvedNumbering?.geometry.indentation ?? block.indentation,
+    tabStops: block.resolvedNumbering?.geometry.tabStops ?? block.tabStops ?? [],
+    markerLane: block.resolvedNumbering?.geometry.markerLane,
+    markerJustification: block.resolvedNumbering?.geometry.markerJustification,
+  };
+}
+
 function buildInlineContent(
   segment: SurfaceInlineSegment,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode[] {
   switch (segment.kind) {
     case "text": {
@@ -324,7 +373,7 @@ function buildInlineContent(
       }
 
     case "opaque_inline":
-      return [buildOpaqueInlineOrComplexAtom(segment)];
+      return [buildOpaqueInlineOrComplexAtom(segment, showUnsupportedObjectPreviews)];
 
     case "note_ref": {
       const text = editorSchema.text(
@@ -353,18 +402,26 @@ function buildInlineContent(
 function buildTable(
   block: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   const rows: PMNode[] = [];
   for (const row of block.rows) {
     const cells: PMNode[] = [];
     for (const cell of row.cells) {
-      const cellContent = buildPMBlocks(cell.content, mediaPreviews);
+      const cellContent = buildPMBlocks(
+        cell.content,
+        mediaPreviews,
+        showUnsupportedObjectPreviews,
+      );
       // Ensure at least one paragraph in cell (PM requires non-empty)
       if (cellContent.length === 0) {
         cellContent.push(editorSchema.nodes.paragraph.create());
       }
+      const cellNodeType = row.isHeader
+        ? editorSchema.nodes.table_header_cell
+        : editorSchema.nodes.table_cell;
       cells.push(
-        editorSchema.nodes.table_cell.create(
+        cellNodeType.create(
           {
             colspan: cell.colspan,
             rowspan: cell.rowspan,
@@ -411,8 +468,13 @@ function buildTable(
 function buildSdtBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
-  const children = buildPMBlocks(block.children, mediaPreviews);
+  const children = buildPMBlocks(
+    block.children,
+    mediaPreviews,
+    showUnsupportedObjectPreviews,
+  );
 
   if (children.length === 0) {
     children.push(editorSchema.nodes.paragraph.create());
@@ -441,17 +503,18 @@ function buildSdtBlock(
  */
 function buildOpaqueInlineOrComplexAtom(
   segment: Extract<import("../../api/public-types").SurfaceInlineSegment, { kind: "opaque_inline" }>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   const label = segment.label;
   const detail = segment.detail;
 
-  if (label === "Embedded chart") {
+  if (showUnsupportedObjectPreviews && label === "Embedded chart") {
     return editorSchema.nodes.chart_atom.create({ detail });
   }
-  if (label === "SmartArt diagram") {
+  if (showUnsupportedObjectPreviews && label === "SmartArt diagram") {
     return editorSchema.nodes.smartart_atom.create({ detail });
   }
-  if (label === "Drawing shape" || label === "Text box") {
+  if (showUnsupportedObjectPreviews && (label === "Drawing shape" || label === "Text box")) {
     const textMatch = /(?:Text content|Content): "([^"]+)"/.exec(detail);
     const geometryMatch = /Geometry: ([^.]+)\./.exec(detail);
     return editorSchema.nodes.shape_atom.create({
@@ -460,7 +523,7 @@ function buildOpaqueInlineOrComplexAtom(
       detail,
     });
   }
-  if (label === "WordArt") {
+  if (showUnsupportedObjectPreviews && label === "WordArt") {
     const textMatch = /Text: "([^"]+)"/.exec(detail);
     const effectMatch = /Effect: ([^.]+)\./.exec(detail);
     return editorSchema.nodes.wordart_atom.create({
@@ -469,7 +532,7 @@ function buildOpaqueInlineOrComplexAtom(
       detail,
     });
   }
-  if (label === "Legacy VML drawing") {
+  if (showUnsupportedObjectPreviews && label === "Legacy VML drawing") {
     const textMatch = /Text content: "([^"]+)"/.exec(detail);
     const typeMatch = /Type: ([^.]+)\./.exec(detail);
     return editorSchema.nodes.vml_atom.create({

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

@@ -21,6 +21,7 @@ export function createSurfaceDocumentBuildKey(input: {
   surface: EditorSurfaceSnapshot | null | undefined;
   activeStory: EditorStoryTarget;
   mediaPreviewKey: string;
+  showUnsupportedObjectPreviews?: boolean;
 }): string {
   return JSON.stringify({
     surfaceIdentity:
@@ -29,6 +30,7 @@ export function createSurfaceDocumentBuildKey(input: {
         : getSurfaceIdentity(input.surface),
     activeStory: input.activeStory,
     mediaPreviewKey: input.mediaPreviewKey,
+    showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? true,
   });
 }
 
@@ -41,6 +43,7 @@ export function createSurfaceDecorationKey(input: {
   workflowScopeSignature?: string;
   workflowCandidateSignature?: string;
   workflowBlockedSignature?: string;
+  workflowMetadataSignature?: string;
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
   suggestionsEnabled?: boolean;
@@ -54,6 +57,7 @@ export function createSurfaceDecorationKey(input: {
     workflowScopeSignature: input.workflowScopeSignature ?? null,
     workflowCandidateSignature: input.workflowCandidateSignature ?? null,
     workflowBlockedSignature: input.workflowBlockedSignature ?? null,
+    workflowMetadataSignature: input.workflowMetadataSignature ?? null,
     activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
     activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
     suggestionsEnabled: input.suggestionsEnabled ?? false,

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

@@ -18,6 +18,7 @@ import type {
   SelectionSnapshot,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
+  WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../../api/public-types";
 import type { CanonicalDocumentEnvelope } from "../../core/state/editor-state.ts";
@@ -35,6 +36,7 @@ import {
   createPMSelectionFromSnapshot,
   createPMStateFromSnapshot,
 } from "./pm-state-from-snapshot";
+import type { ActiveSelectionToolModel } from "../../ui/headless/selection-tool-types";
 import {
   createCommandBridgePlugins,
   type CommandBridgeCallbacks,
@@ -73,9 +75,10 @@ export interface TwProseMirrorSurfaceProps {
   documentNavigation: DocumentNavigationSnapshot;
   reviewMode: "editing" | "review";
   markupDisplay: MarkupDisplay;
+  showUnsupportedObjectPreviews?: boolean;
   activeRevisionId?: string;
+  activeSelectionToolKind?: ActiveSelectionToolModel["kind"] | null;
   showTrackedChanges?: boolean;
-  suggestionsEnabled?: boolean;
   /** When true, the surface renders inside the page workspace (vs canvas). */
   isPageWorkspace?: boolean;
   onFocus: FocusEventHandler<HTMLDivElement>;
@@ -100,6 +103,7 @@ export interface TwProseMirrorSurfaceProps {
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
+  workflowMetadata?: readonly WorkflowMetadataMarkup[];
 }
 
 export interface TwProseMirrorSurfaceRef {
@@ -202,10 +206,10 @@ export const TwProseMirrorSurface = forwardRef<
         surface,
         activeStory: snapshot.activeStory,
         mediaPreviewKey,
+        showUnsupportedObjectPreviews: props.showUnsupportedObjectPreviews,
       }),
-    [mediaPreviewKey, snapshot.activeStory, surface],
+    [mediaPreviewKey, props.showUnsupportedObjectPreviews, snapshot.activeStory, surface],
   );
-  const suggestionsEnabled = props.suggestionsEnabled === true;
   const decorationBuildKey = useMemo(
     () =>
       createSurfaceDecorationKey({
@@ -217,9 +221,9 @@ export const TwProseMirrorSurface = forwardRef<
         workflowScopeSignature: createWorkflowScopeSignature(props.workflowScopes),
         workflowCandidateSignature: createWorkflowCandidateSignature(props.workflowCandidates),
         workflowBlockedSignature: createWorkflowBlockedSignature(props.workflowBlockedReasons),
+        workflowMetadataSignature: createWorkflowMetadataSignature(props.workflowMetadata),
         activeWorkflowWorkItemId: props.activeWorkflowWorkItemId ?? null,
         activeWorkflowScopeIds: props.activeWorkflowScopeIds ?? [],
-        suggestionsEnabled,
       }),
     [
       canEdit,
@@ -227,12 +231,12 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeRevisionId,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.workflowMetadata,
       props.activeWorkflowWorkItemId,
       props.activeWorkflowScopeIds,
       props.workflowScopes,
       showTrackedChanges,
       snapshot.comments.activeCommentId,
-      suggestionsEnabled,
     ],
   );
 
@@ -278,7 +282,7 @@ export const TwProseMirrorSurface = forwardRef<
         props.workflowBlockedReasons,
         props.activeWorkflowWorkItemId,
         props.activeWorkflowScopeIds,
-        suggestionsEnabled,
+        props.workflowMetadata,
       );
       view.setProps({
         editable: () => canEdit,
@@ -296,6 +300,7 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeWorkflowScopeIds,
       props.activeWorkflowWorkItemId,
       props.workflowBlockedReasons,
+      props.workflowMetadata,
       props.workflowCandidates,
       props.workflowScopes,
       revisionModel,
@@ -316,6 +321,7 @@ export const TwProseMirrorSurface = forwardRef<
       snapshot.selection,
       plugins,
       props.mediaPreviews,
+      props.showUnsupportedObjectPreviews,
     );
     positionMapRef.current = positionMap;
     const decorations = buildDecorations(
@@ -331,6 +337,7 @@ export const TwProseMirrorSurface = forwardRef<
       props.workflowBlockedReasons,
       props.activeWorkflowWorkItemId,
       props.activeWorkflowScopeIds,
+      props.workflowMetadata,
     );
     recordPerfSample("pm.rebuild");
     incrementInvalidationCounter("pm.laneA.rebuilds");
@@ -598,8 +605,13 @@ export const TwProseMirrorSurface = forwardRef<
   const workspaceLabel = props.isPageWorkspace ? "Document page" : "Document canvas";
 
   const selectionToolbarMeasurementKey = useMemo(
-    () => buildSelectionToolbarMeasurementKey(snapshot.selection, snapshot.activeStory),
-    [snapshot.activeStory, snapshot.selection],
+    () =>
+      buildSelectionToolbarMeasurementKey(
+        snapshot.selection,
+        snapshot.activeStory,
+        props.activeSelectionToolKind,
+      ),
+    [props.activeSelectionToolKind, snapshot.activeStory, snapshot.selection],
   );
 
   const emitSelectionToolbarAnchor = useCallback((): void => {
@@ -652,6 +664,7 @@ export const TwProseMirrorSurface = forwardRef<
   useEffect(() => {
     scheduleSelectionToolbarAnchorUpdate();
   }, [
+    props.activeSelectionToolKind,
     scheduleSelectionToolbarAnchorUpdate,
     snapshot.revisionToken,
     snapshot.selection,
@@ -692,6 +705,7 @@ export const TwProseMirrorSurface = forwardRef<
       resizeObserver?.disconnect();
     };
   }, [
+    props.activeSelectionToolKind,
     props.onSelectionToolbarAnchorChange,
     scheduleSelectionToolbarAnchorUpdate,
     snapshot.revisionToken,
@@ -793,7 +807,7 @@ export const TwProseMirrorSurface = forwardRef<
     const positionMap = positionMapRef.current;
     const range = snapshot.selection.activeRange;
 
-    if (!callback || !view || !mount || !positionMap || snapshot.selection.isCollapsed || range.kind !== "range") {
+    if (!callback || !view || !mount || !positionMap || range.kind === "detached") {
       return null;
     }
 
@@ -803,29 +817,33 @@ export const TwProseMirrorSurface = forwardRef<
     }
 
     try {
-      const pmFrom = positionMap.runtimeToPm(range.from);
-      const pmTo = positionMap.runtimeToPm(range.to);
-      const startRect = view.coordsAtPos(pmFrom);
-      const endRect = view.coordsAtPos(pmTo);
-      const left = Math.max(rootRect.left, Math.min(startRect.left, endRect.left));
-      const right = Math.min(rootRect.right, Math.max(startRect.right, endRect.right));
-      const top = Math.max(rootRect.top, Math.min(startRect.top, endRect.top));
-      const bottom = Math.min(rootRect.bottom, Math.max(startRect.bottom, endRect.bottom));
+      if (!snapshot.selection.isCollapsed && range.kind === "range") {
+        const pmFrom = positionMap.runtimeToPm(range.from);
+        const pmTo = positionMap.runtimeToPm(range.to);
+        return createSelectionToolbarAnchor(rootRect, view.coordsAtPos(pmFrom), view.coordsAtPos(pmTo));
+      }
 
       if (
-        !Number.isFinite(left) ||
-        !Number.isFinite(right) ||
-        !Number.isFinite(top) ||
-        !Number.isFinite(bottom) ||
-        right <= left ||
-        bottom <= top ||
-        bottom < rootRect.top ||
-        top > rootRect.bottom
+        range.kind === "node" ||
+        (
+          snapshot.selection.isCollapsed &&
+          range.kind === "range" &&
+          (
+            props.activeSelectionToolKind === "comment-thread" ||
+            props.activeSelectionToolKind === "structure-context"
+          )
+        )
       ) {
-        return null;
+        const runtimePosition = range.kind === "node" ? range.at : range.from;
+        const pmAt = positionMap.runtimeToPm(runtimePosition);
+        return createSelectionToolbarAnchor(
+          rootRect,
+          view.coordsAtPos(pmAt, -1),
+          view.coordsAtPos(pmAt, 1),
+        );
       }
 
-      return { left, right, top, bottom };
+      return null;
     } catch {
       return null;
     }
@@ -880,7 +898,33 @@ function createWorkflowBlockedSignature(
   ).join("|");
 }
 
-function serializeAnchorSignature(anchor: WorkflowScope["anchor"] | WorkflowCandidateRange["anchor"] | WorkflowBlockedCommandReason["anchor"] | undefined): string {
+function createWorkflowMetadataSignature(
+  metadata: readonly WorkflowMetadataMarkup[] | undefined,
+): string {
+  if (!metadata || metadata.length === 0) {
+    return "";
+  }
+  return metadata.map((entry) =>
+    [
+      entry.entryId,
+      entry.metadataId,
+      entry.color ?? "",
+      entry.persistence,
+      serializeAnchorSignature(entry.anchor),
+      serializeStoryTargetSignature(entry.storyTarget),
+      JSON.stringify(entry.value ?? {}),
+    ].join(":")
+  ).join("|");
+}
+
+function serializeAnchorSignature(
+  anchor:
+    | WorkflowScope["anchor"]
+    | WorkflowCandidateRange["anchor"]
+    | WorkflowBlockedCommandReason["anchor"]
+    | WorkflowMetadataMarkup["anchor"]
+    | undefined,
+): string {
   if (!anchor) {
     return "";
   }
@@ -894,7 +938,13 @@ function serializeAnchorSignature(anchor: WorkflowScope["anchor"] | WorkflowCand
   }
 }
 
-function serializeStoryTargetSignature(storyTarget: WorkflowScope["storyTarget"] | WorkflowCandidateRange["storyTarget"] | WorkflowBlockedCommandReason["storyTarget"]): string {
+function serializeStoryTargetSignature(
+  storyTarget:
+    | WorkflowScope["storyTarget"]
+    | WorkflowCandidateRange["storyTarget"]
+    | WorkflowBlockedCommandReason["storyTarget"]
+    | WorkflowMetadataMarkup["storyTarget"],
+): string {
   if (!storyTarget) {
     return "";
   }
@@ -913,18 +963,71 @@ function serializeStoryTargetSignature(storyTarget: WorkflowScope["storyTarget"]
 function buildSelectionToolbarMeasurementKey(
   selection: SelectionSnapshot,
   activeStory: RuntimeRenderSnapshot["activeStory"],
+  activeSelectionToolKind?: ActiveSelectionToolModel["kind"] | null,
 ): string | null {
-  if (selection.isCollapsed || selection.activeRange.kind !== "range") {
+  if (!activeSelectionToolKind || selection.activeRange.kind === "detached") {
     return null;
   }
 
   return JSON.stringify({
     story: activeStory,
-    from: selection.activeRange.from,
-    to: selection.activeRange.to,
+    tool: activeSelectionToolKind,
+    ...(selection.activeRange.kind === "node"
+      ? { nodeAt: selection.activeRange.at }
+      : {
+          from: selection.activeRange.from,
+          to: selection.activeRange.to,
+          collapsed: selection.isCollapsed,
+        }),
   });
 }
 
+function createSelectionToolbarAnchor(
+  rootRect: DOMRect,
+  ...rects: Array<Pick<DOMRect, "left" | "right" | "top" | "bottom">>
+): SelectionToolbarAnchor | null {
+  const validRects = rects.filter((rect) =>
+    Number.isFinite(rect.left) &&
+    Number.isFinite(rect.right) &&
+    Number.isFinite(rect.top) &&
+    Number.isFinite(rect.bottom),
+  );
+  if (validRects.length === 0) {
+    return null;
+  }
+
+  let left = Math.max(rootRect.left, Math.min(...validRects.map((rect) => Math.min(rect.left, rect.right))));
+  let right = Math.min(rootRect.right, Math.max(...validRects.map((rect) => Math.max(rect.left, rect.right))));
+  let top = Math.max(rootRect.top, Math.min(...validRects.map((rect) => Math.min(rect.top, rect.bottom))));
+  let bottom = Math.min(rootRect.bottom, Math.max(...validRects.map((rect) => Math.max(rect.top, rect.bottom))));
+
+  if (right <= left) {
+    const centerX = Math.min(rootRect.right, Math.max(rootRect.left, (left + right) / 2 || left));
+    left = Math.max(rootRect.left, centerX - 1);
+    right = Math.min(rootRect.right, centerX + 1);
+  }
+  if (bottom <= top) {
+    const centerY = Math.min(rootRect.bottom, Math.max(rootRect.top, (top + bottom) / 2 || top));
+    top = Math.max(rootRect.top, centerY - 1);
+    bottom = Math.min(rootRect.bottom, centerY + 1);
+  }
+
+  if (
+    !Number.isFinite(left) ||
+    !Number.isFinite(right) ||
+    !Number.isFinite(top) ||
+    !Number.isFinite(bottom) ||
+    right <= left ||
+    bottom <= top ||
+    bottom < rootRect.top ||
+    top > rootRect.bottom
+  ) {
+    return null;
+  }
+
+  return { left, right, top, bottom };
+}
+
 function selectionToolbarAnchorsEqual(
   left: SelectionToolbarAnchor | null,
   right: SelectionToolbarAnchor | null,