@pie-lib/editable-html-tip-tap 2.1.1 → 2.1.2-next.0

package/dist/extensions/media.js

@@ -0,0 +1,149 @@
+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 s from "react-dom";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#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__ */ c(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, l = 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 = l;
+	}, f = /* @__PURE__ */ c(e, {
+		...o,
+		uploadSoundSupport: a.uploadSoundSupport,
+		type: r,
+		disablePortal: !0,
+		open: !0,
+		handleClose: u
+	});
+	s.render(f, n), document.body.appendChild(n);
+};
+function p({ editor: e, node: i, updateAttributes: a, deleteNode: o, options: s }) {
+	let { type: u, src: d, width: p, height: m, tag: h } = i.attrs;
+	return n(() => {
+		d || f({
+			...i.attrs,
+			options: s,
+			edit: !0,
+			callback: (t, n) => {
+				t ? a(n) : o(), e.chain().focus().run();
+			}
+		});
+	}, []), /* @__PURE__ */ l(r, {
+		"data-type": u,
+		style: {
+			width: p,
+			height: m
+		},
+		children: [h === "audio" ? /* @__PURE__ */ c("audio", {
+			controls: !0,
+			controlsList: "nodownload",
+			children: /* @__PURE__ */ c("source", {
+				type: "audio/mp3",
+				src: d
+			})
+		}) : /* @__PURE__ */ c("iframe", {
+			src: d,
+			allowFullScreen: !0,
+			frameBorder: "0",
+			width: p,
+			height: m
+		}), /* @__PURE__ */ c(t, {
+			onEdit: () => {
+				f({
+					...i.attrs,
+					options: s,
+					edit: !0,
+					callback: (t, n) => {
+						t && a(n), e.chain().focus().run();
+					}
+				});
+			},
+			onRemove: o
+		})]
+	});
+}
+//#endregion
+export { u as Media };

package/dist/extensions/responseArea.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @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>;

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] + 1;
+				f[a] += 1;
+				let c = _({
+					schema: n.schema,
+					typeName: a,
+					index: o
+				});
+				if (!c) return !1;
+				let { selection: l } = n, u = l.from, d = (e) => {
+					try {
+						return t.insert(e, c), e;
+					} catch {
+						return null;
+					}
+				}, 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));
+				else {
+					let e = m + c.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';
+import { deleteInlineDropdownByIndex } from './components/respArea/inlineDropdownUtils.js';
+export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS, deleteInlineDropdownByIndex };
+export default StyledEditor;

package/dist/index.js

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

package/dist/styles/editorContainerStyles.d.ts

@@ -0,0 +1,134 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/styles/editorContainerStyles.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.
+ */
+declare const styles: (theme: any) => {
+    root: {
+        position: string;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        '& [data-slate-editor="true"]': {
+            wordBreak: string;
+            overflow: string;
+            maxHeight: string;
+            padding: string;
+        };
+        '&:first-child': {
+            marginTop: number;
+        };
+        '& ul, & ol': {
+            padding: string;
+            margin: string;
+        };
+        '& ul li p, & ol li p': {
+            marginTop: string;
+            marginBottom: string;
+        };
+        '& h1, & h2, & h3, & h4, & h5, & h6': {
+            lineHeight: number;
+            marginTop: string;
+            textWrap: string;
+        };
+        '& h1, & h2': {
+            marginTop: string;
+            marginBottom: string;
+        };
+        '& h1': {
+            fontSize: string;
+        };
+        '& h2': {
+            fontSize: string;
+        };
+        '& h3': {
+            fontSize: string;
+        };
+        '& h4, & h5, & h6': {
+            fontSize: string;
+        };
+        '& code': {
+            backgroundColor: string;
+            borderRadius: string;
+            color: string;
+            fontSize: string;
+            padding: string;
+        };
+        '& pre': {
+            background: string;
+            borderRadius: string;
+            color: string;
+            fontFamily: string;
+            margin: string;
+            padding: string;
+            '& code': {
+                background: string;
+                color: string;
+                fontSize: string;
+                padding: number;
+            };
+        };
+        '& blockquote': {
+            background: string;
+            borderLeft: string;
+            margin: string;
+            padding: string;
+        };
+        '& hr': {
+            border: string;
+            borderTop: string;
+            margin: string;
+        };
+        '& table': {
+            tableLayout: string;
+            width: string;
+            borderCollapse: string;
+            color: any;
+            backgroundColor: any;
+        };
+        '& table:not([border="1"]) tr': {
+            borderTop: string;
+        };
+        '& td, th': {
+            padding: string;
+            textAlign: string;
+        };
+        '& table:not([border="1"]) td, th': {
+            border: string;
+        };
+    };
+    children: {
+        padding: string;
+    };
+    editorHolder: {
+        position: string;
+        padding: string;
+        overflowY: string;
+        color: any;
+        backgroundColor: any;
+    };
+    disabledScrollbar: {
+        '&::-webkit-scrollbar': {
+            display: string;
+        };
+        scrollbarWidth: string;
+        '-ms-overflow-style': string;
+    };
+    error: {
+        border: string;
+    };
+    noBorder: {
+        border: string;
+    };
+    noPadding: {
+        padding: number;
+    };
+    toolbarOnTop: {
+        marginTop: string;
+    };
+};
+export default styles;

package/dist/theme.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/theme.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 primary = "#304ffe";

package/dist/utils/helper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/utils/helper.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 normalizeInitialMarkup: (markup: any) => any;

package/dist/utils/helper.js

@@ -0,0 +1,27 @@
+//#region src/utils/helper.tsx
+var e = (e) => String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), t = (e) => {
+	let t = document.createElement("div");
+	t.innerHTML = e;
+	let n = Array.from(t.children);
+	return n.length < 2 || !n.every((e) => e.tagName === "DIV") || !n.every((e) => e.attributes.length === 0) || !n.every((e) => Array.from(e.children).every((e) => {
+		let t = e.tagName;
+		return [
+			"SPAN",
+			"B",
+			"I",
+			"EM",
+			"STRONG",
+			"U",
+			"SUB",
+			"SUP",
+			"A",
+			"CODE",
+			"BR"
+		].includes(t);
+	})) ? e : `<p>${n.map((e) => e.innerHTML).join("<br>")}</p>`;
+}, n = (n) => {
+	let r = String(n ?? "").trim();
+	return r ? /<[^>]+>/.test(r) ? t(r) : `<div>${e(r)}</div>` : "<div></div>";
+};
+//#endregion
+export { n as normalizeInitialMarkup };

package/dist/utils/size.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/utils/size.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 valueToSize: (v: any) => string | number | undefined;

package/dist/utils/size.js

@@ -0,0 +1,14 @@
+//#region src/utils/size.ts
+var e = (e) => {
+	if (!e) return;
+	let t = /^calc\((.*)\)$/;
+	if (typeof e == "string") {
+		if (e.endsWith("%")) return;
+		if (e.endsWith("px") || e.endsWith("vh") || e.endsWith("vw") || e.endsWith("ch") || e.endsWith("em") || e.match(t)) return e;
+		let n = parseInt(e, 10);
+		return Number.isNaN(n) ? n : `${n}px`;
+	}
+	if (typeof e == "number") return `${e}px`;
+};
+//#endregion
+export { e as valueToSize };