@beyondwork/docx-react-component 1.0.19 → 1.0.21

package/src/ui/editor-shell-view.tsx

@@ -0,0 +1,134 @@
+import React, { type CSSProperties, type ReactNode } from "react";
+
+import type {
+  DocumentNavigationSnapshot,
+  EditorError,
+  FormattingStateSnapshot,
+  InteractionGuardSnapshot,
+  RuntimeRenderSnapshot,
+  StyleCatalogSnapshot,
+  WorkflowScopeSnapshot,
+  WorkspaceMode,
+  ZoomLevel,
+} from "../api/public-types.ts";
+import type { SessionCapabilities } from "../runtime/session-capabilities.ts";
+import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
+import type {
+  SelectionToolbarAnchor,
+  SelectionToolbarModel,
+} from "./headless/selection-toolbar-model.ts";
+import type { EditorCommandBag } from "./editor-command-bag.ts";
+import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
+import { TwReviewWorkspace } from "../ui-tailwind/tw-review-workspace.tsx";
+import type {
+  ActiveImageContext,
+} from "../ui-tailwind/chrome/tw-image-context-toolbar.tsx";
+import type {
+  ActiveObjectContext,
+} from "../ui-tailwind/chrome/tw-object-context-toolbar.tsx";
+import type { EditorViewStateSnapshot } from "../api/public-types.ts";
+
+export interface EditorShellViewProps {
+  shellRef: React.RefObject<HTMLDivElement | null>;
+  documentId: string;
+  snapshot: RuntimeRenderSnapshot;
+  loadError: EditorError | null;
+  diagnosticsModeMessage: string | null;
+  accessibilityInstructionsId: string;
+  accessibilityStatusId: string;
+  accessibilityAlertId: string;
+  accessibilityStatusMessage: string;
+  visuallyHiddenStyles: CSSProperties;
+  onShellKeyDownCapture: React.KeyboardEventHandler<HTMLDivElement>;
+  viewState: EditorViewStateSnapshot;
+  markupDisplay: MarkupDisplay;
+  currentUserId: string;
+  capabilities: SessionCapabilities;
+  reviewMode: "editing" | "review";
+  workspaceMode: WorkspaceMode;
+  zoomLevel?: ZoomLevel;
+  formattingState?: FormattingStateSnapshot;
+  styleCatalog?: StyleCatalogSnapshot;
+  activeRailTab: ReviewRailTab;
+  activeCommentId?: string;
+  activeRevisionId?: string;
+  showTrackedChanges: boolean;
+  workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
+  interactionGuardSnapshot?: InteractionGuardSnapshot;
+  selectionToolbar?: SelectionToolbarModel | null;
+  selectionToolbarAnchor?: SelectionToolbarAnchor | null;
+  documentNavigation?: DocumentNavigationSnapshot;
+  commands: EditorCommandBag;
+  document: ReactNode;
+  onAddCommentFromSelection?: () => void;
+  onDismissSelectionToolbar?: () => void;
+  onSelectionToolbarFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
+  onSelectionToolbarBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
+  selectionToolbarRef?: React.Ref<HTMLDivElement>;
+  activeImageContext?: ActiveImageContext | null;
+  activeObjectContext?: ActiveObjectContext | null;
+}
+
+export function EditorShellView(props: EditorShellViewProps) {
+  const {
+    shellRef,
+    documentId,
+    snapshot,
+    loadError,
+    diagnosticsModeMessage,
+    accessibilityInstructionsId,
+    accessibilityStatusId,
+    accessibilityAlertId,
+    accessibilityStatusMessage,
+    visuallyHiddenStyles,
+    onShellKeyDownCapture,
+    document,
+    commands,
+    ...workspaceProps
+  } = props;
+
+  return (
+    <div
+      ref={shellRef}
+      role="region"
+      aria-label={`Word review editor for ${snapshot.sourceLabel ?? documentId}`}
+      aria-describedby={`${accessibilityInstructionsId} ${accessibilityStatusId}${
+        diagnosticsModeMessage ? ` ${accessibilityAlertId}` : ""
+      }`}
+      className="relative h-full"
+      onKeyDownCapture={onShellKeyDownCapture}
+    >
+      <p id={accessibilityInstructionsId} style={visuallyHiddenStyles}>
+        Press F6 to move focus between the toolbar, document surface, review rail, and status bar.
+      </p>
+      <div
+        id={accessibilityStatusId}
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        style={visuallyHiddenStyles}
+      >
+        {accessibilityStatusMessage}
+      </div>
+      {diagnosticsModeMessage ? (
+        <div
+          id={accessibilityAlertId}
+          data-wre-alert="true"
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+          tabIndex={-1}
+          className="border-b border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger"
+        >
+          {diagnosticsModeMessage}
+        </div>
+      ) : null}
+      <TwReviewWorkspace
+        snapshot={snapshot}
+        commands={commands}
+        document={document}
+        {...workspaceProps}
+      />
+    </div>
+  );
+}

package/src/ui/editor-surface-controller.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from "react";
+
+import type {
+  DocumentNavigationSnapshot,
+  EditorUser,
+  RuntimeRenderSnapshot,
+  SelectionSnapshot,
+  WorkflowBlockedCommandReason,
+  WorkflowCandidateRange,
+  WorkflowScope,
+} from "../api/public-types.ts";
+import type { CanonicalDocumentEnvelope } from "../core/state/editor-state.ts";
+import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
+import type { SelectionToolbarAnchor } from "./headless/selection-toolbar-model.ts";
+import {
+  TwProseMirrorSurface,
+  type TwProseMirrorSurfaceRef,
+} from "../ui-tailwind/editor-surface/tw-prosemirror-surface.tsx";
+import type { MediaPreviewDescriptor } from "../ui-tailwind/editor-surface/pm-state-from-snapshot.ts";
+
+export interface EditorSurfaceControllerProps {
+  currentUser: EditorUser;
+  snapshot: RuntimeRenderSnapshot;
+  canonicalDocument: CanonicalDocumentEnvelope;
+  documentNavigation: DocumentNavigationSnapshot;
+  reviewMode: "editing" | "review";
+  markupDisplay: MarkupDisplay;
+  activeRevisionId?: string;
+  showTrackedChanges?: boolean;
+  mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  isPageWorkspace?: boolean;
+  onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
+  onFocus: React.FocusEventHandler<HTMLDivElement>;
+  onBlur: React.FocusEventHandler<HTMLDivElement>;
+  onSelectionChange?: (selection: SelectionSnapshot) => void;
+  onInsertText?: (text: string) => void;
+  onDeleteBackward?: () => void;
+  onDeleteForward?: () => void;
+  onInsertTab?: () => void;
+  onOutdentTab?: () => void;
+  onInsertHardBreak?: () => void;
+  onSplitParagraph?: () => void;
+  onCommentActivated?: (commentId: string) => void;
+  onRevisionActivated?: (revisionId: string) => void;
+  workflowScopes?: readonly WorkflowScope[];
+  workflowCandidates?: readonly WorkflowCandidateRange[];
+  workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+}
+
+export const EditorSurfaceController = forwardRef<
+  TwProseMirrorSurfaceRef,
+  EditorSurfaceControllerProps
+>(function EditorSurfaceController(props, ref) {
+  return <TwProseMirrorSurface ref={ref} {...props} />;
+});

package/src/ui/headless/revision-decoration-model.ts

@@ -101,18 +101,18 @@ export function getRevisionHighlightClass(
       return "";
     case "simple":
       if (state.hasInsertions) {
-        return `underline decoration-insert/40 decoration-1 underline-offset-2${activeRing}`;
+        return `underline decoration-insert/60 decoration-1 underline-offset-2 text-primary${activeRing}`;
       }
       if (state.hasDeletions) {
-        return `text-secondary line-through decoration-1${activeRing}`;
+        return `text-secondary line-through decoration-danger/70 decoration-1${activeRing}`;
       }
       return activeRing;
     case "all":
       if (state.hasInsertions) {
-        return `text-insert bg-insert-soft${activeRing}`;
+        return `text-primary bg-insert-soft/80 ring-1 ring-insert/20${activeRing}`;
       }
       if (state.hasDeletions) {
-        return `text-danger line-through decoration-1 bg-delete-soft${activeRing}`;
+        return `text-danger line-through decoration-danger/80 decoration-1 bg-delete-soft/70${activeRing}`;
       }
       return activeRing;
   }

package/src/ui/runtime-snapshot-selectors.ts

@@ -0,0 +1,197 @@
+import { useRef, useSyncExternalStore } from "react";
+import type {
+  DocumentNavigationSnapshot,
+  RuntimeRenderSnapshot,
+} from "../api/public-types.ts";
+
+export interface RuntimeSnapshotSource {
+  subscribe(listener: () => void): () => void;
+  getRenderSnapshot(): RuntimeRenderSnapshot;
+}
+
+export interface RuntimeValueSource<T> {
+  subscribe(listener: () => void): () => void;
+  getValue(): T;
+}
+
+export interface ToolbarSlice {
+  commandState: RuntimeRenderSnapshot["commandState"];
+  isDirty: RuntimeRenderSnapshot["isDirty"];
+  isReady: RuntimeRenderSnapshot["isReady"];
+  readOnly: RuntimeRenderSnapshot["readOnly"];
+  fatalError: RuntimeRenderSnapshot["fatalError"];
+}
+
+export interface SurfaceSlice {
+  revisionToken: RuntimeRenderSnapshot["revisionToken"];
+  selection: RuntimeRenderSnapshot["selection"];
+  activeStory: RuntimeRenderSnapshot["activeStory"];
+  surface: RuntimeRenderSnapshot["surface"];
+}
+
+export interface ReviewSlice {
+  comments: RuntimeRenderSnapshot["comments"];
+  trackedChanges: RuntimeRenderSnapshot["trackedChanges"];
+  compatibility: RuntimeRenderSnapshot["compatibility"];
+}
+
+export interface ViewSlice {
+  documentMode: RuntimeRenderSnapshot["documentMode"];
+  activeStory: RuntimeRenderSnapshot["activeStory"];
+  pageLayout: RuntimeRenderSnapshot["pageLayout"];
+}
+
+export interface StatusSlice {
+  warnings: RuntimeRenderSnapshot["warnings"];
+  fatalError: RuntimeRenderSnapshot["fatalError"];
+  isDirty: RuntimeRenderSnapshot["isDirty"];
+  documentStats: RuntimeRenderSnapshot["documentStats"];
+  protectionSnapshot: RuntimeRenderSnapshot["protectionSnapshot"];
+}
+
+export interface NavigationSlice {
+  documentNavigation: DocumentNavigationSnapshot | undefined;
+}
+
+export interface MetaSlice {
+  documentId: RuntimeRenderSnapshot["documentId"];
+  sessionId: RuntimeRenderSnapshot["sessionId"];
+  sourceLabel: RuntimeRenderSnapshot["sourceLabel"];
+}
+
+export function selectToolbarSlice(snapshot: RuntimeRenderSnapshot): ToolbarSlice {
+  return {
+    commandState: snapshot.commandState,
+    isDirty: snapshot.isDirty,
+    isReady: snapshot.isReady,
+    readOnly: snapshot.readOnly,
+    fatalError: snapshot.fatalError,
+  };
+}
+
+export function selectSurfaceSlice(snapshot: RuntimeRenderSnapshot): SurfaceSlice {
+  return {
+    revisionToken: snapshot.revisionToken,
+    selection: snapshot.selection,
+    activeStory: snapshot.activeStory,
+    surface: snapshot.surface,
+  };
+}
+
+export function selectReviewSlice(snapshot: RuntimeRenderSnapshot): ReviewSlice {
+  return {
+    comments: snapshot.comments,
+    trackedChanges: snapshot.trackedChanges,
+    compatibility: snapshot.compatibility,
+  };
+}
+
+export function selectViewSlice(snapshot: RuntimeRenderSnapshot): ViewSlice {
+  return {
+    documentMode: snapshot.documentMode,
+    activeStory: snapshot.activeStory,
+    pageLayout: snapshot.pageLayout,
+  };
+}
+
+export function selectStatusSlice(snapshot: RuntimeRenderSnapshot): StatusSlice {
+  return {
+    warnings: snapshot.warnings,
+    fatalError: snapshot.fatalError,
+    isDirty: snapshot.isDirty,
+    documentStats: snapshot.documentStats,
+    protectionSnapshot: snapshot.protectionSnapshot,
+  };
+}
+
+export function selectNavigationSlice(
+  documentNavigation?: DocumentNavigationSnapshot,
+): NavigationSlice {
+  return {
+    documentNavigation,
+  };
+}
+
+export function selectMetaSlice(snapshot: RuntimeRenderSnapshot): MetaSlice {
+  return {
+    documentId: snapshot.documentId,
+    sessionId: snapshot.sessionId,
+    sourceLabel: snapshot.sourceLabel,
+  };
+}
+
+export function shallowEqualRecord<T extends object>(
+  left: T,
+  right: T,
+): boolean {
+  const leftRecord = left as Record<string, unknown>;
+  const rightRecord = right as Record<string, unknown>;
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  if (leftKeys.length !== rightKeys.length) {
+    return false;
+  }
+
+  for (const key of leftKeys) {
+    if (leftRecord[key] !== rightRecord[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function useRuntimeSnapshotSlice<T>(
+  runtime: RuntimeSnapshotSource | null,
+  fallbackSnapshot: RuntimeRenderSnapshot,
+  selector: (snapshot: RuntimeRenderSnapshot) => T,
+  isEqual: (left: T, right: T) => boolean = Object.is,
+): T {
+  const cachedSelectionRef = useRef<T>(selector(fallbackSnapshot));
+  return useSyncExternalStore(
+    (listener) => runtime?.subscribe(listener) ?? (() => undefined),
+    () => {
+      const next = selector(runtime?.getRenderSnapshot() ?? fallbackSnapshot);
+      if (isEqual(cachedSelectionRef.current, next)) {
+        return cachedSelectionRef.current;
+      }
+      cachedSelectionRef.current = next;
+      return next;
+    },
+    () => {
+      const next = selector(runtime?.getRenderSnapshot() ?? fallbackSnapshot);
+      if (isEqual(cachedSelectionRef.current, next)) {
+        return cachedSelectionRef.current;
+      }
+      cachedSelectionRef.current = next;
+      return next;
+    },
+  );
+}
+
+export function useRuntimeValue<T>(
+  source: RuntimeValueSource<T> | null,
+  fallbackValue: T,
+  isEqual: (left: T, right: T) => boolean = Object.is,
+): T {
+  const cachedValueRef = useRef<T>(fallbackValue);
+  return useSyncExternalStore(
+    (listener) => source?.subscribe(listener) ?? (() => undefined),
+    () => {
+      const next = source?.getValue() ?? fallbackValue;
+      if (isEqual(cachedValueRef.current, next)) {
+        return cachedValueRef.current;
+      }
+      cachedValueRef.current = next;
+      return next;
+    },
+    () => {
+      const next = source?.getValue() ?? fallbackValue;
+      if (isEqual(cachedValueRef.current, next)) {
+        return cachedValueRef.current;
+      }
+      cachedValueRef.current = next;
+      return next;
+    },
+  );
+}

package/src/ui/workflow-surface-blocked-rails.ts

@@ -0,0 +1,94 @@
+import type {
+  EditorStoryTarget,
+  RuntimeRenderSnapshot,
+  SurfaceBlockSnapshot,
+  WorkflowBlockedCommandReason,
+  WorkflowMarkupSnapshot,
+} from "../api/public-types";
+
+export function deriveVisibleWorkflowBlockedRails(
+  surface: RuntimeRenderSnapshot["surface"] | undefined,
+  markupSnapshot: WorkflowMarkupSnapshot | null,
+): WorkflowBlockedCommandReason[] {
+  if (!surface || !markupSnapshot) {
+    return [];
+  }
+
+  const visibleFragments = collectVisibleOpaqueFragmentStoryKeys(surface);
+  return markupSnapshot.opaqueFragments
+    .filter((fragment) =>
+      visibleFragments.has(
+        createOpaqueFragmentStoryKey(fragment.fragmentId, fragment.storyTarget ?? { kind: "main" }),
+      ),
+    )
+    .map((fragment) => ({
+      code: fragment.blockedReasonCode,
+      message: fragment.detail,
+      anchor: fragment.anchor,
+      storyTarget: fragment.storyTarget,
+    }));
+}
+
+function collectVisibleOpaqueFragmentStoryKeys(
+  surface: NonNullable<RuntimeRenderSnapshot["surface"]>,
+): Set<string> {
+  const keys = new Set<string>();
+  collectVisibleOpaqueFragmentStoryKeysInBlocks(surface.blocks, { kind: "main" }, keys);
+  for (const story of surface.secondaryStories) {
+    collectVisibleOpaqueFragmentStoryKeysInBlocks(story.blocks, story.target, keys);
+  }
+  return keys;
+}
+
+function collectVisibleOpaqueFragmentStoryKeysInBlocks(
+  blocks: readonly SurfaceBlockSnapshot[],
+  storyTarget: EditorStoryTarget,
+  keys: Set<string>,
+): void {
+  for (const block of blocks) {
+    if (block.kind === "paragraph") {
+      for (const segment of block.segments) {
+        if (segment.kind === "opaque_inline") {
+          keys.add(createOpaqueFragmentStoryKey(segment.fragmentId, storyTarget));
+        }
+      }
+      continue;
+    }
+
+    if (block.kind === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          collectVisibleOpaqueFragmentStoryKeysInBlocks(cell.content, storyTarget, keys);
+        }
+      }
+      continue;
+    }
+
+    if (block.kind === "sdt_block") {
+      collectVisibleOpaqueFragmentStoryKeysInBlocks(block.children, storyTarget, keys);
+      continue;
+    }
+
+    keys.add(createOpaqueFragmentStoryKey(block.fragmentId, storyTarget));
+  }
+}
+
+function createOpaqueFragmentStoryKey(
+  fragmentId: string,
+  storyTarget: EditorStoryTarget,
+): string {
+  return `${fragmentId}:${serializeStoryTargetKey(storyTarget)}`;
+}
+
+function serializeStoryTargetKey(storyTarget: EditorStoryTarget): string {
+  switch (storyTarget.kind) {
+    case "main":
+      return "main";
+    case "header":
+    case "footer":
+      return `${storyTarget.kind}:${storyTarget.relationshipId}:${storyTarget.variant}:${storyTarget.sectionIndex ?? "none"}`;
+    case "footnote":
+    case "endnote":
+      return `${storyTarget.kind}:${storyTarget.noteId}`;
+  }
+}

package/src/ui-tailwind/chrome/tw-alert-banner.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { AlertTriangle, XCircle } from "lucide-react";
 
-import type { RuntimeRenderSnapshot } from "../../api/public-types";
+import type { RuntimeRenderSnapshot, WorkflowBlockedCommandReason } from "../../api/public-types";
 
 export interface TwAlertBannerProps {
   snapshot: RuntimeRenderSnapshot;
   preserveOnlyCount: number;
+  workflowBlockedReasons?: WorkflowBlockedCommandReason[];
 }
 
 export function TwAlertBanner(props: TwAlertBannerProps) {
-  const { snapshot, preserveOnlyCount } = props;
+  const { snapshot, preserveOnlyCount, workflowBlockedReasons = [] } = props;
 
   if (snapshot.fatalError) {
     return (
@@ -44,5 +45,20 @@ export function TwAlertBanner(props: TwAlertBannerProps) {
     );
   }
 
+  if (workflowBlockedReasons.length > 0) {
+    const firstReason = workflowBlockedReasons[0];
+    return (
+      <div className="flex items-center gap-2 px-3 py-1.5 bg-amber-50 text-amber-700 text-xs">
+        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+        <span>
+          {firstReason.message}
+          {workflowBlockedReasons.length > 1
+            ? ` (+${workflowBlockedReasons.length - 1} more)`
+            : ""}
+        </span>
+      </div>
+    );
+  }
+
   return null;
 }

package/src/ui-tailwind/chrome/tw-image-context-toolbar.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface ActiveImageContext {
+  mediaId: string;
+  display: "inline" | "floating";
+  widthEmu?: number;
+  heightEmu?: number;
+  horizontalOffsetEmu?: number;
+  verticalOffsetEmu?: number;
+}
+
+export interface TwImageContextToolbarProps {
+  activeImage: ActiveImageContext;
+  disabled: boolean;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+}
+
+const IMAGE_SIZE_PRESETS = [
+  { label: "Small image", widthEmu: 1828800, heightEmu: 914400 },
+  { label: "Medium image", widthEmu: 2743200, heightEmu: 1371600 },
+  { label: "Large image", widthEmu: 3657600, heightEmu: 1828800 },
+] as const;
+
+const NUDGE_EMU = 228600;
+
+export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
+  const { activeImage } = props;
+
+  return (
+    <div
+      data-testid="image-context-toolbar"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Image
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {activeImage.display}
+      </span>
+      {IMAGE_SIZE_PRESETS.map((preset) => (
+        <ToolbarButton
+          key={preset.label}
+          ariaLabel={preset.label}
+          disabled={props.disabled || !props.onSetImageLayout}
+          onClick={() =>
+            props.onSetImageLayout?.(activeImage.mediaId, {
+              widthEmu: preset.widthEmu,
+              heightEmu: preset.heightEmu,
+            })}
+        >
+          {preset.label.replace(" image", "")}
+        </ToolbarButton>
+      ))}
+      {activeImage.display === "floating" ? (
+        <>
+          <ToolbarButton
+            ariaLabel="Nudge image left"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) - NUDGE_EMU,
+              })}
+          >
+            Left
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Nudge image right"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) + NUDGE_EMU,
+              })}
+          >
+            Right
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Nudge image up"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) - NUDGE_EMU,
+              })}
+          >
+            Up
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Nudge image down"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) + NUDGE_EMU,
+              })}
+          >
+            Down
+          </ToolbarButton>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.children}
+    </button>
+  );
+}