@portone/docx-editor 0.1.0

package/dist/editor/externalClipboard.js

@@ -0,0 +1,323 @@
+// src/editor/externalClipboard.ts
+import { Fragment, Slice } from "prosemirror-model";
+import { Plugin } from "prosemirror-state";
+import { effectiveParagraphFormat, styleIdOf } from "../docx/formatting.js";
+import { withParagraphStyle } from "../docx/paraProps.js";
+import { MAX_ILVL, nextNumId } from "../numbering/listTemplate.js";
+import { docxSchema } from "../schema/index.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { PASTED_IMAGE_ATTRIBUTE } from "./clipboard/images.js";
+import {
+  appendInline,
+  contextFor,
+  marksFor,
+  withInlineStyle
+} from "./clipboard/inlineFormatting.js";
+import { listRefOf } from "./commands/listCommands.js";
+import {
+  defaultParagraphStyleId,
+  documentParagraphFormatting,
+  documentParagraphStyles,
+  documentStyles
+} from "./documentStyles.js";
+import { insertPlainText } from "./plainText.js";
+import { moveCaretToDrop } from "./plugins/dropCaret.js";
+import {
+  canStartNewList,
+  documentNumbering
+} from "./plugins/numberingDecorations.js";
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "DIV",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "LI",
+  "P",
+  "PRE",
+  "SECTION"
+]);
+var HEADING_LEVELS = {
+  H1: 1,
+  H2: 2,
+  H3: 3,
+  H4: 4,
+  H5: 5,
+  H6: 6
+};
+var HEADING_FALLBACKS = {
+  1: { bold: true, fontSizePt: 24 },
+  2: { bold: true, fontSizePt: 18 },
+  3: { bold: true, fontSizePt: 14 },
+  4: { bold: true, fontSizePt: 12 },
+  5: { bold: true, fontSizePt: 10 },
+  6: { bold: true, fontSizePt: 8 }
+};
+function normalizedStyleName(value) {
+  return value.toLowerCase().replace(/[\s_-]+/g, "");
+}
+function copiedStyleId(element) {
+  return element.classList.contains(editorClassNames.paragraph) ? styleIdOf(element.getAttribute("data-ppr")) : null;
+}
+function headingLevel(element, sourceStyleId) {
+  const direct = HEADING_LEVELS[element.tagName];
+  if (direct !== void 0) return direct;
+  const match = /^heading([1-6])$/.exec(
+    normalizedStyleName(sourceStyleId ?? "")
+  );
+  return match ? Number.parseInt(match[1] ?? "", 10) : null;
+}
+function destinationStyleId(state, sourceStyleId, level) {
+  const styles = documentParagraphStyles(state);
+  if (sourceStyleId && styles.some((style) => style.id === sourceStyleId)) {
+    return sourceStyleId;
+  }
+  if (level === null) return null;
+  const wanted = `heading${level}`;
+  return styles.find(
+    (style) => normalizedStyleName(style.id) === wanted || normalizedStyleName(style.name) === wanted
+  )?.id ?? null;
+}
+function blockContext(state, parent, element, preserveParagraphStyle) {
+  const editorParagraph = element.classList.contains(
+    editorClassNames.paragraph
+  );
+  const sourceStyleId = copiedStyleId(element);
+  const level = headingLevel(element, sourceStyleId);
+  if (!preserveParagraphStyle && editorParagraph) {
+    return {
+      inline: contextFor(parent, element),
+      paragraph: null
+    };
+  }
+  const styleId = destinationStyleId(state, sourceStyleId, level);
+  const paragraph = styleId === null ? null : withParagraphStyle(
+    null,
+    styleId,
+    documentStyles(state),
+    defaultParagraphStyleId(state)
+  );
+  const usesDestinationStyle = editorParagraph && (sourceStyleId === null || paragraph !== null);
+  let inline = parent;
+  if (paragraph === null && level !== null) {
+    inline = withInlineStyle(inline, HEADING_FALLBACKS[level] ?? {});
+  }
+  return {
+    inline: contextFor(inline, element, !usesDestinationStyle),
+    paragraph
+  };
+}
+function listParagraphAttrs(state, list) {
+  if (!list || list.numId === null) return null;
+  const ilvl = Math.min(MAX_ILVL, list.level);
+  const pPr = `<w:pPr><w:numPr><w:ilvl w:val="${ilvl}"/><w:numId w:val="${list.numId}"/></w:numPr></w:pPr>`;
+  return {
+    pPr,
+    format: effectiveParagraphFormat(pPr, documentParagraphFormatting(state))
+  };
+}
+function paragraphAttrs(state, list, paragraph) {
+  const listed = listParagraphAttrs(state, list);
+  if (listed) return listed;
+  return paragraph ? {
+    pPr: paragraph.pPr,
+    format: effectiveParagraphFormat(
+      paragraph.pPr,
+      documentParagraphFormatting(state)
+    ),
+    styleRun: paragraph.styleRun
+  } : null;
+}
+function usedNumIds(state) {
+  const used = new Set(documentNumbering(state).lists.keys());
+  state.doc.descendants((node) => {
+    if (node.type !== docxSchema.nodes.paragraph) return true;
+    const ref = listRefOf(node);
+    if (ref) used.add(ref.numId);
+    return false;
+  });
+  return used;
+}
+var HtmlReader = class {
+  constructor(state, preserveParagraphStyles, images) {
+    this.state = state;
+    this.preserveParagraphStyles = preserveParagraphStyles;
+    this.images = images;
+    this.used = usedNumIds(state);
+    this.canCreateLists = canStartNewList(state);
+  }
+  state;
+  preserveParagraphStyles;
+  images;
+  blocks = [];
+  used;
+  canCreateLists;
+  read(root) {
+    this.readFlow(root, { style: {}, href: null, preserveWhitespace: false });
+    return this.blocks;
+  }
+  appendInline(target, node, context) {
+    appendInline(target, node, context, (content, element, inline) => {
+      if (element.tagName !== "IMG") return false;
+      const token = element.getAttribute(PASTED_IMAGE_ATTRIBUTE);
+      const image = token === null ? void 0 : this.images.get(token);
+      if (!image) return true;
+      content.push(
+        docxSchema.nodes.image.create(
+          {
+            ...image,
+            // The source drawing may point at a relationship in another package.
+            xml: null
+          },
+          null,
+          marksFor(inline)
+        )
+      );
+      return true;
+    });
+  }
+  addParagraph(content, list = null, paragraph = null) {
+    if (list && list.numId === null) {
+      const marker = list.kind === "bullet" ? "\u2022 " : "1. ";
+      content.unshift(docxSchema.text(marker));
+    }
+    this.blocks.push(
+      docxSchema.nodes.paragraph.create(
+        paragraphAttrs(this.state, list, paragraph),
+        content
+      )
+    );
+  }
+  readFlow(parent, context, paragraph = null) {
+    let inline = [];
+    const flush = () => {
+      if (inline.length === 0) return;
+      this.addParagraph(inline, null, paragraph);
+      inline = [];
+    };
+    for (const child of parent.childNodes) {
+      const element = child.nodeType === child.ELEMENT_NODE ? child : null;
+      if (element?.tagName === "UL" || element?.tagName === "OL") {
+        flush();
+        this.readList(element, context, 0, null);
+      } else if (element && BLOCK_TAGS.has(element.tagName)) {
+        flush();
+        const before = this.blocks.length;
+        const block = blockContext(
+          this.state,
+          context,
+          element,
+          this.preserveParagraphStyles
+        );
+        this.readFlow(element, block.inline, block.paragraph);
+        if (this.blocks.length === before) {
+          this.addParagraph([], null, block.paragraph);
+        }
+      } else {
+        this.appendInline(inline, child, context);
+      }
+    }
+    flush();
+  }
+  takeNumId(kind) {
+    if (!this.canCreateLists) return null;
+    const id = nextNumId(this.used, kind);
+    this.used.add(id);
+    return id;
+  }
+  readList(list, context, level, inherited) {
+    const kind = list.tagName === "UL" ? "bullet" : "numbered";
+    const listContext = {
+      kind,
+      numId: inherited?.kind === kind ? inherited.numId : this.takeNumId(kind),
+      level
+    };
+    const items = Array.from(list.children).filter(
+      (child) => child.tagName === "LI"
+    );
+    for (const item of items) {
+      const itemContext = contextFor(context, item);
+      const content = [];
+      for (const child of item.childNodes) {
+        const nested = child.nodeType === child.ELEMENT_NODE ? child : null;
+        if (nested?.tagName === "UL" || nested?.tagName === "OL") continue;
+        this.appendInline(content, child, itemContext);
+      }
+      this.addParagraph(content, listContext);
+      for (const nested of Array.from(item.children)) {
+        if (nested.tagName === "UL" || nested.tagName === "OL") {
+          this.readList(
+            nested,
+            itemContext,
+            level + 1,
+            listContext
+          );
+        }
+      }
+    }
+  }
+};
+function sliceDepth(root) {
+  const marker = root.querySelector("[data-pm-slice]");
+  const openStart = Number.parseInt(
+    marker?.getAttribute("data-pm-slice")?.split(/\s+/, 1)[0] ?? "",
+    10
+  );
+  if (Number.isFinite(openStart)) return openStart === 0 ? 0 : 1;
+  const blocks = [...BLOCK_TAGS, "OL", "UL"].map((tag) => tag.toLowerCase());
+  return root.querySelector(blocks.join(",")) ? 0 : 1;
+}
+function richHtmlSlice(state, document, source, images = /* @__PURE__ */ new Map()) {
+  if (source.trim() === "") return null;
+  const template = document.createElement("template");
+  template.innerHTML = source;
+  const open = sliceDepth(template.content);
+  const blocks = new HtmlReader(state, open === 0, images).read(
+    template.content
+  );
+  return blocks.length === 0 ? null : new Slice(Fragment.fromArray([...blocks]), open, open);
+}
+function insertRichHtml(view, source) {
+  const slice = richHtmlSlice(view.state, view.dom.ownerDocument, source);
+  if (slice === null) return false;
+  view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+  return true;
+}
+function insertClipboardData(view, data) {
+  if (insertRichHtml(view, data.html ?? "")) return;
+  insertPlainText(view, data.text ?? "");
+}
+function externalClipboard() {
+  return new Plugin({
+    props: {
+      handlePaste(view, event) {
+        insertClipboardData(view, {
+          html: event.clipboardData?.getData("text/html"),
+          text: event.clipboardData?.getData("text/plain")
+        });
+        return true;
+      },
+      handleDrop(view, event) {
+        if (view.dragging) return false;
+        const text = event.dataTransfer?.getData("text/plain") ?? "";
+        if (text) {
+          moveCaretToDrop(view, event);
+          insertPlainText(view, text);
+        }
+        return true;
+      }
+    }
+  });
+}
+export {
+  externalClipboard,
+  insertClipboardData,
+  insertRichHtml,
+  richHtmlSlice
+};

package/dist/editor/imageFiles.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Image files coming in from outside: from the picker the toolbar opens, from a paste, and
+ * from a drop.
+ *
+ * All three take one path. The file is read as a data URL, the decoded image states its
+ * natural pixel size, and that size - shrunk to the width of a line of body text when the
+ * image is wider than the page - becomes the size the drawing records.
+ * Only the kinds `docx/image` can write back are taken; a file of any other kind is left
+ * where it was, for whoever else wants the event.
+ */
+import { Plugin } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ImageExtent } from "../ooxml/image";
+import { type ImageToInsert } from "./insertImage";
+/** What a file picker is told to accept: the kinds we can both draw and write back */
+export declare const IMAGE_FILE_ACCEPT: string;
+/** Anything holding a list of files: a clipboard, a drag, a file input */
+interface FileCarrier {
+    readonly files: ArrayLike<File> | null;
+}
+/** The image files a clipboard, a drag or an input is carrying, in the order they came */
+export declare function imageFilesIn(carrier: FileCarrier | null | undefined): File[];
+/**
+ * The size an image is first shown at.
+ *
+ * Its own pixel size, shrunk to the supplied width and height caps. A photo straight off a
+ * camera would otherwise come in several times wider than the paper. An image that already
+ * fits is never grown.
+ * Null for a size we cannot show, so nothing goes in that would draw as an empty box.
+ *
+ * The width is the open document's own (`documentBodyWidthPx`). A caller with no document to
+ * ask gets the A4 body width, which is the width every document used to be fitted to.
+ */
+export declare function fittedExtent(width: number, height: number, maxWidthPx?: number, maxHeightPx?: number): ImageExtent | null;
+export declare function boundedImageSrc(source: unknown): string | null;
+export declare function imageSourceByteLength(source: string): number;
+/**
+ * Reads one file into the values an image node needs.
+ * Null for a file that is not an image kind we can carry, or one the browser could not
+ * decode.
+ *
+ * `maxWidthPx` is the width an image wider than the page is shrunk to, which the caller
+ * reads off the document it is inserting into.
+ */
+export declare function readImageFile(file: File, maxWidthPx?: number): Promise<ImageToInsert | null>;
+export interface ImageReadOptions {
+    maxWidthPx?: number;
+    maxHeightPx?: number;
+    preferredExtent?: ImageExtent | null;
+    alt?: string | null;
+    signal?: AbortSignal;
+}
+export declare function readImageSource(source: string, { maxWidthPx, maxHeightPx, preferredExtent, alt, signal, }?: ImageReadOptions): Promise<ImageToInsert | null>;
+export declare function readImageBlob(source: Blob, options?: ImageReadOptions): Promise<ImageToInsert | null>;
+/**
+ * Puts the files into the document one after another, each at the position the one before
+ * it left the caret. A file that could not be read is skipped.
+ *
+ * Each image is fitted to one line of body text on the document's own paper, read once up
+ * front: the paper is fixed for as long as the document is open.
+ * Reading a file is asynchronous, so the editor may be gone by the time the bytes are
+ * there; a torn down view is left alone.
+ */
+export declare function insertImageFiles(view: EditorView, files: readonly File[]): Promise<void>;
+/**
+ * The plugin that takes image files pasted or dropped onto the paper.
+ *
+ * It has to sit ahead of the plain-text plugin, which answers for every paste and drop
+ * whether or not it has anything to insert (see the plugin order in `createEditor.ts`).
+ * An event carrying no image file is passed on untouched, so text keeps coming in exactly
+ * as it did.
+ */
+export declare function imageFiles(): Plugin;
+export {};

package/dist/editor/imageFiles.js

@@ -0,0 +1,173 @@
+// src/editor/imageFiles.ts
+import { Plugin } from "prosemirror-state";
+import { MAX_IMAGE_BYTES } from "../docx/media.js";
+import { A4_BODY_WIDTH } from "../docx/pageGeometry.js";
+import {
+  emuToPx,
+  IMAGE_MIMES,
+  imageBase64Of,
+  isImageMime,
+  pxToEmu,
+  toImageSrc
+} from "../ooxml/image.js";
+import { documentBodyWidthPx } from "./documentStyles.js";
+import { insertImage } from "./insertImage.js";
+import { moveCaretToDrop } from "./plugins/dropCaret.js";
+var IMAGE_FILE_ACCEPT = IMAGE_MIMES.join(",");
+function imageFilesIn(carrier) {
+  const files = carrier?.files;
+  return files ? Array.from(files).filter((file) => isImageMime(file.type)) : [];
+}
+function fittedExtent(width, height, maxWidthPx = A4_BODY_WIDTH.px, maxHeightPx = Number.POSITIVE_INFINITY) {
+  if (!Number.isFinite(width) || !Number.isFinite(height) || !(width > 0) || !(height > 0) || !(maxWidthPx > 0) || !(maxHeightPx > 0)) {
+    return null;
+  }
+  const scale = Math.min(1, maxWidthPx / width, maxHeightPx / height);
+  const extent = {
+    cx: pxToEmu(width * scale),
+    cy: pxToEmu(height * scale)
+  };
+  return Number.isSafeInteger(extent.cx) && Number.isSafeInteger(extent.cy) && extent.cx > 0 && extent.cy > 0 ? extent : null;
+}
+function readDataUrl(file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      "load",
+      () => resolve(typeof reader.result === "string" ? reader.result : null)
+    );
+    reader.addEventListener("error", () => resolve(null));
+    reader.readAsDataURL(file);
+  });
+}
+function imageByteLength(src) {
+  const base64 = imageBase64Of(src);
+  const padding = base64.endsWith("==") ? 2 : base64.endsWith("=") ? 1 : 0;
+  return Math.floor(base64.length * 3 / 4) - padding;
+}
+function imageMimeFromBytes(binary) {
+  const byte = (index) => binary.charCodeAt(index);
+  if (byte(0) === 137 && binary.slice(1, 4) === "PNG" && [13, 10, 26, 10].every((value, index) => byte(index + 4) === value)) {
+    return "image/png";
+  }
+  if (byte(0) === 255 && byte(1) === 216 && byte(2) === 255) {
+    return "image/jpeg";
+  }
+  if (binary.startsWith("GIF87a") || binary.startsWith("GIF89a")) {
+    return "image/gif";
+  }
+  return binary.startsWith("BM") ? "image/bmp" : null;
+}
+function boundedImageSrc(source) {
+  const src = toImageSrc(source);
+  if (src === null || imageByteLength(src) > MAX_IMAGE_BYTES) return null;
+  try {
+    const base64 = imageBase64Of(src);
+    const mime = imageMimeFromBytes(atob(base64));
+    return mime === null ? null : `data:${mime};base64,${base64}`;
+  } catch {
+    return null;
+  }
+}
+function imageSourceByteLength(source) {
+  return imageByteLength(source);
+}
+function naturalSize(src, signal) {
+  return new Promise((resolve) => {
+    const image = new Image();
+    let settled = false;
+    const finish = (value) => {
+      if (settled) return;
+      settled = true;
+      signal?.removeEventListener("abort", onAbort);
+      image.removeEventListener("load", onLoad);
+      image.removeEventListener("error", onError);
+      resolve(value);
+    };
+    const onLoad = () => finish({ width: image.naturalWidth, height: image.naturalHeight });
+    const onError = () => finish(null);
+    const onAbort = () => {
+      finish(null);
+      image.src = "";
+    };
+    image.addEventListener("load", onLoad);
+    image.addEventListener("error", onError);
+    signal?.addEventListener("abort", onAbort, { once: true });
+    if (signal?.aborted) {
+      finish(null);
+      return;
+    }
+    image.src = src;
+  });
+}
+async function readImageFile(file, maxWidthPx) {
+  if (!isImageMime(file.type) || file.size > MAX_IMAGE_BYTES) return null;
+  const source = await readDataUrl(file);
+  return source === null ? null : readImageSource(source, { maxWidthPx, alt: null });
+}
+async function readImageSource(source, {
+  maxWidthPx,
+  maxHeightPx,
+  preferredExtent = null,
+  alt = null,
+  signal
+} = {}) {
+  const src = boundedImageSrc(source);
+  if (src === null) return null;
+  const natural = await naturalSize(src, signal);
+  const preferred = preferredExtent && {
+    width: emuToPx(preferredExtent.cx),
+    height: emuToPx(preferredExtent.cy)
+  };
+  const size = preferred ?? natural;
+  const extent = natural && size && fittedExtent(size.width, size.height, maxWidthPx, maxHeightPx);
+  return extent === null ? null : { src, extent, alt };
+}
+async function readImageBlob(source, options = {}) {
+  if (!isImageMime(source.type) || source.size > MAX_IMAGE_BYTES) return null;
+  const dataUrl = await readDataUrl(source);
+  return dataUrl === null ? null : readImageSource(dataUrl, options);
+}
+async function insertImageFiles(view, files) {
+  const maxWidthPx = documentBodyWidthPx(view.state);
+  for (const file of files) {
+    const image = await readImageFile(file, maxWidthPx);
+    if (!image || view.isDestroyed) continue;
+    insertImage(image)(view.state, (tr) => view.dispatch(tr), view);
+  }
+}
+function imageFiles() {
+  return new Plugin({
+    props: {
+      handlePaste(view, event) {
+        const files = imageFilesIn(event.clipboardData);
+        if (files.length === 0) return false;
+        void insertImageFiles(view, files);
+        return true;
+      },
+      /**
+       * A drag that started inside the editor carries no file, so a picture being moved
+       * within the document never reaches this and stays ProseMirror's own move.
+       */
+      handleDrop(view, event) {
+        const files = imageFilesIn(event.dataTransfer);
+        if (files.length === 0) return false;
+        moveCaretToDrop(view, event);
+        void insertImageFiles(view, files);
+        return true;
+      }
+    }
+  });
+}
+export {
+  IMAGE_FILE_ACCEPT,
+  boundedImageSrc,
+  fittedExtent,
+  imageFiles,
+  imageFilesIn,
+  imageSourceByteLength,
+  insertImageFiles,
+  readImageBlob,
+  readImageFile,
+  readImageSource
+};

package/dist/editor/insertImage.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The command that puts an image into the document.
+ *
+ * What it takes is what an image node carries: the bytes as a data URL and the size the
+ * drawing records, in EMU. Working out that size from the image itself takes a decoded
+ * image, which only a browser can give, so it happens where the file is read
+ * (`editor/imageFiles.ts`) and never in here.
+ *
+ * The node is created without original XML, and that is what marks it as inserted: the
+ * export writes a media part for its bytes and builds a drawing around them.
+ */
+import type { Command, EditorState } from "prosemirror-state";
+import { type ImageExtent } from "../ooxml/image";
+/** What has to be known about an image before it can go into a document */
+export interface ImageToInsert {
+    /** The image bytes as a data URL */
+    src: string;
+    /** The size to show it at, in EMU */
+    extent: ImageExtent;
+    /** The alternative text. Nothing when there is none */
+    alt?: string | null;
+}
+/** Whether an image can be inserted at the current position. Used to enable and disable the toolbar button */
+export declare function canInsertImage(state: EditorState): boolean;
+/**
+ * Puts the image where the selection is, in place of whatever was selected.
+ *
+ * It goes in carrying the formatting of the text around it, so the run it ends up in is
+ * the one it was inserted into - the same as a picture pasted in Word.
+ */
+export declare function insertImage(image: ImageToInsert): Command;

package/dist/editor/insertImage.js

@@ -0,0 +1,35 @@
+// src/editor/insertImage.ts
+import { insertPoint } from "prosemirror-transform";
+import { toImageExtent, toImageSrc } from "../ooxml/image.js";
+import { docxSchema } from "../schema/index.js";
+import { replacementShut } from "../schema/locks.js";
+function insertPosition(state) {
+  if (replacementShut(state.selection, state.doc)) return null;
+  return insertPoint(state.doc, state.selection.from, docxSchema.nodes.image);
+}
+function canInsertImage(state) {
+  return insertPosition(state) !== null;
+}
+function insertImage(image) {
+  return (state, dispatch) => {
+    const src = toImageSrc(image.src);
+    const extent = toImageExtent(image.extent);
+    if (src === null || extent === null || insertPosition(state) === null) {
+      return false;
+    }
+    if (dispatch) {
+      const node = docxSchema.nodes.image.create({
+        src,
+        extent,
+        alt: image.alt ?? null,
+        xml: null
+      });
+      dispatch(state.tr.replaceSelectionWith(node).scrollIntoView());
+    }
+    return true;
+  };
+}
+export {
+  canInsertImage,
+  insertImage
+};

package/dist/editor/insertTable.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A table only goes between body blocks, never inside another table. A table inside a cell is not
+ * made editable even when a document is opened (nested tables are only preserved), so one created
+ * here would become an untouchable blob once the document is saved and reopened.
+ */
+import { type Command, type EditorState } from "prosemirror-state";
+/** Whether a table can be inserted at the current position. Used to enable and disable the toolbar button */
+export declare function canInsertTable(state: EditorState): boolean;
+/** How many rows and columns the new table has */
+export interface TableSize {
+    rows: number;
+    columns: number;
+}
+/**
+ * Inserts a table of empty cells and moves the caret into the first cell.
+ * The table is as wide as one line of body text on the paper the open document names
+ */
+export declare function insertTable({ rows, columns }: TableSize): Command;