@portone/docx-editor 0.5.1 → 0.6.1

package/dist/ui/notes/noteBands.js

@@ -0,0 +1,142 @@
+// src/ui/notes/noteBands.tsx
+import { useMemo } from "react";
+import {
+  noteProjection
+} from "../../editor/commands/noteQueries.js";
+import { documentOf } from "../../editor/editorDocument.js";
+import {
+  FOOTNOTE_BAND,
+  FOOTNOTE_BAND_ORDER
+} from "../../page/demands/footnoteDemands.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import {
+  DEFAULT_FONT_FALLBACKS
+} from "../../styles/fontStack.js";
+import { documentDefaultsVariables } from "../../styles/inlineStyle.js";
+import { endnoteAreasOf, footnoteAreasOf, NoteAreas } from "./NoteAreas.js";
+import { NoteList } from "./NoteList.js";
+import { useNoteHeights } from "./noteHeights.js";
+import { NOTE_SEPARATOR_HEIGHT } from "./noteSeparator.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NO_ROWS = /* @__PURE__ */ new Map();
+var NO_NOTE_ROWS = [];
+function useNoteBands({
+  state,
+  of,
+  fontFallbacks
+}) {
+  const notes = state === null ? null : noteProjection.read(state);
+  const footnotes = notes?.footnotes ?? NO_ROWS;
+  const hasFootnotes = footnotes.size > 0;
+  const [heights, onHeight] = useNoteHeights(of);
+  const bands = useMemo(
+    () => hasFootnotes ? /* @__PURE__ */ new Map([
+      [
+        FOOTNOTE_BAND,
+        {
+          order: FOOTNOTE_BAND_ORDER,
+          overhead: NOTE_SEPARATOR_HEIGHT,
+          heights
+        }
+      ]
+    ]) : void 0,
+    [hasFootnotes, heights]
+  );
+  const endnotes = notes?.endnotes ?? NO_NOTE_ROWS;
+  const trailing = useMemo(
+    () => endnotes.length === 0 ? void 0 : {
+      overhead: NOTE_SEPARATOR_HEIGHT,
+      rows: endnotes.map((row) => ({
+        id: row.key,
+        height: heights.get(row.key) ?? 0
+      }))
+    },
+    [endnotes, heights]
+  );
+  const snapshot = state === null ? null : documentOf(state);
+  const noteFontFallbacks = fontFallbacks ?? DEFAULT_FONT_FALLBACKS;
+  const textStyle = useMemo(
+    () => snapshot === null ? {} : {
+      ...documentDefaultsVariables(snapshot.defaults, noteFontFallbacks),
+      tabSize: `${snapshot.defaultTabStopPt}pt`
+    },
+    [snapshot, noteFontFallbacks]
+  );
+  return {
+    bands,
+    trailing,
+    rows: notes?.rows ?? NO_ROWS,
+    drawn: {
+      footnotes,
+      endnotes,
+      anyNotes: notes !== null,
+      heights,
+      onHeight,
+      fontFallbacks: noteFontFallbacks,
+      textStyle
+    }
+  };
+}
+function NotesAroundPage({
+  notes,
+  overlay,
+  page,
+  zoom,
+  open,
+  editing,
+  readOnly,
+  revision,
+  onOpen,
+  onReturn
+}) {
+  const { footnotes, endnotes, anyNotes, heights, onHeight } = notes.drawn;
+  const drawing = {
+    heights,
+    onHeight,
+    fontFallbacks: notes.drawn.fontFallbacks,
+    textStyle: notes.drawn.textStyle,
+    zoom,
+    open,
+    editing,
+    readOnly,
+    revision,
+    onOpen,
+    onReturn
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    overlay !== null && footnotes.size > 0 && /* @__PURE__ */ jsx(
+      NoteAreas,
+      {
+        overlay,
+        areas: footnoteAreasOf(overlay),
+        areaClassName: editorClassNames.footnoteArea,
+        rows: footnotes,
+        ...drawing
+      }
+    ),
+    overlay !== null && endnotes.length > 0 && /* @__PURE__ */ jsx(
+      NoteAreas,
+      {
+        overlay,
+        areas: endnoteAreasOf(overlay),
+        areaClassName: editorClassNames.endnoteArea,
+        rows: notes.rows,
+        ...drawing
+      }
+    ),
+    anyNotes && overlay === null && /* @__PURE__ */ jsx(
+      NoteList,
+      {
+        footnotes: [...footnotes.values()],
+        endnotes,
+        page,
+        fontFallbacks: notes.drawn.fontFallbacks,
+        textStyle: notes.drawn.textStyle
+      }
+    )
+  ] });
+}
+export {
+  NotesAroundPage,
+  useNoteBands
+};

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

@@ -0,0 +1,10 @@
+import type { StoryKey } from "../../schema/stories";
+import type { NoteHeightReport } from "./StoryRow";
+/**
+ * The height each note stands at, as its row last reported it, for the document `of` names.
+ *
+ * A height is a fact about what the browser drew, so it can only arrive after a row is drawn. The
+ * map handed back is the same object until a height really changes, which is what lets the page
+ * layout that reads it run again only then, and a document swapped in starts from none.
+ */
+export declare function useNoteHeights(of: unknown): readonly [ReadonlyMap<StoryKey, number>, NoteHeightReport];

package/dist/ui/notes/noteHeights.js

@@ -0,0 +1,24 @@
+// src/ui/notes/noteHeights.ts
+import { useCallback, useState } from "react";
+var NO_HEIGHTS = /* @__PURE__ */ new Map();
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function useNoteHeights(of) {
+  const [held, setHeld] = useState({ of, heights: NO_HEIGHTS });
+  const report = useCallback(
+    (key, height) => {
+      const rounded = round(height);
+      setHeld((previous) => {
+        const heights = previous.of === of ? previous.heights : NO_HEIGHTS;
+        if (heights.get(key) === rounded && previous.of === of) return previous;
+        return { of, heights: new Map(heights).set(key, rounded) };
+      });
+    },
+    [of]
+  );
+  return [held.of === of ? held.heights : NO_HEIGHTS, report];
+}
+export {
+  useNoteHeights
+};

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

@@ -0,0 +1,12 @@
+/**
+ * The rule notes are set under, wherever they are drawn: in the room a page keeps for them
+ * (`./NoteAreas`) and at the head of the list under the sheet (`./NoteList`).
+ *
+ * Its height is also what the page layout is told a page adds once when it holds any footnote
+ * (`DemandBand.overhead`), and what the endnotes are given once where they begin
+ * (`TrailingRows.overhead`), so the room kept and the notes drawn in it are the same size.
+ */
+/** The height a page's notes are set under, the rule drawn across the middle of it */
+export declare const NOTE_SEPARATOR_HEIGHT = 16;
+/** Word's rule runs a third of the body and no further than two inches */
+export declare function noteSeparatorWidth(bodyWidth: number): number;

package/dist/ui/notes/noteSeparator.js

@@ -0,0 +1,9 @@
+// src/ui/notes/noteSeparator.ts
+var NOTE_SEPARATOR_HEIGHT = 16;
+function noteSeparatorWidth(bodyWidth) {
+  return Math.min(bodyWidth / 3, 192);
+}
+export {
+  NOTE_SEPARATOR_HEIGHT,
+  noteSeparatorWidth
+};

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

@@ -0,0 +1,68 @@
+/**
+ * Which side story the caret is in, and what the one view over it is built from.
+ *
+ * One story is open at a time (`editor/stories/storyView`), and this is what holds that true: the
+ * state here names one story key. Everything the view is built from arrives as one binding, so a
+ * second kind of story is another binding rather than more of the component that renders this.
+ * Where a story stands on the screen is the drawing side's (`./noteBands`).
+ */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import type { NoteRow } from "../../editor/commands/noteQueries";
+import { type EditorDocument } from "../../editor/editorDocument";
+import { type ActiveSurface, type StoryExtensions, type StoryHost } from "../../editor/stories/storyView";
+import type { StoryKey } from "../../schema/stories";
+import type { RowEditing } from "./StoryRow";
+/** A view and the state on screen, which is what the mounting component holds as React state */
+export interface LiveSurface {
+    readonly view: EditorView;
+    readonly state: EditorState;
+}
+/** What one kind of story hands the view over one of its rows, which is all that differs per kind */
+export interface StorySurfaceBinding {
+    /** The host every edit in this kind of story leaves through */
+    hostOf(main: EditorView, activate: StoryHost["activate"]): StoryHost;
+    /** What the view over this row adds, and null for a row this binding does not answer for */
+    extensionsOf(main: EditorView, row: NoteRow): StoryExtensions | null;
+    /** The values this row's story is edited against, worked out from the document's own snapshot */
+    documentFor(main: EditorState, snapshot: EditorDocument, row: NoteRow): EditorDocument;
+    /**
+     * Which story the document is asking to have opened, read off the state the mounting component
+     * holds. A fresh value for every request, so asking twice for one story opens it twice.
+     */
+    requestedIn(main: EditorState): {
+        readonly key: StoryKey;
+    } | null;
+    /** Puts the caret in this row's story, which is what opens it */
+    openIn(main: EditorView, row: NoteRow): void;
+    /** Hands the caret back to the text this row's story is called from, which is what closes it */
+    returnFrom(main: EditorView, row: NoteRow): void;
+}
+export interface StorySurfaceOptions {
+    /** The body's view and the state on screen, or null before a document is opened */
+    readonly main: LiveSurface | null;
+    /** The rows one of which a view may stand over, by the key naming each one's story */
+    readonly rows: ReadonlyMap<StoryKey, NoteRow>;
+    /** The kind of story these rows hold. A new value takes an open view down, so keep one */
+    readonly binding: StorySurfaceBinding;
+}
+export interface StorySurface {
+    /** Where the caret is, and null before a document is opened */
+    readonly active: ActiveSurface | null;
+    /** The story a view stands over, and null while the caret is in the body */
+    readonly open: StoryKey | null;
+    /** What mounts that view, which only the open row is given. Null while none is open */
+    readonly editing: RowEditing | null;
+    /** Whether the open story stands where nothing may be edited */
+    readonly readOnly: boolean;
+    /** Whether the open view is composing, which a page laid out again would take down */
+    composing(): boolean;
+    /** Opens the story of this row, with the caret where the press landed */
+    onOpen(key: StoryKey, at: {
+        left: number;
+        top: number;
+    }): void;
+    /** Hands the caret back to the text this row's story is called from */
+    onReturn(key: StoryKey): void;
+}
+export declare function useStorySurface({ main, rows, binding, }: StorySurfaceOptions): StorySurface;

package/dist/ui/notes/useStorySurface.js

@@ -0,0 +1,95 @@
+// src/ui/notes/useStorySurface.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { documentOf } from "../../editor/editorDocument.js";
+import {
+  EVERY_CAPABILITY
+} from "../../editor/stories/storyView.js";
+function useStorySurface({
+  main,
+  rows,
+  binding
+}) {
+  const [asked, setAsked] = useState(null);
+  const [live, setLive] = useState(null);
+  const held = useRef(null);
+  const requested = main === null ? null : binding.requestedIn(main.state);
+  useEffect(() => {
+    if (requested !== null) setAsked(requested.key);
+  }, [requested]);
+  useEffect(() => {
+    const body = main?.view;
+    if (!body) return;
+    const leave = () => setAsked(null);
+    body.dom.addEventListener("focus", leave);
+    return () => body.dom.removeEventListener("focus", leave);
+  }, [main?.view]);
+  const open = asked !== null && rows.has(asked) ? asked : null;
+  const row = open === null ? void 0 : rows.get(open);
+  const activate = useCallback((_key, view) => {
+    setLive(view === null ? null : { view, state: view.state });
+  }, []);
+  const onStateChange = useCallback((state) => {
+    setLive(
+      (current) => current === null ? current : { view: current.view, state }
+    );
+  }, []);
+  const caret = useMemo(
+    () => ({
+      take: () => held.current?.key === open ? held.current.caret : null,
+      keep: (at) => {
+        if (open !== null) held.current = { key: open, caret: at };
+      }
+    }),
+    [open]
+  );
+  const host = useMemo(
+    () => main === null ? null : binding.hostOf(main.view, activate),
+    [main?.view, activate, binding]
+  );
+  const extensions = useMemo(
+    () => main === null || row === void 0 ? null : binding.extensionsOf(main.view, row),
+    [main?.view, row?.key, row?.label, binding]
+  );
+  const snapshot = main === null ? null : documentOf(main.state);
+  const document = useMemo(
+    () => main === null || snapshot === null || row === void 0 ? null : binding.documentFor(main.state, snapshot, row),
+    [main?.view, snapshot, row?.referencePos, binding]
+  );
+  const editing = useMemo(
+    () => host === null || extensions === null || document === null ? null : { host, document, extensions, caret, onStateChange },
+    [host, extensions, document, caret, onStateChange]
+  );
+  const active = main === null ? null : open !== null && live !== null && extensions !== null ? {
+    surface: "story",
+    key: open,
+    view: live.view,
+    state: live.state,
+    takes: extensions.takes
+  } : {
+    surface: "body",
+    view: main.view,
+    state: main.state,
+    takes: EVERY_CAPABILITY
+  };
+  return {
+    active,
+    open,
+    editing,
+    readOnly: open !== null && host !== null && host.shut(open),
+    composing: () => live?.view.composing === true,
+    onOpen(key, at) {
+      const pressed = rows.get(key);
+      if (main === null || pressed === void 0) return;
+      held.current = { key, caret: { kind: "point", ...at } };
+      binding.openIn(main.view, pressed);
+    },
+    onReturn(key) {
+      const pressed = rows.get(key);
+      if (main === null || pressed === void 0) return;
+      binding.returnFrom(main.view, pressed);
+    }
+  };
+}
+export {
+  useStorySurface
+};

package/dist/ui/runCommand.d.ts

@@ -2,4 +2,11 @@
 import type { Command } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 export type RunCommand = (command: Command) => void;
-export declare function commandRunner(view: EditorView): RunCommand;
+/**
+ * Runs commands on `view` and leaves the focus on `focus`, which is `view` itself unless the
+ * command acts somewhere other than where the caret stands.
+ *
+ * Undo and redo are the one case: they run on the document while the caret is in a story, and
+ * handing the focus to the document is what closes an open story (`DocxEditor`).
+ */
+export declare function commandRunner(view: EditorView, focus?: EditorView): RunCommand;

package/dist/ui/runCommand.js

@@ -2,10 +2,10 @@
 function apply(view, command) {
   command(view.state, (tr) => view.dispatch(tr), view);
 }
-function commandRunner(view) {
+function commandRunner(view, focus = view) {
   return (command) => {
     apply(view, command);
-    view.focus();
+    focus.focus();
   };
 }
 export {

package/dist/ui/shortcutLabels.d.ts

@@ -0,0 +1,16 @@
+/**
+ * How a menu row spells the modifiers of a key binding.
+ *
+ * `Mod` is Command on Apple platforms and Control elsewhere, and which one a binding answers to is
+ * decided by `prosemirror-keymap` off the platform name. A label is read off the same platform
+ * test, so a row cannot promise a key the bindings do not hold - an iPad keyboard sends Command
+ * for every `Mod` binding the editor declares (`editor/clipboard/plugin` reads it for the same
+ * reason).
+ */
+export interface ModifierLabels {
+    /** `Mod`, as a row writes it before the key */
+    readonly mod: string;
+    readonly alt: string;
+}
+/** The spellings this platform's bindings are labelled with */
+export declare function modifierLabels(): ModifierLabels;

package/dist/ui/shortcutLabels.js

@@ -0,0 +1,9 @@
+// src/ui/shortcutLabels.ts
+var APPLE = /Mac|iP(hone|[oa]d)/;
+function modifierLabels() {
+  const platform = typeof navigator === "undefined" ? "" : navigator.platform;
+  return APPLE.test(platform) ? { mod: "\u2318", alt: "\u2325" } : { mod: "Ctrl+", alt: "Alt+" };
+}
+export {
+  modifierLabels
+};

package/dist/ui/usePageRoom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Holds the room the page layer takes in the scroll box.
+ *
+ * The layer is scaled with a transform and stands outside the flow (`styles/editor.css`), so
+ * nothing in the flow reaches down to where the paper ends and the scroll box would stop short of
+ * it. The box the layer stands in is given the height the layer is drawn at, and the scroll box
+ * then reaches the paper and keeps its own padding below it.
+ *
+ * The two elements are taken rather than refs to them, so that a surface which drew neither - a
+ * file that was refused, before the reader opens one that is not - is measured the moment they
+ * arrive rather than never again.
+ */
+export declare function usePageRoom(box: HTMLElement | null, layer: HTMLElement | null, scale: number): void;

package/dist/ui/usePageRoom.js

@@ -0,0 +1,31 @@
+// src/ui/usePageRoom.ts
+import { useLayoutEffect } from "react";
+function usePageRoom(box, layer, scale) {
+  useLayoutEffect(() => {
+    if (!box || !layer) return;
+    const frameWindow = box.ownerDocument.defaultView;
+    let frame = 0;
+    const hold = () => {
+      const next = `${layer.getBoundingClientRect().height}px`;
+      if (box.style.height !== next) box.style.height = next;
+    };
+    const schedule = () => {
+      if (frame !== 0 || !frameWindow) return;
+      frame = frameWindow.requestAnimationFrame(() => {
+        frame = 0;
+        hold();
+      });
+    };
+    hold();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    observer?.observe(layer);
+    return () => {
+      observer?.disconnect();
+      if (frame !== 0) frameWindow?.cancelAnimationFrame(frame);
+      box.style.removeProperty("height");
+    };
+  }, [box, layer, scale]);
+}
+export {
+  usePageRoom
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",
@@ -107,6 +107,7 @@
     "build:demo": "vite build --config demo/vite.config.ts",
     "dev:site": "pnpm --filter @portone/docx-editor-site dev",
     "build:site": "pnpm --filter @portone/docx-editor-site build",
+    "bench": "vitest run --config vitest.bench.config.ts --disableConsoleIntercept",
     "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm test:fixtures && pnpm test:site-release && pnpm test:release && pnpm check:demo-library",
     "typecheck": "tsc --noEmit && tsc --noEmit -p e2e && tsc --noEmit -p demo && pnpm --filter @portone/docx-editor-site typecheck",
     "lint": "pnpm biome check . --diagnostic-level=error",

package/dist/docx/notes.d.ts

@@ -1,27 +0,0 @@
-/** Reads footnote and endnote bodies related from the main document story. */
-export type NoteKind = "footnote" | "endnote";
-/**
- * One entry of a notes part as it arrived. What the note says is a story of its own, held on the
- * document node under `footnote:<id>` or `endnote:<id>` (`docx/story`).
- */
-export interface ImportedNote {
-    kind: NoteKind;
-    id: string;
-    label: string;
-    type: string | null;
-}
-export interface ImportedNotePart {
-    partPath: string | null;
-    /** The raw text of the part, which is what the note stories are sliced out of. null for none */
-    xml: string | null;
-    ordered: readonly ImportedNote[];
-    byId: ReadonlyMap<string, ImportedNote>;
-}
-export interface ImportedNotes {
-    footnotes: ImportedNotePart;
-    endnotes: ImportedNotePart;
-}
-export declare const NO_NOTES: ImportedNotes;
-/** Reads both note parts without modifying their original package bytes. */
-export declare function readNotes(parts: Map<string, Uint8Array>, mainPartPath: string): ImportedNotes;
-export declare function noteById(notes: ImportedNotes, kind: NoteKind, id: string): ImportedNote | undefined;

package/dist/docx/notes.js

@@ -1,55 +0,0 @@
-// src/docx/notes.ts
-import {
-  attributeByLocalName,
-  decodeUtf8,
-  elementChildren,
-  parseXml,
-  R_NS
-} from "../ooxml/xml.js";
-import { relatedPartPath } from "./packageParts.js";
-var EMPTY_PART = {
-  partPath: null,
-  xml: null,
-  ordered: [],
-  byId: /* @__PURE__ */ new Map()
-};
-var NO_NOTES = {
-  footnotes: EMPTY_PART,
-  endnotes: EMPTY_PART
-};
-function notePart(parts, mainPartPath, kind) {
-  const partPath = relatedPartPath(parts, mainPartPath, `${R_NS}/${kind}s`);
-  if (partPath === null) return EMPTY_PART;
-  const bytes = parts.get(partPath);
-  if (!bytes) return { ...EMPTY_PART, partPath };
-  const xml = decodeUtf8(bytes).text;
-  const root = parseXml(xml).documentElement;
-  const elements = elementChildren(root).filter((el) => el.localName === kind);
-  const ordered = elements.flatMap((el) => {
-    const id = attributeByLocalName(el, "id");
-    if (id === null) return [];
-    const type = attributeByLocalName(el, "type");
-    const regular = type === null || type === "normal";
-    const label = regular ? "?" : "";
-    return [{ kind, id, label, type }];
-  });
-  const byId = /* @__PURE__ */ new Map();
-  for (const note of ordered) {
-    if (!byId.has(note.id)) byId.set(note.id, note);
-  }
-  return { partPath, xml, ordered, byId };
-}
-function readNotes(parts, mainPartPath) {
-  return {
-    footnotes: notePart(parts, mainPartPath, "footnote"),
-    endnotes: notePart(parts, mainPartPath, "endnote")
-  };
-}
-function noteById(notes, kind, id) {
-  return notes[`${kind}s`].byId.get(id);
-}
-export {
-  NO_NOTES,
-  noteById,
-  readNotes
-};

package/dist/ui/NotesPanel.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,33 +0,0 @@
-// src/ui/NotesPanel.tsx
-import { noteProjection } from "../editor/commands/noteQueries.js";
-import { editorClassNames } from "../styles/classNames.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-function NotesPanel({
-  state,
-  pageWidth
-}) {
-  const { notes } = noteProjection.read(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
-};