@portone/docx-editor 0.1.0

package/dist/editor/plugins/imagePaste.js

@@ -0,0 +1,265 @@
+// src/editor/plugins/imagePaste.ts
+import { isHistoryTransaction } from "prosemirror-history";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { replacementShut } from "../../schema/locks.js";
+import {
+  hasResolvableClipboardImages,
+  resolveClipboardImages
+} from "../clipboard/images.js";
+import { documentBodyHeightPx, documentBodyWidthPx } from "../documentStyles.js";
+import { richHtmlSlice } from "../externalClipboard.js";
+import { insertPlainTextAt } from "../plainText.js";
+var LOAD_TIMEOUT_MS = 15e3;
+var imagePasteKey = new PluginKey("docxImagePaste");
+function marker(view) {
+  const element = view.dom.ownerDocument.createElement("span");
+  element.hidden = true;
+  return element;
+}
+function taskRange(decorations, id) {
+  const found = decorations.find(
+    void 0,
+    void 0,
+    (spec) => spec.task === id
+  );
+  const from = found.find((decoration) => decoration.spec.edge === "from");
+  const to = found.find((decoration) => decoration.spec.edge === "to");
+  return from && to ? { from: from.from, to: to.from } : null;
+}
+function rangesConflict(first, second) {
+  if (first.from === first.to) {
+    return second.from === second.to ? first.from === second.from : second.from <= first.from && first.from < second.to;
+  }
+  if (second.from === second.to) {
+    return first.from <= second.from && second.from < first.to;
+  }
+  return first.from < second.to && second.from < first.to;
+}
+function transactionTouchesRange(transaction, initial) {
+  let { from, to } = initial;
+  for (const [index, step] of transaction.steps.entries()) {
+    const map = transaction.mapping.maps[index];
+    if (!map) return true;
+    let described = false;
+    let touched = false;
+    map.forEach((oldStart, oldEnd) => {
+      described = true;
+      if (oldStart === oldEnd ? from <= oldStart && oldStart < to : oldStart < to && from < oldEnd) {
+        touched = true;
+      }
+    });
+    if (touched) return true;
+    if (!described) {
+      const json = step.toJSON();
+      if (typeof json.from !== "number" || typeof json.to !== "number") {
+        return true;
+      }
+      if (json.from < to && from < json.to) return true;
+    }
+    from = map.map(from, -1);
+    to = map.map(to, -1);
+  }
+  return false;
+}
+function imagePaste() {
+  const tasks = [];
+  let working = false;
+  const cancel = (task) => {
+    task.canceled = true;
+    task.controller?.abort();
+  };
+  const cancelAll = () => {
+    for (const task of tasks) cancel(task);
+  };
+  const removeMarker = (task) => {
+    if (task.view.isDestroyed) return;
+    task.view.dispatch(
+      task.view.state.tr.setMeta(imagePasteKey, {
+        remove: [task.id]
+      }).setMeta("addToHistory", false)
+    );
+  };
+  const finish = (task, resolved) => {
+    if (task.canceled || task.view.isDestroyed) return;
+    const state = imagePasteKey.getState(task.view.state);
+    const range = state && taskRange(state.decorations, task.id);
+    if (!range) return;
+    removeMarker(task);
+    if (task.view.isDestroyed) return;
+    const slice = resolved === null || resolved.images.size === 0 ? null : richHtmlSlice(
+      task.view.state,
+      task.view.dom.ownerDocument,
+      resolved.source,
+      resolved.images
+    );
+    if (slice !== null) {
+      task.view.dispatch(
+        task.view.state.tr.replaceRange(range.from, range.to, slice).scrollIntoView()
+      );
+    } else {
+      insertPlainTextAt(task.view, task.text, range.from, range.to);
+    }
+  };
+  const work = async () => {
+    if (working) return;
+    working = true;
+    try {
+      while (tasks.length > 0) {
+        const task = tasks[0];
+        if (!task || task.canceled || task.view.isDestroyed) {
+          tasks.shift();
+          continue;
+        }
+        const controller = new AbortController();
+        task.controller = controller;
+        const timeout = setTimeout(() => controller.abort(), LOAD_TIMEOUT_MS);
+        let resolved = null;
+        try {
+          const request = resolveClipboardImages(
+            task.view.dom.ownerDocument,
+            task.html,
+            {
+              maxWidthPx: task.maxWidthPx,
+              maxHeightPx: task.maxHeightPx,
+              signal: controller.signal
+            }
+          );
+          resolved = request === null ? null : await request;
+        } catch {
+          resolved = null;
+        } finally {
+          clearTimeout(timeout);
+          task.controller = null;
+        }
+        finish(task, resolved);
+        tasks.shift();
+      }
+    } finally {
+      working = false;
+    }
+  };
+  return new Plugin({
+    key: imagePasteKey,
+    state: {
+      init: () => ({
+        decorations: DecorationSet.empty,
+        cancelVersion: 0
+      }),
+      apply(transaction, current) {
+        if (isHistoryTransaction(transaction)) {
+          return {
+            decorations: DecorationSet.empty,
+            cancelVersion: current.cancelVersion + 1
+          };
+        }
+        let decorations = current.decorations;
+        if (transaction.docChanged) {
+          const ids = /* @__PURE__ */ new Set();
+          for (const decoration of decorations.find()) {
+            ids.add(decoration.spec.task);
+          }
+          const invalidated = /* @__PURE__ */ new Set();
+          for (const id of ids) {
+            const range = taskRange(decorations, id);
+            if (range !== null && range.from !== range.to && transactionTouchesRange(transaction, range)) {
+              invalidated.add(id);
+            }
+          }
+          decorations = decorations.remove(
+            decorations.find(
+              void 0,
+              void 0,
+              (spec) => invalidated.has(spec.task)
+            )
+          );
+        }
+        decorations = decorations.map(transaction.mapping, transaction.doc);
+        const meta = transaction.getMeta(imagePasteKey);
+        if (meta?.remove) {
+          const removed = new Set(meta.remove);
+          decorations = decorations.remove(
+            decorations.find(
+              void 0,
+              void 0,
+              (spec) => removed.has(spec.task)
+            )
+          );
+        }
+        if (meta?.add) {
+          const { id, from, to } = meta.add;
+          decorations = decorations.add(transaction.doc, [
+            Decoration.widget(from, marker, {
+              task: id,
+              edge: "from",
+              side: -1
+            }),
+            Decoration.widget(to, marker, {
+              task: id,
+              edge: "to",
+              side: -1
+            })
+          ]);
+        }
+        return { decorations, cancelVersion: current.cancelVersion };
+      }
+    },
+    view: () => ({
+      update(view, previous) {
+        const before = imagePasteKey.getState(previous);
+        const current = imagePasteKey.getState(view.state);
+        if (!current) return;
+        if (before && before.cancelVersion !== current.cancelVersion) {
+          cancelAll();
+          return;
+        }
+        for (const task of tasks) {
+          if (!taskRange(current.decorations, task.id)) cancel(task);
+        }
+      },
+      destroy: cancelAll
+    }),
+    props: {
+      decorations: (state) => imagePasteKey.getState(state)?.decorations,
+      handlePaste(view, event) {
+        if (replacementShut(view.state.selection, view.state.doc)) return false;
+        if (view.state.selection.ranges.length > 1) return false;
+        const html = event.clipboardData?.getData("text/html") ?? "";
+        if (!hasResolvableClipboardImages(view.dom.ownerDocument, html)) {
+          return false;
+        }
+        const text = event.clipboardData?.getData("text/plain") ?? "";
+        const { from, to } = view.state.selection;
+        const current = imagePasteKey.getState(view.state);
+        const replaced = tasks.filter((task) => {
+          if (!current || task.canceled) return false;
+          const range = taskRange(current.decorations, task.id);
+          return range !== null && rangesConflict(range, { from, to });
+        });
+        for (const task of replaced) cancel(task);
+        const id = {};
+        view.dispatch(
+          view.state.tr.setMeta(imagePasteKey, {
+            add: { id, from, to },
+            remove: replaced.map((task) => task.id)
+          }).setMeta("addToHistory", false)
+        );
+        tasks.push({
+          id,
+          view,
+          html,
+          text,
+          maxWidthPx: documentBodyWidthPx(view.state),
+          maxHeightPx: documentBodyHeightPx(view.state),
+          canceled: false,
+          controller: null
+        });
+        void work();
+        return true;
+      }
+    }
+  });
+}
+export {
+  imagePaste
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Keys not handled here are taken by ProseMirror's base keymap.
+ */
+import type { Command } from "prosemirror-state";
+export declare const docxKeymap: Record<string, Command>;

package/dist/editor/plugins/keymap.js

@@ -0,0 +1,94 @@
+// src/editor/plugins/keymap.ts
+import { chainCommands } from "prosemirror-commands";
+import { undoInputRule } from "prosemirror-inputrules";
+import { goToNextCell } from "prosemirror-tables";
+import { canSplit } from "prosemirror-transform";
+import { toParagraphFormat } from "../../model/format.js";
+import { docxSchema } from "../../schema/index.js";
+import { insertLineBreak, insertPageBreak } from "../commands/breakCommands.js";
+import {
+  toggleBold,
+  toggleItalic,
+  toggleStrike,
+  toggleUnderline
+} from "../commands/formattingCommands.js";
+import { redo, undo } from "../commands/historyCommands.js";
+import { activeLinkSpan } from "../commands/linkCommands.js";
+import {
+  decreaseListLevel,
+  increaseListLevel,
+  leaveEmptyListItem
+} from "../commands/listCommands.js";
+import { insertTab, moveAcrossTab } from "../commands/tabCommands.js";
+import { openLinkPanel } from "./linkPanel.js";
+var insertTabFromKeyboard = (state, dispatch, view) => {
+  if (!state.selection.empty && activeLinkSpan(state)) return false;
+  return insertTab(state, dispatch, view);
+};
+function listLevelCommand(command) {
+  return (state, dispatch, view) => {
+    const format = toParagraphFormat(state.selection.$from.parent.attrs.format);
+    if (!format?.numbering) return false;
+    command(state, dispatch, view);
+    return true;
+  };
+}
+var splitParagraph = (state, dispatch) => {
+  if (state.selection.$from.parent.type !== docxSchema.nodes.paragraph) {
+    return false;
+  }
+  const tr = state.tr;
+  if (!state.selection.empty) tr.deleteSelection();
+  const at = tr.mapping.map(state.selection.$from.pos);
+  const parent = tr.doc.resolve(at).parent;
+  if (parent.type !== docxSchema.nodes.paragraph) return false;
+  const types = [{ type: docxSchema.nodes.paragraph, attrs: parent.attrs }];
+  if (!canSplit(tr.doc, at, 1, types)) return false;
+  if (dispatch) dispatch(tr.split(at, 1, types).scrollIntoView());
+  return true;
+};
+var preserveTableFollowingParagraph = (state) => {
+  const { $from } = state.selection;
+  if (!state.selection.empty || $from.depth !== 1 || $from.parent.type !== docxSchema.nodes.paragraph || $from.parent.content.size !== 0 || $from.parentOffset !== 0) {
+    return false;
+  }
+  const paragraphIndex = $from.index(0);
+  return paragraphIndex > 0 && state.doc.child(paragraphIndex - 1).type.spec.tableRole === "table";
+};
+var docxKeymap = {
+  Enter: chainCommands(leaveEmptyListItem, splitParagraph),
+  "Shift-Enter": insertLineBreak,
+  // Word and Google Docs both put a page break on this key, so it needs no learning
+  "Mod-Enter": insertPageBreak,
+  // The paragraph keeps adjacent tables separate without changing imported documents.
+  Backspace: chainCommands(preserveTableFollowingParagraph, undoInputRule),
+  "Mod-z": undo,
+  "Mod-y": redo,
+  "Shift-Mod-z": redo,
+  "Mod-b": toggleBold,
+  "Mod-i": toggleItalic,
+  "Mod-u": toggleUnderline,
+  // The one strikethrough key Word and Google Docs agree on
+  "Mod-Shift-x": toggleStrike,
+  // The link key Word and Google Docs share. It opens the panel over the selection, and with
+  // nothing there to link it reports that it did nothing, so the browser keeps its own Cmd+K
+  "Mod-k": openLinkPanel,
+  // Inside a table, moving between cells comes first (Word does the same).
+  // In a list paragraph outside a table it shifts the level; an ordinary paragraph gets a document tab.
+  Tab: chainCommands(
+    goToNextCell(1),
+    listLevelCommand(increaseListLevel),
+    insertTabFromKeyboard
+  ),
+  "Shift-Tab": chainCommands(
+    goToNextCell(-1),
+    listLevelCommand(decreaseListLevel)
+  ),
+  ArrowLeft: moveAcrossTab("left", false),
+  ArrowRight: moveAcrossTab("right", false),
+  "Shift-ArrowLeft": moveAcrossTab("left", true),
+  "Shift-ArrowRight": moveAcrossTab("right", true)
+};
+export {
+  docxKeymap
+};

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

@@ -0,0 +1,23 @@
+/**
+ * Whether the panel that reads and writes a link's address stands open.
+ *
+ * Like the two context menus, this file only records that the panel was asked for; drawing it is
+ * the React side's job (`ui/LinkPanel`). One state serves both ways in - Cmd+K
+ * (`editor/plugins/keymap`) and the toolbar button - so the panel is the same panel however it was
+ * opened, and it opens where the link is going rather than under whichever control asked for it.
+ *
+ * It closes on the document changing, which is what applying a link or taking one off does: the
+ * panel is about the selection it opened over, and after an edit that selection has been answered.
+ */
+import { type Command, type EditorState, Plugin } from "prosemirror-state";
+/** Whether the link panel is open */
+export declare function isLinkPanelOpen(state: EditorState): boolean;
+/**
+ * Opens the panel. It reports false where a link could not go on anyway - a caret standing in no
+ * link, a selection a lock leaves nothing of - so that Cmd+K there is a key this editor did not
+ * take, and a control drawn from it is drawn dead.
+ */
+export declare const openLinkPanel: Command;
+/** Closes it. Called on applying, on Escape, and on a click outside */
+export declare const closeLinkPanel: Command;
+export declare function linkPanel(): Plugin<boolean>;

package/dist/editor/plugins/linkPanel.js

@@ -0,0 +1,39 @@
+// src/editor/plugins/linkPanel.ts
+import {
+  Plugin,
+  PluginKey
+} from "prosemirror-state";
+import { canSetLink } from "../commands/linkCommands.js";
+var panelKey = new PluginKey("docxEditorLinkPanel");
+function isLinkPanelOpen(state) {
+  return panelKey.getState(state) === true;
+}
+var openLinkPanel = (state, dispatch) => {
+  if (isLinkPanelOpen(state) || !canSetLink(state)) return false;
+  if (dispatch) dispatch(state.tr.setMeta(panelKey, true));
+  return true;
+};
+var closeLinkPanel = (state, dispatch) => {
+  if (!isLinkPanelOpen(state)) return false;
+  if (dispatch) dispatch(state.tr.setMeta(panelKey, false));
+  return true;
+};
+function linkPanel() {
+  return new Plugin({
+    key: panelKey,
+    state: {
+      init: () => false,
+      apply: (tr, open) => {
+        const meta = tr.getMeta(panelKey);
+        if (typeof meta === "boolean") return meta;
+        return tr.docChanged ? false : open;
+      }
+    }
+  });
+}
+export {
+  closeLinkPanel,
+  isLinkPanelOpen,
+  linkPanel,
+  openLinkPanel
+};

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

@@ -0,0 +1,14 @@
+/**
+ * The prefixes that start a list when they are typed at the beginning of a line.
+ *
+ * Word and Google Docs both turn a line beginning with a list-looking prefix into a list item
+ * the moment the space after the prefix is typed, and drop the prefix. This does the same by
+ * running the very commands the list buttons run, so a list started by typing is in every
+ * respect the list the button makes.
+ */
+import type { Plugin } from "prosemirror-state";
+/**
+ * The plugin that watches for the prefixes.
+ * A conversion is taken back by `undoInputRule`, which Backspace is bound to.
+ */
+export declare function listInputRules(): Plugin;

package/dist/editor/plugins/listInputRules.js

@@ -0,0 +1,36 @@
+// src/editor/plugins/listInputRules.ts
+import { InputRule, inputRules } from "prosemirror-inputrules";
+import { docxSchema } from "../../schema/index.js";
+import {
+  listRefOf,
+  toggleBulletList,
+  toggleNumberedList
+} from "../commands/listCommands.js";
+var NUMBERED_PREFIX = /^1\. $/;
+var BULLET_PREFIX = /^[-*] $/;
+function transactionOf(state, command) {
+  const dispatched = [];
+  command(state, (tr) => dispatched.push(tr));
+  return dispatched[0] ?? null;
+}
+function startListByTyping(toggle) {
+  return (state, _match, start, end) => {
+    const $start = state.doc.resolve(start);
+    if ($start.parent.type !== docxSchema.nodes.paragraph) return null;
+    if ($start.parentOffset > 0) return null;
+    if (listRefOf($start.parent)) return null;
+    const listed = transactionOf(state, toggle);
+    return listed?.delete(start, end) ?? null;
+  };
+}
+function listInputRules() {
+  return inputRules({
+    rules: [
+      new InputRule(NUMBERED_PREFIX, startListByTyping(toggleNumberedList)),
+      new InputRule(BULLET_PREFIX, startListByTyping(toggleBulletList))
+    ]
+  });
+}
+export {
+  listInputRules
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Rejects transactions disallowed by `schema/locks`. A rejected IME edit also ends the browser
+ * composition on the next frame so ProseMirror cannot remain stuck in composing state.
+ */
+import { Plugin } from "prosemirror-state";
+export declare function lockedContent(): Plugin;

package/dist/editor/plugins/lockedContent.js

@@ -0,0 +1,41 @@
+// src/editor/plugins/lockedContent.ts
+import { Plugin } from "prosemirror-state";
+import { transactionAllowed } from "../../schema/locks.js";
+function endComposition(view) {
+  if (!view.composing) return;
+  const marks = view.state.storedMarks ?? view.state.selection.$from.marks();
+  view.dispatch(
+    view.state.tr.setStoredMarks(marks).setMeta("addToHistory", false)
+  );
+}
+function lockedContent() {
+  let live = null;
+  let frame = 0;
+  const afterRefusal = () => {
+    if (live?.composing !== true || frame !== 0) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      if (live) endComposition(live);
+    });
+  };
+  return new Plugin({
+    view(view) {
+      live = view;
+      return {
+        destroy() {
+          if (frame !== 0) cancelAnimationFrame(frame);
+          frame = 0;
+          live = null;
+        }
+      };
+    },
+    filterTransaction(tr, state) {
+      const allowed = transactionAllowed(tr, state.doc);
+      if (!allowed) afterRefusal();
+      return allowed;
+    }
+  });
+}
+export {
+  lockedContent
+};

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

@@ -0,0 +1,3 @@
+/** Keeps imported footnote and endnote references intact while their bodies are display-only. */
+import { Plugin } from "prosemirror-state";
+export declare function noteProtection(): Plugin;

package/dist/editor/plugins/noteProtection.js

@@ -0,0 +1,25 @@
+// src/editor/plugins/noteProtection.ts
+import { Plugin } from "prosemirror-state";
+function signatures(doc) {
+  const found = [];
+  doc.descendants((node) => {
+    if (node.type.name === "noteReference") {
+      found.push(JSON.stringify(node.attrs));
+    }
+    return true;
+  });
+  return found;
+}
+function same(a, b) {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+function noteProtection() {
+  return new Plugin({
+    filterTransaction(transaction, state) {
+      return !transaction.docChanged || same(signatures(state.doc), signatures(transaction.doc));
+    }
+  });
+}
+export {
+  noteProtection
+};

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

@@ -0,0 +1,42 @@
+/**
+ * Draws list markers and inherited indentation as decorations so display-only values never create
+ * new OOXML on export. The plugin also exposes numbering definitions to list commands.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import { type EditorState, Plugin } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+import { type Numbering } from "../../numbering/parseNumbering";
+/** A number to draw on screen and the paragraph position it attaches to */
+export interface PlacedMarker {
+    from: number;
+    to: number;
+    text: string;
+    /** The width of the hanging indent the number sits in */
+    widthPt: number;
+    /** Logical indentation taken from the level and overlaid only when the paragraph writes none. */
+    indentStartPt: number | null;
+    indentEndPt: number | null;
+    /** The first-line indentation, under the same rule */
+    textIndentPt: number | null;
+}
+/** Walks a document to find the paragraphs that get numbers and what those numbers are */
+export declare function paragraphMarkers(doc: PMNode, numbering: Numbering): PlacedMarker[];
+export declare function markerDecorations(doc: PMNode, numbering: Numbering): DecorationSet;
+/** What the plugin holds: the document's list definitions and the numbers to draw right now */
+interface NumberingState {
+    numbering: Numbering;
+    /** Whether the document has a place (numbering.xml) to write the definition of a new list */
+    canStartNewList: boolean;
+    decorations: DecorationSet;
+}
+/** This document's list definitions. Empty when the editor does not know them */
+export declare function documentNumbering(state: EditorState): Numbering;
+/**
+ * Whether a new list can be started in this document.
+ * A document without numbering.xml has nowhere to write a new definition, so it would be
+ * blocked at export time. In such a document the commands that start a list do not apply
+ * in the first place.
+ */
+export declare function canStartNewList(state: EditorState): boolean;
+export declare function numberingMarkers(numbering?: Numbering, canStartNewList?: boolean): Plugin<NumberingState>;
+export {};