@portone/docx-editor 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",
@@ -107,7 +107,7 @@
     "build:demo": "vite build --config demo/vite.config.ts",
     "dev:site": "pnpm --filter @portone/docx-editor-site dev",
     "build:site": "pnpm --filter @portone/docx-editor-site build",
-    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm test:fixtures && pnpm test:site-release && pnpm check:demo-library",
+    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm test:fixtures && pnpm test:site-release && pnpm test:release && pnpm check:demo-library",
     "typecheck": "tsc --noEmit && tsc --noEmit -p e2e && tsc --noEmit -p demo && pnpm --filter @portone/docx-editor-site typecheck",
     "lint": "pnpm biome check . --diagnostic-level=error",
     "test": "vitest run",
@@ -119,9 +119,10 @@
     "api:update": "pnpm build && node scripts/api-report.mjs --local",
     "spec": "node scripts/index-ooxml-spec.mjs",
     "changeset": "changeset",
-    "changeset:version": "changeset version",
+    "release:pr": "node scripts/release.mjs pr",
     "test:e2e": "playwright test",
-    "test:site-release": "node --test scripts/site-release.test.mjs"
+    "test:site-release": "node --test scripts/site-release.test.mjs",
+    "test:release": "node --test scripts/release.test.mjs"
   },
   "types": "./dist/index.d.ts"
 }

package/dist/editor/externalClipboard.d.ts

@@ -1,22 +0,0 @@
-import { Slice } from "prosemirror-model";
-import { type EditorState, Plugin, type Transaction } from "prosemirror-state";
-import type { EditorView } from "prosemirror-view";
-import { type NewLists } from "../numbering/listRegistry";
-import type { ImageToInsert } from "./insertImage";
-/** What a paste puts in: the content, and the definitions of the lists it started */
-export interface PastedContent {
-    slice: Slice;
-    newLists: NewLists;
-}
-export declare function richHtmlSlice(state: EditorState, document: Document, source: string, images?: ReadonlyMap<string, ImageToInsert>): PastedContent | null;
-/**
- * The transaction a paste is put in with: the content, and the definitions of the lists it started
- * recorded on the document node so that the export writes them out and undo takes them back.
- */
-export declare function withPastedContent(tr: Transaction, content: PastedContent): Transaction;
-export declare function insertRichHtml(view: EditorView, source: string): boolean;
-export declare function insertClipboardData(view: EditorView, data: {
-    html?: string;
-    text?: string;
-}): void;
-export declare function externalClipboard(): Plugin;

package/dist/editor/externalClipboard.js

@@ -1,486 +0,0 @@
-// src/editor/externalClipboard.ts
-import {
-  DOMSerializer,
-  Fragment,
-  Slice
-} from "prosemirror-model";
-import { Plugin } from "prosemirror-state";
-import {
-  paragraphAttrsFor,
-  styleIdOf
-} from "../docx/formatting.js";
-import {
-  withListNumbering,
-  withParagraphStyle
-} from "../docx/paraProps.js";
-import {
-  listsWorn,
-  NEW_LISTS_ATTR,
-  newListsValue
-} from "../numbering/listRegistry.js";
-import {
-  allocateList,
-  MAX_ILVL,
-  templateList
-} from "../numbering/listTemplate.js";
-import { docxSchema, isPageBreak } from "../schema/index.js";
-import { editorClassNames } from "../styles/classNames.js";
-import { PASTED_IMAGE_ATTRIBUTE } from "./clipboard/images.js";
-import {
-  appendInline,
-  contextFor,
-  marksFor,
-  safeHref,
-  withInlineStyle
-} from "./clipboard/inlineFormatting.js";
-import { numIdsIn } from "./commands/listCommands.js";
-import { documentFormatting, documentParagraphStyles } from "./documentStyles.js";
-import { insertPlainText } from "./plainText.js";
-import { moveCaretToDrop } from "./plugins/dropCaret.js";
-import { canStartNewList } 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 }
-};
-var PUBLIC_ATTRIBUTES = /* @__PURE__ */ new Set([
-  "alt",
-  "aria-label",
-  "class",
-  "colspan",
-  "height",
-  "href",
-  "lang",
-  "rowspan",
-  "src",
-  "style",
-  "width"
-]);
-var COPIED_STYLE_ATTRIBUTE = "data-style";
-function isAttributes(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Node);
-}
-function publicAttributes(attrs) {
-  return Object.fromEntries(
-    Object.entries(attrs).filter(([name]) => PUBLIC_ATTRIBUTES.has(name))
-  );
-}
-function isSpecArray(value) {
-  return Array.isArray(value) && typeof value[0] === "string";
-}
-function stripPrivateAttributes(spec) {
-  if (!isSpecArray(spec)) return spec;
-  const [tag, ...rest] = spec;
-  const attrs = isAttributes(rest[0]) ? publicAttributes(rest[0]) : null;
-  const children = (attrs === null ? rest : rest.slice(1)).map(
-    (child) => isSpecArray(child) ? stripPrivateAttributes(child) : child
-  );
-  return attrs === null ? [tag, ...children] : [tag, attrs, ...children];
-}
-function withDomAttribute(spec, name, value) {
-  if (!isSpecArray(spec)) return spec;
-  const [tag, ...rest] = spec;
-  return isAttributes(rest[0]) ? [tag, { ...rest[0], [name]: value }, ...rest.slice(1)] : [tag, { [name]: value }, ...rest];
-}
-function asTag(spec, tag) {
-  return isSpecArray(spec) ? [tag, ...spec.slice(1)] : spec;
-}
-function copiedMarkSpec(mark, spec) {
-  const stripped = stripPrivateAttributes(spec);
-  if (mark.type !== docxSchema.marks.link) return stripped;
-  const href = safeHref(
-    typeof mark.attrs.href === "string" ? mark.attrs.href : null
-  );
-  return href === null ? stripped : asTag(withDomAttribute(stripped, "href", href), "a");
-}
-function copiedNodeSpec(node, spec) {
-  const stripped = stripPrivateAttributes(spec);
-  if (node.type !== docxSchema.nodes.paragraph) return stripped;
-  const styleId = styleIdOf(node.attrs.pPr);
-  return styleId === null ? stripped : withDomAttribute(stripped, COPIED_STYLE_ATTRIBUTE, styleId);
-}
-function clipboardSerializer() {
-  const drawn = DOMSerializer.fromSchema(docxSchema);
-  const nodes = Object.fromEntries(
-    Object.entries(drawn.nodes).map(([name, toDOM]) => [
-      name,
-      (node) => copiedNodeSpec(node, toDOM(node))
-    ])
-  );
-  const marks = Object.fromEntries(
-    Object.entries(drawn.marks).map(([name, toDOM]) => [
-      name,
-      (mark, inline) => copiedMarkSpec(mark, toDOM(mark, inline))
-    ])
-  );
-  return new DOMSerializer(nodes, marks);
-}
-var UNREADABLE_BLOCKS = /* @__PURE__ */ new Set([
-  "bookmarkBlock",
-  "docxRaw",
-  "rawBlock"
-]);
-function stringAttr(value) {
-  return typeof value === "string" ? value : "";
-}
-function inlineText(node) {
-  if (node.isText) return node.text ?? "";
-  if (node.type === docxSchema.nodes.hardBreak) {
-    return isPageBreak(node.attrs.brAttrs) ? "\f" : "\n";
-  }
-  if (node.type === docxSchema.nodes.image) return stringAttr(node.attrs.alt);
-  if (node.type === docxSchema.nodes.noteReference) {
-    return node.attrs.customMarkFollows === true ? "" : stringAttr(node.attrs.label);
-  }
-  return "";
-}
-function rowsText(table) {
-  const rows = [];
-  table.forEach((row) => {
-    const cells = [];
-    row.forEach((cell) => {
-      cells.push(fragmentText(cell.content));
-    });
-    rows.push(cells.join("	"));
-  });
-  return rows.join("\n");
-}
-function blockText(node) {
-  if (node.type === docxSchema.nodes.table) return rowsText(node);
-  if (UNREADABLE_BLOCKS.has(node.type.name)) return "";
-  return fragmentText(node.content);
-}
-function fragmentText(fragment) {
-  const pieces = [];
-  fragment.forEach((child) => {
-    pieces.push(child.isInline ? inlineText(child) : blockText(child));
-  });
-  return pieces.join(fragment.firstChild?.isInline === true ? "" : "\n");
-}
-function bareWrappers(content, openStart, openEnd) {
-  const wrapper = content.firstChild;
-  if (openStart <= 1 || openEnd <= 1 || content.childCount !== 1)
-    return content;
-  if (wrapper === null || wrapper.childCount !== 1) return content;
-  return Fragment.from(
-    wrapper.type.create(
-      null,
-      bareWrappers(wrapper.content, openStart - 1, openEnd - 1),
-      wrapper.marks
-    )
-  );
-}
-function copiedSlice(slice) {
-  return new Slice(
-    bareWrappers(slice.content, slice.openStart, slice.openEnd),
-    slice.openStart,
-    slice.openEnd
-  );
-}
-function clipboardText(slice) {
-  return fragmentText(slice.content);
-}
-function normalizedStyleName(value) {
-  return value.toLowerCase().replace(/[\s_-]+/g, "");
-}
-function copiedStyleId(element) {
-  if (!element.classList.contains(editorClassNames.paragraph)) return null;
-  return element.getAttribute(COPIED_STYLE_ATTRIBUTE) ?? styleIdOf(element.getAttribute("data-ppr"));
-}
-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);
-  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 listParagraphProps(list) {
-  if (!list || list.numId === null) return null;
-  return withListNumbering(null, {
-    numbering: { numId: list.numId, ilvl: Math.min(MAX_ILVL, list.level) },
-    indent: { kind: "keep" }
-  });
-}
-function paragraphAttrs(formatting, list, paragraph) {
-  const props = listParagraphProps(list) ?? paragraph;
-  return props ? { pPr: props.pPr, ...paragraphAttrsFor(props.pPr, formatting) } : null;
-}
-var HtmlReader = class {
-  constructor(state, preserveParagraphStyles, images) {
-    this.state = state;
-    this.preserveParagraphStyles = preserveParagraphStyles;
-    this.images = images;
-    this.formatting = documentFormatting(state);
-    this.used = numIdsIn(state.doc);
-    this.canCreateLists = canStartNewList(state);
-  }
-  state;
-  preserveParagraphStyles;
-  images;
-  blocks = [];
-  used;
-  canCreateLists;
-  /**
-   * What the pasted paragraphs are resolved against: the document's context, holding the
-   * definition of each pasted list as it is read, so that an item is drawn against the list it
-   * is joining rather than against a list nothing yet defines.
-   */
-  formatting;
-  /** The definitions of every list started while editing, the pasted ones among them */
-  get newLists() {
-    return this.formatting.numbering.added;
-  }
-  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.formatting, 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();
-  }
-  /**
-   * The number a pasted list takes, registered with the definition that list is drawn and written
-   * with. A pasted list is started here just as the list button starts one.
-   */
-  takeNumId(kind) {
-    if (!this.canCreateLists) return null;
-    const started = allocateList(
-      this.formatting.numbering,
-      this.used,
-      templateList(kind)
-    );
-    this.formatting = { ...this.formatting, numbering: started.numbering };
-    this.used.add(started.numId);
-    return started.numId;
-  }
-  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 reader = new HtmlReader(state, open === 0, images);
-  const blocks = reader.read(template.content);
-  return blocks.length === 0 ? null : {
-    slice: new Slice(Fragment.fromArray([...blocks]), open, open),
-    newLists: reader.newLists
-  };
-}
-function withPastedContent(tr, content) {
-  return tr.setDocAttribute(
-    NEW_LISTS_ATTR,
-    newListsValue(listsWorn(content.newLists, numIdsIn(tr.doc)))
-  );
-}
-function insertRichHtml(view, source) {
-  const content = richHtmlSlice(view.state, view.dom.ownerDocument, source);
-  if (content === null) return false;
-  view.dispatch(
-    withPastedContent(
-      view.state.tr.replaceSelection(content.slice),
-      content
-    ).scrollIntoView()
-  );
-  return true;
-}
-function insertClipboardData(view, data) {
-  if (insertRichHtml(view, data.html ?? "")) return;
-  insertPlainText(view, data.text ?? "");
-}
-function externalClipboard() {
-  const serializer = clipboardSerializer();
-  return new Plugin({
-    props: {
-      clipboardSerializer: serializer,
-      clipboardTextSerializer: clipboardText,
-      transformCopied: copiedSlice,
-      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,
-  withPastedContent
-};