@docen/docx 0.3.2 → 0.3.4

package/dist/{core-DT9IrTzN.mjs → core-BnF8XhVE.mjs}

@@ -1,13 +1,15 @@
-import { Blockquote, Bold, BulletList, Code, CodeBlockLowlight, Details, DetailsContent, DetailsSummary, Emoji, HardBreak, Highlight, HorizontalRule, Italic, Link, ListItem, Mathematics, Mention, OrderedList, Subscript, Superscript, TaskItem, TaskList, Text, TextAlign as TextAlign$1, Underline } from "./extensions/tiptap.mjs";
+import { Blockquote, Bold, Code, CodeBlockLowlight, Details, DetailsContent, DetailsSummary, Emoji, HardBreak, Highlight, HorizontalRule, Italic, ListItem, Mathematics, Mention, Subscript, Superscript, TaskItem, TaskList, Text, TextAlign, Underline } from "./extensions/tiptap.mjs";
 import "./extensions/blockquote.mjs";
+import { BulletList } from "./extensions/bullet-list.mjs";
 import { CodeBlock } from "./extensions/code-block.mjs";
 import "./extensions/details.mjs";
+import { attrNative, floatAnchorScope, floatingToStyles, normalizeColorToHex, renderRunStyles } from "./extensions/utils.mjs";
 import { Document } from "./extensions/document.mjs";
-import { floatAnchorScope, floatingToStyles, normalizeColorToHex, renderRunStyles } from "./extensions/utils.mjs";
 import { Heading } from "./extensions/heading.mjs";
 import { Image } from "./extensions/image.mjs";
+import { Link } from "./extensions/link.mjs";
 import "./extensions/mention.mjs";
-import "./extensions/ordered-list.mjs";
+import { OrderedList } from "./extensions/ordered-list.mjs";
 import { Paragraph } from "./extensions/paragraph.mjs";
 import { Strike } from "./extensions/strike.mjs";
 import { Table } from "./extensions/table.mjs";
@@ -18,7 +20,6 @@ import "./extensions/task-item.mjs";
 import { TextStyle } from "./extensions/text-style.mjs";
 import { Editor, Extension, Mark, Node } from "@tiptap/core";
 import { all, createLowlight } from "lowlight";
-import { TextAlign } from "@tiptap/extension-text-align";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { convertEmuToPixels, encodeBase64 } from "@office-open/core";
@@ -224,7 +225,7 @@ const PageBreak = Node.create({
 //#region src/extensions/passthrough.ts
 /**
 * Passthrough — block atom carrying an opaque {@link SectionChild} that has
-* no native Tiptap representation (rawXml, bookmarkStart/End, toc, textbox,
+* no native Tiptap representation (rawXml, bookmarkStart/End, textbox,
 * altChunk, subDoc, customXml).
 *
 * The full SectionChild is stored as JSON in `attrs.data` so the DOCX→JSON→DOCX
@@ -277,6 +278,46 @@ const Passthrough = Node.create({
 		];
 	}
 });
+/**
+* InlinePassthrough — inline atom carrying an opaque inline ParagraphChild that
+* has no native Tiptap representation (bookmarkStart/End, comment range markers,
+* proofErr, track-change markers, …). The full ParagraphChild rides in
+* `attrs.data` as JSON so DOCX→JSON→DOCX round-trips byte-faithful; the atom is
+* zero-width (bookmark/range markers carry no layout box), matching Word's
+* non-printing metadata. Mirrors the block-level Passthrough for inline children.
+*/
+const InlinePassthrough = Node.create({
+	name: "inlinePassthrough",
+	group: "inline",
+	inline: true,
+	atom: true,
+	addAttributes() {
+		return { data: {
+			default: "{}",
+			rendered: false,
+			parseHTML: (element) => element.getAttribute("data-inline-passthrough") ?? "{}"
+		} };
+	},
+	parseHTML() {
+		return [{ tag: "span[data-inline-passthrough]" }];
+	},
+	renderHTML({ node }) {
+		const data = node.attrs.data || "{}";
+		let bookmarkName;
+		try {
+			bookmarkName = JSON.parse(data).bookmarkStart?.name;
+		} catch {}
+		const attrs = {
+			"data-inline-passthrough": data,
+			contenteditable: "false"
+		};
+		if (bookmarkName) {
+			attrs.id = bookmarkName;
+			attrs.style = "display:inline-block;width:0;height:0;overflow:hidden;vertical-align:baseline";
+		} else attrs.style = "display:none";
+		return ["span", attrs];
+	}
+});
 //#endregion
 //#region src/extensions/section-break.ts
 /**
@@ -342,6 +383,81 @@ const SectionBreak = Extension.create({
 	}
 });
 //#endregion
+//#region src/extensions/tab.ts
+/**
+* Tab — an inline atom representing a DOCX `<w:r><w:tab/></w:r>` tab character.
+*
+* office-open parses `<w:tab/>` as `{ tab: true }` inside a run's children. The
+* resolve path turns that into this node so the tab is not lost: previously
+* `<w:tab/>` was dropped, which let `mergeTextNodes` collapse a TOC entry's title
+* and page number into adjacent text (no leader, no right alignment). The node is
+* zero-width, non-editable, and carries no text height — measure skips it the
+* same way it skips other inline atoms, so pagination is unaffected. It only
+* marks where a tab leader (e.g. a TOC's dotted leader) renders. compile turns it
+* back into `{ tab: true }`.
+*/
+const Tab = Node.create({
+	name: "tab",
+	group: "inline",
+	inline: true,
+	atom: true,
+	parseHTML() {
+		return [{ tag: "span.docx-tab" }];
+	},
+	renderHTML() {
+		return ["span", {
+			class: "docx-tab",
+			contenteditable: "false"
+		}];
+	}
+});
+//#endregion
+//#region src/extensions/toc-field.ts
+/**
+* TOC field (`tocField`) — a block container representing a DOCX table of
+* contents, with the rendered entries as editable `content` and the TOC field
+* switches on `attrs.options`.
+*
+* Named `tocField` (not `tableOfContents`) to avoid colliding with the official
+* `@tiptap/extension-table-of-contents`, which is an `Extension` (a live outline
+* generator injected into the editor) that already owns the `tableOfContents`
+* name. Same-name extensions dedupe in Tiptap, and since the official one is not
+* a node it would erase this node type from the schema. The two coexist for
+* different purposes: this node persists a DOCX's rendered TOC; the official
+* extension drives the heading-outline pane.
+*
+* Structuring the TOC as a node (instead of opaque passthrough) is what fixes
+* the export crash. Each entry paragraph's `w:hyperlink` wraps a HYPERLINK field
+* whose content-less runs (fldChar begin/separate/end) office-open parses as
+* `null`. As opaque passthrough those nulls survived verbatim to
+* `generateDocument`, where office-open's `stringifyRunInline(null).break`
+* crashed. Resolving the entries through `resolveParagraphChildren` drops the
+* nulls (the existing `child !== null` guard), so compile rebuilds clean entries
+* and the generate path never sees a null — no office-open change required.
+*
+* DOCX serialization is inlined in DocxManager (resolve/compile read/write
+* `attrs.options` + the entry content directly), so no renderDocx/parseDocx is
+* needed here — the same pattern as the details extension.
+*/
+const TocField = Node.create({
+	name: "tocField",
+	group: "block",
+	content: "block+",
+	addAttributes() {
+		return { options: attrNative() };
+	},
+	parseHTML() {
+		return [{ tag: "div.docx-toc" }];
+	},
+	renderHTML() {
+		return [
+			"div",
+			{ class: "docx-toc" },
+			0
+		];
+	}
+});
+//#endregion
 //#region src/extensions/wpg-group.ts
 /**
 * wpgGroup — inline atom carrying a DOCX drawing group (wpg: wordprocessingGroup)
@@ -453,6 +569,35 @@ function renderWpsText(children) {
 		];
 	});
 }
+/** Inner style of a wps text-box: fill + outline + textbox insets (padding).
+*  Lives on the contentDOM (the editable interior). Never carries rotation or
+*  writing-mode — those go on the outer positioning wrapper (see
+*  wpsRotationVert), because transform/writing-mode on an editable region
+*  distort the caret rect and break CJK IME composition. */
+function wpsInnerStyle(data) {
+	const parts = [];
+	const fill = fillToCss(data.fill);
+	if (fill) parts.push(`background-color:${fill}`);
+	const outline = outlineToCss(data.outline);
+	if (outline) parts.push(outline);
+	const bp = data.bodyProperties;
+	if (bp) {
+		const ins = (v) => v != null ? `${(v / EMU_PER_PX).toFixed(1)}px` : "0px";
+		parts.push(`padding:${ins(bp.tIns)} ${ins(bp.rIns)} ${ins(bp.bIns)} ${ins(bp.lIns)}`);
+	}
+	return parts.join(";");
+}
+/** Rotation + writing-mode (text direction) for a wps shape. Lives on the
+*  positioning wrapper OUTSIDE the contentDOM. `rotationOverride` covers a
+*  group child whose rotation comes from the group transform, not bodyPr. */
+function wpsRotationVert(data, rotationOverride) {
+	const parts = [];
+	const rotation = rotationOverride ?? data.bodyProperties?.rotation;
+	if (rotation) parts.push(`transform:rotate(${rotation}deg)`);
+	const vert = data.bodyProperties?.vert;
+	if (vert && vert !== "horz") parts.push(`writing-mode:${vert === "vert270" ? "vertical-lr" : "vertical-rl"}`);
+	return parts.join(";");
+}
 /**
 * Render a wps shape's interior (fill/outline/insets/rotation/writing-mode + text
 * body) as a positioned div. Shared by the wpg group's inline wps children and
@@ -461,23 +606,18 @@ function renderWpsText(children) {
 * carries the placement — absolute group coords for a group child, the floating
 * anchor CSS for a standalone shape. `opts.rotation` overrides bodyPr rotation
 * (a group child's rotation may come from the group transform, not bodyPr).
+*
+* The wpg path merges placement + interior into ONE div (an atom has no
+* contentDOM, so rotation/writing-mode on the element is safe — no caret inside).
+* The editable wpsShape node instead splits these across two elements via
+* wpsShapeStyles (outer = position+rotation+vert, inner = contentDOM).
 */
 function renderWpsInterior(data, positionStyle, opts) {
-	const styles = [positionStyle];
-	const fill = fillToCss(data.fill);
-	if (fill) styles.push(`background-color:${fill}`);
-	const outline = outlineToCss(data.outline);
-	if (outline) styles.push(outline);
-	const bp = data.bodyProperties;
-	if (bp) {
-		const ins = (v) => v != null ? `${(v / EMU_PER_PX).toFixed(1)}px` : "0px";
-		styles.push(`padding:${ins(bp.tIns)} ${ins(bp.rIns)} ${ins(bp.bIns)} ${ins(bp.lIns)}`);
-	}
-	const rotation = opts?.rotation ?? bp?.rotation;
-	if (rotation) styles.push(`transform:rotate(${rotation}deg)`);
-	const vert = bp?.vert;
-	if (vert && vert !== "horz") styles.push(`writing-mode:${vert === "vert270" ? "vertical-lr" : "vertical-rl"}`);
-	const attrs = { style: styles.join(";") };
+	const attrs = { style: [
+		positionStyle,
+		wpsInnerStyle(data),
+		wpsRotationVert(data, opts?.rotation)
+	].filter(Boolean).join(";") };
 	if (opts?.attrs) Object.assign(attrs, opts.attrs);
 	return [
 		"div",
@@ -485,6 +625,37 @@ function renderWpsInterior(data, positionStyle, opts) {
 		...renderWpsText(data.children)
 	];
 }
+/** Two-element style split for an editable standalone wpsShape: `outer` for the
+*  positioning wrapper (dom), `inner` for the contentDOM. rotation/writing-mode
+*  stay on `outer` so the editable interior has a clean caret/IME rect. The
+*  geometry (EMU extent → px, floating anchor CSS) is computed here so the
+*  editor's NodeView and generateHTML render identically without re-deriving
+*  the engine's EMU/floating math. */
+function wpsShapeStyles(ws) {
+	const sizeStyle = `width:${ws.transformation?.width != null ? convertEmuToPixels(ws.transformation.width) : 0}px;height:${ws.transformation?.height != null ? convertEmuToPixels(ws.transformation.height) : 0}px;box-sizing:border-box;overflow:hidden`;
+	const rotVert = wpsRotationVert(ws);
+	let outer;
+	let paragraphAnchor = false;
+	if (ws.floating) {
+		outer = [
+			...floatingToStyles(ws.floating, void 0, ws.transformation?.width),
+			sizeStyle,
+			rotVert
+		].filter(Boolean).join(";");
+		paragraphAnchor = floatAnchorScope(ws.floating) === "paragraph";
+	} else outer = [
+		`display:inline-block;vertical-align:middle`,
+		sizeStyle,
+		rotVert
+	].filter(Boolean).join(";");
+	const anchor = ws.bodyProperties?.anchor;
+	const inner = `box-sizing:border-box;display:flex;flex-direction:column;justify-content:${anchor === "ctr" ? "center" : anchor === "b" ? "flex-end" : "flex-start"};height:100%;${wpsInnerStyle(ws)}`;
+	return {
+		outer,
+		inner,
+		paragraphAnchor
+	};
+}
 /** Render a wpg group (top-level or nested) as a positioned container.
 *  actualW/H are the group's real pixel size — top-level groups read them from
 *  transformation.width/height; nested groups receive the box their parent
@@ -504,7 +675,7 @@ function renderGroup(group, actualW, actualH, containerStyle, extraAttrs) {
 	const style = containerStyle ?? `position:relative;display:inline-block;vertical-align:middle;width:${actualW}px;height:${actualH}px`;
 	const children = (group.children ?? []).map((c) => renderChild(c, chOff, scaleX, scaleY)).filter((c) => Array.isArray(c) && c.length > 0);
 	const attrs = {
-		"data-wpg-group": "",
+		"data-wpg-group": JSON.stringify(group),
 		style
 	};
 	if (extraAttrs) Object.assign(attrs, extraAttrs);
@@ -551,6 +722,16 @@ const WpgGroup = Node.create({
 });
 //#endregion
 //#region src/extensions/wps-shape.ts
+/**
+* wpsShape — inline node carrying a standalone DOCX text-box shape
+* (wp:anchor > wps:wsp > wps:txbx; NOT inside a wpg group). The shape geometry
+* + styling (transformation/floating/fill/outline/bodyProperties) ride on
+* attrs.wpsShape; the editable text body is PM content (block+), one paragraph
+* per office-open ParagraphOptions. Unlike a group's interior wps children
+* (laid out in the group's coordinate space), this shape floats on its own
+* anchor. The engine node has no NodeView (UI-free); the editor layer extends
+* it with a two-element NodeView (outer placement/rotation, inner contentDOM).
+*/
 const attrWpsShape = () => ({
 	default: null,
 	rendered: false,
@@ -568,23 +749,35 @@ const WpsShape = Node.create({
 	name: "wpsShape",
 	group: "inline",
 	inline: true,
-	atom: true,
+	content: "block+",
+	isolating: true,
+	defining: true,
 	addAttributes() {
 		return { wpsShape: attrWpsShape() };
 	},
 	parseHTML() {
-		return [{ tag: "div[data-wps-shape]" }];
+		return [{
+			tag: "div[data-wps-shape]",
+			contentElement: "div"
+		}];
 	},
 	renderHTML({ node }) {
 		const ws = node.attrs.wpsShape ?? {};
-		const sizeStyle = `width:${ws.transformation?.width != null ? convertEmuToPixels(ws.transformation.width) : 0}px;height:${ws.transformation?.height != null ? convertEmuToPixels(ws.transformation.height) : 0}px;box-sizing:border-box`;
-		if (ws.floating) {
-			const pos = [...floatingToStyles(ws.floating, void 0, ws.transformation?.width), sizeStyle].join(";");
-			const attrs = { "data-wps-shape": "" };
-			if (floatAnchorScope(ws.floating) === "paragraph") attrs["data-float-anchor"] = "paragraph";
-			return renderWpsInterior(ws, pos, { attrs });
-		}
-		return renderWpsInterior(ws, `display:inline-block;vertical-align:middle;${sizeStyle}`, { attrs: { "data-wps-shape": "" } });
+		const { outer, inner, paragraphAnchor } = wpsShapeStyles(ws);
+		const attrs = {
+			"data-wps-shape": JSON.stringify(ws),
+			style: outer
+		};
+		if (paragraphAnchor) attrs["data-float-anchor"] = "paragraph";
+		return [
+			"div",
+			attrs,
+			[
+				"div",
+				{ style: inner },
+				0
+			]
+		];
 	}
 });
 //#endregion
@@ -596,8 +789,11 @@ const tiptapNodeExtensions = [
 	HardBreak,
 	PageBreak,
 	ColumnBreak,
+	Tab,
 	SectionBreak,
 	Passthrough,
+	InlinePassthrough,
+	TocField,
 	Blockquote,
 	OrderedList,
 	BulletList,
@@ -620,7 +816,7 @@ const tiptapNodeExtensions = [
 	TaskList,
 	TaskItem,
 	Heading,
-	TextAlign$1.configure({ types: ["heading", "paragraph"] })
+	TextAlign.configure({ types: ["heading", "paragraph"] })
 ];
 const tiptapMarkExtensions = [
 	Bold,
@@ -667,4 +863,4 @@ const DocxKit = Extension.create({
 	}
 });
 //#endregion
-export { FormattingMarks as _, DocxKit as a, tiptapMarkExtensions as c, WpgGroup as d, renderWpsInterior as f, PageBreak as g, Passthrough as h, Node as i, tiptapNodeExtensions as l, SectionBreak as m, Extension as n, TextAlign as o, renderWpsText as p, Mark as r, docxExtensions as s, Editor as t, WpsShape as u, ColumnBreak as v };
+export { ColumnBreak as C, FormattingMarks as S, Tab as _, DocxKit as a, Passthrough as b, tiptapNodeExtensions as c, renderWpsInterior as d, renderWpsText as f, TocField as g, wpsShapeStyles as h, Node as i, WpsShape as l, wpsRotationVert as m, Extension as n, docxExtensions as o, wpsInnerStyle as p, Mark as r, tiptapMarkExtensions as s, Editor as t, WpgGroup as u, SectionBreak as v, PageBreak as x, InlinePassthrough as y };