@portone/docx-editor 0.4.0 → 0.5.1

package/dist/schema/clipboard.js

@@ -0,0 +1,288 @@
+// src/schema/clipboard.ts
+import {
+  DOMSerializer,
+  Fragment
+} from "prosemirror-model";
+import {
+  spanCount,
+  toCellFormat,
+  toGridCols,
+  toParagraphFormat,
+  toRowFormat,
+  toRunFormat,
+  toTableFormat,
+  toTableWidth
+} from "../model/format.js";
+import { styleIdOf } from "../ooxml/props.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { DEFAULT_FONT_FALLBACKS } from "../styles/fontStack.js";
+import {
+  cellStyle,
+  columnWidthPx,
+  paragraphStyle,
+  rowStyle,
+  tableStyle
+} from "../styles/inlineStyle.js";
+import { isPageBreak } from "./docxSchema.js";
+import { imageAttrs, runAttrs } from "./rendering.js";
+var COPIED_STYLE_ATTRIBUTE = "data-style";
+function safeHref(value) {
+  const href = value?.trim() ?? "";
+  if (href === "") return null;
+  if (/^(?:https?|mailto|tel):/i.test(href)) return href;
+  return /^(?:[./]|#)/.test(href) ? href : null;
+}
+function textAttr(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function noteLabel(node) {
+  return node.attrs.customMarkFollows === true ? "" : textAttr(node.attrs.label) ?? "";
+}
+function oneLine(text) {
+  return text.replace(/[\n\f]+/g, " ");
+}
+function spanAttribute(count) {
+  const span = spanCount(count);
+  return span > 1 ? `${span}` : void 0;
+}
+function preservedText(node) {
+  const display = node.attrs.display;
+  if (display === "break") return "\n";
+  if (display !== "text" && display !== "chip") return null;
+  const drawn = textAttr(node.attrs.text);
+  return drawn === void 0 || drawn === "" ? null : drawn;
+}
+var PRESERVED_SPEC = {
+  toClipboardDOM: (node) => {
+    const said = preservedText(node);
+    if (said === null) return null;
+    return said === "\n" ? ["br"] : ["span", said];
+  },
+  toClipboardText: preservedText
+};
+var WRITES_NOTHING = {
+  toClipboardDOM: null,
+  toClipboardText: null
+};
+var CLIPBOARD_NODES = {
+  // A slice carries blocks, never the document itself, so neither answer is ever asked for
+  doc: WRITES_NOTHING,
+  paragraph: {
+    toClipboardDOM: (node) => [
+      "p",
+      {
+        class: editorClassNames.paragraph,
+        style: paragraphStyle(
+          toParagraphFormat(node.attrs.format),
+          toRunFormat(node.attrs.styleRun)
+        ),
+        [COPIED_STYLE_ATTRIBUTE]: styleIdOf(node.attrs.pPr) ?? void 0
+      },
+      0
+    ],
+    toClipboardText: (_node, children) => children.join("")
+  },
+  table: {
+    toClipboardDOM: (node) => {
+      const attrs = {
+        class: editorClassNames.table,
+        style: tableStyle(
+          toTableFormat(node.attrs.format),
+          toTableWidth(node.attrs.tblW)
+        )
+      };
+      const body = ["tbody", 0];
+      const columns = toGridCols(node.attrs.gridCols).map((dxa) => [
+        "col",
+        { style: `width:${columnWidthPx(dxa)}px` }
+      ]);
+      if (columns.length === 0) return ["table", attrs, body];
+      return ["table", attrs, ["colgroup", ...columns], body];
+    },
+    toClipboardText: (_node, children) => children.join("\n")
+  },
+  tableRow: {
+    toClipboardDOM: (node) => [
+      "tr",
+      {
+        class: editorClassNames.tableRow,
+        style: rowStyle(toRowFormat(node.attrs.format))
+      },
+      0
+    ],
+    toClipboardText: (_node, children) => children.join("	")
+  },
+  tableCell: {
+    toClipboardDOM: (node) => [
+      "td",
+      {
+        class: editorClassNames.tableCell,
+        style: cellStyle(toCellFormat(node.attrs.format)),
+        colspan: spanAttribute(node.attrs.colspan),
+        rowspan: spanAttribute(node.attrs.rowspan)
+      },
+      0
+    ],
+    // A tab stands between two cells and a line between two rows wherever a table is pasted as
+    // text, so nothing inside a cell may write a line: several paragraphs, a line break of their
+    // own and a nested table all say what they hold on the one line this cell stands on
+    toClipboardText: (_node, children) => oneLine(children.join(" "))
+  },
+  rawBlock: WRITES_NOTHING,
+  hardBreak: {
+    toClipboardDOM: () => ["br"],
+    // A page break ends more than a line, and the form feed is what says so in plain text
+    toClipboardText: (node) => isPageBreak(node.attrs.brAttrs) ? "\f" : "\n"
+  },
+  image: {
+    // The measure the document keeps stays behind. The pixels it was drawn at are what another
+    // application reads a size from, and what a paste back into this editor reads one from
+    toClipboardDOM: (node) => ["img", imageAttrs(node.attrs)],
+    // A picture is not text. But a copy may be read where no picture can follow, and there the
+    // words the document gave it for that very case are better than a gap
+    toClipboardText: (node) => textAttr(node.attrs.alt) ?? ""
+  },
+  commentStart: WRITES_NOTHING,
+  commentEnd: WRITES_NOTHING,
+  commentReference: WRITES_NOTHING,
+  noteReference: {
+    // A note whose own mark follows draws no number, and an empty superscript would stand for
+    // nothing wherever the copy lands
+    toClipboardDOM: (node) => {
+      const label = noteLabel(node);
+      if (label === "") return null;
+      const kind = node.attrs.kind === "endnote" ? "Endnote" : "Footnote";
+      return ["sup", { "aria-label": `${kind} ${label}` }, label];
+    },
+    toClipboardText: noteLabel
+  },
+  rawRunContent: PRESERVED_SPEC,
+  rawInline: PRESERVED_SPEC,
+  text: {
+    // `DOMSerializer` writes a text node itself and never asks a spec for one, so there is no
+    // drawing to declare. The characters travel as they stand
+    toClipboardDOM: null,
+    toClipboardText: (node) => node.text ?? ""
+  }
+};
+var CLIPBOARD_MARKS = {
+  // A content control is a wrapper the file keeps and nothing outside this editor reads back, so
+  // the text it held leaves on its own rather than inside a span standing for nothing
+  sdt: { toClipboardDOM: null },
+  link: {
+    // The editor draws the address as data so that a click inside the text places the caret.
+    // Anywhere else an anchor is what a link is: it follows in mail or a document, and it comes
+    // back as a link when it is pasted here again
+    toClipboardDOM: (mark) => {
+      const href = safeHref(textAttr(mark.attrs.href) ?? null);
+      const attrs = { class: editorClassNames.link, href: href ?? void 0 };
+      return href === null ? ["span", attrs, 0] : ["a", attrs, 0];
+    }
+  },
+  run: {
+    // The built-in fallbacks rather than the ones this editor was given: a copy is read where the
+    // host's font list means nothing, and the schema cannot see which editor it is drawing for
+    toClipboardDOM: (mark) => [
+      "span",
+      runAttrs(mark.attrs, DEFAULT_FONT_FALLBACKS),
+      0
+    ]
+  },
+  tab: { toClipboardDOM: () => ["span", { class: editorClassNames.tab }, 0] }
+};
+var clipboardSpecs = { nodes: CLIPBOARD_NODES, marks: CLIPBOARD_MARKS };
+var NODES_BY_NAME = CLIPBOARD_NODES;
+function nodeSpec(node) {
+  return NODES_BY_NAME[node.type.name];
+}
+function clipboardDOMOf(node) {
+  const spec = nodeSpec(node);
+  if (spec === void 0 || spec.toClipboardDOM === null) return null;
+  return spec.toClipboardDOM(node);
+}
+function written(fragment) {
+  const kept = [];
+  fragment.forEach((child) => {
+    if (child.isText || clipboardDOMOf(child) !== null) kept.push(child);
+  });
+  return kept.length === fragment.childCount ? fragment : Fragment.from(kept);
+}
+var ClipboardSerializer = class extends DOMSerializer {
+  constructor(stampCopy) {
+    super(clipboardNodes(), clipboardMarks());
+    this.stampCopy = stampCopy;
+  }
+  stampCopy;
+  serializeFragment(fragment, options, target) {
+    const dom = super.serializeFragment(written(fragment), options, target);
+    if (target !== void 0) return dom;
+    if (dom.firstChild === null && fragment.childCount > 0) {
+      carrier(dom, options?.document);
+    }
+    this.stampCopy?.(dom);
+    return dom;
+  }
+};
+function carrier(copy, document) {
+  const owner = document ?? copy.ownerDocument;
+  if (owner !== null) copy.appendChild(owner.createElement("span"));
+}
+function clipboardNodes() {
+  return Object.fromEntries(
+    Object.entries(CLIPBOARD_NODES).flatMap(([name, spec]) => {
+      const draw = spec.toClipboardDOM;
+      return draw === null ? [] : [
+        [
+          name,
+          (node) => {
+            const drawn = draw(node);
+            if (drawn === null) {
+              throw new Error(
+                `${name} was serialized after drawing nothing`
+              );
+            }
+            return drawn;
+          }
+        ]
+      ];
+    })
+  );
+}
+function clipboardMarks() {
+  return Object.fromEntries(
+    Object.entries(CLIPBOARD_MARKS).flatMap(
+      ([name, spec]) => (
+        // A mark with no drawing of its own is left out, and `DOMSerializer` writes the content it
+        // covered without a wrapper
+        spec.toClipboardDOM === null ? [] : [[name, spec.toClipboardDOM]]
+      )
+    )
+  );
+}
+function clipboardSerializer(stampCopy) {
+  return new ClipboardSerializer(stampCopy);
+}
+function textPieces(fragment) {
+  const pieces = [];
+  fragment.forEach((child) => {
+    const piece = clipboardTextOf(child);
+    if (piece !== null) pieces.push(piece);
+  });
+  return pieces;
+}
+function clipboardTextOf(node) {
+  const spec = nodeSpec(node);
+  if (spec === void 0 || spec.toClipboardText === null) return null;
+  return spec.toClipboardText(node, textPieces(node.content));
+}
+function clipboardText(slice) {
+  const pieces = textPieces(slice.content);
+  return pieces.join(slice.content.firstChild?.isInline === true ? "" : "\n");
+}
+export {
+  COPIED_STYLE_ATTRIBUTE,
+  clipboardSerializer,
+  clipboardSpecs,
+  clipboardText,
+  safeHref
+};

package/dist/schema/docxSchema.d.ts

@@ -15,4 +15,12 @@ import { Schema } from "prosemirror-model";
 export { imageNodeSpec, runMarkSpec } from "./rendering";
 /** Whether this is a page-splitting break (`<w:br w:type="page"/>`). Read straight from the original attribute text */
 export declare function isPageBreak(brAttrs: unknown): boolean;
-export declare const docxSchema: Schema<"bookmarkBlock" | "commentEnd" | "commentReference" | "commentStart" | "doc" | "docxRaw" | "hardBreak" | "image" | "noteReference" | "paragraph" | "rawBlock" | "rawInline" | "table" | "tableCell" | "tableRow" | "text", "link" | "run" | "sdt" | "tab">;
+/**
+ * How a preserved fragment is drawn, baked into the node's attrs when the document is opened
+ * (`docx/importPolicy`) so that this layer reads a value rather than a vocabulary.
+ *
+ * `hidden` puts nothing on screen, `text` draws the character the fragment stands for, `break`
+ * ends the line where it stood, and `chip` draws a small box naming the element.
+ */
+export type PreservedDisplay = "hidden" | "text" | "break" | "chip";
+export declare const docxSchema: Schema<"commentEnd" | "commentReference" | "commentStart" | "doc" | "hardBreak" | "image" | "noteReference" | "paragraph" | "rawBlock" | "rawInline" | "rawRunContent" | "table" | "tableCell" | "tableRow" | "text", "link" | "run" | "sdt" | "tab">;