@pie-lib/editable-html-tip-tap 3.0.1-next.20261004011201 → 3.0.1-next.20261004020741

package/dist/components/EditableHtml.js

@@ -3,44 +3,44 @@ 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 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 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";
+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";
 //#region src/components/EditableHtml.tsx
-var I = {
+var P = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
 	showDone: !0,
 	doneOn: "blur"
-}, L = {
+}, F = {
 	options: {},
 	respAreaToolbar: () => {},
 	onHandleAreaChange: () => {}
-}, R = [
+}, ce = [
 	"bold",
 	"italic",
 	"underline",
@@ -62,7 +62,7 @@ var I = {
 	"h3",
 	"undo",
 	"redo"
-], z = {
+], I = {
 	"--white": "#fff",
 	"--black": "#2e2b29",
 	"--black-contrast": "#110f0e",
@@ -81,57 +81,59 @@ var I = {
 	"--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)"
-}, B = (e) => ({
+}, L = (e, t, n) => ({
 	role: "textbox",
 	"data-pie-editor": "true",
 	class: "mathjax_ignore",
 	spellcheck: e ? "true" : "false",
 	autocorrect: e ? "on" : "off",
-	autocapitalize: e ? "on" : "off"
-}), V = (S) => {
-	let { showParagraphs: T, separateParagraphs: V } = S.pluginProps || {}, [oe, U] = b([]), [W, G] = b(!1), { toolbarOpts: K } = S, q = _((e) => {
-		U((t) => {
+	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) => {
 			let n = t.filter((t) => t.pos !== e);
-			return n.length === 0 && G(!1), n;
+			return n.length === 0 && U(!1), n;
 		});
-	}, [U]), J = {
-		...I,
-		...K
-	}, Y = _((e) => {
+	}, [V]), K = {
+		...P,
+		...W
+	}, q = g((e) => {
 		let t = e.getHTML();
-		S.markup !== t && S.onChange?.(t), J.doneOn === "blur" && S.onDone?.(t);
+		b.markup !== t && b.onChange?.(t), K.doneOn === "blur" && b.onDone?.(t);
 	}, [
-		S.markup,
-		S.onChange,
-		S.onDone,
-		J.doneOn
-	]), X = y(() => ({
-		...L,
-		...S.responseAreaProps,
-		onInlineDropdownToolbarClose: Y
-	}), [S.responseAreaProps, Y]), se = y(() => {
-		let { customPlugins: e, ...t } = S.pluginProps || {};
+		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 || {};
 		e ||= [];
-		let n = (S.activePlugins || R)?.filter((e) => {
-			let n = h[e] || e, r = t[n] || {};
+		let n = (b.activePlugins || ce)?.filter((e) => {
+			let n = m[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
-		return g(n, e, {
+		return h(n, e, {
 			math: {},
-			textAlign: S.textAlign,
+			textAlign: b.textAlign,
 			html: {},
-			extraCSSRules: S.extraCSSRules || {},
-			image: { ...S.imageSupport },
+			extraCSSRules: b.extraCSSRules || {},
+			image: { ...b.imageSupport },
 			toolbar: {},
 			table: {},
-			responseArea: { type: X.type },
-			languageCharacters: S.languageCharactersProps,
+			responseArea: { type: J.type },
+			languageCharacters: b.languageCharactersProps,
 			keyPadCharacterRef: {},
 			setKeypadInteraction: {},
 			media: {}
 		});
-	}, [S, X.type]), ce = [
-		j.configure({
+	}, [b, J.type]), de = [
+		k.configure({
 			types: [
 				"heading",
 				"paragraph",
@@ -153,10 +155,10 @@ var I = {
 				"justify"
 			]
 		}),
-		D,
+		T,
 		e,
-		O.configure({ limit: S.charactersLimit || 1e6 }),
-		E.configure({
+		E.configure({ limit: b.charactersLimit || 1e6 }),
+		w.configure({
 			trailingNode: {
 				node: "paragraph",
 				notAfter: ["paragraph", "div"]
@@ -166,141 +168,148 @@ var I = {
 				linkOnPaste: !1
 			}
 		}),
-		ie,
+		ae,
 		a,
-		p,
-		ee,
+		oe,
 		o,
-		N.configure({
-			placeholder: S.placeholder,
+		ee,
+		j.configure({
+			placeholder: b.placeholder,
 			showOnlyWhenEditable: !0,
 			showOnlyCurrent: !1,
 			includeChildren: !0
 		}),
 		n,
-		P,
+		M,
 		i,
 		r,
-		re.configure(X),
-		c.configure(X),
-		s.configure(X),
-		te.configure(X),
-		ne.configure(X),
-		l.configure({
-			toolbarOpts: J,
-			math: S.pluginProps?.math || {}
+		ie.configure(J),
+		te.configure(J),
+		s.configure(J),
+		ne.configure(J),
+		re.configure(J),
+		c.configure({
+			toolbarOpts: K,
+			math: b.pluginProps?.math || {}
 		}),
+		O,
+		D,
 		A,
-		k,
-		M,
-		u.configure({
-			toolbarOpts: J,
+		l.configure({
+			toolbarOpts: K,
 			imageHandling: {
-				disableImageAlignmentButtons: S.disableImageAlignmentButtons,
-				onDone: (e) => S.onDone?.(e.getHTML()),
-				onDelete: S.imageSupport && S.imageSupport.delete && ((e) => {
+				disableImageAlignmentButtons: b.disableImageAlignmentButtons,
+				onDone: (e) => b.onDone?.(e.getHTML()),
+				onDelete: b.imageSupport && b.imageSupport.delete && ((e) => {
 					let { src: t } = e.attrs;
-					S.imageSupport.delete(t, (t) => {
-						q(e.pos);
+					b.imageSupport.delete(t, (t) => {
+						G(e.pos);
 					});
 				}),
-				insertImageRequested: S.imageSupport && ((e, t, n) => {
+				insertImageRequested: b.imageSupport && ((e, t, n) => {
 					let [r, i] = t, a = (t) => {
 						let n;
-						W && t && (n = S.onChange), q(i), n?.(e.getHTML());
+						H && t && (n = b.onChange), G(i), n?.(e.getHTML());
 					};
-					e._insertingImage = !0, U((e) => [...e, r]), (() => {
-						let t = n(a), r = x(() => {
+					e._insertingImage = !0, V((e) => [...e, r]), (() => {
+						let t = n(a), r = se(() => {
 							let t = () => window.removeEventListener("focus", r);
 							if (!e._insertingImage) {
 								t();
 								return;
 							}
-							q(i), e._insertingImage = !1, t();
+							G(i), e._insertingImage = !1, t();
 						}, 500);
-						window.addEventListener("focus", r), S.imageSupport.add(t);
+						window.addEventListener("focus", r), b.imageSupport.add(t);
 					})();
 				}),
-				maxImageWidth: S.maxImageWidth,
-				maxImageHeight: S.maxImageHeight
+				maxImageWidth: b.maxImageWidth,
+				maxImageHeight: b.maxImageHeight
 			},
 			limit: 3
 		}),
-		d.configure({ uploadSoundSupport: S.uploadSoundSupport }),
-		f.configure({ extraCSSRules: S.extraCSSRules })
-	], Z = S.spellCheck !== !1, Q = C({
-		extensions: ce,
+		u.configure({ uploadSoundSupport: b.uploadSoundSupport }),
+		d.configure({ extraCSSRules: b.extraCSSRules })
+	], Y = b.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = b, Q = x({
+		extensions: de,
 		immediatelyRender: !1,
 		editorProps: {
-			attributes: B(Z),
+			attributes: L(Y, X, Z),
 			handleKeyDown(e, t) {
-				return S.onKeyDown ? S.onKeyDown(t) : !1;
+				return b.onKeyDown ? b.onKeyDown(t) : !1;
 			}
 		},
-		editable: !S.disabled,
-		content: t(S.markup),
+		editable: !b.disabled,
+		content: t(b.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && S.onChange?.(e.getHTML());
+			t.isDone && b.onChange?.(e.getHTML());
 		},
 		onBlur: ({ editor: e }) => {
-			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || Y(e);
+			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || q(e);
 		}
-	}, [S.charactersLimit]);
-	v(() => {
-		S.editorRef && S.editorRef(Q);
-	}, [S.editorRef, Q]), v(() => {
-		Q?.setEditable(!S.disabled);
-	}, [S.disabled, Q]), v(() => {
+	}, [b.charactersLimit]);
+	_(() => {
+		b.editorRef && b.editorRef(Q);
+	}, [b.editorRef, Q]), _(() => {
+		Q?.setEditable(!b.disabled);
+	}, [b.disabled, Q]), _(() => {
 		if (!Q) return;
-		let e = Q.options?.editorProps, t = {
-			...e?.attributes,
-			...B(Z)
-		};
-		e?.attributes?.spellcheck !== t.spellcheck && Q.setOptions({ editorProps: {
+		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)));
+		Q.setOptions({ editorProps: {
 			...e,
-			attributes: t
+			attributes: {
+				...r,
+				...n
+			}
 		} });
-	}, [Z, Q]), v(() => {
+	}, [
+		Y,
+		X,
+		Z,
+		Q
+	]), _(() => {
 		if (!Q) return;
-		let e = t(S.markup);
+		let e = t(b.markup);
 		e !== Q.getHTML() && Q.commands.setContent(e, { emitUpdate: !1 });
-	}, [S.markup, Q]), v(() => {
-		Object.entries(z).forEach(([e, t]) => {
+	}, [b.markup, Q]), _(() => {
+		Object.entries(I).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let le = w({
+	let fe = S({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
-	}), $ = y(() => {
-		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = S;
+	}), $ = v(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = b;
 		return {
-			width: m(t),
-			minWidth: m(e),
-			maxWidth: m(n),
-			height: m(i),
-			minHeight: m(r),
-			maxHeight: m(a)
+			width: f(t),
+			minWidth: f(e),
+			maxWidth: f(n),
+			height: f(i),
+			minHeight: f(r),
+			maxHeight: f(a)
 		};
-	}, [S]);
-	return /* @__PURE__ */ F(ae, {
-		...S,
-		activePlugins: se,
-		toolbarOpts: J,
-		editorState: le,
+	}, [b]);
+	return /* @__PURE__ */ N(p, {
+		...b,
+		activePlugins: ue,
+		toolbarOpts: K,
+		editorState: fe,
 		editor: Q,
-		children: Q && /* @__PURE__ */ F(H, {
+		children: Q && /* @__PURE__ */ N(B, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
-			showParagraph: T && !T.disabled,
-			separateParagraph: V && !V.disabled,
+			showParagraph: C && !C.disabled,
+			separateParagraph: z && !z.disabled,
 			editor: Q
 		})
 	});
-}, H = T(S, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, B = C(b, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {
@@ -330,4 +339,4 @@ var I = {
 	}
 }));
 //#endregion
-export { V as EditableHtml, V as default };
+export { z as EditableHtml, z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.0.1-next.20261004011201",
+  "version": "3.0.1-next.20261004020741",
   "description": "",
   "repository": {
     "type": "git",
@@ -14,8 +14,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/drag": "5.0.1-next.20261004003105",
-    "@pie-lib/math-input": "9.0.1-next.20261004011201",
-    "@pie-lib/math-toolbar": "4.0.1-next.20261004011201",
+    "@pie-lib/math-input": "9.0.1-next.20261004020741",
+    "@pie-lib/math-toolbar": "4.0.1-next.20261004020741",
     "@pie-lib/render-ui": "8.0.1-next.20261003161149",
     "@tiptap/core": "3.31.3",
     "@tiptap/extension-character-count": "3.31.3",