@portone/docx-editor 0.1.0

package/dist/download.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Downloads the document the editor holds as a docx file.
+ *
+ * The pieces it is built out of are exported, but not from the package's barrel:
+ * `downloadDocx` is all a screen needs.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import type { DocxEditorHandle } from "./DocxEditor";
+export declare const DOCX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+export interface DownloadDocxOptions {
+    /** The name to save under. The `.docx` suffix may be there or not */
+    fileName: string;
+}
+export type DownloadDocxResult = {
+    status: "exported";
+    fileName: string;
+    byteLength: number;
+} | {
+    status: "unavailable";
+} | {
+    status: "empty";
+};
+/** Settles the end of the name on exactly one `.docx` */
+export declare function withDocxExtension(fileName: string): string;
+/**
+ * Wraps the docx bytes into a single file blob.
+ * A `Uint8Array` may be one slice of a larger buffer, so a copy is handed over.
+ */
+export declare function createDocxBlob(bytes: Uint8Array): Blob;
+/**
+ * Downloads a single file blob.
+ *
+ * The anchor is attached to the document and then taken off again because some
+ * browsers only honor the click while it is attached.
+ * Revoking the objectURL is deferred by `REVOKE_DELAY_MS`.
+ */
+export declare function downloadBlob(blob: Blob, fileName: string): void;
+/**
+ * Whether there is anything worth exporting.
+ *
+ * Any text counts as content, and so does a block that shows on screen without text of
+ * its own (a table, a placeholder).
+ * A document of nothing but empty paragraphs would download as a file with nothing to
+ * open, so it is taken to be empty.
+ */
+export declare function hasExportableContent(doc: PMNode): boolean;
+/**
+ * Downloads the edited document as a docx file.
+ *
+ * `unavailable` when the editor is not mounted yet or the document could not be
+ * opened, `empty` when there is nothing to export, and `exported` once a file has
+ * gone out.
+ * If writing the document back is blocked (a new list in a document without
+ * numbering.xml, and the like), it is not passed over silently: `DocxExportError`
+ * is rethrown as is.
+ */
+export declare function downloadDocx(editor: DocxEditorHandle | null | undefined, options: DownloadDocxOptions): DownloadDocxResult;

package/dist/download.js

@@ -0,0 +1,44 @@
+// src/download.ts
+var DOCX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+var REVOKE_DELAY_MS = 6e4;
+function withDocxExtension(fileName) {
+  return `${fileName.replace(/\.docx$/i, "")}.docx`;
+}
+function createDocxBlob(bytes) {
+  return new Blob([new Uint8Array(bytes)], { type: DOCX_MIME_TYPE });
+}
+function downloadBlob(blob, fileName) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.rel = "noopener";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}
+function hasExportableContent(doc) {
+  if (doc.textContent.length > 0) return true;
+  let visible = false;
+  doc.forEach((block) => {
+    if (block.type.name !== "paragraph") visible = true;
+  });
+  return visible;
+}
+function downloadDocx(editor, options) {
+  if (!editor) return { status: "unavailable" };
+  if (!hasExportableContent(editor.view.state.doc)) return { status: "empty" };
+  const bytes = editor.exportBytes();
+  const fileName = withDocxExtension(options.fileName);
+  downloadBlob(createDocxBlob(bytes), fileName);
+  return { status: "exported", fileName, byteLength: bytes.length };
+}
+export {
+  DOCX_MIME_TYPE,
+  createDocxBlob,
+  downloadBlob,
+  downloadDocx,
+  hasExportableContent,
+  withDocxExtension
+};

package/dist/editor/clipboard/images.d.ts

@@ -0,0 +1,14 @@
+import type { ImageToInsert } from "../insertImage";
+export declare const PASTED_IMAGE_ATTRIBUTE = "data-docx-pasted-image";
+export interface ResolvedClipboardImages {
+    source: string;
+    images: ReadonlyMap<string, ImageToInsert>;
+}
+interface ResolveOptions {
+    maxWidthPx: number;
+    maxHeightPx: number;
+    signal: AbortSignal;
+}
+export declare function hasResolvableClipboardImages(document: Document, source: string): boolean;
+export declare function resolveClipboardImages(document: Document, source: string, options: ResolveOptions): Promise<ResolvedClipboardImages> | null;
+export {};

package/dist/editor/clipboard/images.js

@@ -0,0 +1,158 @@
+// src/editor/clipboard/images.ts
+import { MAX_IMAGE_BYTES } from "../../docx/media.js";
+import { isImageMime, toImageExtent, toImageSrc } from "../../ooxml/image.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import {
+  boundedImageSrc,
+  imageSourceByteLength,
+  readImageBlob,
+  readImageSource
+} from "../imageFiles.js";
+var PASTED_IMAGE_ATTRIBUTE = "data-docx-pasted-image";
+function extentAttribute(element) {
+  if (!element.classList.contains(editorClassNames.image)) return null;
+  try {
+    return toImageExtent(
+      JSON.parse(element.getAttribute("data-extent") ?? "null")
+    );
+  } catch {
+    return null;
+  }
+}
+function fetchableUrl(source) {
+  try {
+    const url = new URL(source);
+    return ["blob:", "http:", "https:"].includes(url.protocol) ? url : null;
+  } catch {
+    return null;
+  }
+}
+function canResolve(element) {
+  const source = element.getAttribute("src") ?? "";
+  return toImageSrc(source) !== null || fetchableUrl(source) !== null;
+}
+function hasResolvableClipboardImages(document, source) {
+  const template = document.createElement("template");
+  template.innerHTML = source;
+  return Array.from(template.content.querySelectorAll("img")).some(canResolve);
+}
+function abortIfAsked(signal) {
+  if (signal.aborted)
+    throw new DOMException("Image paste aborted", "AbortError");
+}
+async function limitedImageBlob(response, signal, maxBytes) {
+  if (!response.ok) {
+    await response.body?.cancel();
+    return null;
+  }
+  const mime = response.headers.get("content-type")?.split(";", 1)[0]?.trim().toLowerCase();
+  if (!isImageMime(mime)) {
+    await response.body?.cancel();
+    return null;
+  }
+  const declaredSize = Number.parseInt(
+    response.headers.get("content-length") ?? "",
+    10
+  );
+  if (Number.isFinite(declaredSize) && declaredSize > maxBytes) {
+    await response.body?.cancel();
+    return null;
+  }
+  const reader = response.body?.getReader();
+  if (!reader) return null;
+  const chunks = [];
+  let size = 0;
+  try {
+    while (true) {
+      abortIfAsked(signal);
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (size + value.length > maxBytes) {
+        await reader.cancel();
+        return null;
+      }
+      const chunk = Uint8Array.from(value);
+      size += chunk.length;
+      chunks.push(chunk);
+    }
+  } catch (error) {
+    await reader.cancel().catch(() => void 0);
+    throw error;
+  }
+  const bytes = new Uint8Array(size);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return new Blob([bytes], { type: mime });
+}
+async function resolveElement(element, options, maxBytes) {
+  abortIfAsked(options.signal);
+  const source = element.getAttribute("src") ?? "";
+  const alt = element.getAttribute("alt") || null;
+  const readOptions = {
+    maxWidthPx: options.maxWidthPx,
+    maxHeightPx: options.maxHeightPx,
+    preferredExtent: extentAttribute(element),
+    alt,
+    signal: options.signal
+  };
+  if (toImageSrc(source) !== null) {
+    const src = boundedImageSrc(source);
+    return src === null || imageSourceByteLength(src) > maxBytes ? null : readImageSource(src, readOptions);
+  }
+  const url = fetchableUrl(source);
+  if (url === null) return null;
+  const response = await fetch(url, {
+    credentials: "omit",
+    referrerPolicy: "no-referrer",
+    signal: options.signal
+  });
+  const blob = await limitedImageBlob(response, options.signal, maxBytes);
+  return blob === null ? null : readImageBlob(blob, readOptions);
+}
+function replaceWithEditorImage(element, token) {
+  const replacement = element.ownerDocument.createElement("img");
+  replacement.setAttribute(PASTED_IMAGE_ATTRIBUTE, token);
+  element.replaceWith(replacement);
+}
+function resolveClipboardImages(document, source, options) {
+  const template = document.createElement("template");
+  template.innerHTML = source;
+  const elements = Array.from(template.content.querySelectorAll("img"));
+  for (const element of elements) {
+    element.removeAttribute(PASTED_IMAGE_ATTRIBUTE);
+  }
+  const images = elements.filter(canResolve);
+  if (images.length === 0) return null;
+  return (async () => {
+    let remainingBytes = MAX_IMAGE_BYTES;
+    const resolved = /* @__PURE__ */ new Map();
+    for (const element of images) {
+      abortIfAsked(options.signal);
+      let image = null;
+      try {
+        image = await resolveElement(element, options, remainingBytes);
+      } catch {
+        abortIfAsked(options.signal);
+        image = null;
+      }
+      const bytes = image && imageSourceByteLength(image.src);
+      if (image === null || bytes === null || bytes > remainingBytes) {
+        element.remove();
+      } else {
+        remainingBytes -= bytes;
+        const token = `${resolved.size}`;
+        resolved.set(token, image);
+        replaceWithEditorImage(element, token);
+      }
+    }
+    return { source: template.innerHTML, images: resolved };
+  })();
+}
+export {
+  PASTED_IMAGE_ATTRIBUTE,
+  hasResolvableClipboardImages,
+  resolveClipboardImages
+};

package/dist/editor/clipboard/inlineFormatting.d.ts

@@ -0,0 +1,21 @@
+import type { Mark, Node as PMNode } from "prosemirror-model";
+export interface InlineStyle {
+    bold?: true;
+    italic?: true;
+    underline?: true;
+    strike?: true;
+    fontSizePt?: number;
+    fontFamily?: string;
+    color?: string;
+    background?: string;
+}
+export interface InlineContext {
+    style: InlineStyle;
+    href: string | null;
+    preserveWhitespace: boolean;
+}
+export type InlineElementReader = (target: PMNode[], element: HTMLElement, context: InlineContext) => boolean;
+export declare function contextFor(parent: InlineContext, element: HTMLElement, readElementStyle?: boolean): InlineContext;
+export declare function withInlineStyle(context: InlineContext, style: InlineStyle): InlineContext;
+export declare function marksFor(context: InlineContext): Mark[];
+export declare function appendInline(target: PMNode[], node: Node, context: InlineContext, readElement?: InlineElementReader): void;

package/dist/editor/clipboard/inlineFormatting.js

@@ -0,0 +1,232 @@
+// src/editor/clipboard/inlineFormatting.ts
+import { editRunProps } from "../../docx/runProps.js";
+import { docxSchema } from "../../schema/index.js";
+import { editorClassNames } from "../../styles/classNames.js";
+var IGNORED_TAGS = /* @__PURE__ */ new Set([
+  "HEAD",
+  "IFRAME",
+  "NOSCRIPT",
+  "OBJECT",
+  "SCRIPT",
+  "STYLE",
+  "TEMPLATE"
+]);
+var GENERIC_FONTS = /* @__PURE__ */ new Set([
+  "cursive",
+  "fantasy",
+  "monospace",
+  "sans-serif",
+  "serif",
+  "system-ui"
+]);
+var NAMED_COLORS = {
+  aqua: "#00ffff",
+  black: "#000000",
+  blue: "#0000ff",
+  fuchsia: "#ff00ff",
+  gray: "#808080",
+  green: "#008000",
+  lime: "#00ff00",
+  maroon: "#800000",
+  navy: "#000080",
+  olive: "#808000",
+  orange: "#ffa500",
+  purple: "#800080",
+  red: "#ff0000",
+  silver: "#c0c0c0",
+  teal: "#008080",
+  white: "#ffffff",
+  yellow: "#ffff00"
+};
+function cleanText(source, preserveWhitespace) {
+  const withoutForbidden = source.replace(/[\u000B\u000C]/g, "\n").replace(
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: XML 1.0 cannot hold these clipboard characters
+    /[\u0000-\u0008\u000E-\u001F]/g,
+    ""
+  );
+  return preserveWhitespace ? withoutForbidden.replace(/\r\n?/g, "\n") : withoutForbidden.replace(/[\t\n\v\f\r ]+/g, " ");
+}
+function cssHex(value) {
+  const source = value.trim().toLowerCase();
+  const named = NAMED_COLORS[source];
+  if (named) return named;
+  const short = /^#([0-9a-f]{3})$/.exec(source)?.[1];
+  if (short) {
+    return `#${short.split("").map((part) => `${part}${part}`).join("")}`;
+  }
+  const full = /^#([0-9a-f]{6})(?:ff)?$/.exec(source)?.[1];
+  if (full) return `#${full}`;
+  const rgb = /^rgba?\(\s*([\d.]+)[, ]+\s*([\d.]+)[, ]+\s*([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/.exec(
+    source
+  );
+  if (!rgb) return null;
+  const alpha = rgb[4];
+  if (alpha !== void 0) {
+    const opacity = Number.parseFloat(alpha);
+    if (alpha.endsWith("%") ? opacity < 100 : opacity < 1) return null;
+  }
+  const channels = rgb.slice(1, 4).map(
+    (part) => Math.max(0, Math.min(255, Math.round(Number.parseFloat(part ?? "0"))))
+  );
+  return `#${channels.map((part) => part.toString(16).padStart(2, "0")).join("")}`;
+}
+function fontSizePt(value) {
+  const match = /^([\d.]+)(pt|px)$/i.exec(value.trim());
+  if (!match) return null;
+  const amount = Number.parseFloat(match[1] ?? "");
+  if (!Number.isFinite(amount) || amount <= 0) return null;
+  const points = match[2]?.toLowerCase() === "px" ? amount * 0.75 : amount;
+  const rounded = Math.round(points * 2) / 2;
+  return rounded > 0 && rounded <= 819 ? rounded : null;
+}
+function legacyFontSize(value) {
+  const sizes = [8, 10, 12, 14, 18, 24, 36];
+  const index = Number.parseInt(value ?? "", 10) - 1;
+  return sizes[index] ?? null;
+}
+function firstFontFamily(value) {
+  const first = value.split(",", 1)[0]?.trim().replace(/^(['"])(.*)\1$/, "$2");
+  if (!first || GENERIC_FONTS.has(first.toLowerCase())) return null;
+  return first;
+}
+function toggle(style, key, on) {
+  if (on) style[key] = true;
+  else delete style[key];
+}
+function styleOf(parent, element) {
+  const style = { ...parent };
+  const tag = element.tagName;
+  if (tag === "B" || tag === "STRONG") style.bold = true;
+  if (tag === "I" || tag === "EM") style.italic = true;
+  if (tag === "U") style.underline = true;
+  if (tag === "S" || tag === "STRIKE" || tag === "DEL") style.strike = true;
+  if (tag === "MARK") style.background = "#ffff00";
+  const weight = element.style.fontWeight.trim().toLowerCase();
+  if (weight) {
+    const numeric = Number.parseInt(weight, 10);
+    toggle(
+      style,
+      "bold",
+      weight === "bold" || weight === "bolder" || numeric >= 600
+    );
+  }
+  const fontStyle = element.style.fontStyle.trim().toLowerCase();
+  if (fontStyle) {
+    toggle(style, "italic", fontStyle === "italic" || fontStyle === "oblique");
+  }
+  const decoration = (element.style.textDecorationLine || element.style.textDecoration).toLowerCase();
+  if (decoration) {
+    toggle(style, "underline", decoration.includes("underline"));
+    toggle(style, "strike", decoration.includes("line-through"));
+  }
+  const size = fontSizePt(element.style.fontSize) || (tag === "FONT" ? legacyFontSize(element.getAttribute("size")) : null);
+  if (size !== null) style.fontSizePt = size;
+  const family = firstFontFamily(
+    element.style.fontFamily || (tag === "FONT" ? element.getAttribute("face") ?? "" : "")
+  );
+  if (family !== null) style.fontFamily = family;
+  const color = cssHex(
+    element.style.color || (tag === "FONT" ? element.getAttribute("color") ?? "" : "")
+  );
+  if (color !== null) style.color = color;
+  const background = cssHex(element.style.backgroundColor);
+  if (background !== null) style.background = background;
+  return 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 contextFor(parent, element, readElementStyle = true) {
+  const copiedEditorLink = element.classList.contains(editorClassNames.link) ? element.getAttribute("data-href") : null;
+  return {
+    style: readElementStyle ? styleOf(parent.style, element) : parent.style,
+    href: element.tagName === "A" ? safeHref(element.getAttribute("href")) : safeHref(copiedEditorLink) ?? parent.href,
+    preserveWhitespace: parent.preserveWhitespace || element.tagName === "PRE"
+  };
+}
+function withInlineStyle(context, style) {
+  return { ...context, style: { ...context.style, ...style } };
+}
+function runMark(style) {
+  const edits = [];
+  if (style.bold) edits.push({ kind: "toggle", toggle: "bold", on: true });
+  if (style.italic) edits.push({ kind: "toggle", toggle: "italic", on: true });
+  if (style.underline) {
+    edits.push({ kind: "toggle", toggle: "underline", on: true });
+  }
+  if (style.strike) edits.push({ kind: "toggle", toggle: "strike", on: true });
+  if (style.fontSizePt !== void 0) {
+    edits.push({ kind: "fontSize", pt: style.fontSizePt });
+  }
+  if (style.fontFamily !== void 0) {
+    edits.push({ kind: "fontFamily", name: style.fontFamily });
+  }
+  if (style.color !== void 0)
+    edits.push({ kind: "color", hex: style.color });
+  if (style.background !== void 0) {
+    edits.push({ kind: "background", hex: style.background });
+  }
+  let props = {
+    rPr: null,
+    format: null
+  };
+  for (const edit of edits) {
+    const next = editRunProps(props, null, edit);
+    if (next) props = next;
+  }
+  return props.rPr === null ? null : docxSchema.marks.run.create({ rPr: props.rPr, format: props.format });
+}
+function marksFor(context) {
+  const marks = [];
+  if (context.href !== null) {
+    marks.push(docxSchema.marks.link.create({ href: context.href }));
+  }
+  const run = runMark(context.style);
+  if (run) marks.push(run);
+  return marks;
+}
+function appendText(target, source, context) {
+  const value = cleanText(source, context.preserveWhitespace);
+  if (value === "" || value === " " && target.length === 0) return;
+  const marks = marksFor(context);
+  const parts = context.preserveWhitespace ? value.split("\n") : [value];
+  parts.forEach((part, index) => {
+    if (index > 0) {
+      target.push(docxSchema.nodes.hardBreak.create(null, null, marks));
+    }
+    if (part !== "") target.push(docxSchema.text(part, marks));
+  });
+}
+function appendInline(target, node, context, readElement) {
+  if (node.nodeType === node.TEXT_NODE) {
+    appendText(target, node.nodeValue ?? "", context);
+    return;
+  }
+  if (node.nodeType !== node.ELEMENT_NODE) return;
+  const element = node;
+  if (IGNORED_TAGS.has(element.tagName)) return;
+  const next = contextFor(context, element);
+  if (readElement?.(target, element, next)) return;
+  if (element.classList.contains(editorClassNames.tab)) {
+    const marks = marksFor(next);
+    const tab = docxSchema.marks.tab.create();
+    target.push(docxSchema.text("	", tab.addToSet(marks)));
+    return;
+  }
+  if (element.tagName === "BR") {
+    target.push(docxSchema.nodes.hardBreak.create(null, null, marksFor(next)));
+    return;
+  }
+  for (const child of element.childNodes) {
+    appendInline(target, child, next, readElement);
+  }
+}
+export {
+  appendInline,
+  contextFor,
+  marksFor,
+  withInlineStyle
+};

package/dist/editor/commands/breakCommands.d.ts

@@ -0,0 +1,8 @@
+import type { Command } from "prosemirror-state";
+/** Breaks the line without splitting the paragraph */
+export declare const insertLineBreak: Command;
+/**
+ * Starts the next page: the very `w:br` the editor already reads and draws in a document that
+ * arrived with one.
+ */
+export declare const insertPageBreak: Command;

package/dist/editor/commands/breakCommands.js

@@ -0,0 +1,19 @@
+// src/editor/commands/breakCommands.ts
+import { docxSchema } from "../../schema/index.js";
+import { replacementShut } from "../../schema/locks.js";
+function insertBreak(brAttrs) {
+  return (state, dispatch) => {
+    if (replacementShut(state.selection, state.doc)) return false;
+    if (dispatch) {
+      const br = docxSchema.nodes.hardBreak.create({ brAttrs });
+      dispatch(state.tr.replaceSelectionWith(br).scrollIntoView());
+    }
+    return true;
+  };
+}
+var insertLineBreak = insertBreak(null);
+var insertPageBreak = insertBreak('w:type="page"');
+export {
+  insertLineBreak,
+  insertPageBreak
+};

package/dist/editor/commands/canRunCommand.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dry-runs external commands and checks every produced transaction against document locks without
+ * dispatching them or triggering the locked-content plugin's side effects.
+ */
+import type { Command, EditorState } from "prosemirror-state";
+export declare function canRunCommand(command: Command, state: EditorState): boolean;

package/dist/editor/commands/canRunCommand.js

@@ -0,0 +1,10 @@
+// src/editor/commands/canRunCommand.ts
+import { transactionAllowed } from "../../schema/locks.js";
+function canRunCommand(command, state) {
+  const built = [];
+  if (!command(state, (tr) => built.push(tr))) return false;
+  return built.every((tr) => transactionAllowed(tr, state.doc));
+}
+export {
+  canRunCommand
+};

package/dist/editor/commands/commentCommands.d.ts

@@ -0,0 +1,3 @@
+export * from "./comments/editing";
+export * from "./comments/model";
+export * from "./comments/reading";

package/dist/editor/commands/commentCommands.js

@@ -0,0 +1,4 @@
+// src/editor/commands/commentCommands.ts
+export * from "./comments/editing.js";
+export * from "./comments/model.js";
+export * from "./comments/reading.js";

package/dist/editor/commands/comments/editing.d.ts

@@ -0,0 +1,21 @@
+/** Edits Word comments through their range markers and reference nodes. */
+import { type Command, type EditorState } from "prosemirror-state";
+import type { NewComment } from "./model";
+/** Whether a non-empty selection in one paragraph can receive a comment. */
+export declare function canAddComment(state: EditorState): boolean;
+/** Adds a plain-text comment to the current text selection. */
+export declare function addComment(comment: NewComment): Command;
+/** Replaces the plain-text body of one comment, retaining its author and anchor. */
+export declare function updateComment(id: string, text: string): Command;
+/** Marks a comment thread resolved or open without deleting it. */
+export declare function setCommentResolved(id: string, resolved: boolean): Command;
+/** Adds a plain-text reply and reopens the thread when it was resolved. */
+export declare function addCommentReply(id: string, reply: NewComment): Command;
+/** Replaces the plain-text body of one reply. */
+export declare function updateCommentReply(commentId: string, replyId: string, text: string): Command;
+/** Removes one reply while retaining its root comment and anchor. */
+export declare function removeCommentReply(commentId: string, replyId: string): Command;
+/** Removes a comment's range markers, reference and Comments-part entry. */
+export declare function removeComment(id: string): Command;
+/** Selects the text anchored by a comment, or places the caret at a point comment. */
+export declare function selectComment(id: string): Command;