@beyondwork/docx-react-component 1.0.29 → 1.0.30

package/src/ui/headless/selection-tool-types.ts

@@ -0,0 +1,129 @@
+import type {
+  ActiveListContext,
+  CommentSidebarThreadSnapshot,
+  FormattingStateSnapshot,
+  InteractionGuardSnapshot,
+  StyleCatalogSnapshot,
+  TableStructureContextSnapshot,
+  SuggestionsSnapshot,
+  TrackedChangeEntrySnapshot,
+  WorkflowMarkupSnapshot,
+  WorkflowScopeSnapshot,
+} from "../../api/public-types";
+
+export interface SelectionToolBadge {
+  label: string;
+  tone?: "neutral" | "accent";
+}
+
+export interface SelectionToolAnchor {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export interface ActiveImageContext {
+  mediaId: string;
+  display: "inline" | "floating";
+  widthEmu?: number;
+  heightEmu?: number;
+  horizontalOffsetEmu?: number;
+  verticalOffsetEmu?: number;
+}
+
+export interface ActiveObjectContext {
+  kind: "textbox" | "shape";
+  display: "inline" | "floating";
+}
+
+export type SelectionToolKind =
+  | "formatting-inline"
+  | "suggestion-review"
+  | "comment-thread"
+  | "workflow-task"
+  | "structure-context"
+  | "blocked-explainer";
+
+export interface BaseSelectionToolModel {
+  kind: SelectionToolKind;
+  badges: SelectionToolBadge[];
+  previewText?: string;
+  disabledReason?: string;
+}
+
+export interface FormattingInlineSelectionToolModel extends BaseSelectionToolModel {
+  kind: "formatting-inline";
+  previewText: string;
+  canToggleFormatting: boolean;
+  boldActive: boolean;
+  italicActive: boolean;
+  underlineActive: boolean;
+  canAddComment: boolean;
+}
+
+export interface SuggestionReviewSelectionToolModel extends BaseSelectionToolModel {
+  kind: "suggestion-review";
+  suggestionId: string;
+  changeIds: string[];
+  kindLabel: string;
+  previewText: string;
+  canAccept: boolean;
+  canReject: boolean;
+  canEditSuggestion: boolean;
+  canAddComment: boolean;
+}
+
+export type StructureContextKind = "table" | "image" | "object" | "list";
+
+export interface StructureContextSelectionToolModel extends BaseSelectionToolModel {
+  kind: "structure-context";
+  structureKind: StructureContextKind;
+  tableStyles?: StyleCatalogSnapshot["tables"];
+  activeTable?: TableStructureContextSnapshot | null;
+  activeImage?: ActiveImageContext;
+  activeObject?: ActiveObjectContext;
+  activeListContext?: ActiveListContext | null;
+  canMutate: boolean;
+}
+
+export interface WorkflowTaskSelectionToolModel extends BaseSelectionToolModel {
+  kind: "workflow-task";
+  workflowTitle?: string;
+  workflowDetail?: string;
+}
+
+export interface CommentThreadSelectionToolModel extends BaseSelectionToolModel {
+  kind: "comment-thread";
+  thread?: CommentSidebarThreadSnapshot;
+  canAddComment: boolean;
+}
+
+export interface BlockedExplainerSelectionToolModel extends BaseSelectionToolModel {
+  kind: "blocked-explainer";
+  disabledReason: string;
+}
+
+export type ActiveSelectionToolModel =
+  | FormattingInlineSelectionToolModel
+  | SuggestionReviewSelectionToolModel
+  | CommentThreadSelectionToolModel
+  | WorkflowTaskSelectionToolModel
+  | StructureContextSelectionToolModel
+  | BlockedExplainerSelectionToolModel;
+
+export interface SelectionToolResolverContext {
+  workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
+  interactionGuardSnapshot?: InteractionGuardSnapshot;
+  workflowMarkupSnapshot?: WorkflowMarkupSnapshot;
+  suggestionsSnapshot?: SuggestionsSnapshot;
+  activeRevisionId?: string;
+  activeCommentId?: string;
+  activeCommentThread?: CommentSidebarThreadSnapshot;
+  activeTableContext?: TableStructureContextSnapshot | null;
+  activeImageContext?: ActiveImageContext | null;
+  activeObjectContext?: ActiveObjectContext | null;
+  activeListContext?: ActiveListContext | null;
+  selectedRevision?: TrackedChangeEntrySnapshot;
+  formattingState?: FormattingStateSnapshot;
+}

package/src/ui/headless/selection-toolbar-model.ts

@@ -0,0 +1,11 @@
+import type {
+  FormattingInlineSelectionToolModel,
+  SelectionToolAnchor,
+  SelectionToolBadge,
+  SuggestionReviewSelectionToolModel,
+} from "./selection-tool-types";
+
+export type SelectionToolbarBadge = SelectionToolBadge;
+export type SelectionToolbarAnchor = SelectionToolAnchor;
+export type SelectionToolbarModel = FormattingInlineSelectionToolModel;
+export type SuggestionCardModel = SuggestionReviewSelectionToolModel;

package/src/ui/headless/use-editor-keyboard.ts

@@ -0,0 +1,103 @@
+import type { KeyboardEvent } from "react";
+
+import type { SelectionSnapshot } from "../../api/public-types";
+import { createSelectionSnapshot } from "./selection-helpers";
+
+export interface EditorKeyboardCallbacks {
+  onSelectionChange?: (selection: SelectionSnapshot) => void;
+  onInsertText?: (text: string) => void;
+  onDeleteBackward?: () => void;
+  onDeleteForward?: () => void;
+  onInsertTab?: () => void;
+  onOutdentTab?: () => void;
+  onInsertHardBreak?: () => void;
+  onSplitParagraph?: () => void;
+}
+
+export interface EditorKeyboardContext {
+  selection: SelectionSnapshot;
+  storySize: number;
+  canEdit: boolean;
+}
+
+export function createEditorKeyboardHandler(
+  context: EditorKeyboardContext,
+  callbacks: EditorKeyboardCallbacks,
+): (event: KeyboardEvent<HTMLDivElement>) => void {
+  return function handleKeyDown(event: KeyboardEvent<HTMLDivElement>): void {
+    const { selection, storySize, canEdit } = context;
+
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      moveSelection(selection.anchor, selection.head - 1, event.shiftKey, storySize, callbacks);
+      return;
+    }
+
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      moveSelection(selection.anchor, selection.head + 1, event.shiftKey, storySize, callbacks);
+      return;
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault();
+      moveSelection(selection.anchor, 0, event.shiftKey, storySize, callbacks);
+      return;
+    }
+
+    if (event.key === "End") {
+      event.preventDefault();
+      moveSelection(selection.anchor, storySize, event.shiftKey, storySize, callbacks);
+      return;
+    }
+
+    if (!canEdit || event.metaKey || event.ctrlKey || event.altKey) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Backspace":
+        event.preventDefault();
+        callbacks.onDeleteBackward?.();
+        return;
+      case "Delete":
+        event.preventDefault();
+        callbacks.onDeleteForward?.();
+        return;
+      case "Tab":
+        event.preventDefault();
+        if (event.shiftKey) {
+          callbacks.onOutdentTab?.();
+        } else {
+          callbacks.onInsertTab?.();
+        }
+        return;
+      case "Enter":
+        event.preventDefault();
+        if (event.shiftKey) {
+          callbacks.onInsertHardBreak?.();
+        } else {
+          callbacks.onSplitParagraph?.();
+        }
+        return;
+      default:
+        if (event.key.length === 1) {
+          event.preventDefault();
+          callbacks.onInsertText?.(event.key);
+        }
+    }
+  };
+}
+
+function moveSelection(
+  anchor: number,
+  nextHead: number,
+  extend: boolean,
+  storySize: number,
+  callbacks: EditorKeyboardCallbacks,
+): void {
+  const clampedHead = Math.max(0, Math.min(storySize, nextHead));
+  callbacks.onSelectionChange?.(
+    createSelectionSnapshot(extend ? anchor : clampedHead, clampedHead),
+  );
+}

package/src/ui/review/README.md

@@ -0,0 +1,3 @@
+# Review UI
+
+Tracked-change display modes, review navigation, and accept/reject surfaces belong here.

package/src/ui/runtime-shortcut-dispatch.ts

@@ -0,0 +1,365 @@
+import type {
+  StyleCatalogSnapshot,
+  WorkflowBlockedCommandReason,
+} from "../api/public-types.ts";
+
+export interface ShortcutKeyInput {
+  key: string;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  altKey?: boolean;
+  shiftKey?: boolean;
+}
+
+export interface ShellShortcutContext {
+  target: "document" | "selection-toolbar" | "shell";
+  selectionToolbarVisible: boolean;
+}
+
+export interface SurfaceShortcutContext {
+  inTable: boolean;
+}
+
+export type ShellShortcutResolution =
+  | { kind: "none" }
+  | { kind: "delegate"; shortcut: "find" | "print" | "zoom-in" | "zoom-out" | "zoom-reset" }
+  | { kind: "block"; command: string; reason: WorkflowBlockedCommandReason }
+  | { kind: "history"; history: "undo" | "redo" }
+  | { kind: "focus-region"; direction: 1 | -1 }
+  | { kind: "dismiss-selection-toolbar" }
+  | { kind: "toggle-formatting"; mark: "bold" | "italic" | "underline" }
+  | { kind: "add-comment" }
+  | { kind: "set-heading-level"; level: 1 | 2 | 3 };
+
+export type SurfaceShortcutResolution =
+  | { kind: "none" }
+  | { kind: "delete-backward" }
+  | { kind: "delete-forward" }
+  | { kind: "split-paragraph" }
+  | { kind: "insert-hard-break" }
+  | { kind: "insert-tab" }
+  | { kind: "outdent-tab" }
+  | { kind: "navigate-table-cell"; direction: 1 | -1 }
+  | { kind: "history"; history: "undo" | "redo" };
+
+export function resolveShellShortcut(
+  input: ShortcutKeyInput,
+  context: ShellShortcutContext,
+): ShellShortcutResolution {
+  const key = normalizeKey(input.key);
+  const editorTarget = context.target === "document" || context.target === "selection-toolbar";
+
+  if (key === "f6") {
+    return { kind: "focus-region", direction: input.shiftKey ? -1 : 1 };
+  }
+
+  if (
+    key === "escape" &&
+    context.selectionToolbarVisible &&
+    editorTarget
+  ) {
+    return { kind: "dismiss-selection-toolbar" };
+  }
+
+  if (!editorTarget) {
+    return { kind: "none" };
+  }
+
+  if (isUndoShortcut(input, key)) {
+    return { kind: "history", history: "undo" };
+  }
+
+  if (isRedoShortcut(input, key)) {
+    return { kind: "history", history: "redo" };
+  }
+
+  if (isModShortcut(input, key, "b")) {
+    return { kind: "toggle-formatting", mark: "bold" };
+  }
+
+  if (isModShortcut(input, key, "i")) {
+    return { kind: "toggle-formatting", mark: "italic" };
+  }
+
+  if (isModShortcut(input, key, "u")) {
+    return { kind: "toggle-formatting", mark: "underline" };
+  }
+
+  if (isWindowsCommentShortcut(input, key) || isMacCommentShortcut(input, key)) {
+    return { kind: "add-comment" };
+  }
+
+  if (isWindowsHeadingShortcut(input, key) || isMacHeadingShortcut(input, key)) {
+    return { kind: "set-heading-level", level: Number.parseInt(key, 10) as 1 | 2 | 3 };
+  }
+
+  if (isModShortcut(input, key, "f")) {
+    return { kind: "delegate", shortcut: "find" };
+  }
+
+  if (isModShortcut(input, key, "p")) {
+    return { kind: "delegate", shortcut: "print" };
+  }
+
+  if (isZoomInShortcut(input, key)) {
+    return { kind: "delegate", shortcut: "zoom-in" };
+  }
+
+  if (isZoomOutShortcut(input, key)) {
+    return { kind: "delegate", shortcut: "zoom-out" };
+  }
+
+  if (isModShortcut(input, key, "0")) {
+    return { kind: "delegate", shortcut: "zoom-reset" };
+  }
+
+  if (isPasteTextOnlyShortcut(input, key)) {
+    return {
+      kind: "block",
+      command: "pasteTextOnly",
+      reason: createUnsupportedShortcutReason(
+        "Plain-text paste is not supported in the mounted editor yet.",
+      ),
+    };
+  }
+
+  if (isReplaceShortcut(input, key)) {
+    return {
+      kind: "block",
+      command: "replaceText",
+      reason: createUnsupportedShortcutReason(
+        "Replace shortcuts are not supported in the mounted editor yet.",
+      ),
+    };
+  }
+
+  if (
+    isGoToShortcut(input, key) ||
+    (key === "f5" && !input.shiftKey)
+  ) {
+    return {
+      kind: "block",
+      command: "goTo",
+      reason: createUnsupportedShortcutReason(
+        "Go To shortcuts are not supported in the mounted editor yet.",
+      ),
+    };
+  }
+
+  if (isModShiftShortcut(input, key, "e")) {
+    return {
+      kind: "block",
+      command: "toggleTrackChanges",
+      reason: createUnsupportedShortcutReason(
+        "Track changes authoring shortcuts are not supported in the mounted editor.",
+      ),
+    };
+  }
+
+  if (key === "f7" && !input.shiftKey) {
+    return {
+      kind: "block",
+      command: "checkSpelling",
+      reason: createUnsupportedShortcutReason(
+        "Spelling shortcuts are not supported in the mounted editor.",
+      ),
+    };
+  }
+
+  if (key === "f7" && input.shiftKey) {
+    return {
+      kind: "block",
+      command: "openThesaurus",
+      reason: createUnsupportedShortcutReason(
+        "Thesaurus shortcuts are not supported in the mounted editor.",
+      ),
+    };
+  }
+
+  if (key === "f8") {
+    return {
+      kind: "block",
+      command: "extendSelection",
+      reason: createUnsupportedShortcutReason(
+        "Extend-selection shortcuts are not supported in the mounted editor.",
+      ),
+    };
+  }
+
+  if (key === "f5" && input.shiftKey) {
+    return {
+      kind: "block",
+      command: "lastEdit",
+      reason: createUnsupportedShortcutReason(
+        "Last-edit shortcuts are not supported in the mounted editor.",
+      ),
+    };
+  }
+
+  return { kind: "none" };
+}
+
+export function resolveSurfaceShortcut(
+  input: ShortcutKeyInput,
+  context: SurfaceShortcutContext,
+): SurfaceShortcutResolution {
+  const key = normalizeKey(input.key);
+
+  if (isUndoShortcut(input, key)) {
+    return { kind: "history", history: "undo" };
+  }
+
+  if (isRedoShortcut(input, key)) {
+    return { kind: "history", history: "redo" };
+  }
+
+  if (key === "backspace" && !hasAnyModifiers(input)) {
+    return { kind: "delete-backward" };
+  }
+
+  if (key === "delete" && !hasAnyModifiers(input)) {
+    return { kind: "delete-forward" };
+  }
+
+  if (key === "enter" && input.shiftKey && !input.ctrlKey && !input.metaKey && !input.altKey) {
+    return { kind: "insert-hard-break" };
+  }
+
+  if (key === "enter" && !hasAnyModifiers(input)) {
+    return { kind: "split-paragraph" };
+  }
+
+  if (key === "tab" && input.shiftKey && !input.ctrlKey && !input.metaKey && !input.altKey) {
+    return context.inTable
+      ? { kind: "navigate-table-cell", direction: -1 }
+      : { kind: "outdent-tab" };
+  }
+
+  if (key === "tab" && !hasAnyModifiers(input)) {
+    return context.inTable
+      ? { kind: "navigate-table-cell", direction: 1 }
+      : { kind: "insert-tab" };
+  }
+
+  return { kind: "none" };
+}
+
+export function resolveHeadingShortcutStyleId(
+  styleCatalog: StyleCatalogSnapshot,
+  level: 1 | 2 | 3,
+): string | null {
+  const headingToken = `heading${level}`;
+  for (const entry of styleCatalog.paragraphs) {
+    if (normalizeStyleToken(entry.styleId) === headingToken) {
+      return entry.styleId;
+    }
+  }
+  for (const entry of styleCatalog.paragraphs) {
+    if (normalizeStyleToken(entry.displayName) === headingToken) {
+      return entry.styleId;
+    }
+  }
+  return null;
+}
+
+function createUnsupportedShortcutReason(message: string): WorkflowBlockedCommandReason {
+  return {
+    code: "unsupported_surface",
+    message,
+  };
+}
+
+function normalizeKey(key: string): string {
+  return key.toLowerCase();
+}
+
+function normalizeStyleToken(value: string): string {
+  return value.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+function hasAnyModifiers(input: ShortcutKeyInput): boolean {
+  return Boolean(input.ctrlKey || input.metaKey || input.altKey || input.shiftKey);
+}
+
+function isModShortcut(input: ShortcutKeyInput, key: string, expectedKey: string): boolean {
+  return (
+    key === expectedKey &&
+    Boolean(input.ctrlKey || input.metaKey) &&
+    !input.altKey &&
+    !input.shiftKey
+  );
+}
+
+function isModShiftShortcut(input: ShortcutKeyInput, key: string, expectedKey: string): boolean {
+  return (
+    key === expectedKey &&
+    Boolean(input.ctrlKey || input.metaKey) &&
+    !input.altKey &&
+    Boolean(input.shiftKey)
+  );
+}
+
+function isUndoShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return isModShortcut(input, key, "z");
+}
+
+function isRedoShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return (
+    (isModShiftShortcut(input, key, "z")) ||
+    (key === "y" && Boolean(input.ctrlKey || input.metaKey) && !input.altKey && !input.shiftKey)
+  );
+}
+
+function isReplaceShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return key === "h" && Boolean(input.ctrlKey) && !input.metaKey && !input.altKey && !input.shiftKey;
+}
+
+function isGoToShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return (
+    (key === "g" && Boolean(input.ctrlKey) && !input.metaKey && !input.altKey && !input.shiftKey) ||
+    (key === "g" && Boolean(input.metaKey) && !input.ctrlKey && Boolean(input.altKey) && !input.shiftKey)
+  );
+}
+
+function isWindowsCommentShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return key === "m" && Boolean(input.ctrlKey) && Boolean(input.altKey) && !input.metaKey && !input.shiftKey;
+}
+
+function isMacCommentShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return key === "a" && Boolean(input.metaKey) && Boolean(input.altKey) && !input.ctrlKey && !input.shiftKey;
+}
+
+function isWindowsHeadingShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return ["1", "2", "3"].includes(key) &&
+    Boolean(input.ctrlKey) &&
+    Boolean(input.altKey) &&
+    !input.metaKey &&
+    !input.shiftKey;
+}
+
+function isMacHeadingShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return ["1", "2", "3"].includes(key) &&
+    Boolean(input.metaKey) &&
+    Boolean(input.altKey) &&
+    !input.ctrlKey &&
+    !input.shiftKey;
+}
+
+function isZoomInShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return Boolean(input.ctrlKey || input.metaKey) &&
+    !input.altKey &&
+    (key === "+" || key === "=" || key === "add");
+}
+
+function isZoomOutShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return Boolean(input.ctrlKey || input.metaKey) &&
+    !input.altKey &&
+    (key === "-" || key === "_" || key === "subtract");
+}
+
+function isPasteTextOnlyShortcut(input: ShortcutKeyInput, key: string): boolean {
+  return key === "v" &&
+    Boolean(input.ctrlKey || input.metaKey) &&
+    !input.altKey &&
+    Boolean(input.shiftKey);
+}