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

package/dist/components/CharacterPicker.js

@@ -37,18 +37,28 @@ function h({ editor: l, opts: m, onClose: h }) {
 		w();
 	}, []), r(() => {
 		if (!l) return;
-		let e = l.options.element.getBoundingClientRect(), t = document.body.getBoundingClientRect(), { from: n } = l.state.selection, r = l.view.coordsAtPos(n), i = e.top + Math.abs(t.top) + e.height + 60;
-		e.y > g.current.offsetHeight && (i = i - (g.current.offsetHeight + e.height) - 80), y({
-			top: i,
-			left: r.left
-		});
-		let a = l.view.dom, o = (e) => {
-			g.current && !g.current.contains(e.target) && !a.contains(e.target) && _.current();
-		}, s = setTimeout(() => {
-			document.addEventListener("click", o);
+		let e = l.options.element, t = l.view.dom, n = () => {
+			if (!g.current) return;
+			let t = e.getBoundingClientRect(), { from: n } = l.state.selection, r = l.view.coordsAtPos(n), i = g.current.offsetHeight, a = g.current.offsetWidth, o = window.innerHeight - (t.bottom + 60) >= i || t.top < i + 80 ? t.bottom + 60 : t.top - i - 20, s = r.left;
+			o = Math.max(8, Math.min(o, window.innerHeight - i - 8)), s = Math.max(8, Math.min(s, window.innerWidth - a - 8)), y({
+				top: o,
+				left: s
+			});
+		};
+		n();
+		let r = null, i = () => {
+			r === null && (r = requestAnimationFrame(() => {
+				r = null, n();
+			}));
+		};
+		window.addEventListener("scroll", i, !0), window.addEventListener("resize", i);
+		let a = (e) => {
+			g.current && !g.current.contains(e.target) && !t.contains(e.target) && _.current();
+		}, o = setTimeout(() => {
+			document.addEventListener("click", a);
 		});
 		return () => {
-			clearTimeout(s), document.removeEventListener("click", o);
+			clearTimeout(o), r !== null && cancelAnimationFrame(r), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i), document.removeEventListener("click", a);
 		};
 	}, [l]);
 	let T = (e, t) => x({
@@ -61,11 +71,11 @@ function h({ editor: l, opts: m, onClose: h }) {
 		"data-toolbar-for": l.instanceId,
 		style: {
 			visibility: v.top === 0 && v.left === 0 ? "hidden" : "initial",
-			position: "absolute",
+			position: "fixed",
 			top: `${v.top}px`,
 			left: `${v.left}px`,
 			maxWidth: "500px",
-			zIndex: 99
+			zIndex: 1e3
 		},
 		children: /* @__PURE__ */ d("div", { children: /* @__PURE__ */ d(p, {
 			keyPadCharacterRef: m.keyPadCharacterRef,

package/dist/components/EditableHtml.js

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