@pie-lib/editable-html-tip-tap 3.0.1-next.20261004173930 → 3.0.1-next.20261004200555

package/dist/components/EditableHtml.js

@@ -1,46 +1,46 @@
-import { PlainTextPaste as e } from "../plain-text-paste.js";
+import { ExternalPaste as e } from "../external-paste.js";
 import { normalizeInitialMarkup as t } from "../utils/helper.js";
 import n from "../extensions/extended-table.js";
 import { ExtendedTableCell as r, ExtendedTableHeader as i } from "../extensions/extended-table-cell.js";
 import { DivNode as a } from "../extensions/div-node.js";
-import { EnsureEmptyRootIsDiv as o } from "../extensions/ensure-empty-root-div.js";
-import { EnsureListItemContentIsDiv as ee } from "../extensions/ensure-list-item-content-is-div.js";
-import { DragInTheBlankNode as s, ExplicitConstructedResponseNode as te, InlineDropdownNode as ne, MathTemplatedNode as re, ResponseAreaExtension as ie } from "../extensions/responseArea.js";
-import { MathNode as c } from "../extensions/math.js";
-import { ImageUploadNode as l } from "../extensions/image.js";
-import { Media as u } from "../extensions/media.js";
-import { CSSMark as d } from "../extensions/css.js";
-import { ExtendedListItem as ae } from "../extensions/extended-list-item.js";
-import { HeadingParagraph as oe } from "../extensions/heading-paragraph.js";
-import { valueToSize as f } from "../utils/size.js";
-import p from "./TiptapContainer.js";
-import { PLUGINS_MAP as m, buildExtensions as h } from "../extensions/index.js";
-import { useCallback as g, useEffect as _, useMemo as v, useState as y } from "react";
-import { debounce as se } from "@pie-element/shared-lodash";
-import { EditorContent as b, useEditor as x, useEditorState as S } from "@tiptap/react";
-import { styled as C } from "@mui/material/styles";
-import w from "@tiptap/starter-kit";
-import { TextStyleKit as T } from "@tiptap/extension-text-style";
-import { CharacterCount as E } from "@tiptap/extension-character-count";
-import D from "@tiptap/extension-superscript";
-import O from "@tiptap/extension-subscript";
-import k from "@tiptap/extension-text-align";
-import A from "@tiptap/extension-image";
-import j from "@tiptap/extension-placeholder";
-import { TableRow as M } from "@tiptap/extension-table-row";
-import { jsx as N } from "react/jsx-runtime";
+import { EnsureEmptyRootIsDiv as ee } from "../extensions/ensure-empty-root-div.js";
+import { EnsureListItemContentIsDiv as te } from "../extensions/ensure-list-item-content-is-div.js";
+import { DragInTheBlankNode as ne, ExplicitConstructedResponseNode as re, InlineDropdownNode as ie, MathTemplatedNode as ae, ResponseAreaExtension as o } from "../extensions/responseArea.js";
+import { MathNode as s } from "../extensions/math.js";
+import { ImageUploadNode as c } from "../extensions/image.js";
+import { Media as l } from "../extensions/media.js";
+import { CSSMark as oe } from "../extensions/css.js";
+import { ExtendedListItem as u } from "../extensions/extended-list-item.js";
+import { HeadingParagraph as se } from "../extensions/heading-paragraph.js";
+import { valueToSize as d } from "../utils/size.js";
+import ce from "./TiptapContainer.js";
+import { PLUGINS_MAP as le, buildExtensions as ue } from "../extensions/index.js";
+import { useCallback as f, useEffect as p, useMemo as m, useRef as de, useState as h } from "react";
+import { debounce as fe } from "@pie-element/shared-lodash";
+import { EditorContent as g, useEditor as _, useEditorState as v } from "@tiptap/react";
+import { styled as y } from "@mui/material/styles";
+import b from "@tiptap/starter-kit";
+import { TextStyleKit as x } from "@tiptap/extension-text-style";
+import { CharacterCount as S } from "@tiptap/extension-character-count";
+import C from "@tiptap/extension-superscript";
+import w from "@tiptap/extension-subscript";
+import T from "@tiptap/extension-text-align";
+import E from "@tiptap/extension-image";
+import D from "@tiptap/extension-placeholder";
+import { TableRow as O } from "@tiptap/extension-table-row";
+import { jsx as k } from "react/jsx-runtime";
 //#region src/components/EditableHtml.tsx
-var P = {
+var A = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
 	showDone: !0,
 	doneOn: "blur"
-}, F = {
+}, j = {
 	options: {},
 	respAreaToolbar: () => {},
 	onHandleAreaChange: () => {}
-}, ce = [
+}, M = [
 	"bold",
 	"italic",
 	"underline",
@@ -62,7 +62,17 @@ var P = {
 	"h3",
 	"undo",
 	"redo"
-], I = {
+], N = {
+	bold: "bold",
+	italic: "italic",
+	underline: "underline",
+	strikethrough: "strike",
+	superscript: "superscript",
+	subscript: "subscript",
+	"bulleted-list": "bulletList",
+	"numbered-list": "orderedList",
+	table: "table"
+}, P = {
 	"--white": "#fff",
 	"--black": "#2e2b29",
 	"--black-contrast": "#110f0e",
@@ -81,7 +91,7 @@ var P = {
 	"--red": "#ff5c33",
 	"--red-light": "#ffebe5",
 	"--shadow": "0px 12px 33px 0px rgba(0, 0, 0, .06),\n               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)"
-}, L = (e, t, n) => ({
+}, F = (e, t, n) => ({
 	role: "textbox",
 	"data-pie-editor": "true",
 	class: "mathjax_ignore",
@@ -90,50 +100,55 @@ var P = {
 	autocapitalize: e ? "on" : "off",
 	...t && { "aria-label": t },
 	...n && { "aria-labelledby": n }
-}), R = ["aria-label", "aria-labelledby"], z = (b) => {
-	let { showParagraphs: C, separateParagraphs: z } = b.pluginProps || {}, [le, V] = y([]), [H, U] = y(!1), { toolbarOpts: W } = b, G = g((e) => {
-		V((t) => {
+}), I = ["aria-label", "aria-labelledby"], L = (g) => {
+	let { showParagraphs: y, separateParagraphs: L } = g.pluginProps || {}, [pe, z] = h([]), [B, V] = h(!1), { toolbarOpts: me } = g, H = f((e) => {
+		z((t) => {
 			let n = t.filter((t) => t.pos !== e);
-			return n.length === 0 && U(!1), n;
+			return n.length === 0 && V(!1), n;
 		});
-	}, [V]), K = {
-		...P,
-		...W
-	}, q = g((e) => {
+	}, [z]), U = {
+		...A,
+		...me
+	}, W = f((e) => {
 		let t = e.getHTML();
-		b.markup !== t && b.onChange?.(t), K.doneOn === "blur" && b.onDone?.(t);
+		g.markup !== t && g.onChange?.(t), U.doneOn === "blur" && g.onDone?.(t);
 	}, [
-		b.markup,
-		b.onChange,
-		b.onDone,
-		K.doneOn
-	]), J = v(() => ({
-		...F,
-		...b.responseAreaProps,
-		onInlineDropdownToolbarClose: q
-	}), [b.responseAreaProps, q]), ue = v(() => {
-		let { customPlugins: e, ...t } = b.pluginProps || {};
+		g.markup,
+		g.onChange,
+		g.onDone,
+		U.doneOn
+	]), G = m(() => ({
+		...j,
+		...g.responseAreaProps,
+		onInlineDropdownToolbarClose: W
+	}), [g.responseAreaProps, W]), K = m(() => {
+		let { customPlugins: e, ...t } = g.pluginProps || {};
 		e ||= [];
-		let n = (b.activePlugins || ce)?.filter((e) => {
-			let n = m[e] || e, r = t[n] || {};
+		let n = (g.activePlugins || M)?.filter((e) => {
+			let n = le[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
-		return h(n, e, {
+		return ue(n, e, {
 			math: {},
-			textAlign: b.textAlign,
+			textAlign: g.textAlign,
 			html: {},
-			extraCSSRules: b.extraCSSRules || {},
-			image: { ...b.imageSupport },
+			extraCSSRules: g.extraCSSRules || {},
+			image: { ...g.imageSupport },
 			toolbar: {},
 			table: {},
-			responseArea: { type: J.type },
-			languageCharacters: b.languageCharactersProps,
+			responseArea: { type: G.type },
+			languageCharacters: g.languageCharactersProps,
 			keyPadCharacterRef: {},
 			setKeypadInteraction: {},
 			media: {}
 		});
-	}, [b, J.type]), de = [
-		k.configure({
+	}, [g, G.type]), q = de(null);
+	q.current = {
+		plainText: g.pluginProps?.pasteFormatting?.disabled === !0,
+		formatting: K.map((e) => N[e]).filter(Boolean)
+	};
+	let J = [
+		T.configure({
 			types: [
 				"heading",
 				"paragraph",
@@ -155,10 +170,10 @@ var P = {
 				"justify"
 			]
 		}),
-		T,
-		e,
-		E.configure({ limit: b.charactersLimit || 1e6 }),
-		w.configure({
+		x,
+		e.configure({ settings: () => q.current }),
+		S.configure({ limit: g.charactersLimit || 1e6 }),
+		b.configure({
 			trailingNode: {
 				node: "paragraph",
 				notAfter: ["paragraph", "div"]
@@ -168,95 +183,95 @@ var P = {
 				linkOnPaste: !1
 			}
 		}),
-		ae,
+		u,
 		a,
-		oe,
-		o,
+		se,
 		ee,
-		j.configure({
-			placeholder: b.placeholder,
+		te,
+		D.configure({
+			placeholder: g.placeholder,
 			showOnlyWhenEditable: !0,
 			showOnlyCurrent: !1,
 			includeChildren: !0
 		}),
 		n,
-		M,
+		O,
 		i,
 		r,
-		ie.configure(J),
-		te.configure(J),
-		s.configure(J),
-		ne.configure(J),
-		re.configure(J),
-		c.configure({
-			toolbarOpts: K,
-			math: b.pluginProps?.math || {}
+		o.configure(G),
+		re.configure(G),
+		ne.configure(G),
+		ie.configure(G),
+		ae.configure(G),
+		s.configure({
+			toolbarOpts: U,
+			math: g.pluginProps?.math || {}
 		}),
-		O,
-		D,
-		A,
-		l.configure({
-			toolbarOpts: K,
+		w,
+		C,
+		E,
+		c.configure({
+			toolbarOpts: U,
 			imageHandling: {
-				disableImageAlignmentButtons: b.disableImageAlignmentButtons,
-				onDone: (e) => b.onDone?.(e.getHTML()),
-				onDelete: b.imageSupport && b.imageSupport.delete && ((e) => {
+				disableImageAlignmentButtons: g.disableImageAlignmentButtons,
+				onDone: (e) => g.onDone?.(e.getHTML()),
+				onDelete: g.imageSupport && g.imageSupport.delete && ((e) => {
 					let { src: t } = e.attrs;
-					b.imageSupport.delete(t, (t) => {
-						G(e.pos);
+					g.imageSupport.delete(t, (t) => {
+						H(e.pos);
 					});
 				}),
-				insertImageRequested: b.imageSupport && ((e, t, n) => {
+				insertImageRequested: g.imageSupport && ((e, t, n) => {
 					let [r, i] = t, a = (t) => {
 						let n;
-						H && t && (n = b.onChange), G(i), n?.(e.getHTML());
+						B && t && (n = g.onChange), H(i), n?.(e.getHTML());
 					};
-					e._insertingImage = !0, V((e) => [...e, r]), (() => {
-						let t = n(a), r = se(() => {
+					e._insertingImage = !0, z((e) => [...e, r]), (() => {
+						let t = n(a), r = fe(() => {
 							let t = () => window.removeEventListener("focus", r);
 							if (!e._insertingImage) {
 								t();
 								return;
 							}
-							G(i), e._insertingImage = !1, t();
+							H(i), e._insertingImage = !1, t();
 						}, 500);
-						window.addEventListener("focus", r), b.imageSupport.add(t);
+						window.addEventListener("focus", r), g.imageSupport.add(t);
 					})();
 				}),
-				maxImageWidth: b.maxImageWidth,
-				maxImageHeight: b.maxImageHeight
+				maxImageWidth: g.maxImageWidth,
+				maxImageHeight: g.maxImageHeight
 			},
 			limit: 3
 		}),
-		u.configure({ uploadSoundSupport: b.uploadSoundSupport }),
-		d.configure({ extraCSSRules: b.extraCSSRules })
-	], Y = b.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = b, Q = x({
-		extensions: de,
+		l.configure({ uploadSoundSupport: g.uploadSoundSupport }),
+		oe.configure({ extraCSSRules: g.extraCSSRules })
+	], Y = g.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = g, Q = _({
+		extensions: J,
 		immediatelyRender: !1,
 		editorProps: {
-			attributes: L(Y, X, Z),
+			attributes: F(Y, X, Z),
 			handleKeyDown(e, t) {
-				return b.onKeyDown ? b.onKeyDown(t) : !1;
+				return g.onKeyDown ? g.onKeyDown(t) : !1;
 			}
 		},
-		editable: !b.disabled,
-		content: t(b.markup),
+		editable: !g.disabled,
+		content: t(g.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && b.onChange?.(e.getHTML());
+			t.isDone && g.onChange?.(e.getHTML());
 		},
 		onBlur: ({ editor: e }) => {
-			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || q(e);
+			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || W(e);
 		}
-	}, [b.charactersLimit]);
-	_(() => {
-		b.editorRef && b.editorRef(Q);
-	}, [b.editorRef, Q]), _(() => {
-		Q?.setEditable(!b.disabled);
-	}, [b.disabled, Q]), _(() => {
+	}, [g.charactersLimit]);
+	p(() => {
+		g.editorRef && g.editorRef(Q);
+	}, [g.editorRef, Q]), p(() => {
+		Q?.setEditable(!g.disabled);
+	}, [g.disabled, Q]), p(() => {
 		if (!Q) return;
-		let e = Q.options?.editorProps, t = e?.attributes || {}, n = L(Y, X, Z);
-		if (["spellcheck", ...R].every((e) => t[e] === n[e])) return;
-		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !R.includes(e)));
+		let e = Q.options?.editorProps, t = e?.attributes || {}, n = F(Y, X, Z);
+		if (["spellcheck", ...I].every((e) => t[e] === n[e])) return;
+		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !I.includes(e)));
 		Q.setOptions({ editorProps: {
 			...e,
 			attributes: {
@@ -269,47 +284,47 @@ var P = {
 		X,
 		Z,
 		Q
-	]), _(() => {
+	]), p(() => {
 		if (!Q) return;
-		let e = t(b.markup);
+		let e = t(g.markup);
 		e !== Q.getHTML() && Q.commands.setContent(e, { emitUpdate: !1 });
-	}, [b.markup, Q]), _(() => {
-		Object.entries(I).forEach(([e, t]) => {
+	}, [g.markup, Q]), p(() => {
+		Object.entries(P).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let fe = S({
+	let he = v({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
-	}), $ = v(() => {
-		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = b;
+	}), $ = m(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = g;
 		return {
-			width: f(t),
-			minWidth: f(e),
-			maxWidth: f(n),
-			height: f(i),
-			minHeight: f(r),
-			maxHeight: f(a)
+			width: d(t),
+			minWidth: d(e),
+			maxWidth: d(n),
+			height: d(i),
+			minHeight: d(r),
+			maxHeight: d(a)
 		};
-	}, [b]);
-	return /* @__PURE__ */ N(p, {
-		...b,
-		activePlugins: ue,
-		toolbarOpts: K,
-		editorState: fe,
+	}, [g]);
+	return /* @__PURE__ */ k(ce, {
+		...g,
+		activePlugins: K,
+		toolbarOpts: U,
+		editorState: he,
 		editor: Q,
-		children: Q && /* @__PURE__ */ N(B, {
+		children: Q && /* @__PURE__ */ k(R, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
-			showParagraph: C && !C.disabled,
-			separateParagraph: z && !z.disabled,
+			showParagraph: y && !y.disabled,
+			separateParagraph: L && !L.disabled,
 			editor: Q
 		})
 	});
-}, B = C(b, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, R = y(g, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {
@@ -339,4 +354,4 @@ var P = {
 	}
 }));
 //#endregion
-export { z as EditableHtml, z as default };
+export { L as EditableHtml, L as default };

package/dist/extensions/extended-table-cell.js

@@ -1,6 +1,15 @@
-import { TableCell as e } from "@tiptap/extension-table-cell";
-import { TableHeader as t } from "@tiptap/extension-table-header";
+import { scopeAttribute as e } from "./table-semantics.js";
+import { TableCell as t } from "@tiptap/extension-table-cell";
+import { TableHeader as n } from "@tiptap/extension-table-header";
 //#region src/extensions/extended-table-cell.ts
-var n = "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+", r = e.extend({ content: n }), i = t.extend({ content: n });
+var r = "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+", i = t.extend({ content: r }), a = n.extend({
+	content: r,
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			scope: e
+		};
+	}
+});
 //#endregion
-export { r as ExtendedTableCell, i as ExtendedTableHeader };
+export { i as ExtendedTableCell, a as ExtendedTableHeader };

package/dist/extensions/extended-table.js

@@ -1,34 +1,41 @@
-import { Table as e, TableView as t } from "@tiptap/extension-table";
+import { captionAttribute as e, captionParseRule as t, syncCaption as n, withCaption as r } from "./table-semantics.js";
+import { Table as i, TableView as a } from "@tiptap/extension-table";
 //#region src/extensions/extended-table.tsx
-var n = (e, t) => {
+var o = (e, t) => {
 	let n = t?.border != null && t.border !== "" ? t.border : "1";
 	e.setAttribute("border", n), e.style.setProperty("color", "var(--pie-text, black)"), e.style.setProperty("background-color", "var(--pie-background, rgba(255, 255, 255))");
-}, r = class extends t {
+}, s = class extends a {
 	constructor(e, t, r) {
-		super(e, t, r), n(this.table, e.attrs);
+		super(e, t, r), o(this.table, e.attrs), n(this.table, e.attrs.caption);
 	}
 	update(e) {
 		let t = super.update(e);
-		return t && n(this.table, e.attrs), t;
+		return t && (o(this.table, e.attrs), n(this.table, e.attrs.caption)), t;
 	}
-}, i = e.extend({
+}, c = i.extend({
 	addOptions() {
 		return {
 			...this.parent?.(),
 			resizable: !0,
 			handleWidth: 0,
-			View: r
+			View: s
 		};
 	},
 	addAttributes() {
-		return { border: { default: "1" } };
+		return {
+			border: { default: "1" },
+			caption: e
+		};
+	},
+	parseHTML() {
+		return [...this.parent(), t];
 	},
 	renderHTML(e) {
-		let t = this.parent(e), { border: n } = e.HTMLAttributes, r = `${t[1].style}${t[1].style.match(/.*; */) ? "" : ";"}`;
-		return t[1].style = `${r}
+		let t = this.parent(e), { border: n } = e.HTMLAttributes, i = `${t[1].style}${t[1].style.match(/.*; */) ? "" : ";"}`;
+		return t[1].style = `${i}
     color: var(--pie-text, black);
-    background-color: var(--pie-background, rgba(255, 255, 255))`, t[1].border = n || "1", t;
+    background-color: var(--pie-background, rgba(255, 255, 255))`, t[1].border = n || "1", r(t, e.node.attrs.caption);
 	}
 });
 //#endregion
-export { r as ExtendedTableView, n as applyPresentationToTableElement, i as default };
+export { s as ExtendedTableView, o as applyPresentationToTableElement, c as default };

package/dist/extensions/table-semantics.d.ts

@@ -0,0 +1,28 @@
+import type { DOMOutputSpec } from '@tiptap/pm/model';
+export declare const captionAttribute: {
+    default: null;
+    parseHTML: (table: HTMLElement) => string | null;
+    renderHTML: () => {};
+};
+export declare const captionParseRule: {
+    tag: string;
+    ignore: boolean;
+};
+/** A table's DOM spec with its caption as the first child, where HTML requires it. */
+export declare function withCaption(spec: DOMOutputSpec, caption: string | null): DOMOutputSpec;
+/**
+ * Shows the caption in a table view. It is not editable there: it is not document content, and
+ * TableView ignores DOM changes outside the table body.
+ */
+export declare function syncCaption(table: HTMLTableElement, caption: string | null): void;
+export declare const scopeAttribute: {
+    default: null;
+    parseHTML: (cell: HTMLElement) => string | null;
+    renderHTML: (attributes: {
+        scope?: string | null;
+    }) => {
+        scope: string;
+    } | {
+        scope?: undefined;
+    };
+};

package/dist/extensions/table-semantics.js

@@ -0,0 +1,42 @@
+//#region src/extensions/table-semantics.ts
+var e = (e) => Array.from(e.children).find((e) => e.tagName === "CAPTION"), t = {
+	default: null,
+	parseHTML: (t) => e(t)?.textContent?.replace(/\s+/g, " ").trim() || null,
+	renderHTML: () => ({})
+}, n = {
+	tag: "caption",
+	ignore: !0
+};
+function r(e, t) {
+	if (!t || !Array.isArray(e)) return e;
+	let [n, r, ...i] = e;
+	return [
+		n,
+		r,
+		["caption", t],
+		...i
+	];
+}
+function i(t, n) {
+	let r = e(t);
+	if (!n) {
+		r?.remove();
+		return;
+	}
+	r || (r = t.ownerDocument.createElement("caption"), r.setAttribute("contenteditable", "false"), t.insertBefore(r, t.firstChild)), r.textContent !== n && (r.textContent = n);
+}
+var a = [
+	"row",
+	"col",
+	"rowgroup",
+	"colgroup"
+], o = {
+	default: null,
+	parseHTML: (e) => {
+		let t = e.getAttribute("scope")?.trim().toLowerCase() ?? "";
+		return a.includes(t) ? t : null;
+	},
+	renderHTML: (e) => e.scope ? { scope: e.scope } : {}
+};
+//#endregion
+export { t as captionAttribute, n as captionParseRule, o as scopeAttribute, i as syncCaption, r as withCaption };

package/dist/external-paste.d.ts

@@ -0,0 +1,26 @@
+import { Extension } from '@tiptap/core';
+/** The formatting that content pasted from outside a PIE editor can keep, by mark or node name. */
+export declare const PASTED_FORMATTING: readonly ["bold", "italic", "underline", "strike", "superscript", "subscript", "bulletList", "orderedList", "table"];
+export type PastedFormatting = (typeof PASTED_FORMATTING)[number];
+export type ExternalPasteSettings = {
+    /** Paste as plain text, as the Slate editor did. Math copied from rendered PIE content stays math. */
+    plainText: boolean;
+    /** The formatting a paste keeps. The rest becomes text: a list its items, a table its rows. */
+    formatting: readonly PastedFormatting[];
+};
+export type ExternalPasteOptions = {
+    /** Read at each paste and drop, so a mounted editor follows a change of toolbar or setting. */
+    settings: () => ExternalPasteSettings;
+};
+/**
+ * Pastes and drops content from outside a PIE editor, such as from Word or Google Docs, with its
+ * paragraphs, line breaks and math, and with the bold, italics, underline, strikethrough,
+ * superscript, subscript, lists and tables in `formatting`. Its fonts, sizes, colours, alignment,
+ * headings, links and class names go, which TextStyleKit, TextAlign and CSSMark would otherwise keep
+ * (PIE-1145). Word for Windows and Mac copies lists as styled paragraphs, which are rebuilt as
+ * lists first. With `plainText` set it pastes plain text. Copies from a PIE editor and pasted
+ * images are left to ProseMirror and the image upload handler.
+ *
+ * Mirrored in `packages/lib-svelte/editable-html-tiptap-svelte/src/external-paste.ts`.
+ */
+export declare const ExternalPaste: Extension<ExternalPasteOptions, any>;

package/dist/external-paste.js

@@ -0,0 +1,185 @@
+import { rebuildWordLists as e } from "./word-lists.js";
+import { Extension as t } from "@tiptap/core";
+import { Plugin as n, PluginKey as r, TextSelection as i } from "@tiptap/pm/state";
+//#region src/external-paste.ts
+var a = [
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"superscript",
+	"subscript",
+	"bulletList",
+	"orderedList",
+	"table"
+], o = (e) => Array.from(e.items ?? []).some((e) => e.kind === "file" && e.type.startsWith("image/")), s = (e, t) => new DOMParser().parseFromString(e, "text/html").querySelector(t) !== null, c = (e) => e.includes("data-pm-slice") && s(e, "[data-pm-slice]"), l = (e) => /data-latex|data-type="?mathml/.test(e) && s(e, "[data-latex], [data-type=\"mathml\"]"), u = null, d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), f = (e) => e.replace(/\r*\n|\r/g, "\n").replace(/\n+$/, ""), p = (e) => {
+	let t = [];
+	return e.forEach((e) => {
+		t.push(e);
+	}), t;
+};
+function m(e, t) {
+	let n = e.topNodeType.create(null, t), r = (e) => {
+		let t = 0;
+		for (let r = n[e]; r && !r.isLeaf && !r.type.spec.isolating; r = r[e]) t += 1;
+		return t;
+	};
+	return t.length ? n.slice(r("firstChild"), n.content.size - r("lastChild"), !0) : n.slice(0, 0);
+}
+var h = [
+	[1e3, "m"],
+	[900, "cm"],
+	[500, "d"],
+	[400, "cd"],
+	[100, "c"],
+	[90, "xc"],
+	[50, "l"],
+	[40, "xl"],
+	[10, "x"],
+	[9, "ix"],
+	[5, "v"],
+	[4, "iv"],
+	[1, "i"]
+], g = (e) => h.reduce(({ numeral: e, rest: t }, [n, r]) => ({
+	numeral: e + r.repeat(Math.floor(t / n)),
+	rest: t % n
+}), {
+	numeral: "",
+	rest: e
+}).numeral, _ = (e) => (e > 26 ? _(Math.floor((e - 1) / 26)) : "") + String.fromCharCode(97 + (e - 1) % 26);
+function v(e, t) {
+	if (t < 1 || !e || !/^[aAiI]$/.test(e)) return String(t);
+	let n = /^[aA]$/.test(e) ? _(t) : g(t);
+	return e === e.toUpperCase() ? n.toUpperCase() : n;
+}
+function y(e) {
+	let t = e?.getData("text/html");
+	if (!e || !t || c(t)) return null;
+	let n = e.getData("text/plain"), r = Array.from(e.types).includes("text/rtf") && n.trim() !== "";
+	return !n || o(e) && !r ? null : {
+		text: n,
+		html: t
+	};
+}
+var b = (e) => (t, n) => {
+	let { schema: r } = n, { paragraph: i, hardBreak: a, math: o } = r.nodes, s = (e) => i.create(null, e), c = (t) => t.filter((t) => e.has(t.type.name)).map((e) => e.type.create()), l = (e) => p(e).flatMap((e) => {
+		if (e.isText) {
+			let t = c(e.marks);
+			return (e.text ?? "").split("\n").flatMap((e, n) => [...n && a ? [a.create(null, null, t)] : [], ...e ? [r.text(e, t)] : []]);
+		}
+		return e.type === a || o && e.type === o ? [e.mark(c(e.marks))] : e.isLeaf ? [] : l(e);
+	}), u = (e) => {
+		let t = [];
+		return e.descendants((e) => e.isTextblock ? (t.length && t.push(r.text(" ")), t.push(...l(e)), !1) : !0), t;
+	}, d = (t) => {
+		let n = t.type.name === "orderedList";
+		if (e.has(t.type.name)) {
+			let e = p(t).flatMap((e) => e.type.createAndFill(null, h(e)) ?? []), r = n ? {
+				start: t.attrs.start,
+				type: t.attrs.type
+			} : null;
+			return e.length ? [t.type.create(r, e)] : [];
+		}
+		let a = n ? t.attrs.start ?? 1 : 0;
+		return p(t).flatMap((e) => {
+			let o = r.text(n ? `${v(t.attrs.type, a++)}. ` : "• "), [c, ...l] = h(e);
+			return c?.type === i ? [s([o, ...p(c)]), ...l] : [
+				s([o]),
+				...c ? [c] : [],
+				...l
+			];
+		});
+	}, f = (t) => {
+		let n = t.attrs.caption ?? null;
+		if (e.has("table")) {
+			let e = p(t).flatMap((e) => {
+				let t = p(e).flatMap((e) => {
+					let { colspan: t, rowspan: n, scope: r } = e.attrs;
+					return e.type.createAndFill({
+						colspan: t,
+						rowspan: n,
+						scope: r
+					}, h(e)) ?? [];
+				});
+				return t.length ? [e.type.create(null, t)] : [];
+			});
+			return e.length ? [t.type.create({ caption: n }, e)] : [];
+		}
+		return [...n ? [s([r.text(n)])] : [], ...p(t).map((e) => s(p(e).flatMap((e, t) => t ? [r.text("	"), ...u(e)] : u(e))))];
+	}, h = (e) => p(e).flatMap((e) => e.isTextblock ? [s(l(e))] : e.type.spec.tableRole === "table" ? f(e) : e.type.name === "bulletList" || e.type.name === "orderedList" ? d(e) : e.isLeaf ? [] : h(e));
+	return m(r, t.content.firstChild?.isInline ? [s(l(t.content))] : h(t.content));
+};
+function x(e, t) {
+	let { schema: n } = t, r = t.selection.$from.marks(), i = (e) => {
+		let t = [];
+		return e.descendants((e) => (e.isTextblock && t.length && t.push(n.text(" ", r)), e.isText && e.text && t.push(n.text(e.text, r)), e.type === n.nodes.math && t.push(e.mark([])), !e.isInline)), t;
+	}, a = [];
+	return e.content.firstChild?.isInline ? a.push(i(n.nodes.paragraph.create(null, e.content))) : e.content.descendants((e) => {
+		if (e.type.spec.tableRole === "row") {
+			let t = [];
+			return e.forEach((e) => {
+				t.push(i(e));
+			}), a.push(t.flatMap((e, t) => t ? [n.text("	", r), ...e] : e)), !1;
+		}
+		return e.isTextblock ? (a.push(i(e)), !1) : !0;
+	}), m(n, a.map((e) => n.nodes.paragraph.create(null, e)));
+}
+function S(e, t, n) {
+	u = n;
+	try {
+		e.pasteHTML(t);
+	} finally {
+		u = null;
+	}
+}
+function C(t, { text: n, html: r }, i) {
+	let { selection: a, schema: o } = t.state, c = new Set(i.plainText ? [] : i.formatting);
+	if ("$anchorCell" in a && !(c.has("table") && s(r, "table"))) {
+		let e = f(n).split("\n").map((e) => `<tr>${e.split("	").map((e) => `<td>${d(e)}</td>`).join("")}</tr>`);
+		t.pasteHTML(`<table><tbody>${e.join("")}</tbody></table>`);
+		return;
+	}
+	if (!i.plainText) {
+		S(t, e(r), b(c));
+		return;
+	}
+	if (o.nodes.math && l(r)) {
+		S(t, r, x);
+		return;
+	}
+	t.pasteText(a.$from.parent.type.spec.code ? f(n) : f(n).replace(/^$/gm, "\xA0"));
+}
+var w = t.create({
+	name: "externalPaste",
+	priority: 1e3,
+	addOptions() {
+		return { settings: () => ({
+			plainText: !1,
+			formatting: a
+		}) };
+	},
+	addProseMirrorPlugins() {
+		let { settings: e } = this.options;
+		return [new n({
+			key: new r("externalPaste"),
+			props: {
+				transformPasted(e, t) {
+					return u ? u(e, t.state) : e;
+				},
+				handlePaste(t, n) {
+					let r = y(n.clipboardData);
+					return r === null ? !1 : (C(t, r, e()), !0);
+				},
+				handleDrop(t, n) {
+					let r = t.dragging ? null : y(n.dataTransfer), a = r === null ? null : t.posAtCoords({
+						left: n.clientX,
+						top: n.clientY
+					});
+					return r === null || !a ? !1 : (t.dispatch(t.state.tr.setSelection(i.near(t.state.doc.resolve(a.pos)))), C(t, r, e()), t.focus(), !0);
+				}
+			}
+		})];
+	}
+});
+//#endregion
+export { w as ExternalPaste, a as PASTED_FORMATTING };

package/dist/word-lists.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Word for Windows and Mac copies a list as paragraphs, each styled `mso-list:l<list> level<n>`
+ * and led by its bullet or number as text in a `mso-list:Ignore` span. `rebuildWordLists` turns
+ * them into `<ul>` and `<ol>`, nested by level, with an ordered list's `type` and `start` read from
+ * its first number. Word for the web and Google Docs copy lists as lists.
+ *
+ * Mirrored in `packages/lib-svelte/editable-html-tiptap-svelte/src/word-lists.ts`.
+ */
+/** `html` with Word's list paragraphs rebuilt as lists, or `html` itself when it has none. */
+export declare function rebuildWordLists(html: string): string;

package/dist/word-lists.js

@@ -0,0 +1,91 @@
+//#region src/word-lists.ts
+var e = /mso-list:\s*(l\d+)\s+level(\d+)/i, t = /^\(?(?:\d+(?:\.\d+)*|[a-z]+|[A-Z]+)[.)]$|^\d+(?:\.\d+)+$/, n = /^[ivxlcdm]+$/i, r = {
+	i: 1,
+	v: 5,
+	x: 10,
+	l: 50,
+	c: 100,
+	d: 500,
+	m: 1e3
+}, i = (t) => {
+	let n = e.exec(t.getAttribute("style") ?? "");
+	return n ? {
+		paragraph: t,
+		list: n[1],
+		level: Number(n[2])
+	} : null;
+}, a = (e) => Array.from(e.toLowerCase()).reduce((e, t, n, i) => {
+	let a = r[t];
+	return a < (r[i[n + 1]] ?? 0) ? e - a : e + a;
+}, 0), o = (e) => Array.from(e.toLowerCase()).reduce((e, t) => e * 26 + t.charCodeAt(0) - 96, 0);
+function s(e) {
+	let t = e.replace(/^\(|[.)]$/g, "");
+	return /^\d/.test(t) ? {
+		type: null,
+		start: Number(t.split(".").pop())
+	} : n.test(t) && (t.length > 1 || /^i$/i.test(t)) ? {
+		type: t === t.toLowerCase() ? "i" : "I",
+		start: a(t)
+	} : {
+		type: t === t.toLowerCase() ? "a" : "A",
+		start: o(t)
+	};
+}
+function c(e) {
+	let t = e.querySelector("span[style*=\"mso-list:Ignore\"]"), n = t?.textContent?.replace(/\s+/g, " ").trim() ?? "";
+	return t?.remove(), n;
+}
+function l(e, n) {
+	if (!t.test(n)) return e.createElement("ul");
+	let r = e.createElement("ol"), { type: i, start: a } = s(n);
+	return i && r.setAttribute("type", i), a !== 1 && r.setAttribute("start", String(a)), r;
+}
+function u(e, n) {
+	let r = e.createDocumentFragment(), i = [];
+	for (let { paragraph: a, level: o } of n) {
+		let n = c(a), s = t.test(n);
+		for (; i.length && i[i.length - 1].level > o;) i.pop();
+		let u = i[i.length - 1];
+		if (u && u.level === o && u.element.tagName === "OL" !== s) {
+			i.pop();
+			let t = i[i.length - 1], a = l(e, n);
+			(t?.lastItem ?? r).appendChild(a), u = {
+				level: o,
+				element: a,
+				lastItem: null
+			}, i.push(u);
+		}
+		if (!u || u.level < o) {
+			let t = l(e, n);
+			(u?.lastItem ?? r).appendChild(t), u = {
+				level: o,
+				element: t,
+				lastItem: null
+			}, i.push(u);
+		}
+		let d = e.createElement("li"), f = e.createElement("p");
+		f.append(...Array.from(a.childNodes)), d.appendChild(f), u.element.appendChild(d), u.lastItem = d;
+	}
+	return r;
+}
+var d = (e) => e !== null && (e.nodeType === Node.COMMENT_NODE || e.nodeType === Node.TEXT_NODE && !e.textContent?.trim());
+function f(e, t) {
+	let n = e.nextSibling;
+	for (; d(n);) n = n?.nextSibling ?? null;
+	return n === t;
+}
+function p(t) {
+	if (!e.test(t)) return t;
+	let n = new DOMParser().parseFromString(t, "text/html"), r = Array.from(n.body.querySelectorAll("p")).map(i).filter((e) => e !== null), a = [];
+	for (let e of r) {
+		let t = a[a.length - 1], n = t?.[t.length - 1];
+		n && n.list === e.list && f(n.paragraph, e.paragraph) ? t.push(e) : a.push([e]);
+	}
+	for (let e of a) {
+		e[0].paragraph.replaceWith(u(n, e));
+		for (let { paragraph: t } of e.slice(1)) t.remove();
+	}
+	return n.body.innerHTML;
+}
+//#endregion
+export { p as rebuildWordLists };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.0.1-next.20261004173930",
+  "version": "3.0.1-next.20261004200555",
   "description": "",
   "repository": {
     "type": "git",
@@ -14,10 +14,10 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/drag": "5.0.1-next.20261004173930",
-    "@pie-lib/math-input": "9.0.1-next.20261004173930",
-    "@pie-lib/math-toolbar": "4.0.1-next.20261004173930",
+    "@pie-lib/math-input": "9.0.1-next.20261004181842",
+    "@pie-lib/math-toolbar": "4.0.1-next.20261004181842",
     "@pie-lib/render-ui": "8.0.1-next.20261004165705",
-    "@pie-lib/translator": "5.0.1-next.20261004173930",
+    "@pie-lib/translator": "5.0.1-next.20261004181842",
     "@tiptap/core": "3.31.3",
     "@tiptap/extension-character-count": "3.31.3",
     "@tiptap/extension-color": "3.31.3",

package/dist/plain-text-paste.d.ts

@@ -1,12 +0,0 @@
-import { Extension } from '@tiptap/core';
-/**
- * Pastes and drops rich text from outside a PIE editor as plain text, as the Slate editor did,
- * except that math copied from rendered PIE content stays math. Parsed as HTML, content from Word
- * keeps its fonts, sizes, colours, alignment and class names through TextStyleKit, TextAlign and
- * CSSMark (PIE-1145).
- *
- * Mirrored in `packages/lib-svelte/editable-html-tiptap-svelte/src/plain-text-paste.ts`. Upstream
- * pie-lib has no such file, so upstream sync preserves this one and re-registers it in
- * `EditableHtml.tsx` (`preserve.editable-html-tip-tap.plain-text-paste`).
- */
-export declare const PlainTextPaste: Extension<any, any>;

package/dist/plain-text-paste.js

@@ -1,75 +0,0 @@
-import { Extension as e } from "@tiptap/core";
-import { Plugin as t, PluginKey as n, TextSelection as r } from "@tiptap/pm/state";
-//#region src/plain-text-paste.ts
-var i = (e) => Array.from(e.items ?? []).some((e) => e.kind === "file" && e.type.startsWith("image/")), a = (e, t) => new DOMParser().parseFromString(e, "text/html").querySelector(t) !== null, o = (e) => e.includes("data-pm-slice") && a(e, "[data-pm-slice]"), s = (e) => /data-latex|data-type="?mathml/.test(e) && a(e, "[data-latex], [data-type=\"mathml\"]"), c = !1, l = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), u = (e) => e.replace(/\r*\n|\r/g, "\n").replace(/\n+$/, "");
-function d(e) {
-	let t = e?.getData("text/html");
-	if (!e || !t || o(t)) return null;
-	let n = e.getData("text/plain"), r = Array.from(e.types).includes("text/rtf") && n.trim() !== "";
-	return !n || i(e) && !r ? null : {
-		text: n,
-		html: t
-	};
-}
-function f(e, t) {
-	let { schema: n } = t, r = t.selection.$from.marks(), i = (e) => {
-		let t = [];
-		return e.descendants((e) => (e.isTextblock && t.length && t.push(n.text(" ", r)), e.isText && e.text && t.push(n.text(e.text, r)), e.type === n.nodes.math && t.push(e.mark([])), !e.isInline)), t;
-	}, a = [];
-	e.content.firstChild?.isInline ? a.push(i(n.nodes.paragraph.create(null, e.content))) : e.content.descendants((e) => {
-		if (e.type.spec.tableRole === "row") {
-			let t = [];
-			return e.forEach((e) => {
-				t.push(i(e));
-			}), a.push(t.flatMap((e, t) => t ? [n.text("	", r), ...e] : e)), !1;
-		}
-		return e.isTextblock ? (a.push(i(e)), !1) : !0;
-	});
-	let o = n.topNodeType.create(null, a.map((e) => n.nodes.paragraph.create(null, e)));
-	return a.length ? o.slice(1, o.content.size - 1) : o.slice(0, 0);
-}
-function p(e, { text: t, html: n }) {
-	let { selection: r } = e.state;
-	if ("$anchorCell" in r) {
-		let n = u(t).split("\n").map((e) => `<tr>${e.split("	").map((e) => `<td>${l(e)}</td>`).join("")}</tr>`);
-		e.pasteHTML(`<table><tbody>${n.join("")}</tbody></table>`);
-		return;
-	}
-	if (e.state.schema.nodes.math && s(n)) {
-		c = !0;
-		try {
-			e.pasteHTML(n);
-		} finally {
-			c = !1;
-		}
-		return;
-	}
-	e.pasteText(r.$from.parent.type.spec.code ? u(t) : u(t).replace(/^$/gm, "\xA0"));
-}
-var m = e.create({
-	name: "plainTextPaste",
-	priority: 1e3,
-	addProseMirrorPlugins() {
-		return [new t({
-			key: new n("plainTextPaste"),
-			props: {
-				transformPasted(e, t) {
-					return c ? f(e, t.state) : e;
-				},
-				handlePaste(e, t) {
-					let n = d(t.clipboardData);
-					return n === null ? !1 : (p(e, n), !0);
-				},
-				handleDrop(e, t) {
-					let n = e.dragging ? null : d(t.dataTransfer), i = n === null ? null : e.posAtCoords({
-						left: t.clientX,
-						top: t.clientY
-					});
-					return n === null || !i ? !1 : (e.dispatch(e.state.tr.setSelection(r.near(e.state.doc.resolve(i.pos)))), p(e, n), e.focus(), !0);
-				}
-			}
-		})];
-	}
-});
-//#endregion
-export { m as PlainTextPaste };