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

package/dist/extensions/image-component.js

@@ -1,220 +0,0 @@
-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 { isEqual as c } from "@pie-element/shared-lodash";
-import { NodeViewWrapper as l } from "@tiptap/react";
-import { styled as u } from "@mui/material/styles";
-import d from "react-dom";
-import f from "prop-types";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-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 _ = u(g, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress: e }) => ({
-	position: "absolute",
-	left: "0",
-	width: "fit-content",
-	top: "0%",
-	transition: "opacity 200ms linear",
-	...e && { opacity: 0 }
-})), v = u("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 = u("div")(({ theme: e }) => ({
-	position: "relative",
-	width: "fit-content",
-	display: "flex",
-	alignItems: "center",
-	"&&:hover > .resize": { display: "block" }
-})), b = u("img", { shouldForwardProp: (e) => e !== "active" })(({ theme: e, active: t }) => ({ border: t ? `solid 1px ${e.palette.primary.main}` : "solid 1px transparent" })), x = u("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(u) {
-	let { node: f, editor: h, attributes: g, onFocus: C, getPos: w, selected: T, options: E, maxImageWidth: D = 700, maxImageHeight: O = 900 } = u, { alt: k } = f.attrs, A = w(), j = h.state.selection.from, M = h.state.selection.to, N = a(() => j + f.nodeSize === M, [
-		j,
-		M,
-		f.nodeSize
-	]), [P, F] = s(!1), I = o(f), 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 (!f.attrs.width || !L.current) return;
-		let e = B(f.attrs.width);
-		f.attrs.resizePercent !== e && H({ resizePercent: e });
-	}, [
-		f.attrs.width,
-		f.attrs.resizePercent,
-		B,
-		H
-	]);
-	i(() => {
-		I.current = {
-			...f,
-			pos: A
-		};
-	}, [f, A]), i(() => {
-		T ? N && (!String(f.attrs?.src ?? "").trim() && E.imageHandling?.insertImageRequested && E.imageHandling.insertImageRequested(h, [f, A], (e) => new t(h, [f, 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
-			};
-			c(r, {
-				width: f.attrs.width,
-				height: f.attrs.height
-			}) || H(r);
-		}
-	}, [
-		f.attrs.width,
-		f.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(f.attrs.width),
-		height: S(f.attrs.height),
-		objectFit: "contain"
-	}, Z = {
-		left: "flex-start",
-		center: "center",
-		right: "flex-end"
-	}[f.attrs.alignment] || "flex-start";
-	return /* @__PURE__ */ m(l, { children: [/* @__PURE__ */ m(v, {
-		onFocus: C,
-		loading: !f.attrs.loaded,
-		pendingDelete: f.attrs.deleteStatus === "pending",
-		style: { justifyContent: Z },
-		children: [/* @__PURE__ */ p(_, {
-			mode: "determinate",
-			value: f.attrs.percent || 0,
-			hideProgress: f.attrs.loaded
-		}), /* @__PURE__ */ m(y, {
-			onDragStart: (e) => e.preventDefault(),
-			children: [/* @__PURE__ */ p(b, {
-				...g,
-				active: T && f.attrs.loaded,
-				draggable: !1,
-				ref: L,
-				src: f.attrs.src,
-				style: X,
-				onLoad: W,
-				alt: f.attrs.alt
-			}), /* @__PURE__ */ p(x, {
-				ref: R,
-				className: "resize"
-			})]
-		})]
-	}), P && h._tiptapContainerEl && d.createPortal(/* @__PURE__ */ p("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__ */ p(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__ */ p(n, {
-				disableImageAlignmentButtons: E.imageHandling?.disableImageAlignmentButtons,
-				alt: f.attrs.alt,
-				imageLoaded: f.attrs.loaded,
-				alignment: f.attrs.alignment || "left",
-				onChange: q
-			})
-		})
-	}), h._tiptapContainerEl)] });
-}
-C.propTypes = {
-	node: f.object.isRequired,
-	editor: f.object.isRequired,
-	attributes: f.object,
-	onFocus: f.func,
-	maxImageWidth: f.number,
-	maxImageHeight: f.number
-};
-//#endregion
-export { C as default };

package/dist/extensions/image.d.ts

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

@@ -1,68 +0,0 @@
-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

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

@@ -1,64 +0,0 @@
-import { compact as e, isEmpty as t } from "@pie-element/shared-lodash";
-import n from "debug";
-//#region src/extensions/index.tsx
-var r = n("@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 = (n, i, a) => {
-	r("[buildPlugins] opts: ", a), n ||= o;
-	let s = (e, t = !0) => n.includes(e) && t && e, c = a.image && a.image.delete, l = a.math, u = a.responseArea && a.responseArea.type, d = !t(a.extraCSSRules), f = a?.languageCharacters || [];
-	return e([
-		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

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

@@ -1,158 +0,0 @@
-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

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