@portone/docx-editor 0.1.0

package/dist/editor/insertTable.js

@@ -0,0 +1,44 @@
+// src/editor/insertTable.ts
+import { Fragment } from "prosemirror-model";
+import {
+  TextSelection
+} from "prosemirror-state";
+import { createTableNode, isTableSide } from "../docx/tableTemplate.js";
+import { documentGeometry } from "./documentStyles.js";
+function isInTable($pos) {
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    if ($pos.node(depth).type.spec.tableRole === "table") return true;
+  }
+  return false;
+}
+function insertPosition(state) {
+  const $from = state.selection.$from;
+  if ($from.depth === 0 || isInTable($from)) return null;
+  return $from.after(1);
+}
+function canInsertTable(state) {
+  return insertPosition(state) !== null;
+}
+function insertTable({ rows, columns }) {
+  return (state, dispatch) => {
+    const at = insertPosition(state);
+    if (at === null || !isTableSide(rows) || !isTableSide(columns))
+      return false;
+    if (dispatch) {
+      const tr = state.tr.insert(
+        at,
+        Fragment.fromArray([
+          createTableNode(rows, columns, documentGeometry(state)),
+          state.schema.nodes.paragraph.create()
+        ])
+      );
+      const selection = TextSelection.near(tr.doc.resolve(at + 1));
+      dispatch(tr.setSelection(selection).scrollIntoView());
+    }
+    return true;
+  };
+}
+export {
+  canInsertTable,
+  insertTable
+};

package/dist/editor/paragraphEdits.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The shared path that swaps the formatting fragments of the selected paragraphs in a single
+ * transaction.
+ *
+ * All this file takes on is which paragraphs to edit and how to write the new fragments in.
+ * How to edit a fragment is decided by the caller (lists, alignment), and the XML surgery is
+ * done by `docx/paraProps`.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import type { EditorState, Transaction } from "prosemirror-state";
+import { type StyleTable } from "../docx/formatting";
+import type { ParagraphProps } from "../docx/paraProps";
+export interface ParagraphSpot {
+    pos: number;
+    node: PMNode;
+}
+/** The paragraphs the selection spans. Selections covering several table cells are handled too */
+export declare function selectedParagraphs(state: EditorState): ParagraphSpot[];
+/**
+ * The selected paragraphs a lock leaves editable, which is what every paragraph edit works on.
+ *
+ * A locked stretch is left out rather than the whole edit refused, the policy character formatting
+ * already follows (`commands/formattingCommands`): the guard turns down a whole transaction, so
+ * asking for it would leave the rest of the selection unedited too. A selection the lock leaves
+ * nothing of edits nothing, and the command reports that of its own accord, which is the disabled
+ * state of the control that runs it.
+ *
+ * Only the paragraphs of a locked cell are shut. A paragraph merely holding a locked control keeps
+ * its own alignment, indent and style, which is what `insideLockedCell` says and
+ * `rangeTouchesLocked` would not (`schema/locks`).
+ */
+export declare function editableParagraphs(state: EditorState): ParagraphSpot[];
+/** The original formatting XML this paragraph holds. Null when there is none */
+export declare function paragraphPPr(node: PMNode): string | null;
+/**
+ * How to edit a single paragraph. Null skips that paragraph.
+ * The style table and the document's default paragraph style come along, because the display values
+ * of the edited fragment are read back with the style the paragraph wears laid underneath.
+ */
+export type ParagraphSurgery = (node: PMNode, styles: StyleTable, defaultStyleId: string | null) => ParagraphProps | null;
+/** Edits the selected paragraphs in a single transaction. Does nothing when there is nothing to edit */
+export declare function editParagraphs(state: EditorState, dispatch: ((tr: Transaction) => void) | undefined, surgery: ParagraphSurgery): boolean;

package/dist/editor/paragraphEdits.js

@@ -0,0 +1,59 @@
+// src/editor/paragraphEdits.ts
+import { effectiveParagraphFormat } from "../docx/formatting.js";
+import { docxSchema } from "../schema/index.js";
+import { insideLockedCell } from "../schema/locks.js";
+import {
+  defaultParagraphStyleId,
+  documentParagraphFormatting,
+  documentStyles
+} from "./documentStyles.js";
+function selectedParagraphs(state) {
+  const spots = /* @__PURE__ */ new Map();
+  for (const range of state.selection.ranges) {
+    state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+      if (node.type !== docxSchema.nodes.paragraph) return true;
+      spots.set(pos, node);
+      return false;
+    });
+  }
+  return Array.from(spots, ([pos, node]) => ({ pos, node }));
+}
+function editableParagraphs(state) {
+  return selectedParagraphs(state).filter(
+    (spot) => !insideLockedCell(state.doc, spot.pos)
+  );
+}
+function paragraphPPr(node) {
+  const pPr = node.attrs.pPr;
+  return typeof pPr === "string" ? pPr : null;
+}
+function writeChanges(state, changed) {
+  const tr = state.tr;
+  const formatting = documentParagraphFormatting(state);
+  for (const { spot, props } of changed) {
+    tr.setNodeMarkup(tr.mapping.map(spot.pos), void 0, {
+      ...spot.node.attrs,
+      pPr: props.pPr,
+      format: effectiveParagraphFormat(props.pPr, formatting),
+      styleRun: props.styleRun
+    });
+  }
+  return tr;
+}
+function editParagraphs(state, dispatch, surgery) {
+  const styles = documentStyles(state);
+  const defaultStyleId = defaultParagraphStyleId(state);
+  const changed = editableParagraphs(state).flatMap((spot) => {
+    const props = surgery(spot.node, styles, defaultStyleId);
+    return props ? [{ spot, props }] : [];
+  });
+  if (changed.length === 0) return false;
+  if (dispatch) dispatch(writeChanges(state, changed).scrollIntoView());
+  return true;
+}
+export {
+  editParagraphs,
+  editableParagraphs,
+  paragraphPPr,
+  selectedParagraphs
+};

package/dist/editor/plainText.d.ts

@@ -0,0 +1,3 @@
+import type { EditorView } from "prosemirror-view";
+export declare function insertPlainText(view: EditorView, source: string): void;
+export declare function insertPlainTextAt(view: EditorView, source: string, from: number, to: number): void;

package/dist/editor/plainText.js

@@ -0,0 +1,50 @@
+// src/editor/plainText.ts
+import { AllSelection, TextSelection } from "prosemirror-state";
+import { docxSchema } from "../schema/index.js";
+var AS_NODE = {
+  "\n": "hardBreak",
+  "\v": "hardBreak",
+  "\f": "hardBreak",
+  "	": "tab"
+};
+var SPLIT_AT = /([\n\u000B\u000C\t])/;
+var FORBIDDEN = /[\u0000-\u0008\u000E-\u001F]/g;
+function toPieces(source) {
+  return source.replace(/\r\n?/g, "\n").replace(FORBIDDEN, "").split(SPLIT_AT).flatMap((chunk) => {
+    const node = AS_NODE[chunk];
+    if (node) return [{ node }];
+    return chunk ? [{ text: chunk }] : [];
+  });
+}
+function insertWithSelection(view, source, selection) {
+  const pieces = toPieces(source);
+  if (pieces.length === 0) return;
+  const tr = view.state.tr.setSelection(selection);
+  for (const piece of pieces) {
+    if ("text" in piece) tr.insertText(piece.text);
+    else if (piece.node === "hardBreak") {
+      tr.replaceSelectionWith(docxSchema.nodes.hardBreak.create());
+    } else {
+      const marks = (tr.storedMarks ?? tr.selection.$from.marks()).filter(
+        (mark) => mark.type !== docxSchema.marks.tab
+      );
+      tr.replaceSelectionWith(
+        docxSchema.text("	", docxSchema.marks.tab.create().addToSet(marks)),
+        false
+      );
+    }
+  }
+  view.dispatch(tr.scrollIntoView());
+}
+function insertPlainText(view, source) {
+  insertWithSelection(view, source, view.state.selection);
+}
+function insertPlainTextAt(view, source, from, to) {
+  const { doc } = view.state;
+  const selection = from === 0 && to === doc.content.size ? new AllSelection(doc) : TextSelection.between(doc.resolve(from), doc.resolve(to));
+  insertWithSelection(view, source, selection);
+}
+export {
+  insertPlainText,
+  insertPlainTextAt
+};

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

@@ -0,0 +1,3 @@
+/** Prevents ordinary editor transactions from dropping imported bookmark range markers. */
+import { Plugin } from "prosemirror-state";
+export declare function bookmarkProtection(): Plugin;

package/dist/editor/plugins/bookmarkProtection.js

@@ -0,0 +1,28 @@
+// src/editor/plugins/bookmarkProtection.ts
+import { Plugin } from "prosemirror-state";
+var BOOKMARK_XML = /<(?:[\w.-]+:)?bookmark(?:Start|End)\b/;
+function signatures(doc) {
+  const found = [];
+  doc.descendants((node) => {
+    if (node.type.name === "bookmarkBlock") {
+      found.push(`block:${node.attrs.srcId}:${node.attrs.name}`);
+    } else if (node.type.name === "rawInline" && typeof node.attrs.xml === "string" && BOOKMARK_XML.test(node.attrs.xml)) {
+      found.push(`inline:${node.attrs.xml}`);
+    }
+    return true;
+  });
+  return found;
+}
+function same(a, b) {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+function bookmarkProtection() {
+  return new Plugin({
+    filterTransaction(transaction, state) {
+      return !transaction.docChanged || same(signatures(state.doc), signatures(transaction.doc));
+    }
+  });
+}
+export {
+  bookmarkProtection
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Previews column-edge drags in the DOM and commits one dxa-based resize transaction on release.
+ * Escape or an interrupted drag restores the rendered widths without editing the document.
+ */
+import { Plugin } from "prosemirror-state";
+/** The grabbed edge. `col` is the grid column left of the edge, `side` is which side of the pressed cell that edge is */
+export interface ColumnEdgeHit {
+    col: number;
+    side: "left" | "right";
+}
+/**
+ * Which vertical edge of a cell this horizontal position points at.
+ *
+ * A merged cell only grabs the outer edges of the grid columns it covers.
+ * The left end of the table is not grabbable because there is no column to move
+ * (that edge means table indentation, which is a different thing).
+ * We return the grabbed side as well so the guide line can stay glued to that side
+ * during the drag.
+ */
+export declare function columnEdgeAt(clientX: number, cell: {
+    readonly left: number;
+    readonly right: number;
+}, covered: {
+    readonly from: number;
+    readonly to: number;
+}, tolerance?: number): ColumnEdgeHit | null;
+export declare function columnResize(): Plugin;

package/dist/editor/plugins/columnResize.js

@@ -0,0 +1,192 @@
+// src/editor/plugins/columnResize.ts
+import { Plugin } from "prosemirror-state";
+import { TableMap } from "prosemirror-tables";
+import { spanCount } from "../../model/format.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import { columnWidthPx } from "../../styles/inlineStyle.js";
+import {
+  buildResizeColumnTransaction,
+  maxGridTotal,
+  resizedGridCols
+} from "../../table/resize.js";
+import {
+  gridTotal,
+  shiftedTableWidth,
+  tableGridCols
+} from "../../table/widths.js";
+import { documentGeometry } from "../documentStyles.js";
+import { TableNodeView } from "../views/tableView.js";
+var EDGE_TOLERANCE_PX = 4;
+var FALLBACK_DXA_PER_PX = 15;
+function columnEdgeAt(clientX, cell, covered, tolerance = EDGE_TOLERANCE_PX) {
+  if (Math.abs(clientX - cell.right) <= tolerance) {
+    return { col: covered.to - 1, side: "right" };
+  }
+  if (Math.abs(clientX - cell.left) <= tolerance && covered.from > 0) {
+    return { col: covered.from - 1, side: "left" };
+  }
+  return null;
+}
+function cellSpotAt(view, td) {
+  const $pos = view.state.doc.resolve(view.posAtDOM(td, 0));
+  for (let depth = $pos.depth; depth > 1; depth -= 1) {
+    const cell = $pos.node(depth);
+    if (cell.type.spec.tableRole !== "cell") continue;
+    const table = $pos.node(depth - 2);
+    if (table.type.spec.tableRole !== "table") return null;
+    const tablePos = $pos.before(depth - 2);
+    const from = TableMap.get(table).colCount(
+      $pos.before(depth) - tablePos - 1
+    );
+    return { tablePos, table, from, to: from + spanCount(cell.attrs.colspan) };
+  }
+  return null;
+}
+function columnElements(tableDom) {
+  return Array.from(tableDom.querySelectorAll(":scope > colgroup > col"));
+}
+function edgeUnder(view, event) {
+  const node = event.target instanceof Node ? event.target : null;
+  const element = node instanceof Element ? node : node?.parentElement;
+  const td = element?.closest("td");
+  const tableDom = td?.closest("table");
+  if (!td || !tableDom || !view.dom.contains(td)) return null;
+  const spot = cellSpotAt(view, td);
+  if (!spot) return null;
+  const gridCols = tableGridCols(spot.table);
+  if (!gridCols || gridCols.length !== TableMap.get(spot.table).width) {
+    return null;
+  }
+  const hit = columnEdgeAt(event.clientX, td.getBoundingClientRect(), spot);
+  if (!hit || hit.col < 0 || hit.col >= gridCols.length) return null;
+  return { ...spot, ...hit, gridCols, tableDom, cellDom: td };
+}
+function dxaPerPx(gridCols, tableDom) {
+  const drawn = tableDom.getBoundingClientRect().width;
+  return drawn > 0 ? gridTotal(gridCols) / drawn : FALLBACK_DXA_PER_PX;
+}
+function createGuide() {
+  const guide = document.createElement("div");
+  guide.className = editorClassNames.columnResizeGuide;
+  document.body.appendChild(guide);
+  return guide;
+}
+function moveGuide(drag) {
+  const { cellDom, side, tableDom } = drag.target;
+  const table = tableDom.getBoundingClientRect();
+  drag.guide.style.left = `${cellDom.getBoundingClientRect()[side]}px`;
+  drag.guide.style.top = `${table.top}px`;
+  drag.guide.style.height = `${table.height}px`;
+}
+function showPreview(drag, gridCols) {
+  gridCols.forEach((dxa, at) => {
+    const col = drag.cols[at];
+    if (col) col.style.width = `${columnWidthPx(dxa)}px`;
+  });
+  const width = shiftedTableWidth(drag.target.table, gridCols);
+  if (width?.type === "dxa") {
+    drag.target.tableDom.style.width = `${columnWidthPx(width.twips)}px`;
+  }
+  moveGuide(drag);
+}
+function hidePreview(drag) {
+  drag.cols.forEach((col, at) => {
+    col.style.width = drag.colWidths[at] ?? "";
+  });
+  drag.target.tableDom.style.width = drag.tableWidth;
+  drag.guide.remove();
+}
+function columnResize() {
+  let drag = null;
+  function stop() {
+    if (!drag) return;
+    window.removeEventListener("mousemove", onMove, true);
+    window.removeEventListener("mouseup", onUp, true);
+    window.removeEventListener("keydown", onKey, true);
+    hidePreview(drag);
+    drag.view.dom.classList.remove(editorClassNames.columnResize);
+    drag = null;
+  }
+  function onMove(event) {
+    if (!drag) return;
+    event.preventDefault();
+    const { gridCols, col } = drag.target;
+    const moved = (event.clientX - drag.startX) * drag.dxaPerPx;
+    drag.width = gridCols[col] + Math.round(moved);
+    const preview = resizedGridCols(gridCols, col, drag.width, drag.maxTotal);
+    showPreview(drag, preview ?? gridCols);
+  }
+  function onUp() {
+    const current = drag;
+    if (!current) return;
+    stop();
+    const tr = buildResizeColumnTransaction(
+      current.view.state,
+      {
+        tablePos: current.target.tablePos,
+        col: current.target.col,
+        width: current.width
+      },
+      documentGeometry(current.view.state)
+    );
+    if (tr) current.view.dispatch(tr);
+  }
+  function onKey(event) {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    stop();
+  }
+  function start(view, event) {
+    const target = edgeUnder(view, event);
+    if (!target) return false;
+    const cols = columnElements(target.tableDom);
+    if (cols.length !== target.gridCols.length) return false;
+    drag = {
+      view,
+      target,
+      maxTotal: maxGridTotal(target.table, documentGeometry(view.state)),
+      startX: event.clientX,
+      dxaPerPx: dxaPerPx(target.gridCols, target.tableDom),
+      cols,
+      colWidths: cols.map((col) => col.style.width),
+      tableWidth: target.tableDom.style.width,
+      guide: createGuide(),
+      width: target.gridCols[target.col]
+    };
+    moveGuide(drag);
+    view.dom.classList.add(editorClassNames.columnResize);
+    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("mouseup", onUp, true);
+    window.addEventListener("keydown", onKey, true);
+    return true;
+  }
+  return new Plugin({
+    view: () => ({ destroy: stop }),
+    props: {
+      // Keeping ProseMirror from reverting the colgroup the preview edited is all this view does
+      nodeViews: { table: (node) => new TableNodeView(node) },
+      handleDOMEvents: {
+        mousemove(view, event) {
+          if (drag) return false;
+          const over = view.editable && edgeUnder(view, event) !== null;
+          view.dom.classList.toggle(editorClassNames.columnResize, over);
+          return false;
+        },
+        mouseleave(view) {
+          if (!drag) view.dom.classList.remove(editorClassNames.columnResize);
+          return false;
+        },
+        mousedown(view, event) {
+          if (!view.editable || drag || event.button !== 0) return false;
+          if (!start(view, event)) return false;
+          event.preventDefault();
+          return true;
+        }
+      }
+    }
+  });
+}
+export {
+  columnEdgeAt,
+  columnResize
+};

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

@@ -0,0 +1,3 @@
+/** Draws the text ranges identified by Word comment markers. */
+import { Plugin } from "prosemirror-state";
+export declare function commentDecorations(): Plugin;

package/dist/editor/plugins/commentDecorations.js

@@ -0,0 +1,23 @@
+// src/editor/plugins/commentDecorations.ts
+import { Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { editorClassNames } from "../../styles/classNames.js";
+import { documentComments } from "../commands/commentCommands.js";
+function commentDecorations() {
+  return new Plugin({
+    props: {
+      decorations(state) {
+        const decorations = documentComments(state).filter((comment) => comment.from < comment.to).map(
+          (comment) => Decoration.inline(comment.from, comment.to, {
+            class: editorClassNames.commentRange,
+            "data-comment-id": comment.id
+          })
+        );
+        return DecorationSet.create(state.doc, decorations);
+      }
+    }
+  });
+}
+export {
+  commentDecorations
+};

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

@@ -0,0 +1,5 @@
+/** Keeps identifiers from the opened Comments parts reserved for the lifetime of the editor state. */
+import { type EditorState, Plugin } from "prosemirror-state";
+export declare function commentReservations(ids: Iterable<string>, paraIds: Iterable<string>): Plugin;
+export declare function reservedCommentIds(state: EditorState): ReadonlySet<string>;
+export declare function reservedCommentParaIds(state: EditorState): ReadonlySet<string>;

package/dist/editor/plugins/commentReservations.js

@@ -0,0 +1,26 @@
+// src/editor/plugins/commentReservations.ts
+import { Plugin, PluginKey } from "prosemirror-state";
+var commentReservationsKey = new PluginKey(
+  "docxCommentReservations"
+);
+function commentReservations(ids, paraIds) {
+  const reserved = { ids: new Set(ids), paraIds: new Set(paraIds) };
+  return new Plugin({
+    key: commentReservationsKey,
+    state: {
+      init: () => reserved,
+      apply: (_transaction, value) => value
+    }
+  });
+}
+function reservedCommentIds(state) {
+  return commentReservationsKey.getState(state)?.ids ?? /* @__PURE__ */ new Set();
+}
+function reservedCommentParaIds(state) {
+  return commentReservationsKey.getState(state)?.paraIds ?? /* @__PURE__ */ new Set();
+}
+export {
+  commentReservations,
+  reservedCommentIds,
+  reservedCommentParaIds
+};

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

@@ -0,0 +1,10 @@
+/**
+ * Where a drop lands.
+ *
+ * Both plugins that accept a drop from outside - plain text and image files - put what
+ * they insert at the caret, so the caret has to be moved to the spot the mouse let go of
+ * first.
+ */
+import type { EditorView } from "prosemirror-view";
+/** Moves the caret to the drop position. If that position cannot be found, the caret stays where it was */
+export declare function moveCaretToDrop(view: EditorView, event: DragEvent): void;

package/dist/editor/plugins/dropCaret.js

@@ -0,0 +1,11 @@
+// src/editor/plugins/dropCaret.ts
+import { TextSelection } from "prosemirror-state";
+function moveCaretToDrop(view, event) {
+  const spot = view.posAtCoords({ left: event.clientX, top: event.clientY });
+  if (!spot) return;
+  const selection = TextSelection.near(view.state.doc.resolve(spot.pos));
+  view.dispatch(view.state.tr.setSelection(selection));
+}
+export {
+  moveCaretToDrop
+};

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

@@ -0,0 +1,8 @@
+import { Plugin } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+interface ImagePasteState {
+    decorations: DecorationSet;
+    cancelVersion: number;
+}
+export declare function imagePaste(): Plugin<ImagePasteState>;
+export {};