@portone/docx-editor 0.1.0

package/dist/ui/TableMenu.js

@@ -0,0 +1,112 @@
+// src/ui/TableMenu.tsx
+import { Fragment, useCallback, useRef } from "react";
+import { unlockSelection } from "../editor/commands/lockCommands.js";
+import {
+  closeTableMenu
+} from "../editor/plugins/tableContextMenu.js";
+import { editorClassNames } from "../styles/classNames.js";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  mergeCells,
+  splitCell
+} from "../table/index.js";
+import { usePanelAtPoint } from "./panelPlacement.js";
+import { commandRunner } from "./runCommand.js";
+import { useDismiss } from "./useDismiss.js";
+import { useMenuKeyboard } from "./useMenuKeyboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MENU_GROUPS = [
+  {
+    name: "rows",
+    items: [
+      { label: "Insert row above", command: addRowBefore },
+      { label: "Insert row below", command: addRowAfter },
+      { label: "Delete row", command: deleteRow }
+    ]
+  },
+  {
+    name: "columns",
+    items: [
+      { label: "Insert column left", command: addColumnBefore },
+      { label: "Insert column right", command: addColumnAfter },
+      { label: "Delete column", command: deleteColumn }
+    ]
+  },
+  {
+    name: "cells",
+    items: [
+      { label: "Merge cells", command: mergeCells },
+      { label: "Split cell", command: splitCell }
+    ]
+  },
+  {
+    name: "table",
+    items: [{ label: "Delete table", command: deleteTable }]
+  }
+];
+var UNLOCK_GROUP = {
+  name: "lock",
+  items: [{ label: "Unlock", command: unlockSelection }]
+};
+function TableMenu({
+  view,
+  state,
+  anchor,
+  allowLocking = false
+}) {
+  const box = useRef(null);
+  const placement = usePanelAtPoint(box, anchor);
+  const run = commandRunner(view);
+  const close = useCallback(() => {
+    closeTableMenu(view.state, (tr) => view.dispatch(tr));
+    view.focus();
+  }, [view]);
+  useDismiss(box, true, close);
+  const keys = useMenuKeyboard({ menu: box, onClose: close });
+  const choose = (command) => {
+    if (!command(state)) return;
+    run(command);
+    close();
+  };
+  const groups = allowLocking ? [...MENU_GROUPS, UNLOCK_GROUP] : MENU_GROUPS;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      className: editorClassNames.menu,
+      role: "menu",
+      "aria-label": "Table actions",
+      ...keys,
+      style: {
+        left: placement?.left ?? anchor.clientX,
+        top: placement?.top ?? anchor.clientY,
+        visibility: placement ? void 0 : "hidden"
+      },
+      children: groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsx("hr", { className: editorClassNames.menuSeparator }),
+        group.items.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: editorClassNames.menuItem,
+            "aria-disabled": !item.command(state),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => choose(item.command),
+            children: item.label
+          },
+          item.label
+        ))
+      ] }, group.name))
+    }
+  );
+}
+export {
+  TableMenu
+};

package/dist/ui/TableSizePicker.d.ts

@@ -0,0 +1,9 @@
+/** Grid for choosing the dimensions of a table to insert. */
+import { type ReactElement } from "react";
+import type { RunCommand } from "./runCommand";
+export interface TableSizePickerProps {
+    run: RunCommand;
+    close: () => void;
+    takeFocus: boolean;
+}
+export declare function TableSizePicker({ run, close, takeFocus, }: TableSizePickerProps): ReactElement;

package/dist/ui/TableSizePicker.js

@@ -0,0 +1,53 @@
+// src/ui/TableSizePicker.tsx
+import { useRef, useState } from "react";
+import { insertTable } from "../editor/insertTable.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { useGridKeyboard } from "./useGridKeyboard.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MAX_SIDE = 6;
+var SIDES = Array.from({ length: MAX_SIDE }, (_, index) => index + 1);
+var NO_SIZE = { rows: 0, cols: 0 };
+function TableSizePicker({
+  run,
+  close,
+  takeFocus
+}) {
+  const [size, setSize] = useState(NO_SIZE);
+  const grid = useRef(null);
+  const keys = useGridKeyboard({ grid, onClose: close, takeFocus });
+  const choose = (rows, cols) => {
+    run(insertTable({ rows, columns: cols }));
+    close();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: grid,
+        className: editorClassNames.sizeGrid,
+        role: "grid",
+        "aria-label": "Table size",
+        ...keys,
+        children: SIDES.map((rows) => /* @__PURE__ */ jsx("div", { className: editorClassNames.sizeGridRow, role: "row", children: SIDES.map((cols) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "gridcell",
+            className: editorClassNames.sizeGridCell,
+            "aria-label": `${rows} by ${cols} table`,
+            "data-on": rows <= size.rows && cols <= size.cols ? "" : void 0,
+            onMouseDown: (event) => event.preventDefault(),
+            onMouseEnter: () => setSize({ rows, cols }),
+            onFocus: () => setSize({ rows, cols }),
+            onClick: () => choose(rows, cols)
+          },
+          cols
+        )) }, rows))
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: editorClassNames.sizeGridLabel, "aria-live": "polite", children: size.rows > 0 ? `${size.rows} x ${size.cols}` : "Pick a size" })
+  ] });
+}
+export {
+  TableSizePicker
+};

package/dist/ui/TextMenu.d.ts

@@ -0,0 +1,15 @@
+/** Custom text context menu with clipboard, comment, and optional locking actions. */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+import { type TextMenuAnchor } from "../editor/plugins/textContextMenu";
+export interface TextMenuProps {
+    view: EditorView;
+    state: EditorState;
+    anchor: TextMenuAnchor;
+    /** Whether the entries that lock and unlock a stretch of text are offered */
+    allowLocking?: boolean;
+    /** Opens the built-in composer for the selected text. */
+    onAddComment?: () => void;
+}
+export declare function TextMenu({ view, state, anchor, allowLocking, onAddComment, }: TextMenuProps): ReactElement;

package/dist/ui/TextMenu.js

@@ -0,0 +1,194 @@
+// src/ui/TextMenu.tsx
+import {
+  ClipboardPaste,
+  Copy,
+  Lock,
+  LockOpen,
+  MessageSquarePlus,
+  Scissors,
+  Trash2
+} from "lucide-react";
+import { deleteSelection } from "prosemirror-commands";
+import { Fragment, useCallback, useRef } from "react";
+import { canAddComment } from "../editor/commands/commentCommands.js";
+import {
+  lockSelection,
+  selectionLock,
+  selectionTouchesLocked,
+  unlockSelection
+} from "../editor/commands/lockCommands.js";
+import { insertClipboardData } from "../editor/externalClipboard.js";
+import {
+  closeTextMenu
+} from "../editor/plugins/textContextMenu.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { usePanelAtPoint } from "./panelPlacement.js";
+import { commandRunner } from "./runCommand.js";
+import { ICON_SIZE } from "./ToolbarButton.js";
+import { useDismiss } from "./useDismiss.js";
+import { useMenuKeyboard } from "./useMenuKeyboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MOD = typeof navigator !== "undefined" && navigator.platform.includes("Mac") ? "\u2318" : "Ctrl+";
+function clipboardCommand(view, command) {
+  view.focus();
+  document.execCommand(command);
+}
+async function clipboardContent() {
+  const clipboard = navigator.clipboard;
+  if (!clipboard) return { html: "", text: "" };
+  try {
+    if (clipboard.read) {
+      const items = await clipboard.read();
+      let html = "";
+      let text = "";
+      for (const item of items) {
+        if (!html && item.types.includes("text/html")) {
+          html = await (await item.getType("text/html")).text();
+        }
+        if (!text && item.types.includes("text/plain")) {
+          text = await (await item.getType("text/plain")).text();
+        }
+      }
+      if (html || text) return { html, text };
+    }
+  } catch {
+  }
+  return {
+    html: "",
+    text: await clipboard.readText().catch(() => "")
+  };
+}
+async function pasteFromClipboard(view) {
+  const content = await clipboardContent();
+  if (!content.html && !content.text) return;
+  view.focus();
+  insertClipboardData(view, content);
+}
+function lockItem(lock, run) {
+  const locking = {
+    label: "Lock",
+    icon: Lock,
+    run: () => run(lockSelection)
+  };
+  switch (lock) {
+    case "none":
+      return { ...locking, enabled: false };
+    case "lockable":
+      return { ...locking, enabled: true };
+    case "locked":
+    case "mixed":
+      return {
+        label: "Unlock",
+        icon: LockOpen,
+        enabled: true,
+        run: () => run(unlockSelection)
+      };
+  }
+}
+function TextMenu({
+  view,
+  state,
+  anchor,
+  allowLocking = false,
+  onAddComment
+}) {
+  const box = useRef(null);
+  const placement = usePanelAtPoint(box, anchor);
+  const run = commandRunner(view);
+  const close = useCallback(() => {
+    closeTextMenu(view.state, (tr) => view.dispatch(tr));
+    view.focus();
+  }, [view]);
+  useDismiss(box, true, close);
+  const keys = useMenuKeyboard({ menu: box, onClose: close });
+  const selected = !state.selection.empty;
+  const shut = selectionTouchesLocked(state);
+  const groups = [
+    [
+      {
+        label: "Cut",
+        icon: Scissors,
+        hint: `${MOD}X`,
+        enabled: selected && !shut,
+        run: () => clipboardCommand(view, "cut")
+      },
+      {
+        label: "Copy",
+        icon: Copy,
+        hint: `${MOD}C`,
+        enabled: selected,
+        run: () => clipboardCommand(view, "copy")
+      },
+      {
+        label: "Paste",
+        icon: ClipboardPaste,
+        hint: `${MOD}V`,
+        enabled: !shut,
+        run: () => {
+          void pasteFromClipboard(view);
+        }
+      },
+      {
+        label: "Delete",
+        icon: Trash2,
+        enabled: selected && !shut,
+        run: () => run(deleteSelection)
+      }
+    ]
+  ];
+  groups.push([
+    {
+      label: "Add comment",
+      icon: MessageSquarePlus,
+      enabled: !!onAddComment && canAddComment(state),
+      run: () => onAddComment?.()
+    }
+  ]);
+  if (allowLocking) groups.push([lockItem(selectionLock(state), run)]);
+  const choose = (item) => {
+    if (!item.enabled) return;
+    item.run();
+    close();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      className: editorClassNames.menu,
+      role: "menu",
+      "aria-label": "Text actions",
+      ...keys,
+      style: {
+        left: placement?.left ?? anchor.clientX,
+        top: placement?.top ?? anchor.clientY,
+        visibility: placement ? void 0 : "hidden"
+      },
+      children: groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsx("hr", { className: editorClassNames.menuSeparator }),
+        group.map((item) => {
+          const Icon = item.icon;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: editorClassNames.menuItem,
+              "aria-disabled": !item.enabled,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => choose(item),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { size: ICON_SIZE, "aria-hidden": "true" }),
+                item.label,
+                item.hint && /* @__PURE__ */ jsx("span", { className: editorClassNames.menuHint, children: item.hint })
+              ]
+            },
+            item.label
+          );
+        })
+      ] }, group[0].label))
+    }
+  );
+}
+export {
+  TextMenu
+};

package/dist/ui/Toolbar.d.ts

@@ -0,0 +1,19 @@
+/** Editor toolbar with roving focus across its enabled controls. */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+import type { FontFallbacks } from "../styles/fontStack";
+import type { DocxEditorPresets } from "./presets";
+import type { DocxEditorZoom } from "./zoom";
+export interface ToolbarProps {
+    view: EditorView;
+    state: EditorState;
+    fontFallbacks?: FontFallbacks;
+    /** Optional values offered by toolbar pickers. */
+    presets?: DocxEditorPresets;
+    onToggleComments?: () => void;
+    commentsOpen?: boolean;
+    zoom: DocxEditorZoom;
+    onZoomChange: (zoom: DocxEditorZoom) => void;
+}
+export declare function Toolbar({ view, state, fontFallbacks, presets, onToggleComments, commentsOpen, zoom, onZoomChange, }: ToolbarProps): ReactElement;