@stll/folio-core 0.0.1-placeholder.0 → 0.1.0

package/dist/prosemirror/extensions/nodes/ImageExtension.js

@@ -0,0 +1,132 @@
+import { expectImageAttrs } from "../../attrs/index.js";
+import { createNodeExtension } from "../create.js";
+//#region src/prosemirror/extensions/nodes/ImageExtension.ts
+/**
+* Image Extension — inline/floating image node
+*/
+const ImageExtension = createNodeExtension({
+	name: "image",
+	schemaNodeName: "image",
+	nodeSpec: {
+		inline: true,
+		group: "inline",
+		marks: "_",
+		draggable: true,
+		attrs: {
+			src: {},
+			alt: { default: null },
+			title: { default: null },
+			width: { default: null },
+			height: { default: null },
+			rId: { default: null },
+			wrapType: { default: "inline" },
+			displayMode: { default: "inline" },
+			cssFloat: { default: null },
+			transform: { default: null },
+			opacity: { default: null },
+			distTop: { default: null },
+			distBottom: { default: null },
+			distLeft: { default: null },
+			distRight: { default: null },
+			cropTop: { default: null },
+			cropRight: { default: null },
+			cropBottom: { default: null },
+			cropLeft: { default: null },
+			position: { default: null },
+			borderWidth: { default: null },
+			borderColor: { default: null },
+			borderStyle: { default: null },
+			wrapText: { default: null },
+			hlinkHref: { default: null },
+			_docxRawXml: { default: null }
+		},
+		parseDOM: [{
+			tag: "img[src]",
+			getAttrs(dom) {
+				const element = dom;
+				const alt = element.getAttribute("alt");
+				const title = element.getAttribute("title");
+				const cssFloat = element.dataset["cssFloat"];
+				const borderWidthRaw = element.dataset["borderWidth"];
+				const opacityRaw = element.dataset["opacity"];
+				const opacityParsed = opacityRaw === void 0 ? NaN : Number(opacityRaw);
+				return {
+					src: element.getAttribute("src") || "",
+					...alt ? { alt } : {},
+					...title ? { title } : {},
+					...element.width ? { width: element.width } : {},
+					...element.height ? { height: element.height } : {},
+					...element.dataset["rid"] ? { rId: element.dataset["rid"] } : {},
+					wrapType: element.dataset["wrapType"] || "inline",
+					displayMode: element.dataset["displayMode"] || "inline",
+					...cssFloat ? { cssFloat } : {},
+					...element.dataset["transform"] ? { transform: element.dataset["transform"] } : {},
+					...Number.isFinite(opacityParsed) ? { opacity: opacityParsed } : {},
+					...borderWidthRaw ? { borderWidth: Number(borderWidthRaw) } : {},
+					...element.dataset["borderColor"] ? { borderColor: element.dataset["borderColor"] } : {},
+					...element.dataset["borderStyle"] ? { borderStyle: element.dataset["borderStyle"] } : {}
+				};
+			}
+		}],
+		toDOM(node) {
+			const attrs = expectImageAttrs(node);
+			const domAttrs = {
+				src: attrs.src,
+				class: "docx-image"
+			};
+			if (attrs.alt) domAttrs["alt"] = attrs.alt;
+			if (attrs.title) domAttrs["title"] = attrs.title;
+			if (attrs.rId) domAttrs["data-rid"] = attrs.rId;
+			if (attrs.wrapType) domAttrs["data-wrap-type"] = attrs.wrapType;
+			if (attrs.displayMode) domAttrs["data-display-mode"] = attrs.displayMode;
+			if (attrs.cssFloat) domAttrs["data-css-float"] = attrs.cssFloat;
+			if (attrs.transform) domAttrs["data-transform"] = attrs.transform;
+			if (attrs.opacity != null) domAttrs["data-opacity"] = String(attrs.opacity);
+			if (attrs.borderWidth) domAttrs["data-border-width"] = String(attrs.borderWidth);
+			if (attrs.borderColor) domAttrs["data-border-color"] = attrs.borderColor;
+			if (attrs.borderStyle) domAttrs["data-border-style"] = attrs.borderStyle;
+			const styles = [];
+			if (attrs.width) {
+				domAttrs["width"] = String(attrs.width);
+				styles.push(`width: ${attrs.width}px`);
+			}
+			if (attrs.height) {
+				domAttrs["height"] = String(attrs.height);
+				styles.push(`height: ${attrs.height}px`);
+			}
+			styles.push("max-width: 100%");
+			if (attrs.width && attrs.height) styles.push("object-fit: contain");
+			else styles.push("height: auto");
+			if (attrs.displayMode === "float" && attrs.cssFloat && attrs.cssFloat !== "none") {
+				styles.push(`float: ${attrs.cssFloat}`);
+				domAttrs["class"] += ` docx-image-float docx-image-float-${attrs.cssFloat}`;
+				const marginTop = attrs.distTop ?? 0;
+				const marginBottom = attrs.distBottom ?? 0;
+				const marginLeft = attrs.distLeft ?? 0;
+				const marginRight = attrs.distRight ?? 0;
+				if (attrs.cssFloat === "left") styles.push(`margin: ${marginTop}px ${marginRight || 12}px ${marginBottom}px ${marginLeft}px`);
+				else styles.push(`margin: ${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft || 12}px`);
+			} else if (attrs.displayMode === "block") {
+				styles.push("display: block");
+				styles.push("margin-left: auto");
+				styles.push("margin-right: auto");
+				domAttrs["class"] += " docx-image-block";
+				const marginTop = attrs.distTop ?? 0;
+				const marginBottom = attrs.distBottom ?? 0;
+				if (marginTop > 0) styles.push(`margin-top: ${marginTop}px`);
+				if (marginBottom > 0) styles.push(`margin-bottom: ${marginBottom}px`);
+			}
+			if (attrs.transform) styles.push(`transform: ${attrs.transform}`);
+			if (attrs.opacity != null && attrs.opacity < 1) styles.push(`opacity: ${Math.max(0, attrs.opacity)}`);
+			if (attrs.borderWidth && attrs.borderWidth > 0) {
+				const bStyle = attrs.borderStyle || "solid";
+				const bColor = attrs.borderColor || "#000000";
+				styles.push(`border: ${attrs.borderWidth}px ${bStyle} ${bColor}`);
+			}
+			domAttrs["style"] = styles.join("; ");
+			return ["img", domAttrs];
+		}
+	}
+});
+//#endregion
+export { ImageExtension };

package/dist/prosemirror/extensions/nodes/MathExtension.d.ts

@@ -0,0 +1,13 @@
+import { NodeExtension } from "../types.js";
+
+//#region src/prosemirror/extensions/nodes/MathExtension.d.ts
+/**
+ * Math Extension — inline/block math equation node (OMML)
+ *
+ * Represents Office Math Markup Language equations as atomic nodes.
+ * Stores the raw OMML XML for round-trip fidelity and shows a plain
+ * text fallback in the editor.
+ */
+declare const MathExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+//#endregion
+export { MathExtension };

package/dist/prosemirror/extensions/nodes/MathExtension.js

@@ -0,0 +1,56 @@
+import { expectMathAttrs } from "../../attrs/index.js";
+import { createNodeExtension } from "../create.js";
+//#region src/prosemirror/extensions/nodes/MathExtension.ts
+/**
+* Math Extension — inline/block math equation node (OMML)
+*
+* Represents Office Math Markup Language equations as atomic nodes.
+* Stores the raw OMML XML for round-trip fidelity and shows a plain
+* text fallback in the editor.
+*/
+const MathExtension = createNodeExtension({
+	name: "math",
+	schemaNodeName: "math",
+	nodeSpec: {
+		inline: true,
+		group: "inline",
+		atom: true,
+		selectable: true,
+		attrs: {
+			/** Whether this is a block (oMathPara) or inline (oMath) equation */
+			display: { default: "inline" },
+			/** Raw OMML XML for round-trip preservation */
+			ommlXml: { default: "" },
+			/** Plain text representation for fallback display */
+			plainText: { default: "" }
+		},
+		parseDOM: [{
+			tag: "span.docx-math",
+			getAttrs(dom) {
+				return {
+					display: dom.dataset["display"] ?? "inline",
+					ommlXml: dom.dataset["ommlXml"] ?? "",
+					plainText: dom.textContent
+				};
+			}
+		}],
+		toDOM(node) {
+			const attrs = expectMathAttrs(node);
+			const display = attrs.display ?? "inline";
+			const ommlXml = attrs.ommlXml;
+			const text = (attrs.plainText ?? "") || "[equation]";
+			return [
+				"span",
+				{
+					class: `docx-math docx-math-${display}`,
+					"data-display": display,
+					"data-omml-xml": ommlXml,
+					style: "font-style: italic; font-family: \"Cambria Math\", \"Latin Modern Math\", serif; background: rgba(200,200,255,0.1); padding: 0 2px; border-radius: 2px;"
+				},
+				text
+			];
+		}
+	}
+});
+//#endregion
+export { MathExtension };

package/dist/prosemirror/extensions/nodes/PageBreakExtension.d.ts

@@ -0,0 +1,9 @@
+import { NodeExtension } from "../types.js";
+
+//#region src/prosemirror/extensions/nodes/PageBreakExtension.d.ts
+/**
+ * Page Break Extension — block node representing a DOCX page break
+ */
+declare const PageBreakExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+//#endregion
+export { PageBreakExtension };

package/dist/prosemirror/extensions/nodes/PageBreakExtension.js

@@ -0,0 +1,20 @@
+import { createNodeExtension } from "../create.js";
+//#region src/prosemirror/extensions/nodes/PageBreakExtension.ts
+/**
+* Page Break Extension — block node representing a DOCX page break
+*/
+const PageBreakExtension = createNodeExtension({
+	name: "pageBreak",
+	schemaNodeName: "pageBreak",
+	nodeSpec: {
+		group: "block",
+		atom: true,
+		selectable: true,
+		parseDOM: [{ tag: "div.docx-page-break" }],
+		toDOM() {
+			return ["div", { class: "docx-page-break" }];
+		}
+	}
+});
+//#endregion
+export { PageBreakExtension };

package/dist/prosemirror/extensions/nodes/SdtExtension.d.ts

@@ -0,0 +1,12 @@
+import { NodeExtension } from "../types.js";
+
+//#region src/prosemirror/extensions/nodes/SdtExtension.d.ts
+/**
+ * SDT Extension — inline content control node (Structured Document Tag)
+ *
+ * Represents OOXML inline SDTs as an inline node wrapping text content.
+ * Supports: richText, plainText, date, dropdown, comboBox, checkbox.
+ */
+declare const SdtExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+//#endregion
+export { SdtExtension };

package/dist/prosemirror/extensions/nodes/SdtExtension.js

@@ -0,0 +1,107 @@
+import { expectSdtAttrs } from "../../attrs/index.js";
+import { createNodeExtension } from "../create.js";
+//#region src/prosemirror/extensions/nodes/SdtExtension.ts
+/**
+* SDT Extension — inline content control node (Structured Document Tag)
+*
+* Represents OOXML inline SDTs as an inline node wrapping text content.
+* Supports: richText, plainText, date, dropdown, comboBox, checkbox.
+*/
+const SdtExtension = createNodeExtension({
+	name: "sdt",
+	schemaNodeName: "sdt",
+	nodeSpec: {
+		inline: true,
+		group: "inline",
+		content: "inline*",
+		attrs: {
+			/** SDT type: richText, plainText, date, dropdown, comboBox, checkbox, etc. */
+			sdtType: { default: "richText" },
+			/** Alias (friendly name) */
+			alias: { default: null },
+			/** Tag (developer identifier) */
+			tag: { default: null },
+			/** Numeric `w:id/@w:val`. */
+			id: { default: null },
+			/** Lock setting */
+			lock: { default: null },
+			/** Placeholder text */
+			placeholder: { default: null },
+			/** Whether showing placeholder */
+			showingPlaceholder: { default: false },
+			/** Date format for date controls */
+			dateFormat: { default: null },
+			/** ISO 8601 bound date value (`w:date@w:fullDate`). */
+			dateValueISO: { default: null },
+			/** Dropdown/combobox list items as JSON string */
+			listItems: { default: null },
+			/** Selected dropdown / comboBox value (`w:dropDownList@w:lastValue`). */
+			dropdownLastValue: { default: null },
+			/** Checkbox checked state */
+			checked: { default: null },
+			/**
+			* Verbatim `<w:sdtPr>` / `<w:sdtEndPr>` captured by the parser so
+			* unmodeled OOXML features (`w:dataBinding`, `w15:*`, custom XML
+			* mappings) round-trip after a save, mirroring the block-SDT node.
+			*/
+			rawPropertiesXml: { default: null },
+			rawEndPropertiesXml: { default: null }
+		},
+		parseDOM: [{
+			tag: "span.docx-sdt",
+			getAttrs(dom) {
+				if (!(dom instanceof HTMLElement)) return false;
+				const el = dom;
+				const idRaw = el.dataset["sdtId"];
+				const id = idRaw ? Number.parseInt(idRaw, 10) : null;
+				return {
+					sdtType: el.dataset["sdtType"] || "richText",
+					alias: el.dataset["alias"] || null,
+					tag: el.dataset["tag"] || null,
+					id: id !== null && !Number.isNaN(id) ? id : null,
+					lock: el.dataset["lock"] || null,
+					placeholder: el.dataset["placeholder"] || null,
+					showingPlaceholder: el.dataset["showingPlaceholder"] === "true",
+					dateFormat: el.dataset["dateFormat"] || null,
+					dateValueISO: el.dataset["dateValueIso"] || null,
+					listItems: el.dataset["listItems"] || null,
+					dropdownLastValue: el.dataset["dropdownLastValue"] || null,
+					checked: (() => {
+						if (el.dataset["checked"] === "true") return true;
+						if (el.dataset["checked"] === "false") return false;
+						return null;
+					})(),
+					rawPropertiesXml: null,
+					rawEndPropertiesXml: null
+				};
+			}
+		}],
+		toDOM(node) {
+			const attrs = expectSdtAttrs(node);
+			const dataAttrs = {
+				class: `docx-sdt docx-sdt-${attrs.sdtType}`,
+				"data-sdt-type": attrs.sdtType
+			};
+			if (attrs.alias) dataAttrs["data-alias"] = attrs.alias;
+			if (attrs.tag) dataAttrs["data-tag"] = attrs.tag;
+			if (typeof attrs.id === "number") dataAttrs["data-sdt-id"] = String(attrs.id);
+			if (attrs.lock) dataAttrs["data-lock"] = attrs.lock;
+			if (attrs.placeholder) dataAttrs["data-placeholder"] = attrs.placeholder;
+			if (attrs.showingPlaceholder) dataAttrs["data-showing-placeholder"] = "true";
+			if (attrs.dateFormat) dataAttrs["data-date-format"] = attrs.dateFormat;
+			if (attrs.dateValueISO) dataAttrs["data-date-value-iso"] = attrs.dateValueISO;
+			if (attrs.listItems) dataAttrs["data-list-items"] = attrs.listItems;
+			if (attrs.dropdownLastValue) dataAttrs["data-dropdown-last-value"] = attrs.dropdownLastValue;
+			if (attrs.checked !== void 0) dataAttrs["data-checked"] = String(attrs.checked);
+			if (attrs.sdtType === "checkbox") dataAttrs["style"] = "border: 1px solid #ccc; border-radius: 3px; padding: 0 2px; display: inline;";
+			else dataAttrs["style"] = "border-bottom: 1px dashed #999; padding: 0 1px; display: inline;";
+			return [
+				"span",
+				dataAttrs,
+				0
+			];
+		}
+	}
+});
+//#endregion
+export { SdtExtension };

package/dist/prosemirror/extensions/nodes/ShapeExtension.d.ts

@@ -0,0 +1,30 @@
+import { NodeExtension } from "../types.js";
+import { ShapeAttrs as ShapeAttrs$1 } from "../../schema/nodes.js";
+
+//#region src/prosemirror/extensions/nodes/ShapeExtension.d.ts
+type ShapeAttrs = ShapeAttrs$1;
+declare function sanitizeColor(value: string | null | undefined): string | null;
+declare function sanitizeTransform(value: string | null | undefined): string | null;
+declare function sanitizeSvgId(value: string | null | undefined): string | null;
+declare function sanitizeShapeDimension(value: number | null | undefined, fallback: number): number;
+declare function strokeDashArrayForOutlineStyle(outlineStyle: string | undefined): string | undefined;
+/**
+ * Build the `points` string for a polygon-based shape preset.
+ *
+ * Phase-1 arrow proportions use Word's default `<a:avLst/>` percentages:
+ *   - Stem thickness: 40% of the cross-axis extent.
+ *   - Head depth: 40% of the main-axis extent.
+ *   - Head width spans the full cross-axis extent.
+ *
+ * Pure and DOM-free so it can be unit tested without a happy-dom / jsdom
+ * setup; `createShapeElement` wraps the result in an `<svg:polygon>` node.
+ */
+declare function buildShapePolygonPoints(type: string, w: number, h: number): string | null;
+type GradientStop = {
+  position: number;
+  color: string;
+};
+declare function parseGradientStops(raw: string | undefined): GradientStop[];
+declare const ShapeExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+//#endregion
+export { ShapeAttrs, ShapeExtension, buildShapePolygonPoints, parseGradientStops, sanitizeColor, sanitizeShapeDimension, sanitizeSvgId, sanitizeTransform, strokeDashArrayForOutlineStyle };