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

package/dist/extensions/math.js

@@ -1,19 +1,20 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import { NodeViewWrapper as r, ReactNodeViewRenderer as i } from "@tiptap/react";
-import { Node as a } from "@tiptap/core";
-import { NodeSelection as o, Plugin as s, PluginKey as c, TextSelection as l } from "prosemirror-state";
-import u from "react-dom";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { wrapMath as p } from "@pie-element/shared-math-rendering-mathjax";
-import { MathPreview as m, MathToolbar as h } from "@pie-lib/math-toolbar";
+import { setToolbarOpened as e } from "../utils/toolbar.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { NodeViewWrapper as i, ReactNodeViewRenderer as a } from "@tiptap/react";
+import { Node as o } from "@tiptap/core";
+import { NodeSelection as s, Plugin as c, PluginKey as l, TextSelection as u } from "prosemirror-state";
+import d from "react-dom";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { wrapMath as m } from "@pie-element/shared-math-rendering-mathjax";
+import { MathPreview as h, MathToolbar as g } from "@pie-lib/math-toolbar";
 //#region src/extensions/math.tsx
-var g = new c("ensureTextAfterMath"), _ = (e = []) => e.map((e) => ({
+var _ = new l("ensureTextAfterMath"), v = (e = []) => e.map((e) => ({
 	name: e,
 	latex: e,
 	write: e,
 	label: e
-})), v = (e) => new s({
-	key: g,
+})), y = (e) => new c({
+	key: _,
 	appendTransaction: (t, n, r) => {
 		if (!t.some((e) => e.docChanged)) return null;
 		let i = r.tr, a = !1;
@@ -24,21 +25,34 @@ var g = new c("ensureTextAfterMath"), _ = (e = []) => e.map((e) => ({
 			}
 		}), a ? i : null;
 	}
-}), y = new s({
-	key: new c("zeroWidthSpaceHandling"),
+}), b = (e, t) => {
+	let n;
+	for (n = t; n > 0; n--) {
+		let t = e.nodeAt(n);
+		if (t?.type?.name === "text" && t.textContent !== "​") return -1;
+		if (t && t?.type?.name !== "text") break;
+	}
+	return n;
+}, x = new c({
+	key: new l("zeroWidthSpaceHandling"),
 	props: { handleKeyDown(e, t) {
-		let { state: n, dispatch: r } = e, { selection: i, doc: a } = n, { from: s, empty: c } = i;
-		if (c && t.key === "Backspace" && s > 0 && a.textBetween(s - 1, s, "", "") === "​") return r(n.tr.delete(s - 2, s)), !0;
-		if (c && t.key === "ArrowLeft" && s > 0 && a.textBetween(s - 1, s, "", "") === "​") {
-			let e = s - 1, t = n.doc.resolve(e - 1), i = t.nodeAfter || t.nodeBefore;
-			if (i) {
-				let t = e - i.nodeSize, a = n.doc.resolve(t);
-				return r(n.tr.setSelection(o.create(n.doc, a.pos))), !0;
-			} else return r(n.tr.setSelection(l.create(n.doc, s - 2))), !0;
+		let { state: n, dispatch: r } = e, { selection: i, doc: a } = n, { from: o, empty: c } = i;
+		if (c && t.key === "Backspace" && o > 0) {
+			let e = b(a, o);
+			return e === -1 ? !1 : (r(n.tr.delete(e, o)), !0);
+		}
+		if (c && t.key === "ArrowLeft" && o > 0) {
+			let e = b(a, o);
+			if (e === -1) return !1;
+			let t = n.doc.resolve(e);
+			if (t.nodeAfter || t.nodeBefore) {
+				let t = n.doc.resolve(e);
+				return r(n.tr.setSelection(s.create(n.doc, t.pos))), !0;
+			} else return r(n.tr.setSelection(u.create(n.doc, o - 2))), !0;
 		}
 		return !1;
 	} }
-}), b = a.create({
+}), S = o.create({
 	name: "math",
 	group: "inline",
 	inline: !0,
@@ -51,7 +65,7 @@ var g = new c("ensureTextAfterMath"), _ = (e = []) => e.map((e) => ({
 		};
 	},
 	addProseMirrorPlugins() {
-		return [v(this.name), y];
+		return [y(this.name), x];
 	},
 	parseHTML() {
 		return [{
@@ -63,13 +77,13 @@ var g = new c("ensureTextAfterMath"), _ = (e = []) => e.map((e) => ({
 		}];
 	},
 	addCommands() {
-		return { insertMath: (e = "") => ({ tr: t, editor: n, dispatch: r }) => {
-			let { state: i } = n.view, a = i.schema.nodes.math.create({ latex: e }), { selection: s } = i, c = s.$from.pos;
-			if (t.insert(c, a), a?.type?.name === this.name) {
-				let e = o.create(t.doc, s.$from.pos);
-				t.setSelection(e);
+		return { insertMath: (t = "") => ({ tr: n, editor: r, dispatch: i }) => {
+			let { state: a } = r.view, o = a.schema.nodes.math.create({ latex: t }), { selection: c } = a, l = c.$from.pos;
+			if (n.insert(l, o), o?.type?.name === this.name) {
+				let e = s.create(n.doc, c.$from.pos);
+				n.setSelection(e);
 			}
-			return r(t), !0;
+			return i(n), e(r, !0), !0;
 		} };
 	},
 	renderHTML({ HTMLAttributes: e }) {
@@ -82,77 +96,118 @@ var g = new c("ensureTextAfterMath"), _ = (e = []) => e.map((e) => ({
 				"data-latex": "",
 				"data-raw": e.latex
 			},
-			p(e.latex, e.wrapper)
+			m(e.latex, e.wrapper)
 		];
 	},
 	addNodeView() {
-		return i((e) => /* @__PURE__ */ d(x, {
+		return a((e) => /* @__PURE__ */ f(C, {
 			...e,
 			options: this.options
 		}));
 	}
-}), x = (i) => {
-	let { node: a, updateAttributes: o, editor: s, selected: c, options: p } = i, [g, v] = n(c), y = t(null), [b, x] = n({
+}), C = (a) => {
+	let { node: o, updateAttributes: s, editor: c, selected: l, options: m, getPos: _ } = a, [y, b] = r(l), x = n(null), S = n(null), C = n(Date.now()), [w, T] = r({
 		top: 0,
 		left: 0
-	}), { math: S = {} } = p || {}, { keypadMode: C, controlledKeypadMode: w = !0, customKeys: T = [], keyPadCharacterRef: E, setKeypadInteraction: D } = S, O = a.attrs.latex || "", k = (e) => {
-		o({ latex: e });
-	}, A = (e) => {
-		o({ latex: e }), v(!1), s._toolbarOpened = !1;
-		let { selection: t, tr: n, doc: r } = s.state, i = l.create(r, t.from + 1);
-		n.setSelection(i), s.view.dispatch(n), s.commands.focus();
+	}), { math: E = {} } = m || {}, { keypadMode: D, controlledKeypadMode: O = !0, customKeys: k = [], keyPadCharacterRef: A, setKeypadInteraction: j } = E, M = o.attrs.latex || "", N = (e) => {
+		s({ latex: e });
+	}, P = (e, { moveCursorAfterNode: t = !0 } = {}) => {
+		if (s({ latex: e }), b(!1), t && typeof _ == "function") {
+			let e = _(), { doc: t } = c.state, n = u.create(t, e + o.nodeSize), r = c.state.tr.setSelection(n);
+			c.view.dispatch(r);
+		}
+		c.commands.focus();
 	};
-	return e(() => {
-		c && v(!0);
-	}, [c]), e(() => {
-		s._toolbarOpened = !!g;
-	}, [g]), e(() => {
-		let { from: e } = s.state.selection;
-		x({
-			top: 40,
-			left: s.view.coordsAtPos(e).left
-		});
-		let t = (e) => {
-			let t = e?.target, n = (document.querySelectorAll?.("[id^=\"equation-editor-select\"][id*=\"listbox\"], [aria-labelledby=\"equation-editor-label\"][role=\"listbox\"]") || []).length > 0, r = !!(t?.id && t.id.includes("equation-editor-select")) || !!t?.closest?.("[id*=\"equation-editor-select\"]"), i = !!t?.closest?.(".math-node");
-			y.current && !y.current.contains(t) && !t?.closest?.("[data-inline-node]") && !n && !r && !i && (v(!1), A(a.attrs.latex));
+	return t(() => {
+		if (!l) return;
+		let { selection: e } = c.state;
+		e.node?.type?.name === "math" && b(!0);
+	}, [l, c]), t(() => {
+		e(c, l || y);
+	}, [
+		c,
+		y,
+		l
+	]), t(() => {
+		if (!c || !y) {
+			T({
+				top: 0,
+				left: 0
+			});
+			return;
+		}
+		let e = () => {
+			if (!x.current) return;
+			let { from: e } = c.state.selection, t = c.view.coordsAtPos(e), n = S.current?.getBoundingClientRect?.(), r = n?.height ? n.top : t.top, i = n?.width ? n.left : t.left, a = n?.height ? n.bottom : t.bottom ?? t.top, o = x.current.offsetHeight, s = x.current.offsetWidth, l = window.innerHeight - (a + 0) >= o ? a + 0 : r - o - 0, u = i;
+			l = Math.max(8, Math.min(l, window.innerHeight - o - 8)), u = Math.max(8, Math.min(u, window.innerWidth - s - 8));
+			let d = (c._tiptapContainerEl || document.body).getBoundingClientRect();
+			T({
+				top: l - d.top,
+				left: u - d.left
+			});
+		};
+		e();
+		let t = null, n = () => {
+			t === null && (t = requestAnimationFrame(() => {
+				t = null, e();
+			}));
+		};
+		return t = requestAnimationFrame(() => {
+			t = null, e();
+		}), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
+			t !== null && cancelAnimationFrame(t), window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n);
+		};
+	}, [c, y]), t(() => {
+		let e = (e) => {
+			let t = e?.target, n = (document.querySelectorAll?.("[id^=\"equation-editor-select\"][id*=\"listbox\"], [aria-labelledby=\"equation-editor-label\"][role=\"listbox\"]") || []).length > 0, r = !!(t?.id && t.id.includes("equation-editor-select")) || !!t?.closest?.("[id*=\"equation-editor-select\"]"), i = !!t?.closest?.(`.math-node-${C.current}`);
+			if (x.current && !x.current.contains(t) && !t?.closest?.("[data-inline-node]") && !n && !r && !i) {
+				b(!1);
+				let e = !!c?.view?.dom?.contains(t);
+				P(o.attrs.latex, { moveCursorAfterNode: !e });
+			}
 		};
-		return g ? document.addEventListener("click", t) : document.removeEventListener("click", t), () => document.removeEventListener("click", t);
-	}, [s, g]), /* @__PURE__ */ f(r, {
-		className: "math-node",
+		return y ? document.addEventListener("click", e) : document.removeEventListener("click", e), () => document.removeEventListener("click", e);
+	}, [
+		c,
+		y,
+		o
+	]), /* @__PURE__ */ p(i, {
+		className: `math-node-${C.current}`,
 		style: {
 			display: "inline-flex",
 			cursor: "pointer",
 			margin: "0 4px"
 		},
-		"data-selected": c,
-		children: [/* @__PURE__ */ d("div", {
-			onClick: () => v(!0),
+		"data-selected": l,
+		children: [/* @__PURE__ */ f("div", {
+			ref: S,
+			onClick: () => b(!0),
 			contentEditable: !1,
-			children: /* @__PURE__ */ d(m, { latex: O })
-		}), g && u.createPortal(/* @__PURE__ */ d("div", {
-			ref: y,
-			"data-toolbar-for": s.instanceId,
+			children: /* @__PURE__ */ f(h, { latex: M })
+		}), y && d.createPortal(/* @__PURE__ */ f("div", {
+			ref: x,
+			"data-toolbar-for": c.instanceId,
 			style: {
 				position: "absolute",
-				top: `${b.top}px`,
-				left: `${b.left}px`,
-				zIndex: 20,
+				top: `${w.top}px`,
+				left: `${w.left}px`,
+				zIndex: 1e3,
 				background: "var(--editable-html-toolbar-bg, #efefef)",
 				boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)"
 			},
-			children: /* @__PURE__ */ d(h, {
-				latex: O,
+			children: /* @__PURE__ */ f(g, {
+				latex: M,
 				autoFocus: !0,
-				onChange: k,
-				onDone: A,
-				keypadMode: C,
-				controlledKeypadMode: w,
-				additionalKeys: _(T),
-				keyPadCharacterRef: E,
-				setKeypadInteraction: D
+				onChange: N,
+				onDone: P,
+				keypadMode: D,
+				controlledKeypadMode: O,
+				additionalKeys: v(k),
+				keyPadCharacterRef: A,
+				setKeypadInteraction: j
 			})
-		}), s?._tiptapContainerEl || document.body)]
+		}), c?._tiptapContainerEl || document.body)]
 	});
 };
 //#endregion
-export { b as MathNode };
+export { y as EnsureTextAfterMathPlugin, S as MathNode, C as MathNodeView, x as ZeroWidthSpaceHandlingPlugin };

package/dist/extensions/media.js

@@ -1,4 +1,4 @@
-import e from "../components/media/MediaDialog.js";
+import { MediaDialog as e } from "../components/media/MediaDialog.js";
 import t from "../components/media/MediaToolbar.js";
 import { useEffect as n } from "react";
 import { NodeViewWrapper as r, ReactNodeViewRenderer as i } from "@tiptap/react";
@@ -146,4 +146,4 @@ function p({ editor: e, node: i, updateAttributes: a, deleteNode: o, options: s
 	});
 }
 //#endregion
-export { u as Media };
+export { u as Media, p as default, f as insertDialog };

package/dist/extensions/responseArea.js

@@ -92,11 +92,7 @@ var f = {}, p = (e) => String(e || "").replace(/-/g, "_"), m = (e) => e && e.att
 					}
 				}, m = d(u);
 				if (m ??= d(t.doc.content.size), m == null) return !1;
-				if ([
-					"math_templated",
-					"inline_dropdown",
-					"explicit_constructed_response"
-				].includes(a)) t.setSelection(s.create(t.doc, m));
+				if (["inline_dropdown", "explicit_constructed_response"].includes(a)) t.setSelection(s.create(t.doc, m));
 				else {
 					let e = m + c.nodeSize;
 					t.setSelection(v(t.doc, e));

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ALL_PLUGINS as e, DEFAULT_PLUGINS as t } from "./extensions/index.js";
-import n from "./components/EditableHtml.js";
+import { EditableHtml as n } from "./components/EditableHtml.js";
 import { deleteInlineDropdownByIndex as r } from "./components/respArea/inlineDropdownUtils.js";
 //#region src/index.tsx
 var i = n;

package/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js

@@ -13,4 +13,4 @@ function t() {
 	return i;
 }
 //#endregion
-export { t as default };
+export { t as clsx, t as default };

package/dist/utils/toolbar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/utils/toolbar.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const TOOLBAR_OPENED_META_KEY = "toolbarOpenedChanged";
+export declare const setToolbarOpened: (editor: any, opened: any) => void;

package/dist/utils/toolbar.js

@@ -0,0 +1,7 @@
+//#region src/utils/toolbar.ts
+var e = "toolbarOpenedChanged", t = (t, n) => {
+	let r = !!n;
+	t._toolbarOpened !== r && (t._toolbarOpened = r, t?.view && t?.state?.tr && t.view.dispatch(t.state.tr.setMeta(e, !0)));
+};
+//#endregion
+export { e as TOOLBAR_OPENED_META_KEY, t as setToolbarOpened };

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "2.1.2-next.31",
+  "version": "2.1.2-next.33",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pie-framework/pie-elements-ng.git",
+    "directory": "packages/lib-react/editable-html-tip-tap"
+  },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "4.0.3-next.38",
-    "@pie-lib/math-input": "8.1.1-next.3",
-    "@pie-lib/math-toolbar": "3.0.3-next.38",
-    "@pie-lib/render-ui": "6.1.1-next.38",
+    "@pie-lib/drag": "4.0.3-next.39",
+    "@pie-lib/math-input": "8.1.1-next.4",
+    "@pie-lib/math-toolbar": "3.0.3-next.39",
+    "@pie-lib/render-ui": "6.1.1-next.39",
     "@tiptap/core": "3.20.0",
     "@tiptap/extension-character-count": "3.20.0",
     "@tiptap/extension-color": "3.20.0",
@@ -23,10 +28,10 @@
     "@tiptap/extension-table": "3.20.0",
     "@tiptap/extension-table-cell": "3.20.0",
     "@tiptap/extension-table-header": "3.20.0",
-    "@tiptap/extension-table-row": "3.20.0",
+    "@tiptap/extension-table-row": "3.30.1",
     "@tiptap/extension-text-align": "3.20.0",
     "@tiptap/extension-text-style": "3.20.0",
-    "@tiptap/pm": "3.20.0",
+    "@tiptap/pm": "3.30.2",
     "@tiptap/react": "3.20.0",
     "@tiptap/starter-kit": "3.20.0",
     "change-case": "^3.0.2",
@@ -43,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"