@pie-lib/editable-html-tip-tap 3.0.5-next.20261014231219 → 3.1.0

package/dist/components/EditableHtml.js

@@ -1,46 +1,47 @@
 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 ee } from "../extensions/ensure-empty-root-div.js";
-import { EnsureListItemContentIsDiv as te } from "../extensions/ensure-list-item-content-is-div.js";
-import { DragInTheBlankNode as o, ExplicitConstructedResponseNode as s, InlineDropdownNode as c, MathTemplatedNode as l, ResponseAreaExtension as u } from "../extensions/responseArea.js";
-import { MathNode as ne } from "../extensions/math.js";
-import { ImageUploadNode as re, uploadPastedImage as ie } from "../extensions/image.js";
-import { Media as ae } from "../extensions/media.js";
-import { CSSMark as oe } from "../extensions/css.js";
-import { ExtendedListItem as se } from "../extensions/extended-list-item.js";
-import { HeadingParagraph as ce } from "../extensions/heading-paragraph.js";
-import { valueToSize as d } from "../utils/size.js";
-import le from "./TiptapContainer.js";
-import { PLUGINS_MAP as ue, buildExtensions as f } from "../extensions/index.js";
-import { useCallback as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
-import { debounce as de } from "@pie-element/shared-lodash";
-import { EditorContent as v, useEditor as y, useEditorState as b } from "@tiptap/react";
-import { styled as x } from "@mui/material/styles";
-import S from "@tiptap/starter-kit";
-import { TextStyleKit as C } from "@tiptap/extension-text-style";
-import { CharacterCount as w } from "@tiptap/extension-character-count";
-import T from "@tiptap/extension-superscript";
-import E from "@tiptap/extension-subscript";
-import D from "@tiptap/extension-text-align";
-import O from "@tiptap/extension-image";
-import k from "@tiptap/extension-placeholder";
-import { TableRow as A } from "@tiptap/extension-table-row";
-import { jsx as j } from "react/jsx-runtime";
+import { setPendingSaveFlush as n } from "../pending-save.js";
+import r from "../extensions/extended-table.js";
+import { ExtendedTableCell as i, ExtendedTableHeader as a } from "../extensions/extended-table-cell.js";
+import { DivNode as ee } from "../extensions/div-node.js";
+import { EnsureEmptyRootIsDiv as te } from "../extensions/ensure-empty-root-div.js";
+import { EnsureListItemContentIsDiv as ne } from "../extensions/ensure-list-item-content-is-div.js";
+import { DragInTheBlankNode as re, ExplicitConstructedResponseNode as ie, InlineDropdownNode as ae, MathTemplatedNode as oe, ResponseAreaExtension as se } from "../extensions/responseArea.js";
+import { MathNode as ce } from "../extensions/math.js";
+import { ImageUploadNode as o, uploadPastedImage as s } from "../extensions/image.js";
+import { Media as c } from "../extensions/media.js";
+import { CSSMark as le } from "../extensions/css.js";
+import { ExtendedListItem as ue } from "../extensions/extended-list-item.js";
+import { HeadingParagraph as l } from "../extensions/heading-paragraph.js";
+import { valueToSize as u } from "../utils/size.js";
+import de from "./TiptapContainer.js";
+import { PLUGINS_MAP as fe, buildExtensions as pe } from "../extensions/index.js";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { debounce as g } from "@pie-element/shared-lodash";
+import { EditorContent as _, useEditor as me, useEditorState as he } from "@tiptap/react";
+import { styled as v } from "@mui/material/styles";
+import y from "@tiptap/starter-kit";
+import { TextStyleKit as b } from "@tiptap/extension-text-style";
+import { CharacterCount as ge } from "@tiptap/extension-character-count";
+import _e from "@tiptap/extension-superscript";
+import ve from "@tiptap/extension-subscript";
+import ye from "@tiptap/extension-text-align";
+import be from "@tiptap/extension-image";
+import xe from "@tiptap/extension-placeholder";
+import { TableRow as x } from "@tiptap/extension-table-row";
+import { jsx as S } from "react/jsx-runtime";
 //#region src/components/EditableHtml.tsx
-var M = {
+var C = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
 	showDone: !0,
 	doneOn: "blur"
-}, N = {
+}, w = {
 	options: {},
 	respAreaToolbar: () => {},
 	onHandleAreaChange: () => {}
-}, P = [
+}, T = [
 	"bold",
 	"italic",
 	"underline",
@@ -62,7 +63,7 @@ var M = {
 	"h3",
 	"undo",
 	"redo"
-], F = {
+], E = {
 	bold: "bold",
 	italic: "italic",
 	underline: "underline",
@@ -73,7 +74,7 @@ var M = {
 	"numbered-list": "orderedList",
 	table: "table",
 	image: "image"
-}, I = {
+}, D = {
 	"--white": "#fff",
 	"--black": "#2e2b29",
 	"--black-contrast": "#110f0e",
@@ -92,7 +93,7 @@ var M = {
 	"--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) => ({
+}, O = (e, t, n) => ({
 	role: "textbox",
 	"data-pie-editor": "true",
 	class: "mathjax_ignore",
@@ -101,55 +102,80 @@ var M = {
 	autocapitalize: e ? "on" : "off",
 	...t && { "aria-label": t },
 	...n && { "aria-labelledby": n }
-}), R = ["aria-label", "aria-labelledby"], z = (v) => {
-	let { showParagraphs: x, separateParagraphs: z } = v.pluginProps || {}, [fe, V] = _([]), [H, pe] = _(!1), { toolbarOpts: me } = v, U = p((e) => {
-		V((t) => {
+}), k = ["aria-label", "aria-labelledby"], A = 5, j = (e) => e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response"), M = (_) => {
+	let { showParagraphs: v, separateParagraphs: M } = _.pluginProps || {}, [Ce, N] = h([]), [we, Te] = h(!1), { toolbarOpts: Ee } = _, P = d((e) => {
+		N((t) => {
 			let n = t.filter((t) => t.pos !== e);
-			return n.length === 0 && pe(!1), n;
+			return n.length === 0 && Te(!1), n;
 		});
-	}, [V]), W = {
-		...M,
-		...me
-	}, G = p((e) => {
+	}, [N]), F = {
+		...C,
+		...Ee
+	}, I = m([]), L = (e) => {
+		I.current = [...I.current.slice(1 - A), e], _.onChange?.(e);
+	}, R = m(L);
+	R.current = L;
+	let z = d((e) => {
 		let t = e.getHTML();
-		v.markup !== t && v.onChange?.(t), W.doneOn === "blur" && v.onDone?.(t);
+		_.markup !== t && R.current(t), F.doneOn === "blur" && _.onDone?.(t);
 	}, [
-		v.markup,
-		v.onChange,
-		v.onDone,
-		W.doneOn
-	]), K = h(() => ({
-		...N,
-		...v.responseAreaProps,
-		onInlineDropdownToolbarClose: G
-	}), [v.responseAreaProps, G]), q = h(() => {
-		let { customPlugins: e, ...t } = v.pluginProps || {};
+		_.markup,
+		_.onChange,
+		_.onDone,
+		F.doneOn
+	]), B = m(z);
+	B.current = z;
+	let { idleSaveDelay: V } = _, H = m(!1), U = p(() => V > 0 ? g((e) => {
+		if (!e.isDestroyed) {
+			if (!H.current && (e.view.composing || j(e))) {
+				W.current?.(e);
+				return;
+			}
+			B.current(e);
+		}
+	}, V) : null, [V]), W = m(U);
+	W.current = U;
+	let G = d((e) => {
+		H.current = !0;
+		try {
+			e?.flush();
+		} finally {
+			H.current = !1;
+		}
+	}, []);
+	f(() => () => G(U), [U, G]);
+	let De = d(() => G(W.current), [G]), K = p(() => ({
+		...w,
+		..._.responseAreaProps,
+		onInlineDropdownToolbarClose: z
+	}), [_.responseAreaProps, z]), q = p(() => {
+		let { customPlugins: e, ...t } = _.pluginProps || {};
 		e ||= [];
-		let n = (v.activePlugins || P)?.filter((e) => {
-			let n = ue[e] || e, r = t[n] || {};
+		let n = (_.activePlugins || T)?.filter((e) => {
+			let n = fe[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
-		return f(n, e, {
+		return pe(n, e, {
 			math: {},
-			textAlign: v.textAlign,
+			textAlign: _.textAlign,
 			html: {},
-			extraCSSRules: v.extraCSSRules || {},
-			image: { ...v.imageSupport },
+			extraCSSRules: _.extraCSSRules || {},
+			image: { ..._.imageSupport },
 			toolbar: {},
 			table: {},
 			responseArea: { type: K.type },
-			languageCharacters: v.languageCharactersProps,
+			languageCharacters: _.languageCharactersProps,
 			keyPadCharacterRef: {},
 			setKeypadInteraction: {},
 			media: {}
 		});
-	}, [v, K.type]), J = g(null);
+	}, [_, K.type]), J = m(null);
 	J.current = {
-		plainText: v.pluginProps?.pasteFormatting?.disabled === !0,
-		formatting: q.map((e) => F[e]).filter(Boolean)
+		plainText: _.pluginProps?.pasteFormatting?.disabled === !0,
+		formatting: q.map((e) => E[e]).filter(Boolean)
 	};
-	let he = [
-		D.configure({
+	let Oe = [
+		ye.configure({
 			types: [
 				"heading",
 				"paragraph",
@@ -171,13 +197,13 @@ var M = {
 				"justify"
 			]
 		}),
-		C,
+		b,
 		e.configure({
 			settings: () => J.current,
-			uploadImage: v.imageSupport && ie
+			uploadImage: _.imageSupport && s
 		}),
-		w.configure({ limit: v.charactersLimit || 1e6 }),
-		S.configure({
+		ge.configure({ limit: _.charactersLimit || 1e6 }),
+		y.configure({
 			trailingNode: {
 				node: "paragraph",
 				notAfter: ["paragraph", "div"]
@@ -187,95 +213,97 @@ var M = {
 				linkOnPaste: !1
 			}
 		}),
-		se,
-		a,
-		ce,
+		ue,
 		ee,
+		l,
 		te,
-		k.configure({
-			placeholder: v.placeholder,
+		ne,
+		xe.configure({
+			placeholder: _.placeholder,
 			showOnlyWhenEditable: !0,
 			showOnlyCurrent: !1,
 			includeChildren: !0
 		}),
-		n,
-		A,
-		i,
 		r,
-		u.configure(K),
-		s.configure(K),
-		o.configure(K),
-		c.configure(K),
-		l.configure(K),
-		ne.configure({
-			toolbarOpts: W,
-			math: v.pluginProps?.math || {}
+		x,
+		a,
+		i,
+		se.configure(K),
+		ie.configure(K),
+		re.configure(K),
+		ae.configure(K),
+		oe.configure(K),
+		ce.configure({
+			toolbarOpts: F,
+			math: _.pluginProps?.math || {}
 		}),
-		E,
-		T,
-		O,
-		re.configure({
-			toolbarOpts: W,
+		ve,
+		_e,
+		be,
+		o.configure({
+			toolbarOpts: F,
 			imageHandling: {
-				disableImageAlignmentButtons: v.disableImageAlignmentButtons,
-				onDone: (e) => v.onDone?.(e.getHTML()),
-				onDelete: v.imageSupport && v.imageSupport.delete && ((e) => {
+				disableImageAlignmentButtons: _.disableImageAlignmentButtons,
+				onDone: (e) => _.onDone?.(e.getHTML()),
+				onDelete: _.imageSupport && _.imageSupport.delete && ((e) => {
 					let { src: t } = e.attrs;
-					v.imageSupport.delete(t, (t) => {
-						U(e.pos);
+					_.imageSupport.delete(t, (t) => {
+						P(e.pos);
 					});
 				}),
-				insertImageRequested: v.imageSupport && ((e, t, n) => {
+				insertImageRequested: _.imageSupport && ((e, t, n) => {
 					let [r, i] = t, a = (t) => {
 						let n;
-						H && t && (n = v.onChange), U(i), n?.(e.getHTML());
+						we && t && (n = R.current), P(i), n?.(e.getHTML());
 					};
-					e._insertingImage = !0, V((e) => [...e, r]), (() => {
-						let t = n(a), r = de(() => {
+					e._insertingImage = !0, N((e) => [...e, r]), (() => {
+						let t = n(a), r = g(() => {
 							let t = () => window.removeEventListener("focus", r);
 							if (!e._insertingImage) {
 								t();
 								return;
 							}
-							U(i), e._insertingImage = !1, t();
+							P(i), e._insertingImage = !1, t();
 						}, 500);
-						window.addEventListener("focus", r), v.imageSupport.add(t);
+						window.addEventListener("focus", r), _.imageSupport.add(t);
 					})();
 				}),
-				maxImageWidth: v.maxImageWidth,
-				maxImageHeight: v.maxImageHeight
+				maxImageWidth: _.maxImageWidth,
+				maxImageHeight: _.maxImageHeight
 			},
 			limit: 3
 		}),
-		ae.configure({ uploadSoundSupport: v.uploadSoundSupport }),
-		oe.configure({ extraCSSRules: v.extraCSSRules })
-	], Y = v.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = v, Q = y({
-		extensions: he,
+		c.configure({ uploadSoundSupport: _.uploadSoundSupport }),
+		le.configure({ extraCSSRules: _.extraCSSRules })
+	], Y = _.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = _, Q = me({
+		extensions: Oe,
 		immediatelyRender: !1,
 		editorProps: {
-			attributes: L(Y, X, Z),
+			attributes: O(Y, X, Z),
 			handleKeyDown(e, t) {
-				return v.onKeyDown ? v.onKeyDown(t) : !1;
+				return _.onKeyDown ? _.onKeyDown(t) : !1;
 			}
 		},
-		editable: !v.disabled,
-		content: t(v.markup),
+		editable: !_.disabled,
+		content: t(_.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && v.onChange?.(e.getHTML());
+			t.isDone && R.current(e.getHTML()), t.docChanged && W.current && (W.current(e), n(e.view.dom, De));
 		},
 		onBlur: ({ editor: e }) => {
-			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || G(e);
+			j(e) || !e.schema || (W.current?.cancel(), z(e));
 		}
-	}, [v.charactersLimit]);
-	m(() => {
-		v.editorRef && v.editorRef(Q);
-	}, [v.editorRef, Q]), m(() => {
-		Q?.setEditable(!v.disabled);
-	}, [v.disabled, Q]), m(() => {
+	}, [_.charactersLimit]);
+	f(() => {
+		_.editorRef && _.editorRef(Q);
+	}, [_.editorRef, Q]), f(() => {
+		Q?.setEditable(!_.disabled);
+	}, [_.disabled, Q]), f(() => {
+		Q?.on("destroy", () => G(W.current));
+	}, [Q, G]), f(() => {
 		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 = O(Y, X, Z);
+		if (["spellcheck", ...k].every((e) => t[e] === n[e])) return;
+		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !k.includes(e)));
 		Q.setOptions({ editorProps: {
 			...e,
 			attributes: {
@@ -288,47 +316,48 @@ var M = {
 		X,
 		Z,
 		Q
-	]), m(() => {
-		if (!Q) return;
-		let e = t(v.markup);
+	]), f(() => {
+		if (!Q || I.current.includes(_.markup)) return;
+		I.current = [];
+		let e = t(_.markup);
 		e !== Q.getHTML() && Q.commands.setContent(e, { emitUpdate: !1 });
-	}, [v.markup, Q]), m(() => {
-		Object.entries(I).forEach(([e, t]) => {
+	}, [_.markup, Q]), f(() => {
+		Object.entries(D).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let ge = b({
+	let ke = he({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
-	}), $ = h(() => {
-		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = v;
+	}), $ = p(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = _;
 		return {
-			width: d(t),
-			minWidth: d(e),
-			maxWidth: d(n),
-			height: d(i),
-			minHeight: d(r),
-			maxHeight: d(a)
+			width: u(t),
+			minWidth: u(e),
+			maxWidth: u(n),
+			height: u(i),
+			minHeight: u(r),
+			maxHeight: u(a)
 		};
-	}, [v]);
-	return /* @__PURE__ */ j(le, {
-		...v,
+	}, [_]);
+	return /* @__PURE__ */ S(de, {
+		..._,
 		activePlugins: q,
-		toolbarOpts: W,
-		editorState: ge,
+		toolbarOpts: F,
+		editorState: ke,
 		editor: Q,
-		children: Q && /* @__PURE__ */ j(B, {
+		children: Q && /* @__PURE__ */ S(Se, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
-			showParagraph: x && !x.disabled,
-			separateParagraph: z && !z.disabled,
+			showParagraph: v && !v.disabled,
+			separateParagraph: M && !M.disabled,
 			editor: Q
 		})
 	});
-}, B = x(v, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, Se = v(_, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {
@@ -358,4 +387,4 @@ var M = {
 	}
 }));
 //#endregion
-export { z as EditableHtml, z as default };
+export { M as EditableHtml, M as default };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import StyledEditor, { EditableHtml } from './components/EditableHtml.js';
 import { ALL_PLUGINS, DEFAULT_PLUGINS } from './extensions/index.js';
 import { deleteInlineDropdownByIndex } from './components/respArea/inlineDropdownUtils.js';
-export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS, deleteInlineDropdownByIndex };
+import { flushPendingEditorSaves } from './pending-save.js';
+export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS, deleteInlineDropdownByIndex, flushPendingEditorSaves };
 export default StyledEditor;

package/dist/index.js

@@ -1,7 +1,8 @@
-import { ALL_PLUGINS as e, DEFAULT_PLUGINS as t } from "./extensions/index.js";
-import { EditableHtml as n } from "./components/EditableHtml.js";
-import { deleteInlineDropdownByIndex as r } from "./components/respArea/inlineDropdownUtils.js";
+import { flushPendingEditorSaves as e } from "./pending-save.js";
+import { ALL_PLUGINS as t, DEFAULT_PLUGINS as n } from "./extensions/index.js";
+import { EditableHtml as r } from "./components/EditableHtml.js";
+import { deleteInlineDropdownByIndex as i } from "./components/respArea/inlineDropdownUtils.js";
 //#region src/index.tsx
-var i = n;
+var a = r;
 //#endregion
-export { e as ALL_PLUGINS, t as DEFAULT_PLUGINS, n as EditableHtml, i as default, r as deleteInlineDropdownByIndex };
+export { t as ALL_PLUGINS, n as DEFAULT_PLUGINS, r as EditableHtml, a as default, i as deleteInlineDropdownByIndex, e as flushPendingEditorSaves };

package/dist/pending-save.d.ts

@@ -0,0 +1,7 @@
+export declare const setPendingSaveFlush: (node: Element, flush: () => void) => void;
+/**
+ * Sends every idle save still waiting in an editor under `root` now, as a blur would. An element
+ * calls this from `commitPendingSession()`, before its own notifiers flush, so a player committing
+ * the session gets what the student typed in the last idle-save delay.
+ */
+export declare function flushPendingEditorSaves(root: ParentNode): void;

package/dist/pending-save.js

@@ -0,0 +1,11 @@
+//#region src/pending-save.ts
+var e = Symbol.for("@pie-lib/editable-html-tip-tap/pending-save"), t = (t, n) => {
+	t[e] = n;
+};
+function n(t) {
+	t.querySelectorAll("[data-pie-editor]").forEach((t) => {
+		t[e]?.();
+	});
+}
+//#endregion
+export { n as flushPendingEditorSaves, t as setPendingSaveFlush };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.0.5-next.20261014231219",
+  "version": "3.1.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -13,11 +13,11 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "5.0.5-next.20261014231219",
-    "@pie-lib/math-input": "9.0.5-next.20261014231219",
-    "@pie-lib/math-toolbar": "4.0.5-next.20261014231219",
-    "@pie-lib/render-ui": "8.0.5-next.20261014231219",
-    "@pie-lib/translator": "5.0.2-next.20261006160832",
+    "@pie-lib/drag": "5.0.5",
+    "@pie-lib/math-input": "9.0.5",
+    "@pie-lib/math-toolbar": "4.0.5",
+    "@pie-lib/render-ui": "8.0.5",
+    "@pie-lib/translator": "5.0.1",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-character-count": "3.31.4",
     "@tiptap/extension-color": "3.31.4",
@@ -44,10 +44,10 @@
     "react-portal": "^4.2.0",
     "tippy.js": "latest",
     "to-style": "^1.3.3",
-    "@pie-element/shared-lodash": "0.1.3-next.20261012213240",
+    "@pie-element/shared-lodash": "0.1.2",
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
-    "@pie-element/shared-math-rendering-mathjax": "0.2.0-next.20261014231219",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.6",
     "@tiptap/extensions": "3.31.4",
     "@tiptap/extension-list": "3.31.4",
     "@tiptap/extension-bubble-menu": "3.31.4",