@portone/docx-editor 0.6.0 → 0.6.1

package/dist/editor/plugins/noteNavigation.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Getting into a note and asking for one to be opened.
+ *
+ * A press on a note's number or a command asks for a note, and neither can mount anything itself,
+ * since what draws the notes is the surface around the editor; so the request is held in the state
+ * and the surface reads it back (`requestedNote`). The nonce is what makes a second request for
+ * the note already open reach the surface at all.
+ *
+ * The request moves the caret to just after the reference as it goes in, which is where Escape
+ * hands it back to (`editor/notes/noteSurface`), so leaving a note needs nothing remembered.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import { type Command, type EditorState, Plugin, type Transaction } from "prosemirror-state";
+import { type NoteKind, type StoryKey } from "../../schema/stories";
+/** Which note the reader asked for, and which asking it was */
+export interface RequestedNote {
+    readonly key: StoryKey;
+    /** Rises with every request, so asking twice for one note is two requests */
+    readonly nonce: number;
+}
+/** One reference to a note, as the document holds it */
+export interface PlacedNoteReference {
+    readonly pos: number;
+    readonly node: PMNode;
+}
+/** Where the first reference to this note stands, and null where the document holds none */
+export declare function noteReferenceAt(doc: PMNode, kind: NoteKind, id: string): PlacedNoteReference | null;
+/** The transaction with the note it opens recorded on it, which `insertFootnote` also carries */
+export declare function requestNote<T extends Transaction>(tr: T, key: StoryKey): T;
+/** The note last asked for, and null where none was. Null for a state built without the plugin */
+export declare function requestedNote(state: EditorState): RequestedNote | null;
+/**
+ * Puts the caret just after the note's reference and asks for the note to be opened. It applies
+ * under every mode, since opening a note is reading it; what a reader may do once it stands open
+ * is the story view's question (`editor/stories`).
+ */
+export declare function openNoteCommand(kind: NoteKind, id: string): Command;
+/**
+ * Holds the note last asked for, and turns a press on a note's number into that asking.
+ *
+ * One press is what opens a note, which is what Google Docs does: the number is a small
+ * superscript, and a press on one is far more often a reader going to the note than a caret being
+ * placed on the digit. A reference to a kind no writer puts back opens nothing.
+ */
+export declare function noteNavigation(kinds?: readonly NoteKind[]): Plugin<RequestedNote | null>;

package/dist/editor/plugins/noteNavigation.js

@@ -0,0 +1,86 @@
+// src/editor/plugins/noteNavigation.ts
+import {
+  Plugin,
+  PluginKey,
+  TextSelection
+} from "prosemirror-state";
+import { docxSchema } from "../../schema/index.js";
+import {
+  EDITABLE_NOTE_KINDS,
+  storyKey,
+  storyNodeOf
+} from "../../schema/stories.js";
+import { documentOf } from "../editorDocument.js";
+var navigationKey = new PluginKey(
+  "docxEditorNoteNavigation"
+);
+function noteReferenceAt(doc, kind, id) {
+  let found = null;
+  doc.descendants((node, pos) => {
+    if (found !== null) return false;
+    if (node.type === docxSchema.nodes.noteReference && node.attrs.kind === kind && node.attrs.id === id) {
+      found = { pos, node };
+    }
+    return found === null;
+  });
+  return found;
+}
+function isRequest(value) {
+  if (typeof value !== "object" || value === null) return false;
+  return typeof Reflect.get(value, "key") === "string" && typeof Reflect.get(value, "nonce") === "number";
+}
+var asked = 0;
+function requestNote(tr, key) {
+  asked += 1;
+  return tr.setMeta(navigationKey, { key, nonce: asked });
+}
+function requestedNote(state) {
+  return navigationKey.getState(state) ?? null;
+}
+function openNoteCommand(kind, id) {
+  return (state, dispatch) => {
+    const key = storyKey(kind, id);
+    if (documentOf(state).specialNotes.has(key)) return false;
+    if (storyNodeOf(state.doc, key) === null) return false;
+    const found = noteReferenceAt(state.doc, kind, id);
+    if (found === null) return false;
+    if (dispatch) {
+      const after = found.pos + found.node.nodeSize;
+      const tr = state.tr.setSelection(
+        TextSelection.near(state.doc.resolve(after))
+      );
+      dispatch(requestNote(tr, key).scrollIntoView());
+    }
+    return true;
+  };
+}
+function noteNavigation(kinds = EDITABLE_NOTE_KINDS) {
+  return new Plugin({
+    key: navigationKey,
+    state: {
+      init: () => null,
+      apply: (tr, held) => {
+        const next = tr.getMeta(navigationKey);
+        return isRequest(next) ? next : held;
+      }
+    },
+    props: {
+      handleClickOn(view, _pos, node, _nodePos, _event, direct) {
+        if (!direct || node.type !== docxSchema.nodes.noteReference) {
+          return false;
+        }
+        const kind = kinds.find((named) => named === node.attrs.kind);
+        const id = node.attrs.id;
+        if (kind === void 0 || typeof id !== "string") return false;
+        return openNoteCommand(kind, id)(view.state, view.dispatch);
+      }
+    }
+  });
+}
+export {
+  noteNavigation,
+  noteReferenceAt,
+  openNoteCommand,
+  requestNote,
+  requestedNote
+};

package/dist/editor/plugins/noteNumbering.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from "prosemirror-state";
+import { noteLabelsIn } from "../../docx/notes/numbering";
+export type NoteLabeller = typeof noteLabelsIn;
+/**
+ * Labels the note references again after a change that moves one, moves a section break, or
+ * replaces the numbering the snapshot holds.
+ *
+ * A label is a display value of an inline node, which the display derivation walk does not reach,
+ * so it is written here under the same pass: a relabel goes through a lock around the reference,
+ * and one undo takes it back with the edit that caused it. The relabel after a snapshot change
+ * follows no edit and goes to the history not at all.
+ */
+export declare function noteNumbering(labelsIn?: NoteLabeller): Plugin;

package/dist/editor/plugins/noteNumbering.js

@@ -0,0 +1,58 @@
+// src/editor/plugins/noteNumbering.ts
+import { Plugin } from "prosemirror-state";
+import { DocAttrStep } from "prosemirror-transform";
+import { noteLabelSignature, noteLabelsIn } from "../../docx/notes/numbering.js";
+import { sectionBreakOf } from "../../docx/sections.js";
+import { displayOnly } from "../../schema/displayDerivation.js";
+import { stepReaches } from "../../schema/guards.js";
+import { documentOf } from "../editorDocument.js";
+function countsNotes(node) {
+  if (node.type.name === "noteReference") return true;
+  const pPr = node.attrs.pPr;
+  return node.type.name === "paragraph" && typeof pPr === "string" && sectionBreakOf(pPr) !== null;
+}
+function reachesLabels(tr) {
+  return tr.steps.some(
+    (step, index) => step instanceof DocAttrStep ? step.attr === "sectPr" : stepReaches(
+      step,
+      tr.docs[index],
+      tr.docs[index + 1] ?? tr.doc,
+      countsNotes
+    )
+  );
+}
+function labelsMayHaveMoved(transactions, oldState, newState) {
+  return transactions.some(reachesLabels) && noteLabelSignature(oldState.doc) !== noteLabelSignature(newState.doc);
+}
+function numberingReplaced(before, after) {
+  return before.noteNumbering !== after.noteNumbering || before.specialNotes !== after.specialNotes;
+}
+function noteNumbering(labelsIn = noteLabelsIn) {
+  return new Plugin({
+    appendTransaction(transactions, oldState, newState) {
+      const document = documentOf(newState);
+      const replaced = numberingReplaced(documentOf(oldState), document);
+      if (!replaced && !labelsMayHaveMoved(transactions, oldState, newState)) {
+        return null;
+      }
+      const labels = labelsIn(
+        newState.doc,
+        document.noteNumbering,
+        document.specialNotes
+      );
+      const tr = newState.tr;
+      for (const [pos, label] of labels) {
+        if (tr.doc.nodeAt(pos)?.attrs.label !== label) {
+          tr.setNodeAttribute(pos, "label", label);
+        }
+      }
+      if (!tr.docChanged) return null;
+      tr.setMeta(displayOnly, true);
+      if (replaced) tr.setMeta("addToHistory", false);
+      return tr;
+    }
+  });
+}
+export {
+  noteNumbering
+};

package/dist/editor/plugins/rowResize.js

@@ -4,6 +4,7 @@ import { TableMap } from "prosemirror-tables";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { isLockedCell } from "../../schema/locks.js";
 import { editorClassNames } from "../../styles/classNames.js";
+import { pageScaleAround } from "../../styles/visualScale.js";
 import {
   buildResizeRowTransaction,
   resizedRowHeight,
@@ -52,12 +53,6 @@ function edgeUnder(view, event) {
   if (!(rowDom instanceof HTMLTableRowElement)) return null;
   return { ...spot, ...hit, tableDom, rowDom, rowPos };
 }
-function visualScale(view) {
-  const layer = view.dom.closest(`.${editorClassNames.pageLayer}`);
-  const raw = layer instanceof HTMLElement ? getComputedStyle(layer).zoom : "";
-  const parsed = Number.parseFloat(raw);
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
-}
 function previewDecorations(doc, preview) {
   const row = doc.nodeAt(preview.rowPos);
   if (row?.type.spec.tableRole !== "row") return DecorationSet.empty;
@@ -137,7 +132,7 @@ function rowResize() {
   function start(view, event) {
     const target = edgeUnder(view, event);
     if (!target) return false;
-    const scale = visualScale(view);
+    const scale = pageScaleAround(view.dom);
     const startHeightPt = target.rowDom.getBoundingClientRect().height / scale * (72 / 96);
     drag = {
       view,

package/dist/editor/plugins/tabLayout.js

@@ -5,6 +5,7 @@ import { PX_PER_PT } from "../../docx/pageGeometry.js";
 import { toParagraphFormat } from "../../model/format.js";
 import { docxSchema } from "../../schema/index.js";
 import { editorClassNames, editorCssVariables } from "../../styles/classNames.js";
+import { pageScaleAround } from "../../styles/visualScale.js";
 import { documentDefaultTabStopPt } from "../documentStyles.js";
 import { setTabWidths, tabWidths } from "./tabDecorations.js";
 var POSITION_EPSILON_PT = 0.01;
@@ -46,11 +47,6 @@ function numeric(value) {
 function computedStyle(element) {
   return element.ownerDocument.defaultView?.getComputedStyle(element) ?? getComputedStyle(element);
 }
-function scaleOf(view) {
-  const layer = view.dom.closest(`.${editorClassNames.pageLayer}`);
-  const parsed = Number.parseFloat(layer ? computedStyle(layer).zoom : "");
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
-}
 function paragraphLayoutContext(view, slot) {
   const $pos = view.state.doc.resolve(view.posAtDOM(slot, 0));
   for (let depth = $pos.depth; depth > 0; depth -= 1) {
@@ -84,7 +80,6 @@ function cloneParagraph(paragraph, widthPx, resetTabs) {
   clone.style.textAlign = "start";
   clone.style.visibility = "hidden";
   clone.style.pointerEvents = "none";
-  clone.style.zoom = "1";
   clone.setAttribute("aria-hidden", "true");
   if (resetTabs) {
     for (const slot of clone.querySelectorAll(
@@ -221,7 +216,7 @@ function sameWidths(left, right) {
   return true;
 }
 function measureTabs(view, cache, generation) {
-  const scale = scaleOf(view);
+  const scale = pageScaleAround(view.dom);
   const defaultStopPt = documentDefaultTabStopPt(view.state);
   const widths = new Map(tabWidths(view.state));
   const paragraphs = /* @__PURE__ */ new Map();

package/dist/editor/stories/storyMarkup.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A side story drawn as markup no editor view stands behind: a note the caret is not in, and later
+ * a comment body or a header preview.
+ *
+ * The runs are drawn by the same spec the editor's run view draws (`editor/views/runMarkView`), so
+ * a story set down here wraps where it would in an editor, and what one kind of story draws
+ * differently comes in as a node spec. Nothing here knows which kind of story it is drawing, or
+ * where the markup goes.
+ *
+ * The schema writes the document's own source onto what it draws (`w:pPr`, a run's `w:rPr`, a
+ * preserved fragment's XML) for an editor to read back, and nothing reads this markup back. So
+ * none of it is kept: a selection the browser copies out of a note, with no copy serializer of the
+ * editor behind it, then carries no more of the document than a copy out of the editor does
+ * (`schema/clipboard`).
+ */
+import { type DOMOutputSpec, type Node as PMNode } from "prosemirror-model";
+import type { FontFallbacks } from "../../styles/fontStack";
+/** How a node type is drawn in place of the way the schema draws it, by node type name */
+export type StoryNodeSpecs = Readonly<Record<string, (node: PMNode) => DOMOutputSpec>>;
+export interface StoryMarkupOptions {
+    readonly fontFallbacks: FontFallbacks;
+    readonly nodeSpecs?: StoryNodeSpecs;
+}
+export declare function storyMarkup(story: PMNode, { fontFallbacks, nodeSpecs }: StoryMarkupOptions): DocumentFragment;

package/dist/editor/stories/storyMarkup.js

@@ -0,0 +1,35 @@
+// src/editor/stories/storyMarkup.ts
+import {
+  DOMSerializer
+} from "prosemirror-model";
+import { runMarkSpec } from "../../schema/index.js";
+var STYLED_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-display",
+  "data-underline"
+]);
+function withoutSource(markup) {
+  markup.querySelectorAll("*").forEach((element) => {
+    for (const name of element.getAttributeNames()) {
+      if (name.startsWith("data-") && !STYLED_ATTRIBUTES.has(name)) {
+        element.removeAttribute(name);
+      }
+    }
+  });
+  return markup;
+}
+function storyMarkup(story, { fontFallbacks, nodeSpecs = {} }) {
+  const schema = story.type.schema;
+  const serializer = new DOMSerializer(
+    { ...DOMSerializer.nodesFromSchema(schema), ...nodeSpecs },
+    {
+      ...DOMSerializer.marksFromSchema(schema),
+      run: (mark) => runMarkSpec(mark.attrs, fontFallbacks)
+    }
+  );
+  const markup = document.createDocumentFragment();
+  serializer.serializeFragment(story.content, {}, markup);
+  return withoutSource(markup);
+}
+export {
+  storyMarkup
+};

package/dist/editor/stories/storyState.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The state one side story is edited in.
+ *
+ * A story is a document of the same schema as the body, so it is edited by the same plugins: the
+ * guards, the clipboard, the tabs, the display derivation. What it is not is a document of its
+ * own, so the ones that answer for a whole document stay out - the history, which the main
+ * document keeps for both (`./storyView`), the note and comment plugins, whose subjects a story
+ * does not hold, and the page decorations, since a story is drawn wherever its host puts it.
+ *
+ * The snapshot handed in is the main document's, which is what makes a run resolve here as it
+ * would in the body. Its caller narrows the two values a story answers differently: a story has
+ * nowhere to write a list definition, and the paper it wraps at is the one its anchor stands on.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import { type Command, EditorState, type Plugin } from "prosemirror-state";
+import type { EditingProtection } from "../../schema/protection";
+import type { SliceNormalizer } from "../clipboard/normalizers";
+import { type EditorDocument } from "../editorDocument";
+import type { SurfaceCapabilities } from "./storyView";
+export interface StoryStateOptions {
+    /** The story as the main document holds it */
+    readonly story: PMNode;
+    /** The main document's snapshot, which the story's display values are resolved against */
+    readonly document: EditorDocument;
+    readonly protection: EditingProtection;
+    /** The keys the surface binds ahead of the editor's own: undo, redo and Escape */
+    readonly keys: Record<string, Command>;
+    /** What the kind of story adds, which is asked before the editor's own keymaps */
+    readonly plugins: readonly Plugin[];
+    readonly normalizers: readonly SliceNormalizer[];
+    /** What this kind of story takes, which the editor's own keys are bound from */
+    readonly takes: SurfaceCapabilities;
+}
+export declare function storyEditorState({ story, document, protection, keys, plugins, normalizers, takes, }: StoryStateOptions): EditorState;

package/dist/editor/stories/storyState.js

@@ -0,0 +1,74 @@
+// src/editor/stories/storyState.ts
+import { baseKeymap } from "prosemirror-commands";
+import { dropCursor } from "prosemirror-dropcursor";
+import { keymap } from "prosemirror-keymap";
+import { EditorState } from "prosemirror-state";
+import { tableEditing } from "prosemirror-tables";
+import { docxClipboard } from "../clipboard/plugin.js";
+import { editorDocument } from "../editorDocument.js";
+import { compositionSelection } from "../plugins/compositionSelection.js";
+import {
+  displayDerivation,
+  withDerivedDisplay
+} from "../plugins/displayDerivation.js";
+import { documentProtection } from "../plugins/documentProtection.js";
+import { docxKeymap, NOTE_KEYS } from "../plugins/keymap.js";
+import { lockedContent } from "../plugins/lockedContent.js";
+import { numberingMarkers } from "../plugins/numberingDecorations.js";
+import { tabCaret } from "../plugins/tabCaret.js";
+import { tabDecorations } from "../plugins/tabDecorations.js";
+import { tabLayout } from "../plugins/tabLayout.js";
+import { tabPointer } from "../plugins/tabPointer.js";
+var CAPABILITY_KEYS = {
+  "Mod-k": "link",
+  [NOTE_KEYS.footnote]: "note",
+  [NOTE_KEYS.endnote]: "note"
+};
+var KEYS_NO_STORY_TAKES = ["Mod-Enter"];
+function storyKeymap(takes) {
+  return Object.fromEntries(
+    Object.entries(docxKeymap).filter(([key]) => {
+      if (KEYS_NO_STORY_TAKES.includes(key)) return false;
+      const needed = CAPABILITY_KEYS[key];
+      return needed === void 0 || takes.has(needed);
+    })
+  );
+}
+function storyEditorState({
+  story,
+  document,
+  protection,
+  keys,
+  plugins,
+  normalizers,
+  takes
+}) {
+  return EditorState.create({
+    doc: withDerivedDisplay(story, document),
+    plugins: [
+      editorDocument(document),
+      lockedContent(),
+      documentProtection({ protection, author: null, editableComments: "own" }),
+      compositionSelection(),
+      // A kind's own key rule stands ahead of the keymaps below: the base keymap answers
+      // Backspace and Enter for every document, so a rule about an empty story would never be
+      // asked behind it
+      ...plugins,
+      keymap(keys),
+      keymap(storyKeymap(takes)),
+      keymap(baseKeymap),
+      dropCursor(),
+      docxClipboard({ normalizers }),
+      tableEditing(),
+      tabDecorations(),
+      tabPointer(),
+      tabLayout(),
+      tabCaret(),
+      displayDerivation(),
+      numberingMarkers()
+    ]
+  });
+}
+export {
+  storyEditorState
+};

package/dist/editor/stories/storyView.d.ts

@@ -0,0 +1,115 @@
+/**
+ * The one editing view a side story is edited in, mounted over the story the caret went into and
+ * taken down when it leaves.
+ *
+ * Everything typed here leaves through the host, which writes it into the main document as one
+ * story change. That is what keeps the guards, the locks and the protection judging a story edit
+ * where they judge a body edit, and what leaves the main document holding the only history: the
+ * undo keys here run the host's.
+ *
+ * This file does not know which kind of story it is drawing or where it is drawn: a note stands
+ * at the foot of a page, a comment body in a rail beside it, a header in a page margin. What
+ * differs between the kinds arrives as `StoryExtensions`.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import { type EditorState, type Plugin } from "prosemirror-state";
+import { EditorView, type NodeViewConstructor } from "prosemirror-view";
+import { type StoryKey } from "../../schema/stories";
+import type { FontFallbacks } from "../../styles/fontStack";
+import type { SliceNormalizer } from "../clipboard/normalizers";
+import type { EditorDocument } from "../editorDocument";
+export type NodeViewMap = Record<string, NodeViewConstructor>;
+/** What every surface is read and dispatched through, whichever of the two it is */
+interface SurfaceContents {
+    readonly view: EditorView;
+    /** The state on screen, which a control drawn from the surface re-decides itself from */
+    readonly state: EditorState;
+    readonly takes: SurfaceCapabilities;
+}
+/**
+ * The surface holding the caret, which is either the body or one story with the view over it.
+ *
+ * Two editing views cannot stand at once, and this is where that rule is written down: a caller
+ * holding this value has no way to name a second one. What holds it true is the state that decides
+ * which story is open (`ui/notes/useStorySurface`).
+ */
+export type ActiveSurface = ({
+    readonly surface: "body";
+} & SurfaceContents) | ({
+    readonly surface: "story";
+    readonly key: StoryKey;
+} & SurfaceContents);
+export interface StoryHost {
+    /** The main state the story is read from and judged against */
+    readonly state: () => EditorState;
+    /** Writes the story into the main document; false when the main document refused it */
+    write(key: StoryKey, story: PMNode): boolean;
+    undo(): boolean;
+    redo(): boolean;
+    /** Hands the caret back to the main document (Escape) */
+    leave(key: StoryKey): void;
+    /** Whether edits to this story are closed where it is anchored */
+    shut(key: StoryKey): boolean;
+    /** Registers the view that holds the caret, null when it lets go */
+    activate(key: StoryKey, view: EditorView | null): void;
+}
+/**
+ * What a surface takes beyond character and paragraph formatting.
+ *
+ * Every one of these puts something into the document that the part the surface is written back as
+ * has to carry - a relationship, a definition, a part of its own - so which of them a surface takes
+ * is the surface's own to declare, and a control or a key that puts one in asks here rather than
+ * asking which kind of surface it is.
+ */
+export declare const SURFACE_CAPABILITIES: readonly ["list", "table", "image", "link", "note", "comment"];
+export type SurfaceCapability = (typeof SURFACE_CAPABILITIES)[number];
+export type SurfaceCapabilities = ReadonlySet<SurfaceCapability>;
+/** What the body takes, which is everything: it is written back as the document part itself */
+export declare const EVERY_CAPABILITY: SurfaceCapabilities;
+/** What a surface whose writer carries none of them takes */
+export declare const NO_CAPABILITY: SurfaceCapabilities;
+export interface StoryExtensions {
+    readonly plugins: readonly Plugin[];
+    readonly nodeViews: NodeViewMap;
+    readonly normalizers: readonly SliceNormalizer[];
+    /** What this kind of story takes, which its keys and the controls over it are drawn from */
+    readonly takes: SurfaceCapabilities;
+}
+/**
+ * Where the caret goes when the view is mounted: back where it stood, or at the point the reader
+ * pressed, which is what a press on a story no view stands over yet has to say.
+ */
+export type StoryCaret = {
+    readonly kind: "at";
+    readonly anchor: number;
+    readonly head: number;
+} | {
+    readonly kind: "point";
+    readonly left: number;
+    readonly top: number;
+};
+export interface StoryViewOptions {
+    readonly mount: HTMLElement;
+    readonly host: StoryHost;
+    readonly key: StoryKey;
+    readonly document: EditorDocument;
+    readonly fontFallbacks: FontFallbacks;
+    readonly extensions: StoryExtensions;
+    /** Where the caret opens. The end of the story when none is given */
+    readonly caret?: StoryCaret | null;
+    /**
+     * Called with every state this view goes to, which is what a control drawn from the story - a
+     * toolbar acting on it - re-decides itself from.
+     */
+    readonly onStateChange?: (state: EditorState) => void;
+}
+export interface StoryView {
+    readonly view: EditorView;
+    /** Takes a changed main state in; replaces the content only when the story says something else */
+    sync(): void;
+    destroy(): void;
+}
+/** Where the caret stands, in the shape a view mounted again over the same story opens at */
+export declare function caretOf(state: EditorState): StoryCaret;
+export declare function createStoryView({ mount, host, key, document, fontFallbacks, extensions, caret, onStateChange, }: StoryViewOptions): StoryView;
+export {};