@pie-lib/editable-html-tip-tap 0.1.0

package/dist/extensions/math.js

@@ -0,0 +1,150 @@
+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 { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { wrapMath as f } from "@pie-element/shared-math-rendering-mathjax";
+import p from "react-dom";
+import { MathPreview as m, MathToolbar as h } from "@pie-lib/math-toolbar";
+//#region src/extensions/math.tsx
+var g = new c("ensureTextAfterMath"), _ = (e) => new s({
+	key: g,
+	appendTransaction: (t, n, r) => {
+		if (!t.some((e) => e.docChanged)) return null;
+		let i = r.tr, a = !1;
+		return r.doc.descendants((t, n) => {
+			if (t.type.name === e) {
+				let e = n + t.nodeSize, o = r.doc.nodeAt(e);
+				(!o || o.type.name !== "text") && (i.insert(e, r.schema.text("​")), a = !0);
+			}
+		}), a ? i : null;
+	}
+}), v = new s({
+	key: new c("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;
+		}
+		return !1;
+	} }
+}), y = a.create({
+	name: "math",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			latex: { default: "" },
+			wrapper: { default: null },
+			html: { default: null }
+		};
+	},
+	addProseMirrorPlugins() {
+		return [_(this.name), v];
+	},
+	parseHTML() {
+		return [{
+			tag: "span[data-latex]",
+			getAttrs: (e) => ({ latex: e.getAttribute("data-raw") || e.textContent })
+		}, {
+			tag: "span[data-type=\"mathml\"]",
+			getAttrs: (e) => ({ html: e.innerHTML })
+		}];
+	},
+	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 r(t), !0;
+		} };
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return e.html ? ["span", {
+			"data-type": "mathml",
+			dangerouslySetInnerHTML: { __html: e.html }
+		}] : [
+			"span",
+			{
+				"data-latex": "",
+				"data-raw": e.latex
+			},
+			f(e.latex, e.wrapper)
+		];
+	},
+	addNodeView() {
+		return i((e) => /* @__PURE__ */ u(b, {
+			...e,
+			options: this.options
+		}));
+	}
+}), b = (i) => {
+	let { node: a, updateAttributes: o, editor: s, selected: c, options: f } = i, [g, _] = n(c), v = t(null), [y, b] = n({
+		top: 0,
+		left: 0
+	}), x = a.attrs.latex || "";
+	e(() => {
+		c && _(!0);
+	}, [c]), e(() => {
+		s._toolbarOpened = !!g;
+	}, [g]), e(() => {
+		let e = document.body.getBoundingClientRect(), { from: t } = s.state.selection, n = s.view.coordsAtPos(t);
+		b({
+			top: n.top + Math.abs(e.top) + 40,
+			left: n.left
+		});
+		let r = (e) => {
+			v.current && !v.current.contains(e.target) && !e.target.closest("[data-inline-node]") && _(!1);
+		};
+		return g ? document.addEventListener("click", r) : document.removeEventListener("click", r), () => document.removeEventListener("click", r);
+	}, [s, g]);
+	let S = (e) => {
+		o({ latex: e });
+	}, C = (e) => {
+		o({ latex: e }), _(!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();
+	};
+	return /* @__PURE__ */ d(r, {
+		className: "math-node",
+		style: {
+			display: "inline-flex",
+			cursor: "pointer",
+			margin: "0 4px"
+		},
+		"data-selected": c,
+		children: [/* @__PURE__ */ u("div", {
+			onClick: () => _(!0),
+			contentEditable: !1,
+			children: /* @__PURE__ */ u(m, { latex: x })
+		}), g && p.createPortal(/* @__PURE__ */ u("div", {
+			ref: v,
+			"data-toolbar-for": s.instanceId,
+			style: {
+				position: "absolute",
+				top: `${y.top}px`,
+				left: `${y.left}px`,
+				zIndex: 20,
+				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__ */ u(h, {
+				latex: x,
+				autoFocus: !0,
+				onChange: S,
+				onDone: C,
+				keypadMode: "basic"
+			})
+		}), document.body)]
+	});
+};
+//#endregion
+export { y as MathNode };

package/dist/extensions/media.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/media.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.
+ */
+import { Node } from '@tiptap/core';
+export declare const Media: Node<any, any>;
+export declare const insertDialog: (props: any) => void;
+export default function MediaNodeView({ editor, node, updateAttributes, deleteNode, options }: {
+    editor: any;
+    node: any;
+    updateAttributes: any;
+    deleteNode: any;
+    options: any;
+}): JSX.Element;
+//# sourceMappingURL=media.d.ts.map

package/dist/extensions/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/extensions/media.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,eAAO,MAAM,KAAK,gBAyFhB,CAAC;AAQH,eAAO,MAAM,YAAY,GAAI,UAAK,SA8BjC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,OAAO,EAAE;;;;;;CAAA,eAmD5F"}

package/dist/extensions/media.js

@@ -0,0 +1,147 @@
+import 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";
+import { Node as a, mergeAttributes as o } from "@tiptap/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "react-dom";
+//#region src/extensions/media.tsx
+var u = a.create({
+	name: "media",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			type: { default: "video" },
+			src: { default: null },
+			width: { default: null },
+			height: { default: null },
+			title: { default: null },
+			starts: { default: null },
+			ends: { default: null },
+			editing: { default: !1 },
+			tag: { default: "iframe" },
+			url: { default: null }
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "iframe[data-type=\"video\"]",
+			getAttrs: (e) => ({
+				type: "video",
+				tag: "iframe",
+				src: e.getAttribute("src"),
+				width: e.getAttribute("width"),
+				height: e.getAttribute("height"),
+				title: e.dataset.title,
+				starts: e.dataset.starts,
+				ends: e.dataset.ends,
+				url: e.dataset.url
+			})
+		}, {
+			tag: "audio",
+			getAttrs: (e) => ({
+				type: "audio",
+				tag: "audio",
+				src: e.querySelector("source")?.getAttribute("src")
+			})
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		let { tag: t, src: n, width: r, height: i } = e;
+		return t === "audio" ? [
+			"audio",
+			{
+				controls: "controls",
+				controlsList: "nodownload"
+			},
+			["source", {
+				src: n,
+				type: "audio/mp3"
+			}]
+		] : ["iframe", o({
+			"data-type": "video",
+			frameborder: "0",
+			allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+			allowfullscreen: "",
+			src: n
+		}, r ? { width: r } : {}, i ? { height: i } : {})];
+	},
+	addCommands() {
+		return {
+			insertMedia: (e) => ({ commands: t }) => t.insertContent({
+				type: this.name,
+				attrs: e
+			}),
+			updateMedia: (e) => ({ commands: t }) => t.updateAttributes(this.name, e)
+		};
+	},
+	addNodeView() {
+		return i((e) => /* @__PURE__ */ s(p, {
+			...e,
+			options: this.options
+		}));
+	}
+}), d = () => {
+	document.querySelectorAll(".insert-media-dialog").forEach((e) => e.remove());
+}, f = (t) => {
+	let n = document.createElement("div"), { type: r, callback: i, options: a, ...o } = t, c = document.body.style.overflow;
+	d(), n.className = "insert-media-dialog", document.body.style.overflow = "hidden";
+	let u = (e, t) => {
+		i(e, t), n.remove(), document.body.style.overflow = c;
+	}, f = /* @__PURE__ */ s(e, {
+		...o,
+		uploadSoundSupport: a.uploadSoundSupport,
+		type: r,
+		disablePortal: !0,
+		open: !0,
+		handleClose: u
+	});
+	l.render(f, n), document.body.appendChild(n);
+};
+function p({ editor: e, node: i, updateAttributes: a, deleteNode: o, options: l }) {
+	let { type: u, src: d, width: p, height: m, tag: h } = i.attrs, g = () => {
+		f({
+			...i.attrs,
+			options: l,
+			edit: !0,
+			callback: (t, n) => {
+				t && a(n), e.chain().focus().run();
+			}
+		});
+	};
+	return n(() => {
+		d || f({
+			...i.attrs,
+			options: l,
+			edit: !0,
+			callback: (t, n) => {
+				t ? a(n) : o(), e.chain().focus().run();
+			}
+		});
+	}, []), /* @__PURE__ */ c(r, {
+		"data-type": u,
+		style: {
+			width: p,
+			height: m
+		},
+		children: [h === "audio" ? /* @__PURE__ */ s("audio", {
+			controls: !0,
+			controlsList: "nodownload",
+			children: /* @__PURE__ */ s("source", {
+				type: "audio/mp3",
+				src: d
+			})
+		}) : /* @__PURE__ */ s("iframe", {
+			src: d,
+			allowFullScreen: !0,
+			frameBorder: "0"
+		}), /* @__PURE__ */ s(t, {
+			onEdit: g,
+			onRemove: o
+		})]
+	});
+}
+//#endregion
+export { u as Media };

package/dist/extensions/responseArea.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/responseArea.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.
+ */
+import { Extension } from '@tiptap/core';
+import { Node } from '@tiptap/react';
+export declare const ResponseAreaExtension: Extension<any, any>;
+/**
+ * ExplicitConstructedResponse Node
+ */
+export declare const ExplicitConstructedResponseNode: Node<any, any>;
+/**
+ * MathTemplated Node
+ */
+export declare const MathTemplatedNode: Node<any, any>;
+/**
+ * DragInTheBlank Node
+ */
+export declare const DragInTheBlankNode: Node<any, any>;
+/**
+ * InlineDropdown Node
+ */
+export declare const InlineDropdownNode: Node<any, any>;
+//# sourceMappingURL=responseArea.d.ts.map

package/dist/extensions/responseArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responseArea.d.ts","sourceRoot":"","sources":["../../src/extensions/responseArea.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAyB,MAAM,eAAe,CAAC;AAsD5D,eAAO,MAAM,qBAAqB,qBAsKhC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,+BAA+B,gBAoC1C,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,gBAoC5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB,gBA0C7B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB,gBAoC7B,CAAC"}

package/dist/extensions/responseArea.js

@@ -0,0 +1,259 @@
+import e from "../components/respArea/ExplicitConstructedResponse.js";
+import t from "../components/respArea/DragInTheBlank/DragInTheBlank.js";
+import n from "../components/respArea/InlineDropdown.js";
+import r from "../components/respArea/MathTemplated.js";
+import "react";
+import { Node as i, ReactNodeViewRenderer as a } from "@tiptap/react";
+import { Extension as o } from "@tiptap/core";
+import { NodeSelection as s, Plugin as c, PluginKey as l, TextSelection as u } from "prosemirror-state";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/extensions/responseArea.tsx
+var f = {}, p = (e) => String(e || "").replace(/-/g, "_"), m = (e) => e && e.attrs && e.attrs.index != null ? String(e.attrs.index) : null, h = (e, t) => {
+	let n = [];
+	return e.descendants((e, r) => {
+		if (e.type && e.type.name === t) {
+			let t = m(e);
+			t != null && n.push({
+				index: t,
+				pos: r,
+				node: e
+			});
+		}
+		return !0;
+	}), n;
+}, g = (e, t) => {
+	let n = 0;
+	return e.descendants((e) => (e.type && e.type.name === t && (n += 1), !0)), n;
+}, _ = ({ schema: e, typeName: t, index: n }) => {
+	let r = e.nodes[t];
+	return r ? r.create({
+		index: String(n),
+		id: String(n),
+		value: ""
+	}) : null;
+}, v = (e, t) => {
+	let n = e.resolve(Math.min(t, e.content.size));
+	return u.near(n, 1);
+}, y = o.create({
+	name: "responseArea",
+	addOptions() {
+		return {
+			maxResponseAreas: null,
+			error: null,
+			options: null,
+			respAreaToolbar: null,
+			onHandleAreaChange: null
+		};
+	},
+	addProseMirrorPlugins() {
+		if (!this.options.type) return [];
+		let e = p(this.options.type);
+		return [new c({
+			key: new l(`response-area-watcher:${e}`),
+			view: (t) => (f[e] === void 0 && (f[e] = 0, t.state.doc.descendants((t) => {
+				if (t.type && t.type.name === e) {
+					let n = m(t);
+					if (n != null) {
+						let t = parseInt(n, 10);
+						!Number.isNaN(t) && t > f[e] && (f[e] = t);
+					}
+				}
+				return !0;
+			})), { update: (t, n) => {
+				let r = t.state;
+				if (n.doc.eq(r.doc)) return;
+				let i = h(r.doc, e), a = h(n.doc, e);
+				if (this.options.toolbar && (this.options.toolbar.disabled = i.length >= this.options.maxResponseAreas), a.length > i.length) {
+					let e = new Set(i.map((e) => e.index)), t = a.filter((t) => !e.has(t.index));
+					t.length && typeof this.options.onHandleAreaChange == "function" && this.options.onHandleAreaChange(t);
+				}
+			} })
+		})];
+	},
+	addCommands() {
+		return {
+			insertResponseArea: (e) => ({ tr: t, state: n, dispatch: r, commands: i }) => {
+				let a = p(e);
+				if (g(n.doc, a) >= this.options.maxResponseAreas) return !1;
+				f[a] === void 0 && (f[a] = 0);
+				let o = f[a], c = o === 0 ? o : o + 1;
+				f[a] += 1;
+				let l = _({
+					schema: n.schema,
+					typeName: a,
+					index: c
+				});
+				if (!l) return !1;
+				let { selection: u } = n, d = u.from, m = (e) => {
+					try {
+						return t.insert(e, l), e;
+					} catch {
+						return null;
+					}
+				}, h = m(d);
+				if (h ??= m(t.doc.content.size), h == null) return !1;
+				if ([
+					"math_templated",
+					"inline_dropdown",
+					"explicit_constructed_response"
+				].includes(a)) t.setSelection(s.create(t.doc, h));
+				else {
+					let e = h + l.nodeSize;
+					t.setSelection(v(t.doc, e));
+				}
+				return r && (i.focus(), r(t)), !0;
+			},
+			refreshResponseArea: () => ({ tr: e, state: t, commands: n, dispatch: r }) => {
+				let { selection: i } = t, a = i.$from.nodeAfter, o = i.from;
+				return e.setNodeMarkup(o, void 0, {
+					...a?.attrs,
+					updated: `${Date.now()}`
+				}), e.setSelection(s.create(e.doc, o)), r && (n.focus(), r(e)), !0;
+			}
+		};
+	}
+}), b = i.create({
+	name: "explicit_constructed_response",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			index: { default: null },
+			value: { default: "" },
+			updated: { default: "" }
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "span[data-type=\"explicit_constructed_response\"]",
+			getAttrs: (e) => ({
+				index: e.dataset.index,
+				value: e.dataset.value
+			})
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", {
+			"data-type": "explicit_constructed_response",
+			"data-index": e.index,
+			"data-value": e.value
+		}];
+	},
+	addNodeView() {
+		return a((t) => /* @__PURE__ */ d(e, {
+			...t,
+			options: this.options
+		}));
+	}
+}), x = i.create({
+	name: "math_templated",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			index: { default: null },
+			value: { default: "" },
+			updated: { default: "" }
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "span[data-type=\"math_templated\"]",
+			getAttrs: (e) => ({
+				index: e.dataset.index,
+				value: e.dataset.value
+			})
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", {
+			"data-type": "math_templated",
+			"data-index": e.index,
+			"data-value": e.value
+		}];
+	},
+	addNodeView() {
+		return a((e) => /* @__PURE__ */ d(r, {
+			...e,
+			options: this.options
+		}));
+	}
+}), S = i.create({
+	name: "drag_in_the_blank",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			index: { default: null },
+			id: { default: null },
+			value: { default: "" },
+			inTable: { default: null },
+			updated: { default: "" }
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "span[data-type=\"drag_in_the_blank\"]",
+			getAttrs: (e) => ({
+				index: e.dataset.index,
+				id: e.dataset.id,
+				value: e.dataset.value,
+				inTable: e.dataset.inTable
+			})
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", {
+			"data-type": "drag_in_the_blank",
+			"data-index": e.index,
+			"data-id": e.id,
+			"data-value": e.value,
+			"data-in-table": e.inTable
+		}];
+	},
+	addNodeView() {
+		return a((e) => /* @__PURE__ */ d(t, {
+			...e,
+			options: this.options
+		}));
+	}
+}), C = i.create({
+	name: "inline_dropdown",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			index: { default: null },
+			value: { default: "" },
+			updated: { default: "" }
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "span[data-type=\"inline_dropdown\"]",
+			getAttrs: (e) => ({
+				index: e.dataset.index,
+				value: e.dataset.value
+			})
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", {
+			"data-type": "inline_dropdown",
+			"data-index": e.index,
+			"data-value": e.value
+		}];
+	},
+	addNodeView() {
+		return a((e) => /* @__PURE__ */ d(n, {
+			...e,
+			options: this.options
+		}));
+	}
+});
+//#endregion
+export { S as DragInTheBlankNode, b as ExplicitConstructedResponseNode, C as InlineDropdownNode, x as MathTemplatedNode, y as ResponseAreaExtension };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/index.jsx
+ * @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.
+ */
+import StyledEditor, { EditableHtml } from './components/EditableHtml.js';
+import { ALL_PLUGINS, DEFAULT_PLUGINS } from './extensions/index.js';
+export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS };
+export default StyledEditor;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,YAAY,EAAE,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;AACtD,eAAe,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+import { ALL_PLUGINS as e, DEFAULT_PLUGINS as t } from "./extensions/index.js";
+import n from "./components/EditableHtml.js";
+//#region src/index.tsx
+var r = n;
+//#endregion
+export { e as ALL_PLUGINS, t as DEFAULT_PLUGINS, n as EditableHtml, r as default };