@portone/docx-editor 0.1.0

package/dist/ui/InsertImageButton.js

@@ -0,0 +1,47 @@
+// src/ui/InsertImageButton.tsx
+import { Image } from "lucide-react";
+import { useRef } from "react";
+import {
+  IMAGE_FILE_ACCEPT,
+  imageFilesIn,
+  insertImageFiles
+} from "../editor/imageFiles.js";
+import { canInsertImage } from "../editor/insertImage.js";
+import { ToolbarButton } from "./ToolbarButton.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function InsertImageButton({
+  view,
+  state
+}) {
+  const pickerRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        label: "Insert image",
+        icon: Image,
+        disabled: !view.editable || !canInsertImage(state),
+        onRun: () => pickerRef.current?.click()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: pickerRef,
+        type: "file",
+        accept: IMAGE_FILE_ACCEPT,
+        hidden: true,
+        onChange: async (event) => {
+          const picker = event.currentTarget;
+          const files = imageFilesIn(picker);
+          picker.value = "";
+          await insertImageFiles(view, files);
+          if (!view.isDestroyed) view.focus();
+        }
+      }
+    )
+  ] });
+}
+export {
+  InsertImageButton
+};

package/dist/ui/LinkCard.d.ts

@@ -0,0 +1,12 @@
+/** Shows the destination and available actions for the link under the selection. */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+import { type ActiveLinkSpan } from "../editor/commands/linkCommands";
+export interface LinkCardProps {
+    view: EditorView;
+    state: EditorState;
+    link: ActiveLinkSpan;
+    readOnly?: boolean;
+}
+export declare function LinkCard({ view, state, link, readOnly, }: LinkCardProps): ReactElement | null;

package/dist/ui/LinkCard.js

@@ -0,0 +1,127 @@
+// src/ui/LinkCard.tsx
+import { ExternalLink, Link2Off, Pencil } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  removeLink
+} from "../editor/commands/linkCommands.js";
+import { openLinkPanel } from "../editor/plugins/linkPanel.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { openAddress, openable } from "./openAddress.js";
+import {
+  pointBelowPos,
+  usePanelAtPoint
+} from "./panelPlacement.js";
+import { commandRunner } from "./runCommand.js";
+import { ICON_SIZE } from "./ToolbarButton.js";
+import { Tooltip, tooltipAttribute } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useLinkPoint(view, at) {
+  const [point, setPoint] = useState(() => pointBelowPos(view, at));
+  useEffect(() => {
+    const measure = () => setPoint((was) => {
+      const now = pointBelowPos(view, at);
+      return was.clientX === now.clientX && was.clientY === now.clientY ? was : now;
+    });
+    measure();
+    document.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      document.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [view, at]);
+  return point;
+}
+function useEscape(onEscape) {
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onEscape();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [onEscape]);
+}
+function LinkCard({
+  view,
+  state,
+  link,
+  readOnly = false
+}) {
+  const box = useRef(null);
+  const [hidden, setHidden] = useState(false);
+  const placement = usePanelAtPoint(box, useLinkPoint(view, link.from));
+  const run = commandRunner(view);
+  const hide = useCallback(() => {
+    if (box.current?.contains(document.activeElement)) view.focus();
+    setHidden(true);
+  }, [view]);
+  useEscape(hide);
+  if (hidden) return null;
+  const href = link.href;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: box,
+      className: editorClassNames.linkCard,
+      role: "group",
+      "aria-label": "Link",
+      style: {
+        left: placement?.left,
+        top: placement?.top,
+        // Hide until the card has been measured.
+        visibility: placement ? void 0 : "hidden"
+      },
+      children: [
+        href === null ? /* @__PURE__ */ jsx("span", { className: editorClassNames.linkCardNote, children: "This link points at a place in the document rather than at an address." }) : (
+          // Keep the tooltip outside the address's clipped overflow.
+          /* @__PURE__ */ jsx(Tooltip, { label: href, children: /* @__PURE__ */ jsx("span", { className: editorClassNames.linkCardAddress, children: href }) })
+        ),
+        href !== null && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: editorClassNames.toolbarButton,
+            disabled: !openable(href),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => openAddress(href),
+            "aria-label": "Open",
+            ...tooltipAttribute("Open"),
+            children: /* @__PURE__ */ jsx(ExternalLink, { size: ICON_SIZE, "aria-hidden": "true" })
+          }
+        ),
+        !readOnly && openLinkPanel(state) && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: editorClassNames.toolbarButton,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => run(openLinkPanel),
+            "aria-label": "Edit",
+            ...tooltipAttribute("Edit"),
+            children: /* @__PURE__ */ jsx(Pencil, { size: ICON_SIZE, "aria-hidden": "true" })
+          }
+        ),
+        !readOnly && removeLink(state) && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: editorClassNames.toolbarButton,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => run(removeLink),
+            "aria-label": "Remove",
+            ...tooltipAttribute("Remove"),
+            children: /* @__PURE__ */ jsx(Link2Off, { size: ICON_SIZE, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LinkCard
+};

package/dist/ui/LinkPanel.d.ts

@@ -0,0 +1,9 @@
+/** Edits or removes the link on the current selection. */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+export interface LinkPanelProps {
+    view: EditorView;
+    state: EditorState;
+}
+export declare function LinkPanel({ view, state }: LinkPanelProps): ReactElement;

package/dist/ui/LinkPanel.js

@@ -0,0 +1,121 @@
+// src/ui/LinkPanel.tsx
+import { Check, Link2 } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  activeLink,
+  removeLink,
+  setLink
+} from "../editor/commands/linkCommands.js";
+import { closeLinkPanel } from "../editor/plugins/linkPanel.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { pointBelowPos, usePanelAtPoint } from "./panelPlacement.js";
+import { commandRunner } from "./runCommand.js";
+import { ICON_SIZE } from "./ToolbarButton.js";
+import { tooltipAttribute } from "./Tooltip.js";
+import { useDismiss } from "./useDismiss.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FOCUSABLE = "input,button:not(:disabled)";
+function LinkPanel({ view, state }) {
+  const box = useRef(null);
+  const field = useRef(null);
+  const current = activeLink(state);
+  const [address, setAddress] = useState(current ?? "");
+  const placement = usePanelAtPoint(
+    box,
+    pointBelowPos(view, state.selection.head)
+  );
+  const run = commandRunner(view);
+  const close = useCallback(() => {
+    closeLinkPanel(view.state, (tr) => view.dispatch(tr));
+    view.focus();
+  }, [view]);
+  useDismiss(box, true, close);
+  useEffect(() => {
+    const input = field.current;
+    if (!input || !placement || input === document.activeElement) return;
+    input.focus({ preventScroll: true });
+    input.select();
+  }, [placement]);
+  const emptied = address.trim() === "";
+  const applies = emptied ? removeLink(state) : setLink(address)(state);
+  const apply = () => {
+    run(emptied ? removeLink : setLink(address));
+    close();
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Tab") return;
+    const controls = Array.from(
+      box.current?.querySelectorAll(FOCUSABLE) ?? []
+    );
+    if (controls.length === 0) return;
+    const at = controls.findIndex(
+      (control) => control === document.activeElement
+    );
+    const step = event.shiftKey ? -1 : 1;
+    const next = controls[(at + step + controls.length) % controls.length];
+    next.focus();
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      className: editorClassNames.linkPanel,
+      role: "dialog",
+      "aria-label": "Link",
+      onKeyDown,
+      style: {
+        left: placement?.left,
+        top: placement?.top,
+        // Hide until the dialog has been measured.
+        visibility: placement ? void 0 : "hidden"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: editorClassNames.linkPanelRow, children: [
+        /* @__PURE__ */ jsx(
+          Link2,
+          {
+            size: ICON_SIZE,
+            "aria-hidden": "true",
+            className: editorClassNames.linkPanelIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: field,
+            type: "text",
+            className: editorClassNames.linkAddress,
+            "aria-label": "Address",
+            value: address,
+            onChange: (event) => setAddress(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key !== "Enter") return;
+              event.preventDefault();
+              apply();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: editorClassNames.toolbarButton,
+            disabled: !applies,
+            onClick: apply,
+            "aria-label": "Apply",
+            ...tooltipAttribute("Apply"),
+            children: /* @__PURE__ */ jsx(Check, { size: ICON_SIZE, "aria-hidden": "true" })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  LinkPanel
+};

package/dist/ui/MenuChoice.d.ts

@@ -0,0 +1,11 @@
+/** Choice row with a fixed check slot for stable label alignment. */
+import { type LucideIcon } from "lucide-react";
+import type { ReactElement } from "react";
+export interface MenuChoiceProps {
+    label: string;
+    icon?: LucideIcon;
+    role: "menuitemradio" | "menuitemcheckbox";
+    checked: boolean;
+    onChoose: () => void;
+}
+export declare function MenuChoice({ label, icon: Icon, role, checked, onChoose, }: MenuChoiceProps): ReactElement;

package/dist/ui/MenuChoice.js

@@ -0,0 +1,32 @@
+// src/ui/MenuChoice.tsx
+import { Check } from "lucide-react";
+import { editorClassNames } from "../styles/classNames.js";
+import { ICON_SIZE } from "./ToolbarButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MenuChoice({
+  label,
+  icon: Icon,
+  role,
+  checked,
+  onChoose
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role,
+      className: editorClassNames.menuItem,
+      "aria-checked": checked,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: onChoose,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: editorClassNames.menuCheck, children: checked && /* @__PURE__ */ jsx(Check, { size: ICON_SIZE, "aria-hidden": "true" }) }),
+        Icon && /* @__PURE__ */ jsx(Icon, { size: ICON_SIZE, "aria-hidden": "true" }),
+        label
+      ]
+    }
+  );
+}
+export {
+  MenuChoice
+};

package/dist/ui/NotesPanel.d.ts

@@ -0,0 +1,6 @@
+import type { EditorState } from "prosemirror-state";
+import type { ReactElement } from "react";
+export declare function NotesPanel({ state, pageWidth, }: {
+    state: EditorState;
+    pageWidth: number;
+}): ReactElement | null;

package/dist/ui/NotesPanel.js

@@ -0,0 +1,33 @@
+// src/ui/NotesPanel.tsx
+import { documentNotes } from "../editor/commands/noteQueries.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NotesPanel({
+  state,
+  pageWidth
+}) {
+  const notes = documentNotes(state);
+  if (notes.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: editorClassNames.notesPanel,
+      "aria-label": "Document notes",
+      style: { width: `${pageWidth}px` },
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: editorClassNames.notesHeading, children: "Footnotes and endnotes" }),
+        /* @__PURE__ */ jsx("ol", { className: editorClassNames.notesList, children: notes.map((note) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsxs("span", { className: editorClassNames.noteLabel, children: [
+            note.kind === "footnote" ? "Footnote" : "Endnote",
+            " ",
+            note.label
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: editorClassNames.noteBody, children: note.text })
+        ] }, `${note.kind}:${note.id}`)) })
+      ]
+    }
+  );
+}
+export {
+  NotesPanel
+};

package/dist/ui/ParagraphStyleSelect.d.ts

@@ -0,0 +1,11 @@
+/** Selects document-defined paragraph styles and clears explicit styles through the default entry. */
+import type { ReactElement } from "react";
+import type { ParagraphStyleOption } from "../docx/formatting";
+import { type ActiveParagraphStyle } from "../editor/commands/paragraphCommands";
+import type { RunCommand } from "./runCommand";
+export interface ParagraphStyleSelectProps {
+    current: ActiveParagraphStyle;
+    styles: readonly ParagraphStyleOption[];
+    run: RunCommand;
+}
+export declare function ParagraphStyleSelect({ current, styles, run, }: ParagraphStyleSelectProps): ReactElement;

package/dist/ui/ParagraphStyleSelect.js

@@ -0,0 +1,62 @@
+// src/ui/ParagraphStyleSelect.tsx
+import {
+  setParagraphStyle
+} from "../editor/commands/paragraphCommands.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { Tooltip } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LABEL = "Style";
+var CLEAR = "default";
+var BLANK = "";
+var ID_PREFIX = "id:";
+var styleValue = (id) => `${ID_PREFIX}${id}`;
+function defaultName(styles) {
+  return styles.find((style) => style.isDefault)?.name ?? "Normal";
+}
+function namedStyles(styles) {
+  return styles.filter(
+    (style) => !style.isDefault && style.primary && !style.hidden
+  );
+}
+function selectedValue(styles, current) {
+  if (current.kind !== "shared") return BLANK;
+  if (current.styleId === null) return CLEAR;
+  const named = styles.find((style) => style.id === current.styleId);
+  if (!named || named.hidden || !named.isDefault && !named.primary) {
+    return BLANK;
+  }
+  return named?.isDefault ? CLEAR : styleValue(current.styleId);
+}
+function ParagraphStyleSelect({
+  current,
+  styles,
+  run
+}) {
+  const value = selectedValue(styles, current);
+  return /* @__PURE__ */ jsx(Tooltip, { label: LABEL, children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: editorClassNames.toolbarSelect,
+      "aria-label": LABEL,
+      value,
+      disabled: current.kind === "none",
+      onChange: (event) => {
+        const chosen = event.target.value;
+        if (chosen === BLANK) return;
+        run(
+          setParagraphStyle(
+            chosen === CLEAR ? null : chosen.slice(ID_PREFIX.length)
+          )
+        );
+      },
+      children: [
+        value === BLANK && /* @__PURE__ */ jsx("option", { value: BLANK }),
+        /* @__PURE__ */ jsx("option", { value: CLEAR, children: defaultName(styles) }),
+        namedStyles(styles).map((style) => /* @__PURE__ */ jsx("option", { value: styleValue(style.id), children: style.name }, style.id))
+      ]
+    }
+  ) });
+}
+export {
+  ParagraphStyleSelect
+};

package/dist/ui/Popover.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Toolbar-button popover. Keyboard activation moves focus inside and restores it on close;
+ * pointer activation leaves the current focus unchanged.
+ */
+import type { LucideIcon } from "lucide-react";
+import { type ReactElement, type ReactNode } from "react";
+/** Menus provide their own role; dialogs use the popover wrapper. */
+export type PopoverPanel = "menu" | "dialog";
+export interface PanelHandle {
+    close: () => void;
+    /** Whether keyboard activation requested focus inside the panel. */
+    takeFocus: boolean;
+}
+export interface PopoverProps {
+    label: string;
+    icon: LucideIcon;
+    indicatorColor?: string;
+    panel: PopoverPanel;
+    disabled?: boolean;
+    children: (handle: PanelHandle) => ReactNode;
+}
+export declare function Popover({ label, icon, indicatorColor, panel: kind, disabled, children, }: PopoverProps): ReactElement;

package/dist/ui/Popover.js

@@ -0,0 +1,74 @@
+// src/ui/Popover.tsx
+import {
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import { editorClassNames } from "../styles/classNames.js";
+import { usePanelUnderControl } from "./panelPlacement.js";
+import { ToolbarButton } from "./ToolbarButton.js";
+import { useDismiss } from "./useDismiss.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Popover({
+  label,
+  icon,
+  indicatorColor,
+  panel: kind,
+  disabled,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const box = useRef(null);
+  const button = useRef(null);
+  const panel = useRef(null);
+  const holdsFocus = useRef(false);
+  const close = useCallback(() => {
+    setOpen(false);
+    if (holdsFocus.current) button.current?.focus({ preventScroll: true });
+    holdsFocus.current = false;
+  }, []);
+  useDismiss(box, open, close);
+  const position = usePanelUnderControl(panel, button, open);
+  const toggle = (source) => {
+    if (open) {
+      close();
+      return;
+    }
+    holdsFocus.current = source === "keyboard";
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: editorClassNames.popoverBox, ref: box, children: [
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        ref: button,
+        label,
+        icon,
+        indicatorColor,
+        popup: kind,
+        expanded: open,
+        disabled,
+        onRun: toggle
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panel,
+        className: editorClassNames.popover,
+        role: kind === "dialog" ? "dialog" : void 0,
+        "aria-label": kind === "dialog" ? label : void 0,
+        style: {
+          left: position?.left,
+          top: position?.top,
+          // Hide until the panel has been measured.
+          visibility: position ? void 0 : "hidden"
+        },
+        children: children({ close, takeFocus: holdsFocus.current })
+      }
+    )
+  ] });
+}
+export {
+  Popover
+};

package/dist/ui/SpacingMenu.d.ts

@@ -0,0 +1,12 @@
+import type { EditorState } from "prosemirror-state";
+import { type ReactElement } from "react";
+import { type LineSpacingOption } from "../styles/lineSpacings";
+import type { RunCommand } from "./runCommand";
+export interface SpacingMenuProps {
+    state: EditorState;
+    lineSpacings?: readonly LineSpacingOption[];
+    run: RunCommand;
+    close: () => void;
+    takeFocus: boolean;
+}
+export declare function SpacingMenu({ state, lineSpacings, run, close, takeFocus, }: SpacingMenuProps): ReactElement;

package/dist/ui/SpacingMenu.js

@@ -0,0 +1,54 @@
+// src/ui/SpacingMenu.tsx
+import { useRef } from "react";
+import {
+  activeLineSpacing,
+  setLineSpacing
+} from "../editor/commands/spacingCommands.js";
+import { editorClassNames } from "../styles/classNames.js";
+import {
+  DEFAULT_LINE_SPACINGS
+} from "../styles/lineSpacings.js";
+import { MenuChoice } from "./MenuChoice.js";
+import { useMenuKeyboard } from "./useMenuKeyboard.js";
+import { jsx } from "react/jsx-runtime";
+function isCurrentChoice(current, { spacing }) {
+  return current?.rule === "auto" && spacing.rule === "auto" && current.lines === spacing.lines;
+}
+function SpacingMenu({
+  state,
+  lineSpacings = DEFAULT_LINE_SPACINGS,
+  run,
+  close,
+  takeFocus
+}) {
+  const current = activeLineSpacing(state);
+  const menu = useRef(null);
+  const keys = useMenuKeyboard({ menu, onClose: close, takeFocus });
+  const choose = (command) => {
+    run(command);
+    close();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menu,
+      className: editorClassNames.menuList,
+      role: "menu",
+      "aria-label": "Line and paragraph spacing",
+      ...keys,
+      children: lineSpacings.map((option) => /* @__PURE__ */ jsx(
+        MenuChoice,
+        {
+          label: option.label,
+          role: "menuitemradio",
+          checked: isCurrentChoice(current, option),
+          onChoose: () => choose(setLineSpacing(option.spacing))
+        },
+        option.label
+      ))
+    }
+  );
+}
+export {
+  SpacingMenu
+};

package/dist/ui/TableMenu.d.ts

@@ -0,0 +1,12 @@
+/** Table context menu with an optional Unlock action for whole-cell locks. */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+import { type TableMenuAnchor } from "../editor/plugins/tableContextMenu";
+export interface TableMenuProps {
+    view: EditorView;
+    state: EditorState;
+    anchor: TableMenuAnchor;
+    allowLocking?: boolean;
+}
+export declare function TableMenu({ view, state, anchor, allowLocking, }: TableMenuProps): ReactElement;