@pie-lib/editable-html-tip-tap 3.0.0 → 3.0.1-next.20261002220849

package/dist/components/EditableHtml.js

@@ -1,35 +1,36 @@
-import { normalizeInitialMarkup as e } from "../utils/helper.js";
-import t from "../extensions/extended-table.js";
-import { ExtendedTableCell as n, ExtendedTableHeader as r } from "../extensions/extended-table-cell.js";
-import { DivNode as i } from "../extensions/div-node.js";
-import { EnsureEmptyRootIsDiv as a } from "../extensions/ensure-empty-root-div.js";
+import { PlainTextPaste as e } from "../plain-text-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 ee } from "../extensions/ensure-empty-root-div.js";
 import { EnsureListItemContentIsDiv as o } from "../extensions/ensure-list-item-content-is-div.js";
-import { DragInTheBlankNode as s, ExplicitConstructedResponseNode as c, InlineDropdownNode as l, MathTemplatedNode as u, ResponseAreaExtension as ee } from "../extensions/responseArea.js";
-import { MathNode as te } from "../extensions/math.js";
-import { ImageUploadNode as d } from "../extensions/image.js";
-import { Media as f } from "../extensions/media.js";
-import { CSSMark as ne } from "../extensions/css.js";
-import { ExtendedListItem as p } from "../extensions/extended-list-item.js";
-import { HeadingParagraph as re } from "../extensions/heading-paragraph.js";
+import { DragInTheBlankNode as s, ExplicitConstructedResponseNode as c, InlineDropdownNode as te, MathTemplatedNode as ne, ResponseAreaExtension as re } from "../extensions/responseArea.js";
+import { MathNode as l } from "../extensions/math.js";
+import { ImageUploadNode as u } from "../extensions/image.js";
+import { Media as d } from "../extensions/media.js";
+import { CSSMark as f } from "../extensions/css.js";
+import { ExtendedListItem as ie } from "../extensions/extended-list-item.js";
+import { HeadingParagraph as p } from "../extensions/heading-paragraph.js";
 import { valueToSize as m } from "../utils/size.js";
-import h from "./TiptapContainer.js";
-import { PLUGINS_MAP as g, buildExtensions as _ } from "../extensions/index.js";
-import { useCallback as v, useEffect as y, useMemo as b, useState as x } from "react";
-import { debounce as S } from "@pie-element/shared-lodash";
-import { EditorContent as C, useEditor as w, useEditorState as T } from "@tiptap/react";
-import { styled as E } from "@mui/material/styles";
-import D from "@tiptap/starter-kit";
-import { TextStyleKit as O } from "@tiptap/extension-text-style";
-import { CharacterCount as k } from "@tiptap/extension-character-count";
-import A from "@tiptap/extension-superscript";
-import j from "@tiptap/extension-subscript";
-import M from "@tiptap/extension-text-align";
-import N from "@tiptap/extension-image";
-import P from "@tiptap/extension-placeholder";
-import { TableRow as F } from "@tiptap/extension-table-row";
-import { jsx as I } from "react/jsx-runtime";
+import ae from "./TiptapContainer.js";
+import { PLUGINS_MAP as h, buildExtensions as g } from "../extensions/index.js";
+import { useCallback as _, useEffect as v, useMemo as y, useState as b } from "react";
+import { debounce as x } from "@pie-element/shared-lodash";
+import { EditorContent as S, useEditor as C, useEditorState as w } from "@tiptap/react";
+import { styled as T } from "@mui/material/styles";
+import E from "@tiptap/starter-kit";
+import { TextStyleKit as D } from "@tiptap/extension-text-style";
+import { CharacterCount as O } from "@tiptap/extension-character-count";
+import k from "@tiptap/extension-superscript";
+import A from "@tiptap/extension-subscript";
+import j from "@tiptap/extension-text-align";
+import M from "@tiptap/extension-image";
+import N from "@tiptap/extension-placeholder";
+import { TableRow as P } from "@tiptap/extension-table-row";
+import { jsx as F } from "react/jsx-runtime";
 //#region src/components/EditableHtml.tsx
-var ie = {
+var I = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
@@ -87,50 +88,50 @@ var ie = {
 	spellcheck: e ? "true" : "false",
 	autocorrect: e ? "on" : "off",
 	autocapitalize: e ? "on" : "off"
-}), V = (C) => {
-	let { showParagraphs: E, separateParagraphs: V } = C.pluginProps || {}, [ae, U] = x([]), [W, G] = x(!1), { toolbarOpts: K } = C, q = v((e) => {
+}), V = (S) => {
+	let { showParagraphs: T, separateParagraphs: V } = S.pluginProps || {}, [oe, U] = b([]), [W, G] = b(!1), { toolbarOpts: K } = S, q = _((e) => {
 		U((t) => {
 			let n = t.filter((t) => t.pos !== e);
 			return n.length === 0 && G(!1), n;
 		});
 	}, [U]), J = {
-		...ie,
+		...I,
 		...K
-	}, Y = v((e) => {
+	}, Y = _((e) => {
 		let t = e.getHTML();
-		C.markup !== t && C.onChange?.(t), J.doneOn === "blur" && C.onDone?.(t);
+		S.markup !== t && S.onChange?.(t), J.doneOn === "blur" && S.onDone?.(t);
 	}, [
-		C.markup,
-		C.onChange,
-		C.onDone,
+		S.markup,
+		S.onChange,
+		S.onDone,
 		J.doneOn
-	]), X = b(() => ({
+	]), X = y(() => ({
 		...L,
-		...C.responseAreaProps,
+		...S.responseAreaProps,
 		onInlineDropdownToolbarClose: Y
-	}), [C.responseAreaProps, Y]), oe = b(() => {
-		let { customPlugins: e, ...t } = C.pluginProps || {};
+	}), [S.responseAreaProps, Y]), se = y(() => {
+		let { customPlugins: e, ...t } = S.pluginProps || {};
 		e ||= [];
-		let n = (C.activePlugins || R)?.filter((e) => {
-			let n = g[e] || e, r = t[n] || {};
+		let n = (S.activePlugins || R)?.filter((e) => {
+			let n = h[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
-		return _(n, e, {
+		return g(n, e, {
 			math: {},
-			textAlign: C.textAlign,
+			textAlign: S.textAlign,
 			html: {},
-			extraCSSRules: C.extraCSSRules || {},
-			image: { ...C.imageSupport },
+			extraCSSRules: S.extraCSSRules || {},
+			image: { ...S.imageSupport },
 			toolbar: {},
 			table: {},
 			responseArea: { type: X.type },
-			languageCharacters: C.languageCharactersProps,
+			languageCharacters: S.languageCharactersProps,
 			keyPadCharacterRef: {},
 			setKeypadInteraction: {},
 			media: {}
 		});
-	}, [C, X.type]), se = [
-		M.configure({
+	}, [S, X.type]), ce = [
+		j.configure({
 			types: [
 				"heading",
 				"paragraph",
@@ -152,9 +153,10 @@ var ie = {
 				"justify"
 			]
 		}),
-		O,
-		k.configure({ limit: C.charactersLimit || 1e6 }),
-		D.configure({
+		D,
+		e,
+		O.configure({ limit: S.charactersLimit || 1e6 }),
+		E.configure({
 			trailingNode: {
 				node: "paragraph",
 				notAfter: ["paragraph", "div"]
@@ -164,51 +166,51 @@ var ie = {
 				linkOnPaste: !1
 			}
 		}),
-		p,
-		i,
-		re,
+		ie,
 		a,
+		p,
+		ee,
 		o,
-		P.configure({
-			placeholder: C.placeholder,
+		N.configure({
+			placeholder: S.placeholder,
 			showOnlyWhenEditable: !0,
 			showOnlyCurrent: !1,
 			includeChildren: !0
 		}),
-		t,
-		F,
-		r,
 		n,
-		ee.configure(X),
+		P,
+		i,
+		r,
+		re.configure(X),
 		c.configure(X),
 		s.configure(X),
-		l.configure(X),
-		u.configure(X),
-		te.configure({
+		te.configure(X),
+		ne.configure(X),
+		l.configure({
 			toolbarOpts: J,
-			math: C.pluginProps?.math || {}
+			math: S.pluginProps?.math || {}
 		}),
-		j,
 		A,
-		N,
-		d.configure({
+		k,
+		M,
+		u.configure({
 			toolbarOpts: J,
 			imageHandling: {
-				disableImageAlignmentButtons: C.disableImageAlignmentButtons,
-				onDone: (e) => C.onDone?.(e.getHTML()),
-				onDelete: C.imageSupport && C.imageSupport.delete && ((e) => {
+				disableImageAlignmentButtons: S.disableImageAlignmentButtons,
+				onDone: (e) => S.onDone?.(e.getHTML()),
+				onDelete: S.imageSupport && S.imageSupport.delete && ((e) => {
 					let { src: t } = e.attrs;
-					C.imageSupport.delete(t, (t) => {
+					S.imageSupport.delete(t, (t) => {
 						q(e.pos);
 					});
 				}),
-				insertImageRequested: C.imageSupport && ((e, t, n) => {
+				insertImageRequested: S.imageSupport && ((e, t, n) => {
 					let [r, i] = t, a = (t) => {
 						let n;
-						W && t && (n = C.onChange), q(i), n?.(e.getHTML());
+						W && t && (n = S.onChange), q(i), n?.(e.getHTML());
 					};
 					e._insertingImage = !0, U((e) => [...e, r]), (() => {
-						let t = n(a), r = S(() => {
+						let t = n(a), r = x(() => {
 							let t = () => window.removeEventListener("focus", r);
 							if (!e._insertingImage) {
 								t();
@@ -216,39 +218,39 @@ var ie = {
 							}
 							q(i), e._insertingImage = !1, t();
 						}, 500);
-						window.addEventListener("focus", r), C.imageSupport.add(t);
+						window.addEventListener("focus", r), S.imageSupport.add(t);
 					})();
 				}),
-				maxImageWidth: C.maxImageWidth,
-				maxImageHeight: C.maxImageHeight
+				maxImageWidth: S.maxImageWidth,
+				maxImageHeight: S.maxImageHeight
 			},
 			limit: 3
 		}),
-		f.configure({ uploadSoundSupport: C.uploadSoundSupport }),
-		ne.configure({ extraCSSRules: C.extraCSSRules })
-	], Z = C.spellCheck !== !1, Q = w({
-		extensions: se,
+		d.configure({ uploadSoundSupport: S.uploadSoundSupport }),
+		f.configure({ extraCSSRules: S.extraCSSRules })
+	], Z = S.spellCheck !== !1, Q = C({
+		extensions: ce,
 		immediatelyRender: !1,
 		editorProps: {
 			attributes: B(Z),
 			handleKeyDown(e, t) {
-				return C.onKeyDown ? C.onKeyDown(t) : !1;
+				return S.onKeyDown ? S.onKeyDown(t) : !1;
 			}
 		},
-		editable: !C.disabled,
-		content: e(C.markup),
+		editable: !S.disabled,
+		content: t(S.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && C.onChange?.(e.getHTML());
+			t.isDone && S.onChange?.(e.getHTML());
 		},
 		onBlur: ({ editor: e }) => {
 			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || Y(e);
 		}
-	}, [C.charactersLimit]);
-	y(() => {
-		C.editorRef && C.editorRef(Q);
-	}, [C.editorRef, Q]), y(() => {
-		Q?.setEditable(!C.disabled);
-	}, [C.disabled, Q]), y(() => {
+	}, [S.charactersLimit]);
+	v(() => {
+		S.editorRef && S.editorRef(Q);
+	}, [S.editorRef, Q]), v(() => {
+		Q?.setEditable(!S.disabled);
+	}, [S.disabled, Q]), v(() => {
 		if (!Q) return;
 		let e = Q.options?.editorProps, t = {
 			...e?.attributes,
@@ -258,20 +260,20 @@ var ie = {
 			...e,
 			attributes: t
 		} });
-	}, [Z, Q]), y(() => {
+	}, [Z, Q]), v(() => {
 		if (!Q) return;
-		let t = e(C.markup);
-		t !== Q.getHTML() && Q.commands.setContent(t, { emitUpdate: !1 });
-	}, [C.markup, Q]), y(() => {
+		let e = t(S.markup);
+		e !== Q.getHTML() && Q.commands.setContent(e, { emitUpdate: !1 });
+	}, [S.markup, Q]), v(() => {
 		Object.entries(z).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let ce = T({
+	let le = w({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
-	}), $ = b(() => {
-		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = C;
+	}), $ = y(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = S;
 		return {
 			width: m(t),
 			minWidth: m(e),
@@ -280,25 +282,25 @@ var ie = {
 			minHeight: m(r),
 			maxHeight: m(a)
 		};
-	}, [C]);
-	return /* @__PURE__ */ I(h, {
-		...C,
-		activePlugins: oe,
+	}, [S]);
+	return /* @__PURE__ */ F(ae, {
+		...S,
+		activePlugins: se,
 		toolbarOpts: J,
-		editorState: ce,
+		editorState: le,
 		editor: Q,
-		children: Q && /* @__PURE__ */ I(H, {
+		children: Q && /* @__PURE__ */ F(H, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
-			showParagraph: E && !E.disabled,
+			showParagraph: T && !T.disabled,
 			separateParagraph: V && !V.disabled,
 			editor: Q
 		})
 	});
-}, H = E(C, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, H = T(S, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,75 @@
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.0.0",
+  "version": "3.0.1-next.20261002220849",
   "description": "",
   "repository": {
     "type": "git",
@@ -13,10 +13,10 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "5.0.0",
-    "@pie-lib/math-input": "9.0.0",
-    "@pie-lib/math-toolbar": "4.0.0",
-    "@pie-lib/render-ui": "8.0.0",
+    "@pie-lib/drag": "5.0.1-next.20261002215153",
+    "@pie-lib/math-input": "9.0.1-next.20261002215153",
+    "@pie-lib/math-toolbar": "4.0.1-next.20261002215153",
+    "@pie-lib/render-ui": "8.0.1-next.20261002215153",
     "@tiptap/core": "3.31.3",
     "@tiptap/extension-character-count": "3.31.3",
     "@tiptap/extension-color": "3.31.3",
@@ -43,10 +43,10 @@
     "react-portal": "^4.2.0",
     "tippy.js": "latest",
     "to-style": "^1.3.3",
-    "@pie-element/shared-lodash": "0.1.1",
+    "@pie-element/shared-lodash": "0.1.2-next.20261002215153",
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.2-next.20261002215153",
     "@tiptap/extensions": "3.31.3",
     "@tiptap/extension-list": "3.31.3",
     "@tiptap/extension-bubble-menu": "3.31.3",