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

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

@@ -0,0 +1,502 @@
+import { expectShapeAttrs } from "../../attrs/index.js";
+import { createNodeExtension } from "../create.js";
+//#region src/prosemirror/extensions/nodes/ShapeExtension.ts
+/**
+* Shape Extension — inline shape node
+*
+* Renders basic shapes (rect, ellipse, line, etc.) as inline SVG elements.
+* Supports fill color, outline, transforms, and selection.
+*/
+const SVG_NS = "http://www.w3.org/2000/svg";
+/**
+* CSS color allowlist for SVG attribute values.
+*
+* Why: shape colors round-trip through ProseMirror data-* attributes, so the
+* value is a CSS color string by the time it reaches the renderer. Accept the
+* shapes the parser produces (`#RRGGBB`, `var(--token, #RRGGBB)`) and a small
+* set of well-known keywords. Reject anything else so a crafted DOCX cannot
+* smuggle attribute-injection payloads or `url(...)` references.
+*/
+const HEX_COLOR_ATTR_RE = /^#[0-9A-Fa-f]{6}$/u;
+const VAR_COLOR_RE = /^var\(--[a-z0-9-]+(?:,\s*#[0-9A-Fa-f]{6})?\)$/iu;
+const NAMED_COLORS = /* @__PURE__ */ new Set([
+	"none",
+	"transparent",
+	"black",
+	"white",
+	"currentColor"
+]);
+function sanitizeColor(value) {
+	if (!value) return null;
+	const v = value.trim();
+	if (NAMED_COLORS.has(v)) return v;
+	if (HEX_COLOR_ATTR_RE.test(v)) return v;
+	if (VAR_COLOR_RE.test(v)) return v;
+	return null;
+}
+const DISPLAY_MODES = /* @__PURE__ */ new Set([
+	"inline",
+	"float",
+	"block"
+]);
+const CSS_FLOATS = /* @__PURE__ */ new Set([
+	"left",
+	"right",
+	"none"
+]);
+/**
+* CSS transform values for shape rotation/flips. Allow only the function calls
+* the parser actually emits (`rotate(Ndeg)`, `scaleX(-1)`, `scaleY(-1)`) so
+* a crafted DOCX cannot inject arbitrary CSS via the inline `style` attribute.
+*/
+const SAFE_TRANSFORM_TOKEN_RE = /^(?:rotate\(-?\d+(?:\.\d+)?deg\)|scaleX\(-1\)|scaleY\(-1\))$/u;
+function sanitizeTransform(value) {
+	if (!value) return null;
+	const tokens = value.trim().split(/\s+/u);
+	if (tokens.length === 0) return null;
+	for (const t of tokens) if (!SAFE_TRANSFORM_TOKEN_RE.test(t)) return null;
+	return tokens.join(" ");
+}
+function sanitizeDisplayMode(value) {
+	for (const allowed of DISPLAY_MODES) if (allowed === value) return allowed;
+	return null;
+}
+function sanitizeCssFloat(value) {
+	for (const allowed of CSS_FLOATS) if (allowed === value) return allowed;
+	return null;
+}
+function finiteNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function parseShapePosition(raw) {
+	if (!raw) return;
+	try {
+		const parsed = JSON.parse(raw);
+		if (typeof parsed !== "object" || parsed === null) return;
+		return parsed;
+	} catch {
+		return;
+	}
+}
+function parseShapeLineEnd(raw) {
+	if (!raw) return;
+	try {
+		const parsed = JSON.parse(raw);
+		if (typeof parsed !== "object" || parsed === null) return;
+		return parsed;
+	} catch {
+		return;
+	}
+}
+function sanitizeSvgId(value) {
+	if (!value) return null;
+	const sanitized = value.replace(/[^a-zA-Z0-9_-]/gu, "");
+	return sanitized.length > 0 ? sanitized : null;
+}
+function sanitizeShapeDimension(value, fallback) {
+	return typeof value === "number" && !Number.isNaN(value) ? value : fallback;
+}
+function strokeDashArrayForOutlineStyle(outlineStyle) {
+	switch (outlineStyle) {
+		case "dashed":
+		case "dash":
+		case "lgDash":
+		case "sysDash": return "8 4";
+		case "dotted":
+		case "dot":
+		case "sysDot": return "2 2";
+		case "dashDot":
+		case "lgDashDot":
+		case "sysDashDot": return "8 4 2 4";
+		case "lgDashDotDot":
+		case "sysDashDotDot": return "8 4 2 4 2 4";
+		default: return;
+	}
+}
+function setNum(el, name, value) {
+	el.setAttribute(name, String(value));
+}
+/**
+* Format a number for SVG attribute output: keeps integers as integers and
+* trims floating-point noise (e.g., `0.30000000000000004` → `0.3`).
+*/
+function fmt(n) {
+	return Number.isInteger(n) ? String(n) : Number(n.toFixed(3)).toString();
+}
+/**
+* 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.
+*/
+function buildShapePolygonPoints(type, w, h) {
+	switch (type) {
+		case "triangle":
+		case "isosTriangle": return `${fmt(w / 2)},0 ${fmt(w)},${fmt(h)} 0,${fmt(h)}`;
+		case "diamond": return `${fmt(w / 2)},0 ${fmt(w)},${fmt(h / 2)} ${fmt(w / 2)},${fmt(h)} 0,${fmt(h / 2)}`;
+		case "rightArrow": return [
+			`0,${fmt(h * .3)}`,
+			`${fmt(w * .6)},${fmt(h * .3)}`,
+			`${fmt(w * .6)},0`,
+			`${fmt(w)},${fmt(h / 2)}`,
+			`${fmt(w * .6)},${fmt(h)}`,
+			`${fmt(w * .6)},${fmt(h * .7)}`,
+			`0,${fmt(h * .7)}`
+		].join(" ");
+		case "leftArrow": return [
+			`0,${fmt(h / 2)}`,
+			`${fmt(w * .4)},0`,
+			`${fmt(w * .4)},${fmt(h * .3)}`,
+			`${fmt(w)},${fmt(h * .3)}`,
+			`${fmt(w)},${fmt(h * .7)}`,
+			`${fmt(w * .4)},${fmt(h * .7)}`,
+			`${fmt(w * .4)},${fmt(h)}`
+		].join(" ");
+		case "upArrow": return [
+			`${fmt(w / 2)},0`,
+			`${fmt(w)},${fmt(h * .4)}`,
+			`${fmt(w * .7)},${fmt(h * .4)}`,
+			`${fmt(w * .7)},${fmt(h)}`,
+			`${fmt(w * .3)},${fmt(h)}`,
+			`${fmt(w * .3)},${fmt(h * .4)}`,
+			`0,${fmt(h * .4)}`
+		].join(" ");
+		case "downArrow": return [
+			`${fmt(w * .3)},0`,
+			`${fmt(w * .7)},0`,
+			`${fmt(w * .7)},${fmt(h * .6)}`,
+			`${fmt(w)},${fmt(h * .6)}`,
+			`${fmt(w / 2)},${fmt(h)}`,
+			`0,${fmt(h * .6)}`,
+			`${fmt(w * .3)},${fmt(h * .6)}`
+		].join(" ");
+		case "leftRightArrow": return [
+			`0,${fmt(h / 2)}`,
+			`${fmt(w * .25)},0`,
+			`${fmt(w * .25)},${fmt(h * .3)}`,
+			`${fmt(w * .75)},${fmt(h * .3)}`,
+			`${fmt(w * .75)},0`,
+			`${fmt(w)},${fmt(h / 2)}`,
+			`${fmt(w * .75)},${fmt(h)}`,
+			`${fmt(w * .75)},${fmt(h * .7)}`,
+			`${fmt(w * .25)},${fmt(h * .7)}`,
+			`${fmt(w * .25)},${fmt(h)}`
+		].join(" ");
+		case "upDownArrow": return [
+			`${fmt(w / 2)},0`,
+			`${fmt(w)},${fmt(h * .25)}`,
+			`${fmt(w * .7)},${fmt(h * .25)}`,
+			`${fmt(w * .7)},${fmt(h * .75)}`,
+			`${fmt(w)},${fmt(h * .75)}`,
+			`${fmt(w / 2)},${fmt(h)}`,
+			`0,${fmt(h * .75)}`,
+			`${fmt(w * .3)},${fmt(h * .75)}`,
+			`${fmt(w * .3)},${fmt(h * .25)}`,
+			`0,${fmt(h * .25)}`
+		].join(" ");
+		default: return null;
+	}
+}
+/**
+* Build the inner shape element (rect/ellipse/etc) for the given shape type.
+*
+* Unknown / phase-2+ presets fall back to a rectangle so the document still
+* displays. The original `<a:prstGeom prst>` value round-trips through the
+* model regardless of what the renderer chooses to draw.
+*/
+function createShapeElement(type, w, h) {
+	switch (type) {
+		case "ellipse":
+		case "oval": {
+			const el = document.createElementNS(SVG_NS, "ellipse");
+			setNum(el, "cx", w / 2);
+			setNum(el, "cy", h / 2);
+			setNum(el, "rx", w / 2);
+			setNum(el, "ry", h / 2);
+			return el;
+		}
+		case "roundRect": {
+			const el = document.createElementNS(SVG_NS, "rect");
+			setNum(el, "x", 0);
+			setNum(el, "y", 0);
+			setNum(el, "width", w);
+			setNum(el, "height", h);
+			setNum(el, "rx", Math.min(w, h) * .1);
+			return el;
+		}
+		case "line":
+		case "straightConnector1": {
+			const el = document.createElementNS(SVG_NS, "line");
+			setNum(el, "x1", 0);
+			setNum(el, "y1", h / 2);
+			setNum(el, "x2", w);
+			setNum(el, "y2", h / 2);
+			return el;
+		}
+		default: {
+			const points = buildShapePolygonPoints(type, w, h);
+			if (points !== null) {
+				const el = document.createElementNS(SVG_NS, "polygon");
+				el.setAttribute("points", points);
+				return el;
+			}
+			const el = document.createElementNS(SVG_NS, "rect");
+			setNum(el, "x", 0);
+			setNum(el, "y", 0);
+			setNum(el, "width", w);
+			setNum(el, "height", h);
+			return el;
+		}
+	}
+}
+function isGradientStopShape(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const candidate = value;
+	return typeof candidate.position === "number" && typeof candidate.color === "string";
+}
+function parseGradientStops(raw) {
+	if (!raw) return [];
+	try {
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return [];
+		return parsed.flatMap((s) => {
+			if (!isGradientStopShape(s)) return [];
+			const color = sanitizeColor(s.color);
+			return color === null ? [] : [{
+				position: s.position,
+				color
+			}];
+		});
+	} catch {
+		return [];
+	}
+}
+/**
+* Create a gradient <defs> element. Returns null when stops are empty/invalid.
+*/
+function createGradientElement(gradId, attrs) {
+	const stops = parseGradientStops(attrs.gradientStops);
+	if (stops.length === 0) return null;
+	const gType = attrs.gradientType ?? "linear";
+	const isRadial = gType === "radial" || gType === "rectangular" || gType === "path";
+	const grad = document.createElementNS(SVG_NS, isRadial ? "radialGradient" : "linearGradient");
+	grad.setAttribute("id", gradId);
+	if (isRadial) {
+		grad.setAttribute("cx", "50%");
+		grad.setAttribute("cy", "50%");
+		grad.setAttribute("r", "50%");
+	} else {
+		const rad = ((attrs.gradientAngle ?? 0) - 90) * Math.PI / 180;
+		const x1 = Math.round(50 + 50 * Math.cos(rad + Math.PI));
+		const y1 = Math.round(50 + 50 * Math.sin(rad + Math.PI));
+		const x2 = Math.round(50 + 50 * Math.cos(rad));
+		const y2 = Math.round(50 + 50 * Math.sin(rad));
+		grad.setAttribute("x1", `${x1}%`);
+		grad.setAttribute("y1", `${y1}%`);
+		grad.setAttribute("x2", `${x2}%`);
+		grad.setAttribute("y2", `${y2}%`);
+	}
+	for (const s of stops) {
+		const stop = document.createElementNS(SVG_NS, "stop");
+		stop.setAttribute("offset", `${Math.round(s.position / 1e3)}%`);
+		stop.setAttribute("stop-color", s.color);
+		grad.append(stop);
+	}
+	return grad;
+}
+const ShapeExtension = createNodeExtension({
+	name: "shape",
+	schemaNodeName: "shape",
+	nodeSpec: {
+		inline: true,
+		group: "inline",
+		marks: "_",
+		draggable: true,
+		atom: true,
+		attrs: {
+			shapeType: { default: "rect" },
+			shapeId: { default: null },
+			width: { default: 100 },
+			height: { default: 80 },
+			fillColor: { default: null },
+			fillType: { default: "solid" },
+			gradientType: { default: null },
+			gradientAngle: { default: null },
+			gradientStops: { default: null },
+			outlineWidth: { default: 1 },
+			outlineColor: { default: "var(--doc-shape-outline, #000000)" },
+			outlineStyle: { default: "solid" },
+			outlineCap: { default: null },
+			outlineHeadEnd: { default: null },
+			outlineTailEnd: { default: null },
+			transform: { default: null },
+			displayMode: { default: "inline" },
+			cssFloat: { default: null },
+			wrapType: { default: "inline" },
+			wrapText: { default: null },
+			distTop: { default: null },
+			distBottom: { default: null },
+			distLeft: { default: null },
+			distRight: { default: null },
+			position: { default: null },
+			shadowColor: { default: null },
+			shadowBlur: { default: null },
+			shadowOffsetX: { default: null },
+			shadowOffsetY: { default: null },
+			glowColor: { default: null },
+			glowRadius: { default: null }
+		},
+		parseDOM: [{
+			tag: "span.docx-shape",
+			getAttrs(dom) {
+				const d = dom.dataset;
+				const position = parseShapePosition(d["position"]);
+				const outlineHeadEnd = parseShapeLineEnd(d["outlineHeadEnd"]);
+				const outlineTailEnd = parseShapeLineEnd(d["outlineTailEnd"]);
+				return {
+					shapeType: d["shapeType"] || "rect",
+					...d["shapeId"] ? { shapeId: d["shapeId"] } : {},
+					...d["width"] ? { width: Number(d["width"]) } : {},
+					...d["height"] ? { height: Number(d["height"]) } : {},
+					...d["fillColor"] ? { fillColor: d["fillColor"] } : {},
+					fillType: d["fillType"] || "solid",
+					...d["gradientType"] ? { gradientType: d["gradientType"] } : {},
+					...d["gradientAngle"] ? { gradientAngle: Number(d["gradientAngle"]) } : {},
+					...d["gradientStops"] ? { gradientStops: d["gradientStops"] } : {},
+					...d["outlineWidth"] ? { outlineWidth: Number(d["outlineWidth"]) } : {},
+					...d["outlineColor"] ? { outlineColor: d["outlineColor"] } : {},
+					...d["outlineStyle"] ? { outlineStyle: d["outlineStyle"] } : {},
+					...d["outlineCap"] ? { outlineCap: d["outlineCap"] } : {},
+					...outlineHeadEnd ? { outlineHeadEnd } : {},
+					...outlineTailEnd ? { outlineTailEnd } : {},
+					...d["transform"] ? { transform: d["transform"] } : {},
+					...d["displayMode"] ? { displayMode: d["displayMode"] } : {},
+					...d["cssFloat"] ? { cssFloat: d["cssFloat"] } : {},
+					...d["wrapType"] ? { wrapType: d["wrapType"] } : {},
+					...d["wrapText"] ? { wrapText: d["wrapText"] } : {},
+					...d["distTop"] ? { distTop: Number(d["distTop"]) } : {},
+					...d["distBottom"] ? { distBottom: Number(d["distBottom"]) } : {},
+					...d["distLeft"] ? { distLeft: Number(d["distLeft"]) } : {},
+					...d["distRight"] ? { distRight: Number(d["distRight"]) } : {},
+					...position ? { position } : {},
+					...d["shadowColor"] ? { shadowColor: d["shadowColor"] } : {},
+					...d["shadowBlur"] ? { shadowBlur: Number(d["shadowBlur"]) } : {},
+					...d["shadowOffsetX"] ? { shadowOffsetX: Number(d["shadowOffsetX"]) } : {},
+					...d["shadowOffsetY"] ? { shadowOffsetY: Number(d["shadowOffsetY"]) } : {},
+					...d["glowColor"] ? { glowColor: d["glowColor"] } : {},
+					...d["glowRadius"] ? { glowRadius: Number(d["glowRadius"]) } : {}
+				};
+			}
+		}],
+		toDOM(node) {
+			const attrs = expectShapeAttrs(node);
+			const w = sanitizeShapeDimension(attrs.width, 100);
+			const h = sanitizeShapeDimension(attrs.height, 80);
+			const domAttrs = {
+				class: "docx-shape",
+				"data-shape-type": attrs.shapeType || "rect"
+			};
+			if (attrs.shapeId) domAttrs["data-shape-id"] = attrs.shapeId;
+			domAttrs["data-width"] = String(w);
+			domAttrs["data-height"] = String(h);
+			if (attrs.fillColor) domAttrs["data-fill-color"] = attrs.fillColor;
+			if (attrs.fillType) domAttrs["data-fill-type"] = attrs.fillType;
+			if (attrs.gradientType) domAttrs["data-gradient-type"] = attrs.gradientType;
+			if (typeof attrs.gradientAngle === "number") domAttrs["data-gradient-angle"] = String(attrs.gradientAngle);
+			if (attrs.gradientStops) domAttrs["data-gradient-stops"] = attrs.gradientStops;
+			if (attrs.outlineWidth) domAttrs["data-outline-width"] = String(attrs.outlineWidth);
+			if (attrs.outlineColor) domAttrs["data-outline-color"] = attrs.outlineColor;
+			if (attrs.outlineStyle) domAttrs["data-outline-style"] = attrs.outlineStyle;
+			if (attrs.outlineCap) domAttrs["data-outline-cap"] = attrs.outlineCap;
+			if (attrs.outlineHeadEnd) domAttrs["data-outline-head-end"] = JSON.stringify(attrs.outlineHeadEnd);
+			if (attrs.outlineTailEnd) domAttrs["data-outline-tail-end"] = JSON.stringify(attrs.outlineTailEnd);
+			if (attrs.transform) domAttrs["data-transform"] = attrs.transform;
+			if (attrs.displayMode) domAttrs["data-display-mode"] = attrs.displayMode;
+			if (attrs.cssFloat) domAttrs["data-css-float"] = attrs.cssFloat;
+			if (attrs.wrapType) domAttrs["data-wrap-type"] = attrs.wrapType;
+			if (attrs.wrapText) domAttrs["data-wrap-text"] = attrs.wrapText;
+			if (typeof attrs.distTop === "number") domAttrs["data-dist-top"] = String(attrs.distTop);
+			if (typeof attrs.distBottom === "number") domAttrs["data-dist-bottom"] = String(attrs.distBottom);
+			if (typeof attrs.distLeft === "number") domAttrs["data-dist-left"] = String(attrs.distLeft);
+			if (typeof attrs.distRight === "number") domAttrs["data-dist-right"] = String(attrs.distRight);
+			if (attrs.position) domAttrs["data-position"] = JSON.stringify(attrs.position);
+			if (attrs.shadowColor) domAttrs["data-shadow-color"] = attrs.shadowColor;
+			if (typeof attrs.shadowBlur === "number") domAttrs["data-shadow-blur"] = String(attrs.shadowBlur);
+			if (typeof attrs.shadowOffsetX === "number") domAttrs["data-shadow-offset-x"] = String(attrs.shadowOffsetX);
+			if (typeof attrs.shadowOffsetY === "number") domAttrs["data-shadow-offset-y"] = String(attrs.shadowOffsetY);
+			if (attrs.glowColor) domAttrs["data-glow-color"] = attrs.glowColor;
+			if (typeof attrs.glowRadius === "number") domAttrs["data-glow-radius"] = String(attrs.glowRadius);
+			const safeTransform = sanitizeTransform(attrs.transform);
+			const safeDisplayMode = sanitizeDisplayMode(attrs.displayMode);
+			const safeCssFloat = sanitizeCssFloat(attrs.cssFloat);
+			const safeShadowColor = sanitizeColor(attrs.shadowColor);
+			const safeGlowColor = sanitizeColor(attrs.glowColor);
+			const safeGlowRadius = finiteNumber(attrs.glowRadius);
+			const safeShadowBlur = finiteNumber(attrs.shadowBlur);
+			const safeShadowOffsetX = finiteNumber(attrs.shadowOffsetX);
+			const safeShadowOffsetY = finiteNumber(attrs.shadowOffsetY);
+			const styles = [
+				"display: inline-block",
+				`width: ${w}px`,
+				`height: ${h}px`,
+				"vertical-align: middle",
+				"line-height: 0"
+			];
+			if (safeTransform) styles.push(`transform: ${safeTransform}`);
+			if (safeDisplayMode === "float" && safeCssFloat && safeCssFloat !== "none") {
+				styles.push(`float: ${safeCssFloat}`);
+				styles.push("margin: 4px 8px");
+			} else if (safeDisplayMode === "block") {
+				styles.push("display: block");
+				styles.push("margin: 4px auto");
+			}
+			const filters = [];
+			if (safeShadowColor) {
+				const sx = safeShadowOffsetX ?? 2;
+				const sy = safeShadowOffsetY ?? 2;
+				const sb = safeShadowBlur ?? 4;
+				filters.push(`drop-shadow(${sx}px ${sy}px ${sb}px ${safeShadowColor})`);
+			}
+			if (safeGlowColor !== null && safeGlowRadius !== null) filters.push(`drop-shadow(0 0 ${safeGlowRadius}px ${safeGlowColor})`);
+			if (filters.length > 0) styles.push(`filter: ${filters.join(" ")}`);
+			domAttrs["style"] = styles.join("; ");
+			const safeFillColor = sanitizeColor(attrs.fillColor) ?? "#ffffff";
+			const safeStrokeColor = sanitizeColor(attrs.outlineColor) ?? "var(--doc-shape-outline, #000000)";
+			const strokeWidth = finiteNumber(attrs.outlineWidth) ?? 1;
+			const svg = document.createElementNS(SVG_NS, "svg");
+			svg.setAttribute("xmlns", SVG_NS);
+			setNum(svg, "width", w);
+			setNum(svg, "height", h);
+			svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+			let gradient = null;
+			let fillAttr;
+			if (attrs.fillType === "gradient" && attrs.gradientStops) {
+				const gradId = `grad-${sanitizeSvgId(attrs.shapeId) ?? Math.random().toString(36).slice(2, 8)}`;
+				gradient = createGradientElement(gradId, attrs);
+				fillAttr = gradient ? `url(#${gradId})` : safeFillColor;
+			} else fillAttr = attrs.fillType === "none" ? "none" : safeFillColor;
+			const strokeAttr = attrs.outlineStyle === "none" ? "none" : safeStrokeColor;
+			svg.setAttribute("style", `fill:${fillAttr};stroke:${strokeAttr};stroke-width:${strokeWidth}`);
+			if (gradient) {
+				const defs = document.createElementNS(SVG_NS, "defs");
+				defs.append(gradient);
+				svg.append(defs);
+			}
+			const shapeEl = createShapeElement(attrs.shapeType || "rect", w, h);
+			const strokeDasharray = strokeDashArrayForOutlineStyle(attrs.outlineStyle);
+			if (strokeDasharray) shapeEl.setAttribute("stroke-dasharray", strokeDasharray);
+			svg.append(shapeEl);
+			const span = document.createElement("span");
+			for (const [key, value] of Object.entries(domAttrs)) span.setAttribute(key, value);
+			span.append(svg);
+			return { dom: span };
+		}
+	}
+});
+//#endregion
+export { ShapeExtension, buildShapePolygonPoints, parseGradientStops, sanitizeColor, sanitizeShapeDimension, sanitizeSvgId, sanitizeTransform, strokeDashArrayForOutlineStyle };

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

@@ -0,0 +1,9 @@
+import { NodeExtension } from "../types.js";
+
+//#region src/prosemirror/extensions/nodes/TabExtension.d.ts
+/**
+ * Tab Extension — inline tab character node
+ */
+declare const TabExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+//#endregion
+export { TabExtension };

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

@@ -0,0 +1,27 @@
+import { createNodeExtension } from "../create.js";
+//#region src/prosemirror/extensions/nodes/TabExtension.ts
+/**
+* Tab Extension — inline tab character node
+*/
+const TabExtension = createNodeExtension({
+	name: "tab",
+	schemaNodeName: "tab",
+	nodeSpec: {
+		inline: true,
+		group: "inline",
+		selectable: false,
+		parseDOM: [{ tag: "span.docx-tab" }],
+		toDOM() {
+			return [
+				"span",
+				{
+					class: "docx-tab",
+					style: "display: inline-block; min-width: 16px; white-space: pre;"
+				},
+				"	"
+			];
+		}
+	}
+});
+//#endregion
+export { TabExtension };

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

@@ -0,0 +1,34 @@
+import { AnyExtension, Extension, NodeExtension } from "../types.js";
+import { ColorValue } from "../../../types/colors.js";
+import { Command, EditorState } from "prosemirror-state";
+import { Node } from "prosemirror-model";
+
+//#region src/prosemirror/extensions/nodes/TableExtension.d.ts
+type TableContextInfo = {
+  isInTable: boolean;
+  table?: Node;
+  tablePos?: number;
+  rowIndex?: number;
+  columnIndex?: number;
+  rowCount?: number;
+  columnCount?: number;
+  hasMultiCellSelection?: boolean;
+  canSplitCell?: boolean; /** Current cell's dominant border color, if any */
+  cellBorderColor?: ColorValue; /** Current cell's background/fill color (RGB hex without #), if any */
+  cellBackgroundColor?: string;
+};
+declare function getTableContext(state: EditorState): TableContextInfo;
+declare function isInTableCell(state: EditorState): boolean;
+declare function goToNextCell(): Command;
+declare function goToPrevCell(): Command;
+declare const TableNodeExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+declare const TableRowExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+declare const TableCellExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+declare const TableHeaderExtension: (options?: Partial<Record<string, unknown>> | undefined) => NodeExtension;
+type BorderPreset = "all" | "outside" | "inside" | "none";
+/** Whole-table border presets (Word's "All Borders" / "No Border"). */
+type TableBorderPreset = "all" | "none";
+declare const TablePluginExtension: (options?: Partial<Record<string, unknown>> | undefined) => Extension;
+declare function createTableExtensions(): AnyExtension[];
+//#endregion
+export { BorderPreset, TableBorderPreset, TableCellExtension, TableContextInfo, TableHeaderExtension, TableNodeExtension, TablePluginExtension, TableRowExtension, createTableExtensions, getTableContext, goToNextCell, goToPrevCell, isInTableCell as isInTable };