@portone/docx-editor 0.6.0 → 0.6.1

package/dist/ui/Toolbar.d.ts

@@ -2,12 +2,27 @@
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import { type ReactElement } from "react";
+import type { ActiveSurface } from "../editor/stories/storyView";
 import type { FontFallbacks } from "../styles/fontStack";
 import type { DocxEditorPresets } from "./presets";
 import type { DocxEditorZoom } from "./zoom";
-export interface ToolbarProps {
+/** One editing surface the toolbar can act on: the document's own, or a story's */
+export interface ToolbarSurface {
     view: EditorView;
     state: EditorState;
+}
+export interface ToolbarProps {
+    /**
+     * The document itself, which undo and redo always read: a story edit is written into the
+     * document as one change, so the document's history is the one both surfaces share
+     * (`editor/stories`).
+     */
+    main: ToolbarSurface;
+    /**
+     * Where the caret is. Everything but undo and redo is asked of it and dispatched to it, so the
+     * formatting controls act on the note being edited rather than on the text behind it.
+     */
+    active: ActiveSurface;
     fontFallbacks?: FontFallbacks;
     /** Optional values offered by toolbar pickers. */
     presets?: DocxEditorPresets;
@@ -16,4 +31,4 @@ export interface ToolbarProps {
     zoom: DocxEditorZoom;
     onZoomChange: (zoom: DocxEditorZoom) => void;
 }
-export declare function Toolbar({ view, state, fontFallbacks, presets, onToggleComments, commentsOpen, zoom, onZoomChange, }: ToolbarProps): ReactElement;
+export declare function Toolbar({ main, active, fontFallbacks, presets, onToggleComments, commentsOpen, zoom, onZoomChange, }: ToolbarProps): ReactElement;

package/dist/ui/Toolbar.js

@@ -272,7 +272,11 @@ function ParagraphLayoutGroup({
     )
   ] });
 }
-function ListGroup({ state, run }) {
+function ListGroup({
+  state,
+  run,
+  disabled
+}) {
   const kind = activeListKind(state);
   return /* @__PURE__ */ jsx("div", { className: editorClassNames.toolbarGroup, children: LIST_TOGGLES.map((toggle) => /* @__PURE__ */ jsx(
     ToolbarButton,
@@ -280,7 +284,7 @@ function ListGroup({ state, run }) {
       label: toggle.label,
       icon: toggle.icon,
       pressed: kind === toggle.kind,
-      disabled: !toggle.command(state),
+      disabled: disabled || !toggle.command(state),
       onRun: () => run(toggle.command)
     },
     toggle.kind
@@ -299,8 +303,8 @@ function IndentGroup({ state, run }) {
   )) });
 }
 function Toolbar({
-  view,
-  state,
+  main,
+  active,
   fontFallbacks,
   presets,
   onToggleComments,
@@ -308,7 +312,9 @@ function Toolbar({
   zoom,
   onZoomChange
 }) {
+  const { view, state, takes } = active;
   const run = commandRunner(view);
+  const runOnMain = commandRunner(main.view, view);
   const bar = useRef(null);
   const keys = useLinearWalk({
     container: bar,
@@ -340,7 +346,7 @@ function Toolbar({
       onKeyDown,
       ...hushedAttribute(hushed),
       children: [
-        /* @__PURE__ */ jsx(HistoryGroup, { state, run }),
+        /* @__PURE__ */ jsx(HistoryGroup, { state: main.state, run: runOnMain }),
         /* @__PURE__ */ jsx(ZoomSelect, { zoom, onZoomChange }),
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
@@ -394,7 +400,7 @@ function Toolbar({
           }
         ),
         /* @__PURE__ */ jsx(Separator, {}),
-        /* @__PURE__ */ jsx(ListGroup, { state, run }),
+        /* @__PURE__ */ jsx(ListGroup, { state, run, disabled: !takes.has("list") }),
         /* @__PURE__ */ jsx(IndentGroup, { state, run }),
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx(
@@ -414,17 +420,24 @@ function Toolbar({
               label: "Insert table",
               icon: Table,
               panel: "dialog",
-              disabled: !canInsertTable(state),
+              disabled: !takes.has("table") || !canInsertTable(state),
               children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(TableSizePicker, { run, close, takeFocus })
             }
           ),
-          /* @__PURE__ */ jsx(InsertImageButton, { view, state }),
+          /* @__PURE__ */ jsx(
+            InsertImageButton,
+            {
+              view,
+              state,
+              disabled: !takes.has("image")
+            }
+          ),
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
               label: "Link",
               icon: Link,
-              disabled: !openLinkPanel(state),
+              disabled: !takes.has("link") || !openLinkPanel(state),
               onRun: () => run(openLinkPanel)
             }
           ),
@@ -434,7 +447,7 @@ function Toolbar({
               label: commentsOpen ? "Hide comments" : "Show comments",
               icon: MessagesSquare,
               pressed: commentsOpen,
-              disabled: !onToggleComments,
+              disabled: !takes.has("comment") || !onToggleComments,
               onRun: () => onToggleComments?.()
             }
           )

package/dist/ui/comments/useCommentRailLayout.js

@@ -1,6 +1,7 @@
 // src/ui/comments/useCommentRailLayout.ts
 import { useLayoutEffect, useRef, useState } from "react";
 import { editorClassNames } from "../../styles/classNames.js";
+import { visualScaleOf } from "../../styles/visualScale.js";
 var COMPOSER_POSITION = "composer";
 var VERTICAL_SCROLLBAR_CLEARANCE = 16;
 function estimatedCardHeight(comment) {
@@ -90,10 +91,7 @@ function useCommentRailLayout({
     const reserveCommentWidth = () => {
       if (!pageLayer) return;
       const drawnWidth = rail.getBoundingClientRect().width || rail.offsetWidth;
-      const computedZoom = Number.parseFloat(
-        frameWindow?.getComputedStyle(pageLayer).zoom ?? ""
-      );
-      const scale = Number.isFinite(computedZoom) && computedZoom > 0 ? computedZoom : 1;
+      const scale = visualScaleOf(pageLayer);
       pageLayer.style.paddingRight = `${(drawnWidth + 16 + VERTICAL_SCROLLBAR_CLEARANCE) / scale}px`;
     };
     const placeBesidePaper = () => {

package/dist/ui/noteItems.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The controls that put a note in, which every menu over the text draws its rows from.
+ *
+ * A right click is answered by one of two menus - the text menu, and the table menu wherever the
+ * click lands in a cell with nothing selected (`editor/plugins/textContextMenu`) - and a note goes
+ * into a table cell as readily as into a paragraph, so each row is written down once here. The
+ * command asked without a dispatch is what each menu draws a dead row from, and whether the rows
+ * are there at all is the surface's own declaration (`editor/stories/storyView`).
+ */
+import type { LucideIcon } from "lucide-react";
+import type { Command } from "prosemirror-state";
+import type { SurfaceCapabilities } from "../editor/stories/storyView";
+export interface NoteItem {
+    readonly label: string;
+    readonly icon: LucideIcon;
+    /** The shortcut for the same action, for a menu that labels its rows with theirs */
+    readonly hint: string;
+    readonly command: Command;
+}
+/** The rows a menu draws, and none for a surface that takes no note */
+export declare function noteItems(takes: SurfaceCapabilities): readonly NoteItem[];

package/dist/ui/noteItems.js

@@ -0,0 +1,30 @@
+// src/ui/noteItems.ts
+import { ListEnd, Superscript } from "lucide-react";
+import { insertEndnote, insertFootnote } from "../editor/commands/noteCommands.js";
+import { NOTE_KEYS } from "../editor/plugins/keymap.js";
+import { modifierLabels } from "./shortcutLabels.js";
+function keyLetter(binding) {
+  return (binding.split("-").at(-1) ?? "").toUpperCase();
+}
+var NO_ITEMS = [];
+function noteItems(takes) {
+  if (!takes.has("note")) return NO_ITEMS;
+  const { mod, alt } = modifierLabels();
+  return [
+    {
+      label: "Insert footnote",
+      icon: Superscript,
+      hint: `${mod}${alt}${keyLetter(NOTE_KEYS.footnote)}`,
+      command: insertFootnote
+    },
+    {
+      label: "Insert endnote",
+      icon: ListEnd,
+      hint: `${mod}${alt}${keyLetter(NOTE_KEYS.endnote)}`,
+      command: insertEndnote
+    }
+  ];
+}
+export {
+  noteItems
+};

package/dist/ui/notes/NoteAreas.d.ts

@@ -0,0 +1,73 @@
+/**
+ * The notes drawn over the paper, in the room the page layout kept for them.
+ *
+ * One component draws both kinds, since they differ only in where a page's room comes from, what
+ * the area is called, its class, whether the rule above the notes is drawn on that page, and what
+ * is drawn in it; the layer over the sheet, the row that takes its room before it is measured, the
+ * one editing view and the press that opens a note hold for both.
+ *
+ * Each area is given the height the layout kept, so one asking for more room than the page had
+ * left scrolls inside it.
+ */
+import type { CSSProperties, ReactElement } from "react";
+import type { NoteRow } from "../../editor/commands/noteQueries";
+import type { PageOverlay } from "../../page/usePageLayout";
+import { type StoryKey } from "../../schema/stories";
+import type { FontFallbacks } from "../../styles/fontStack";
+import { type NoteHeightReport, type RowEditing } from "./StoryRow";
+/** The room one page keeps for notes, as the notes drawn in it are placed and named */
+export interface NoteArea {
+    readonly page: number;
+    /** What assistive technology calls the area */
+    readonly name: string;
+    /** What the page keeps there, by story key, in the order the layout laid them */
+    readonly ids: readonly string[];
+    readonly top: number;
+    readonly left: number;
+    readonly width: number;
+    readonly height: number;
+    /** Whether the notes ask for more room than the page had left, so the area scrolls them */
+    readonly scrolls: boolean;
+    /** Whether the rule the notes are set under is drawn above this page's */
+    readonly rule: boolean;
+}
+/** The rooms each page keeps for its footnotes, which every page holding one is given */
+export declare function footnoteAreasOf(overlay: PageOverlay): readonly NoteArea[];
+/**
+ * The rooms the endnotes take after the last paragraph of the document.
+ *
+ * They are one run of notes rather than a page's own, so the rule is drawn once, above the page
+ * they begin on.
+ */
+export declare function endnoteAreasOf(overlay: PageOverlay): readonly NoteArea[];
+export interface NoteAreasProps {
+    /** Where the pages stand, which is the box the areas are placed inside */
+    readonly overlay: PageOverlay;
+    readonly areas: readonly NoteArea[];
+    /** The class each area carries, which is what tells the two kinds apart on the screen */
+    readonly areaClassName: string;
+    /** The notes these areas draw, by story key, which is what the layout laid out by id */
+    readonly rows: ReadonlyMap<string, NoteRow>;
+    readonly heights: ReadonlyMap<StoryKey, number>;
+    readonly onHeight: NoteHeightReport;
+    readonly fontFallbacks: FontFallbacks;
+    /** How the document sets its text, which the sheet's own box does not pass down to these */
+    readonly textStyle: CSSProperties;
+    readonly zoom: number;
+    /** The note the caret is in, which is the one row an editing view stands over */
+    readonly open?: StoryKey | null;
+    /** What mounts that view. Null while no note is open */
+    readonly editing?: RowEditing | null;
+    /** Whether the open note stands where nothing may be edited */
+    readonly readOnly?: boolean;
+    /** A value that differs every time the main document changes, which the open row syncs on */
+    readonly revision?: unknown;
+    /** Called for a press on a note no view stands over yet */
+    readonly onOpen?: (key: StoryKey, at: {
+        left: number;
+        top: number;
+    }) => void;
+    /** Called for a press on the number a note is drawn by, which is the way back to its reference */
+    readonly onReturn?: (key: StoryKey) => void;
+}
+export declare function NoteAreas({ overlay, areas, areaClassName, rows, heights, onHeight, fontFallbacks, textStyle, zoom, open, editing, readOnly, revision, onOpen, onReturn, }: NoteAreasProps): ReactElement;

package/dist/ui/notes/NoteAreas.js

@@ -0,0 +1,131 @@
+// src/ui/notes/NoteAreas.tsx
+import { FOOTNOTE_BAND } from "../../page/demands/footnoteDemands.js";
+import { noteName } from "../../schema/stories.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import { NOTE_SEPARATOR_HEIGHT, noteSeparatorWidth } from "./noteSeparator.js";
+import { StoryRow } from "./StoryRow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function footnoteAreasOf(overlay) {
+  return overlay.pages.flatMap(
+    (page) => page.reserved.filter((room) => room.band === FOOTNOTE_BAND).map((room) => ({
+      page: page.page,
+      name: `Footnotes on page ${page.page}`,
+      ids: room.ids,
+      top: room.top,
+      left: page.left,
+      width: page.width,
+      height: room.height,
+      scrolls: room.clipped,
+      // A page's footnotes are set under a rule of their own, wherever they stand
+      rule: true
+    }))
+  );
+}
+function endnoteAreasOf(overlay) {
+  const opening = overlay.pages.find((page) => page.trailing !== null)?.page;
+  return overlay.pages.flatMap((page) => {
+    const room = page.trailing;
+    return room === null ? [] : [
+      {
+        page: page.page,
+        name: `Endnotes on page ${page.page}`,
+        ids: room.ids,
+        top: room.top,
+        left: page.left,
+        width: page.width,
+        height: room.height,
+        scrolls: room.clipped,
+        rule: page.page === opening
+      }
+    ];
+  });
+}
+function NoteAreas({
+  overlay,
+  areas,
+  areaClassName,
+  rows,
+  heights,
+  onHeight,
+  fontFallbacks,
+  textStyle,
+  zoom,
+  open = null,
+  editing = null,
+  readOnly = false,
+  revision,
+  onOpen,
+  onReturn
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: editorClassNames.noteAreas,
+      style: {
+        left: `${overlay.left}px`,
+        top: `${overlay.top}px`,
+        width: `${overlay.width}px`,
+        height: `${overlay.sheetHeight}px`
+      },
+      children: areas.map((area) => /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: areaClassName,
+          "aria-label": area.name,
+          style: {
+            ...textStyle,
+            top: `${area.top}px`,
+            left: `${area.left}px`,
+            width: `${area.width}px`,
+            height: `${area.height}px`,
+            overflowY: area.scrolls ? "auto" : "hidden"
+          },
+          children: [
+            area.rule && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: editorClassNames.noteSeparator,
+                style: {
+                  height: `${NOTE_SEPARATOR_HEIGHT}px`,
+                  width: `${noteSeparatorWidth(area.width)}px`
+                }
+              }
+            ),
+            area.ids.flatMap((id) => {
+              const row = rows.get(id);
+              if (row === void 0) return [];
+              const entered = row.key === open;
+              return [
+                /* @__PURE__ */ jsx(
+                  StoryRow,
+                  {
+                    noteKey: row.key,
+                    story: row.story,
+                    label: row.label,
+                    name: noteName(row.kind, row.label),
+                    fontFallbacks,
+                    hidden: !entered && !heights.has(row.key),
+                    onHeight,
+                    zoom,
+                    editing: entered ? editing : null,
+                    readOnly,
+                    revision: entered ? revision : void 0,
+                    onPress: onOpen === void 0 ? void 0 : (at) => onOpen(row.key, at),
+                    onReturn: onReturn === void 0 ? void 0 : () => onReturn(row.key)
+                  },
+                  row.key
+                )
+              ];
+            })
+          ]
+        },
+        area.page
+      ))
+    }
+  );
+}
+export {
+  NoteAreas,
+  endnoteAreasOf,
+  footnoteAreasOf
+};

package/dist/ui/notes/NoteList.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The notes listed under the sheet while no page has kept room for them: the footnotes ahead of
+ * the endnotes, the order they are called in.
+ *
+ * A note stands where its own page keeps room for it (`./NoteAreas`), which needs a page that has
+ * been laid out: the guides may be off, or the first frame may not have been measured yet. Until
+ * then they are listed here, where none of them is edited in place.
+ *
+ * Each note is drawn from its story (`./StoryRow`) across the width the body is set at, so a note
+ * wraps here where it would on the page.
+ */
+import type { CSSProperties, ReactElement } from "react";
+import type { NoteRow } from "../../editor/commands/noteQueries";
+import type { PagePixels } from "../../page/pageLayout";
+import type { FontFallbacks } from "../../styles/fontStack";
+export interface NoteListProps {
+    readonly footnotes: readonly NoteRow[];
+    readonly endnotes: readonly NoteRow[];
+    /** The paper the first section is drawn on, which the list is as wide as */
+    readonly page: PagePixels;
+    readonly fontFallbacks: FontFallbacks;
+    /** How the document sets its text, which the sheet's own box does not pass down to this */
+    readonly textStyle: CSSProperties;
+}
+export declare function NoteList({ footnotes, endnotes, page, fontFallbacks, textStyle, }: NoteListProps): ReactElement | null;

package/dist/ui/notes/NoteList.js

@@ -0,0 +1,58 @@
+// src/ui/notes/NoteList.tsx
+import { noteName } from "../../schema/stories.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import { NOTE_SEPARATOR_HEIGHT, noteSeparatorWidth } from "./noteSeparator.js";
+import { StoryRow } from "./StoryRow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function listName(footnotes, endnotes) {
+  if (footnotes && endnotes) return "Footnotes and endnotes";
+  return footnotes ? "Footnotes" : "Endnotes";
+}
+function NoteList({
+  footnotes,
+  endnotes,
+  page,
+  fontFallbacks,
+  textStyle
+}) {
+  if (footnotes.length === 0 && endnotes.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: editorClassNames.noteList,
+      "aria-label": listName(footnotes.length > 0, endnotes.length > 0),
+      style: {
+        ...textStyle,
+        width: `${page.pageWidth}px`,
+        paddingLeft: `${page.marginLeft}px`,
+        paddingRight: `${page.marginRight}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: editorClassNames.noteSeparator,
+            style: {
+              height: `${NOTE_SEPARATOR_HEIGHT}px`,
+              width: `${noteSeparatorWidth(page.bodyWidth)}px`
+            }
+          }
+        ),
+        [...footnotes, ...endnotes].map((row) => /* @__PURE__ */ jsx(
+          StoryRow,
+          {
+            noteKey: row.key,
+            story: row.story,
+            label: row.label,
+            name: noteName(row.kind, row.label),
+            fontFallbacks
+          },
+          row.key
+        ))
+      ]
+    }
+  );
+}
+export {
+  NoteList
+};

package/dist/ui/notes/StoryRow.d.ts

@@ -0,0 +1,75 @@
+/**
+ * One note drawn from its story: as markup no editor view stands behind (`editor/stories`), and as
+ * the one editing view while the caret is in it.
+ *
+ * A row is mounted again whenever its note moves to another page, and a story no edit touched is
+ * the same node afterwards (`schema/stories`), so the markup is kept against the story node rather
+ * than against the row: only a note whose story or label changed is drawn again.
+ *
+ * A row carrying the editing view is mounted again by such a move too, so where the caret stood is
+ * handed over in `editing.caret` and the view opens there. The page is not laid out again while
+ * that view is composing (`DocxEditor`), so a move never reaches an open composition.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import type { EditorState } from "prosemirror-state";
+import { type ReactElement } from "react";
+import type { EditorDocument } from "../../editor/editorDocument";
+import { type StoryMarkupOptions } from "../../editor/stories/storyMarkup";
+import { type StoryCaret, type StoryExtensions, type StoryHost } from "../../editor/stories/storyView";
+import type { StoryKey } from "../../schema/stories";
+import type { FontFallbacks } from "../../styles/fontStack";
+export type DrawStory = (story: PMNode, options: StoryMarkupOptions) => DocumentFragment;
+/** Hands on the height a row stands at on the paper, the zoom taken back out */
+export type NoteHeightReport = (key: StoryKey, height: number) => void;
+/**
+ * What mounts the editing view over this row, which only the row the caret is in is given.
+ *
+ * It is held apart from the row's own props because a row is drawn again on every change to the
+ * document while the view over it has to stand: every field here is the same object for as long as
+ * one note is open, and what changes per edit reaches the view through `revision`.
+ */
+export interface RowEditing {
+    readonly host: StoryHost;
+    /** The values the story is edited against (`editor/editorDocument`) */
+    readonly document: EditorDocument;
+    readonly extensions: StoryExtensions;
+    /** Where the caret opens, and where it stood when the row was last taken down */
+    readonly caret: {
+        take(): StoryCaret | null;
+        keep(caret: StoryCaret): void;
+    };
+    readonly onStateChange: (state: EditorState) => void;
+}
+export interface StoryRowProps {
+    readonly noteKey: StoryKey;
+    readonly story: PMNode;
+    readonly label: string;
+    readonly fontFallbacks: FontFallbacks;
+    /** What assistive technology calls the row */
+    readonly name?: string;
+    /** A hidden row still takes its room, which is what lets it be measured before it is placed */
+    readonly hidden?: boolean;
+    /** Called whenever the row's height changes. Left out, the row is not measured */
+    readonly onHeight?: NoteHeightReport;
+    /** The visual scale the row is drawn at, which a height read off the screen is divided by */
+    readonly zoom?: number;
+    /** What draws the story; `storyMarkup` unless a test counts the drawings */
+    readonly draw?: DrawStory;
+    /** Mounted over this row while the caret is in it, and null while the row is markup */
+    readonly editing?: RowEditing | null;
+    /** A value that differs every time the main document changes, which is when the view is synced */
+    readonly revision?: unknown;
+    /** Whether the note stands where nothing may be edited, which a reader is told rather than shown */
+    readonly readOnly?: boolean;
+    /** Called for a press on a row no view stands over yet, with where on the screen it landed */
+    readonly onPress?: (at: {
+        left: number;
+        top: number;
+    }) => void;
+    /**
+     * Called for a press on the number the note is drawn by, which is the way back to the text that
+     * calls it rather than a place to put the caret
+     */
+    readonly onReturn?: () => void;
+}
+export declare const StoryRow: import("react").MemoExoticComponent<({ noteKey, story, label, fontFallbacks, name, hidden, onHeight, zoom, draw, editing, revision, readOnly, onPress, onReturn, }: StoryRowProps) => ReactElement>;