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

package/dist/extensions/image-component.js

@@ -0,0 +1,220 @@
+import e from "./custom-toolbar-wrapper.js";
+import t from "../components/image/InsertImageHandler.js";
+import n from "../components/image/ImageToolbar.js";
+import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { NodeViewWrapper as c } from "@tiptap/react";
+import { styled as l } from "@mui/material/styles";
+import u from "react-dom";
+import d from "prop-types";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "lodash-es/isEqual.js";
+import h from "debug";
+import g from "@mui/material/LinearProgress";
+//#region src/extensions/image-component.tsx
+h("@pie-lib:editable-html:plugins:image:component");
+var _ = l(g, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress: e }) => ({
+	position: "absolute",
+	left: "0",
+	width: "fit-content",
+	top: "0%",
+	transition: "opacity 200ms linear",
+	...e && { opacity: 0 }
+})), v = l("div", { shouldForwardProp: (e) => ![
+	"active",
+	"loading",
+	"pendingDelete"
+].includes(e) })(({ loading: e, pendingDelete: t }) => ({
+	position: "relative",
+	display: "flex",
+	transition: "opacity 200ms linear",
+	...e && { opacity: .3 },
+	...t && { opacity: .3 }
+})), y = l("div")(({ theme: e }) => ({
+	position: "relative",
+	width: "fit-content",
+	display: "flex",
+	alignItems: "center",
+	"&&:hover > .resize": { display: "block" }
+})), b = l("img", { shouldForwardProp: (e) => e !== "active" })(({ theme: e, active: t }) => ({ border: t ? `solid 1px ${e.palette.primary.main}` : "solid 1px transparent" })), x = l("div")(({ theme: e }) => ({
+	backgroundColor: e.palette.primary.main,
+	cursor: "col-resize",
+	height: "35px",
+	width: "5px",
+	borderRadius: 8,
+	marginLeft: "5px",
+	marginRight: "10px",
+	display: "none"
+})), S = (e) => e ? `${e}px` : "calc(20px)";
+function C(l) {
+	let { node: d, editor: h, attributes: g, onFocus: C, getPos: w, selected: T, options: E, maxImageWidth: D = 700, maxImageHeight: O = 900 } = l, { alt: k } = d.attrs, A = w(), j = h.state.selection.from, M = h.state.selection.to, N = a(() => j + d.nodeSize === M, [
+		j,
+		M,
+		d.nodeSize
+	]), [P, F] = s(!1), I = o(d), L = o(null), R = o(null), z = o(null), B = r((e) => {
+		let t = e / L.current.naturalWidth * 4;
+		return parseInt(t.toFixed(0) * 25, 10);
+	}, []), V = r(() => {
+		let e = I.current.attrs.nodeKey, t = null;
+		return h.state.doc.descendants((n, r) => {
+			if (t !== null) return !1;
+			if (n.type.name === "imageUploadNode" && n.attrs.nodeKey === e) return t = r, !1;
+		}), t;
+	}, [h]), H = r((e) => {
+		let t = V();
+		if (t === null) return;
+		let n = h.state.doc.nodeAt(t);
+		n && h.view.dispatch(h.state.tr.setNodeMarkup(t, void 0, {
+			...n.attrs,
+			...e
+		}));
+	}, [h, V]), U = r(() => {
+		if (!d.attrs.width || !L.current) return;
+		let e = B(d.attrs.width);
+		d.attrs.resizePercent !== e && H({ resizePercent: e });
+	}, [
+		d.attrs.width,
+		d.attrs.resizePercent,
+		B,
+		H
+	]);
+	i(() => {
+		I.current = {
+			...d,
+			pos: A
+		};
+	}, [d, A]), i(() => {
+		T ? N && (!String(d.attrs?.src ?? "").trim() && E.imageHandling?.insertImageRequested && E.imageHandling.insertImageRequested(h, [d, A], (e) => new t(h, [d, A], e)), F(T)) : F(T);
+	}, [N, T]), i(() => {
+		U();
+		let e = R.current;
+		return e && e.addEventListener("mousedown", Y, !1), () => {
+			e && e.removeEventListener("mousedown", Y, !1);
+		};
+	}, []), i(() => {
+		U();
+	});
+	let W = r(() => {
+		let e = L.current;
+		if (e && (!e.style.width || e.style.width === "calc(20px)")) {
+			let t = Math.min(e.naturalWidth, D), n = Math.min(e.naturalHeight, O);
+			e.style.width = `${t}px`, e.style.height = `${n}px`;
+			let r = {
+				width: t,
+				height: n
+			};
+			m(r, {
+				width: d.attrs.width,
+				height: d.attrs.height
+			}) || H(r);
+		}
+	}, [
+		d.attrs.width,
+		d.attrs.height,
+		D,
+		O,
+		H
+	]), G = (e, t, n = !0, r) => {
+		if (n) {
+			let n = e.width / e.height;
+			return r === "height" ? {
+				width: t.height * n,
+				height: t.height
+			} : {
+				width: t.width,
+				height: t.width / n
+			};
+		}
+		return t;
+	}, K = r((e) => {
+		let t = L.current;
+		if (!t) return;
+		let n = e.target.getBoundingClientRect(), r = G({
+			width: t.naturalWidth,
+			height: t.naturalHeight
+		}, {
+			width: e.clientX - n.left,
+			height: e.clientY - n.top
+		});
+		r.width > 50 && r.height > 50 && r.width <= 700 && r.height <= 900 && (t.style.width = `${r.width}px`, t.style.height = `${r.height}px`, H({
+			width: r.width,
+			height: r.height
+		}));
+	}, [h, H]), q = r((e) => {
+		H(e);
+	}, [h, H]), J = r(() => {
+		window.removeEventListener("mousemove", K), window.removeEventListener("mouseup", J);
+	}, [K]), Y = r(() => {
+		window.addEventListener("mousemove", K), window.addEventListener("mouseup", J);
+	}, [K, J]), X = {
+		width: S(d.attrs.width),
+		height: S(d.attrs.height),
+		objectFit: "contain"
+	}, Z = {
+		left: "flex-start",
+		center: "center",
+		right: "flex-end"
+	}[d.attrs.alignment] || "flex-start";
+	return /* @__PURE__ */ p(c, { children: [/* @__PURE__ */ p(v, {
+		onFocus: C,
+		loading: !d.attrs.loaded,
+		pendingDelete: d.attrs.deleteStatus === "pending",
+		style: { justifyContent: Z },
+		children: [/* @__PURE__ */ f(_, {
+			mode: "determinate",
+			value: d.attrs.percent || 0,
+			hideProgress: d.attrs.loaded
+		}), /* @__PURE__ */ p(y, {
+			onDragStart: (e) => e.preventDefault(),
+			children: [/* @__PURE__ */ f(b, {
+				...g,
+				active: T && d.attrs.loaded,
+				draggable: !1,
+				ref: L,
+				src: d.attrs.src,
+				style: X,
+				onLoad: W,
+				alt: d.attrs.alt
+			}), /* @__PURE__ */ f(x, {
+				ref: R,
+				className: "resize"
+			})]
+		})]
+	}), P && h._tiptapContainerEl && u.createPortal(/* @__PURE__ */ f("div", {
+		ref: z,
+		style: {
+			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)",
+			width: "100%"
+		},
+		children: /* @__PURE__ */ f(e, {
+			showDone: !0,
+			deletable: !0,
+			toolbarOpts: E.toolbarOpts || {},
+			onDelete: () => {
+				let e = V();
+				e !== null && (E.imageHandling?.onDelete?.(I.current), h.view.dispatch(h.state.tr.delete(e, e + h.state.doc.nodeAt(e).nodeSize)), F(!1), h.commands.focus());
+			},
+			onDone: () => {
+				F(!1), E.imageHandling?.onDone?.(h), h.commands.focus("end");
+			},
+			children: /* @__PURE__ */ f(n, {
+				disableImageAlignmentButtons: E.imageHandling?.disableImageAlignmentButtons,
+				alt: d.attrs.alt,
+				imageLoaded: d.attrs.loaded,
+				alignment: d.attrs.alignment || "left",
+				onChange: q
+			})
+		})
+	}), h._tiptapContainerEl)] });
+}
+C.propTypes = {
+	node: d.object.isRequired,
+	editor: d.object.isRequired,
+	attributes: d.object,
+	onFocus: d.func,
+	maxImageWidth: d.number,
+	maxImageHeight: d.number
+};
+//#endregion
+export { C as default };

package/dist/extensions/image.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/image.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 ImageUploadNode: Node<any, any>;

package/dist/extensions/image.js

@@ -0,0 +1,68 @@
+import e from "./image-component.js";
+import "react";
+import { ReactNodeViewRenderer as t } from "@tiptap/react";
+import { Node as n, mergeAttributes as r } from "@tiptap/core";
+import { Plugin as i } from "@tiptap/pm/state";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/extensions/image.tsx
+var o = n.create({
+	name: "imageUploadNode",
+	group: "block",
+	atom: !0,
+	selectable: !0,
+	draggable: !0,
+	addAttributes() {
+		return {
+			nodeKey: { default: null },
+			loaded: { default: !1 },
+			deleteStatus: { default: null },
+			alignment: { default: null },
+			percent: { default: null },
+			width: { default: null },
+			height: { default: null },
+			src: { default: null },
+			alt: { default: null }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "img[data-type=\"image-upload-node\"]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["img", r(e, { "data-type": "image-upload-node" })];
+	},
+	addNodeView() {
+		return t((t) => /* @__PURE__ */ a(e, {
+			...t,
+			options: this.options
+		}));
+	},
+	addCommands() {
+		return { setImageUploadNode: () => ({ commands: e }) => e.insertContent({
+			type: this.name,
+			attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` }
+		}) };
+	},
+	addProseMirrorPlugins() {
+		let e = this.editor;
+		return [new i({ props: { handlePaste(t, n) {
+			let r = Array.from(n.clipboardData?.items || []).find((e) => e.kind === "file" && e.type.startsWith("image/"));
+			if (!r) return !1;
+			let i = r.getAsFile();
+			if (!i) return !1;
+			let a = new FileReader();
+			return a.onload = () => {
+				let t = a.result;
+				typeof t == "string" && e.commands.insertContent({
+					type: "imageUploadNode",
+					attrs: {
+						src: t,
+						loaded: !0,
+						nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`
+					}
+				});
+			}, a.readAsDataURL(i), !0;
+		} } })];
+	}
+});
+//#endregion
+export { o as ImageUploadNode };

package/dist/extensions/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/index.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 ALL_PLUGINS: string[];
+export declare const PLUGINS_MAP: {
+    'text-align': string;
+    'bulleted-list': string;
+    'numbered-list': string;
+};
+export declare const DEFAULT_PLUGINS: string[];
+export declare const buildExtensions: (activeExtensions: any, customExtensions: any, opts: any) => any;

package/dist/extensions/index.js

@@ -0,0 +1,65 @@
+import e from "debug";
+import t from "lodash-es/compact.js";
+import n from "lodash-es/isEmpty.js";
+//#region src/extensions/index.tsx
+var r = e("@pie-lib:editable-html:plugins"), i = [
+	"bold",
+	"html",
+	"extraCSSRules",
+	"italic",
+	"underline",
+	"strikethrough",
+	"bulleted-list",
+	"numbered-list",
+	"image",
+	"math",
+	"languageCharacters",
+	"text-align",
+	"blockquote",
+	"h3",
+	"table",
+	"video",
+	"audio",
+	"responseArea",
+	"redo",
+	"undo",
+	"superscript",
+	"subscript"
+], a = {
+	"text-align": "textAlign",
+	"bulleted-list": "ul_list",
+	"numbered-list": "ol_list"
+}, o = i.filter((e) => ![
+	"responseArea",
+	"h3",
+	"blockquote"
+].includes(e)), s = (e, i, a) => {
+	r("[buildPlugins] opts: ", a), e ||= o;
+	let s = (t, n = !0) => e.includes(t) && n && t, c = a.image && a.image.delete, l = a.math, u = a.responseArea && a.responseArea.type, d = !n(a.extraCSSRules), f = a?.languageCharacters || [];
+	return t([
+		s("table"),
+		s("bold"),
+		s("italic"),
+		s("strikethrough"),
+		s("underline"),
+		s("superscript"),
+		s("subscript"),
+		s("image", !!c),
+		s("video"),
+		s("audio"),
+		s("math", !!l),
+		...f.map((e) => s("languageCharacters", e)),
+		s("text-align"),
+		s("blockquote"),
+		s("h3"),
+		s("bulleted-list"),
+		s("numbered-list"),
+		s("undo"),
+		s("redo"),
+		s("responseArea", !!u),
+		s("css", !!d),
+		s("html", !!a.html)
+	]);
+};
+//#endregion
+export { i as ALL_PLUGINS, o as DEFAULT_PLUGINS, a as PLUGINS_MAP, s as buildExtensions };

package/dist/extensions/math.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/math.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 React from 'react';
+import { Node } from '@tiptap/core';
+import { Plugin } from 'prosemirror-state';
+export declare const EnsureTextAfterMathPlugin: (mathNodeName: any) => Plugin<any>;
+export declare const ZeroWidthSpaceHandlingPlugin: Plugin<any>;
+export declare const MathNode: Node<any, any>;
+export declare const MathNodeView: (props: any) => React.JSX.Element;

package/dist/extensions/math.js

@@ -0,0 +1,158 @@
+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";
+//#region src/extensions/math.tsx
+var g = new c("ensureTextAfterMath"), _ = (e = []) => e.map((e) => ({
+	name: e,
+	latex: e,
+	write: e,
+	label: e
+})), v = (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;
+	}
+}), y = 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;
+	} }
+}), b = a.create({
+	name: "math",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return {
+			latex: { default: "" },
+			wrapper: { default: null },
+			html: { default: null }
+		};
+	},
+	addProseMirrorPlugins() {
+		return [v(this.name), y];
+	},
+	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
+			},
+			p(e.latex, e.wrapper)
+		];
+	},
+	addNodeView() {
+		return i((e) => /* @__PURE__ */ d(x, {
+			...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({
+		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();
+	};
+	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 g ? document.addEventListener("click", t) : document.removeEventListener("click", t), () => document.removeEventListener("click", t);
+	}, [s, g]), /* @__PURE__ */ f(r, {
+		className: "math-node",
+		style: {
+			display: "inline-flex",
+			cursor: "pointer",
+			margin: "0 4px"
+		},
+		"data-selected": c,
+		children: [/* @__PURE__ */ d("div", {
+			onClick: () => v(!0),
+			contentEditable: !1,
+			children: /* @__PURE__ */ d(m, { latex: O })
+		}), g && u.createPortal(/* @__PURE__ */ d("div", {
+			ref: y,
+			"data-toolbar-for": s.instanceId,
+			style: {
+				position: "absolute",
+				top: `${b.top}px`,
+				left: `${b.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__ */ d(h, {
+				latex: O,
+				autoFocus: !0,
+				onChange: k,
+				onDone: A,
+				keypadMode: C,
+				controlledKeypadMode: w,
+				additionalKeys: _(T),
+				keyPadCharacterRef: E,
+				setKeypadInteraction: D
+			})
+		}), s?._tiptapContainerEl || document.body)]
+	});
+};
+//#endregion
+export { b 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 React from 'react';
+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;
+}): React.JSX.Element;