@pie-lib/editable-html-tip-tap 2.1.2-next.32 → 2.1.2-next.33

package/dist/components/EditableHtml.js

@@ -4,42 +4,42 @@ import { ExtendedTableCell as n, ExtendedTableHeader as r } from "../extensions/
 import { DivNode as i } from "../extensions/div-node.js";
 import { EnsureEmptyRootIsDiv as a } from "../extensions/ensure-empty-root-div.js";
 import { EnsureListItemContentIsDiv as o } from "../extensions/ensure-list-item-content-is-div.js";
-import { DragInTheBlankNode as ee, ExplicitConstructedResponseNode as s, InlineDropdownNode as c, MathTemplatedNode as l, ResponseAreaExtension as u } from "../extensions/responseArea.js";
-import { MathNode as d } from "../extensions/math.js";
-import { ImageUploadNode as f } from "../extensions/image.js";
-import { Media as p } from "../extensions/media.js";
-import { CSSMark as m } from "../extensions/css.js";
-import { ExtendedListItem as h } from "../extensions/extended-list-item.js";
-import { HeadingParagraph as g } from "../extensions/heading-paragraph.js";
-import { valueToSize as _ } from "../utils/size.js";
-import v from "./TiptapContainer.js";
-import { PLUGINS_MAP as y, buildExtensions as te } from "../extensions/index.js";
-import { useCallback as b, useEffect as x, useMemo as S, useState as C } from "react";
-import { debounce as w } from "@pie-element/shared-lodash";
-import { EditorContent as T, useEditor as E, useEditorState as D } from "@tiptap/react";
-import { styled as O } from "@mui/material/styles";
-import k from "@tiptap/starter-kit";
-import { TextStyleKit as A } from "@tiptap/extension-text-style";
-import { CharacterCount as j } from "@tiptap/extension-character-count";
-import M from "@tiptap/extension-superscript";
-import N from "@tiptap/extension-subscript";
-import P from "@tiptap/extension-text-align";
-import F from "@tiptap/extension-image";
-import I from "@tiptap/extension-placeholder";
-import { TableRow as ne } from "@tiptap/extension-table-row";
-import { jsx as L } from "react/jsx-runtime";
+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 { 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";
 //#region src/components/EditableHtml.tsx
-var R = {
+var ie = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
 	showDone: !0,
 	doneOn: "blur"
-}, z = {
+}, L = {
 	options: {},
 	respAreaToolbar: () => {},
 	onHandleAreaChange: () => {}
-}, B = [
+}, R = [
 	"bold",
 	"italic",
 	"underline",
@@ -61,7 +61,7 @@ var R = {
 	"h3",
 	"undo",
 	"redo"
-], V = {
+], z = {
 	"--white": "#fff",
 	"--black": "#2e2b29",
 	"--black-contrast": "#110f0e",
@@ -80,199 +80,219 @@ var R = {
 	"--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)"
-}, H = (T) => {
-	let { showParagraphs: O, separateParagraphs: H } = T.pluginProps || {}, [re, W] = C([]), [G, K] = C(!1), { toolbarOpts: q } = T, J = b((e) => {
-		W((t) => {
+}, B = (e) => ({
+	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) => {
+		U((t) => {
 			let n = t.filter((t) => t.pos !== e);
-			return n.length === 0 && K(!1), n;
+			return n.length === 0 && G(!1), n;
 		});
-	}, [W]), Y = {
-		...R,
-		...q
-	}, X = b((e) => {
+	}, [U]), J = {
+		...ie,
+		...K
+	}, Y = v((e) => {
 		let t = e.getHTML();
-		T.markup !== t && T.onChange?.(t), Y.doneOn === "blur" && T.onDone?.(t);
+		C.markup !== t && C.onChange?.(t), J.doneOn === "blur" && C.onDone?.(t);
 	}, [
-		T.markup,
-		T.onChange,
-		T.onDone,
-		Y.doneOn
-	]), Z = S(() => ({
-		...z,
-		...T.responseAreaProps,
-		onInlineDropdownToolbarClose: X
-	}), [T.responseAreaProps, X]), ie = S(() => {
-		let { customPlugins: e, ...t } = T.pluginProps || {};
+		C.markup,
+		C.onChange,
+		C.onDone,
+		J.doneOn
+	]), X = b(() => ({
+		...L,
+		...C.responseAreaProps,
+		onInlineDropdownToolbarClose: Y
+	}), [C.responseAreaProps, Y]), oe = b(() => {
+		let { customPlugins: e, ...t } = C.pluginProps || {};
 		e ||= [];
-		let n = (T.activePlugins || B)?.filter((e) => {
-			let n = y[e] || e, r = t[n] || {};
+		let n = (C.activePlugins || R)?.filter((e) => {
+			let n = g[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
-		return te(n, e, {
+		return _(n, e, {
 			math: {},
-			textAlign: T.textAlign,
+			textAlign: C.textAlign,
 			html: {},
-			extraCSSRules: T.extraCSSRules || {},
-			image: { ...T.imageSupport },
+			extraCSSRules: C.extraCSSRules || {},
+			image: { ...C.imageSupport },
 			toolbar: {},
 			table: {},
-			responseArea: { type: Z.type },
-			languageCharacters: T.languageCharactersProps,
+			responseArea: { type: X.type },
+			languageCharacters: C.languageCharactersProps,
 			keyPadCharacterRef: {},
 			setKeypadInteraction: {},
 			media: {}
 		});
-	}, [T, Z.type]), Q = E({
-		extensions: [
-			P.configure({
-				types: [
-					"heading",
-					"paragraph",
-					"div",
-					"headingParagraph",
-					"h1",
-					"h2",
-					"h3",
-					"h4",
-					"h5",
-					"h6",
-					"td",
-					"th"
-				],
-				alignments: [
-					"left",
-					"right",
-					"center",
-					"justify"
-				]
-			}),
-			A,
-			j.configure({ limit: T.charactersLimit || 1e6 }),
-			k.configure({ trailingNode: {
+	}, [C, X.type]), se = [
+		M.configure({
+			types: [
+				"heading",
+				"paragraph",
+				"div",
+				"headingParagraph",
+				"h1",
+				"h2",
+				"h3",
+				"h4",
+				"h5",
+				"h6",
+				"td",
+				"th"
+			],
+			alignments: [
+				"left",
+				"right",
+				"center",
+				"justify"
+			]
+		}),
+		O,
+		k.configure({ limit: C.charactersLimit || 1e6 }),
+		D.configure({
+			trailingNode: {
 				node: "paragraph",
 				notAfter: ["paragraph", "div"]
-			} }),
-			h,
-			i,
-			g,
-			a,
-			o,
-			I.configure({
-				placeholder: T.placeholder,
-				showOnlyWhenEditable: !0,
-				showOnlyCurrent: !1,
-				includeChildren: !0
-			}),
-			t,
-			ne,
-			r,
-			n,
-			u.configure(Z),
-			s.configure(Z),
-			ee.configure(Z),
-			c.configure(Z),
-			l.configure(Z),
-			d.configure({
-				toolbarOpts: Y,
-				math: T.pluginProps?.math || {}
-			}),
-			N,
-			M,
-			F,
-			f.configure({
-				toolbarOpts: Y,
-				imageHandling: {
-					disableImageAlignmentButtons: T.disableImageAlignmentButtons,
-					onDone: (e) => T.onDone?.(e.getHTML()),
-					onDelete: T.imageSupport && T.imageSupport.delete && ((e) => {
-						let { src: t } = e.attrs;
-						T.imageSupport.delete(t, (t) => {
-							J(e.pos);
-						});
-					}),
-					insertImageRequested: T.imageSupport && ((e, t, n) => {
-						let [r, i] = t, a = (t) => {
-							let n;
-							G && t && (n = T.onChange), J(i), n?.(e.getHTML());
-						};
-						e._insertingImage = !0, W((e) => [...e, r]), (() => {
-							let t = n(a), r = w(() => {
-								let t = () => window.removeEventListener("focus", r);
-								if (!e._insertingImage) {
-									t();
-									return;
-								}
-								J(i), e._insertingImage = !1, t();
-							}, 500);
-							window.addEventListener("focus", r), T.imageSupport.add(t);
-						})();
-					}),
-					maxImageWidth: T.maxImageWidth,
-					maxImageHeight: T.maxImageHeight
-				},
-				limit: 3
-			}),
-			p.configure({ uploadSoundSupport: T.uploadSoundSupport }),
-			m.configure({ extraCSSRules: T.extraCSSRules })
-		],
+			},
+			link: {
+				autolink: !1,
+				linkOnPaste: !1
+			}
+		}),
+		p,
+		i,
+		re,
+		a,
+		o,
+		P.configure({
+			placeholder: C.placeholder,
+			showOnlyWhenEditable: !0,
+			showOnlyCurrent: !1,
+			includeChildren: !0
+		}),
+		t,
+		F,
+		r,
+		n,
+		ee.configure(X),
+		c.configure(X),
+		s.configure(X),
+		l.configure(X),
+		u.configure(X),
+		te.configure({
+			toolbarOpts: J,
+			math: C.pluginProps?.math || {}
+		}),
+		j,
+		A,
+		N,
+		d.configure({
+			toolbarOpts: J,
+			imageHandling: {
+				disableImageAlignmentButtons: C.disableImageAlignmentButtons,
+				onDone: (e) => C.onDone?.(e.getHTML()),
+				onDelete: C.imageSupport && C.imageSupport.delete && ((e) => {
+					let { src: t } = e.attrs;
+					C.imageSupport.delete(t, (t) => {
+						q(e.pos);
+					});
+				}),
+				insertImageRequested: C.imageSupport && ((e, t, n) => {
+					let [r, i] = t, a = (t) => {
+						let n;
+						W && t && (n = C.onChange), q(i), n?.(e.getHTML());
+					};
+					e._insertingImage = !0, U((e) => [...e, r]), (() => {
+						let t = n(a), r = S(() => {
+							let t = () => window.removeEventListener("focus", r);
+							if (!e._insertingImage) {
+								t();
+								return;
+							}
+							q(i), e._insertingImage = !1, t();
+						}, 500);
+						window.addEventListener("focus", r), C.imageSupport.add(t);
+					})();
+				}),
+				maxImageWidth: C.maxImageWidth,
+				maxImageHeight: C.maxImageHeight
+			},
+			limit: 3
+		}),
+		f.configure({ uploadSoundSupport: C.uploadSoundSupport }),
+		ne.configure({ extraCSSRules: C.extraCSSRules })
+	], Z = C.spellCheck !== !1, Q = w({
+		extensions: se,
 		immediatelyRender: !1,
-		editorProps: { handleKeyDown(e, t) {
-			return T.onKeyDown ? T.onKeyDown(t) : !1;
-		} },
-		editable: !T.disabled,
-		content: e(T.markup),
+		editorProps: {
+			attributes: B(Z),
+			handleKeyDown(e, t) {
+				return C.onKeyDown ? C.onKeyDown(t) : !1;
+			}
+		},
+		editable: !C.disabled,
+		content: e(C.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && T.onChange?.(e.getHTML());
+			t.isDone && C.onChange?.(e.getHTML());
 		},
 		onBlur: ({ editor: e }) => {
-			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || X(e);
+			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || Y(e);
 		}
-	}, [T.charactersLimit]);
-	x(() => {
-		T.editorRef && T.editorRef(Q);
-	}, [T.editorRef, Q]), x(() => {
-		Q?.setEditable(!T.disabled);
-	}, [T.disabled, Q]), x(() => {
+	}, [C.charactersLimit]);
+	y(() => {
+		C.editorRef && C.editorRef(Q);
+	}, [C.editorRef, Q]), y(() => {
+		Q?.setEditable(!C.disabled);
+	}, [C.disabled, Q]), y(() => {
+		if (!Q) return;
+		let e = Q.options?.editorProps, t = B(Z);
+		e?.attributes?.spellcheck !== t.spellcheck && Q.setOptions({ editorProps: {
+			...e,
+			attributes: t
+		} });
+	}, [Z, Q]), y(() => {
 		if (!Q) return;
-		let t = e(T.markup);
+		let t = e(C.markup);
 		t !== Q.getHTML() && Q.commands.setContent(t, { emitUpdate: !1 });
-	}, [T.markup, Q]), x(() => {
-		Object.entries(V).forEach(([e, t]) => {
+	}, [C.markup, Q]), y(() => {
+		Object.entries(z).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let ae = D({
+	let ce = T({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
-	}), $ = S(() => {
-		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = T;
+	}), $ = b(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = C;
 		return {
-			width: _(t),
-			minWidth: _(e),
-			maxWidth: _(n),
-			height: _(i),
-			minHeight: _(r),
-			maxHeight: _(a)
+			width: m(t),
+			minWidth: m(e),
+			maxWidth: m(n),
+			height: m(i),
+			minHeight: m(r),
+			maxHeight: m(a)
 		};
-	}, [T]);
-	return /* @__PURE__ */ L(v, {
-		...T,
-		activePlugins: ie,
-		toolbarOpts: Y,
-		editorState: ae,
+	}, [C]);
+	return /* @__PURE__ */ I(h, {
+		...C,
+		activePlugins: oe,
+		toolbarOpts: J,
+		editorState: ce,
 		editor: Q,
-		children: Q && /* @__PURE__ */ L(U, {
+		children: Q && /* @__PURE__ */ I(H, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
-			showParagraph: O && !O.disabled,
-			separateParagraph: H && !H.disabled,
+			showParagraph: E && !E.disabled,
+			separateParagraph: V && !V.disabled,
 			editor: Q
 		})
 	});
-}, U = O(T, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, H = E(C, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {
@@ -302,4 +322,4 @@ var R = {
 	}
 }));
 //#endregion
-export { H as EditableHtml, H as default };
+export { V as EditableHtml, V as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "2.1.2-next.32",
+  "version": "2.1.2-next.33",
   "description": "",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
     "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@tiptap/extensions": "^3.20.0",
+    "@tiptap/extensions": "^3.30.3",
     "@tiptap/extension-list": "^3.20.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0"