@pie-lib/editable-html-tip-tap 3.0.3-next.20261007075859 → 3.0.3-next.20261007181944

package/dist/components/EditableHtml.js

@@ -5,42 +5,42 @@ import { ExtendedTableCell as r, ExtendedTableHeader as i } from "../extensions/
 import { DivNode as a } from "../extensions/div-node.js";
 import { EnsureEmptyRootIsDiv as ee } from "../extensions/ensure-empty-root-div.js";
 import { EnsureListItemContentIsDiv as te } from "../extensions/ensure-list-item-content-is-div.js";
-import { DragInTheBlankNode as ne, ExplicitConstructedResponseNode as re, InlineDropdownNode as ie, MathTemplatedNode as ae, ResponseAreaExtension as o } from "../extensions/responseArea.js";
-import { MathNode as s } from "../extensions/math.js";
-import { ImageUploadNode as c } from "../extensions/image.js";
-import { Media as l } from "../extensions/media.js";
+import { DragInTheBlankNode as o, ExplicitConstructedResponseNode as s, InlineDropdownNode as c, MathTemplatedNode as l, ResponseAreaExtension as u } from "../extensions/responseArea.js";
+import { MathNode as ne } from "../extensions/math.js";
+import { ImageUploadNode as re, uploadPastedImage as ie } from "../extensions/image.js";
+import { Media as ae } from "../extensions/media.js";
 import { CSSMark as oe } from "../extensions/css.js";
-import { ExtendedListItem as u } from "../extensions/extended-list-item.js";
-import { HeadingParagraph as se } from "../extensions/heading-paragraph.js";
+import { ExtendedListItem as se } from "../extensions/extended-list-item.js";
+import { HeadingParagraph as ce } from "../extensions/heading-paragraph.js";
 import { valueToSize as d } from "../utils/size.js";
-import ce from "./TiptapContainer.js";
-import { PLUGINS_MAP as le, buildExtensions as ue } from "../extensions/index.js";
-import { useCallback as f, useEffect as p, useMemo as m, useRef as de, useState as h } from "react";
-import { debounce as fe } from "@pie-element/shared-lodash";
-import { EditorContent as g, useEditor as _, useEditorState as v } from "@tiptap/react";
-import { styled as y } from "@mui/material/styles";
-import b from "@tiptap/starter-kit";
-import { TextStyleKit as x } from "@tiptap/extension-text-style";
-import { CharacterCount as S } from "@tiptap/extension-character-count";
-import C from "@tiptap/extension-superscript";
-import w from "@tiptap/extension-subscript";
-import T from "@tiptap/extension-text-align";
-import E from "@tiptap/extension-image";
-import D from "@tiptap/extension-placeholder";
-import { TableRow as O } from "@tiptap/extension-table-row";
-import { jsx as k } from "react/jsx-runtime";
+import le from "./TiptapContainer.js";
+import { PLUGINS_MAP as ue, buildExtensions as f } from "../extensions/index.js";
+import { useCallback as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { debounce as de } from "@pie-element/shared-lodash";
+import { EditorContent as v, useEditor as y, useEditorState as b } from "@tiptap/react";
+import { styled as x } from "@mui/material/styles";
+import S from "@tiptap/starter-kit";
+import { TextStyleKit as C } from "@tiptap/extension-text-style";
+import { CharacterCount as w } from "@tiptap/extension-character-count";
+import T from "@tiptap/extension-superscript";
+import E from "@tiptap/extension-subscript";
+import D from "@tiptap/extension-text-align";
+import O from "@tiptap/extension-image";
+import k from "@tiptap/extension-placeholder";
+import { TableRow as A } from "@tiptap/extension-table-row";
+import { jsx as j } from "react/jsx-runtime";
 //#region src/components/EditableHtml.tsx
-var A = {
+var M = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
 	showDone: !0,
 	doneOn: "blur"
-}, j = {
+}, N = {
 	options: {},
 	respAreaToolbar: () => {},
 	onHandleAreaChange: () => {}
-}, M = [
+}, P = [
 	"bold",
 	"italic",
 	"underline",
@@ -62,7 +62,7 @@ var A = {
 	"h3",
 	"undo",
 	"redo"
-], N = {
+], F = {
 	bold: "bold",
 	italic: "italic",
 	underline: "underline",
@@ -71,8 +71,9 @@ var A = {
 	subscript: "subscript",
 	"bulleted-list": "bulletList",
 	"numbered-list": "orderedList",
-	table: "table"
-}, P = {
+	table: "table",
+	image: "image"
+}, I = {
 	"--white": "#fff",
 	"--black": "#2e2b29",
 	"--black-contrast": "#110f0e",
@@ -91,7 +92,7 @@ var A = {
 	"--red": "#ff5c33",
 	"--red-light": "#ffebe5",
 	"--shadow": "0px 12px 33px 0px rgba(0, 0, 0, .06),\n               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)"
-}, F = (e, t, n) => ({
+}, L = (e, t, n) => ({
 	role: "textbox",
 	"data-pie-editor": "true",
 	class: "mathjax_ignore",
@@ -100,55 +101,55 @@ var A = {
 	autocapitalize: e ? "on" : "off",
 	...t && { "aria-label": t },
 	...n && { "aria-labelledby": n }
-}), I = ["aria-label", "aria-labelledby"], L = (g) => {
-	let { showParagraphs: y, separateParagraphs: L } = g.pluginProps || {}, [pe, z] = h([]), [B, V] = h(!1), { toolbarOpts: me } = g, H = f((e) => {
-		z((t) => {
+}), R = ["aria-label", "aria-labelledby"], z = (v) => {
+	let { showParagraphs: x, separateParagraphs: z } = v.pluginProps || {}, [fe, V] = _([]), [H, pe] = _(!1), { toolbarOpts: me } = v, U = p((e) => {
+		V((t) => {
 			let n = t.filter((t) => t.pos !== e);
-			return n.length === 0 && V(!1), n;
+			return n.length === 0 && pe(!1), n;
 		});
-	}, [z]), U = {
-		...A,
+	}, [V]), W = {
+		...M,
 		...me
-	}, W = f((e) => {
+	}, G = p((e) => {
 		let t = e.getHTML();
-		g.markup !== t && g.onChange?.(t), U.doneOn === "blur" && g.onDone?.(t);
+		v.markup !== t && v.onChange?.(t), W.doneOn === "blur" && v.onDone?.(t);
 	}, [
-		g.markup,
-		g.onChange,
-		g.onDone,
-		U.doneOn
-	]), G = m(() => ({
-		...j,
-		...g.responseAreaProps,
-		onInlineDropdownToolbarClose: W
-	}), [g.responseAreaProps, W]), K = m(() => {
-		let { customPlugins: e, ...t } = g.pluginProps || {};
+		v.markup,
+		v.onChange,
+		v.onDone,
+		W.doneOn
+	]), K = h(() => ({
+		...N,
+		...v.responseAreaProps,
+		onInlineDropdownToolbarClose: G
+	}), [v.responseAreaProps, G]), q = h(() => {
+		let { customPlugins: e, ...t } = v.pluginProps || {};
 		e ||= [];
-		let n = (g.activePlugins || M)?.filter((e) => {
-			let n = le[e] || e, r = t[n] || {};
+		let n = (v.activePlugins || P)?.filter((e) => {
+			let n = ue[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
-		return ue(n, e, {
+		return f(n, e, {
 			math: {},
-			textAlign: g.textAlign,
+			textAlign: v.textAlign,
 			html: {},
-			extraCSSRules: g.extraCSSRules || {},
-			image: { ...g.imageSupport },
+			extraCSSRules: v.extraCSSRules || {},
+			image: { ...v.imageSupport },
 			toolbar: {},
 			table: {},
-			responseArea: { type: G.type },
-			languageCharacters: g.languageCharactersProps,
+			responseArea: { type: K.type },
+			languageCharacters: v.languageCharactersProps,
 			keyPadCharacterRef: {},
 			setKeypadInteraction: {},
 			media: {}
 		});
-	}, [g, G.type]), q = de(null);
-	q.current = {
-		plainText: g.pluginProps?.pasteFormatting?.disabled === !0,
-		formatting: K.map((e) => N[e]).filter(Boolean)
+	}, [v, K.type]), J = g(null);
+	J.current = {
+		plainText: v.pluginProps?.pasteFormatting?.disabled === !0,
+		formatting: q.map((e) => F[e]).filter(Boolean)
 	};
-	let J = [
-		T.configure({
+	let he = [
+		D.configure({
 			types: [
 				"heading",
 				"paragraph",
@@ -170,10 +171,13 @@ var A = {
 				"justify"
 			]
 		}),
-		x,
-		e.configure({ settings: () => q.current }),
-		S.configure({ limit: g.charactersLimit || 1e6 }),
-		b.configure({
+		C,
+		e.configure({
+			settings: () => J.current,
+			uploadImage: v.imageSupport && ie
+		}),
+		w.configure({ limit: v.charactersLimit || 1e6 }),
+		S.configure({
 			trailingNode: {
 				node: "paragraph",
 				notAfter: ["paragraph", "div"]
@@ -183,95 +187,95 @@ var A = {
 				linkOnPaste: !1
 			}
 		}),
-		u,
-		a,
 		se,
+		a,
+		ce,
 		ee,
 		te,
-		D.configure({
-			placeholder: g.placeholder,
+		k.configure({
+			placeholder: v.placeholder,
 			showOnlyWhenEditable: !0,
 			showOnlyCurrent: !1,
 			includeChildren: !0
 		}),
 		n,
-		O,
+		A,
 		i,
 		r,
-		o.configure(G),
-		re.configure(G),
-		ne.configure(G),
-		ie.configure(G),
-		ae.configure(G),
-		s.configure({
-			toolbarOpts: U,
-			math: g.pluginProps?.math || {}
+		u.configure(K),
+		s.configure(K),
+		o.configure(K),
+		c.configure(K),
+		l.configure(K),
+		ne.configure({
+			toolbarOpts: W,
+			math: v.pluginProps?.math || {}
 		}),
-		w,
-		C,
 		E,
-		c.configure({
-			toolbarOpts: U,
+		T,
+		O,
+		re.configure({
+			toolbarOpts: W,
 			imageHandling: {
-				disableImageAlignmentButtons: g.disableImageAlignmentButtons,
-				onDone: (e) => g.onDone?.(e.getHTML()),
-				onDelete: g.imageSupport && g.imageSupport.delete && ((e) => {
+				disableImageAlignmentButtons: v.disableImageAlignmentButtons,
+				onDone: (e) => v.onDone?.(e.getHTML()),
+				onDelete: v.imageSupport && v.imageSupport.delete && ((e) => {
 					let { src: t } = e.attrs;
-					g.imageSupport.delete(t, (t) => {
-						H(e.pos);
+					v.imageSupport.delete(t, (t) => {
+						U(e.pos);
 					});
 				}),
-				insertImageRequested: g.imageSupport && ((e, t, n) => {
+				insertImageRequested: v.imageSupport && ((e, t, n) => {
 					let [r, i] = t, a = (t) => {
 						let n;
-						B && t && (n = g.onChange), H(i), n?.(e.getHTML());
+						H && t && (n = v.onChange), U(i), n?.(e.getHTML());
 					};
-					e._insertingImage = !0, z((e) => [...e, r]), (() => {
-						let t = n(a), r = fe(() => {
+					e._insertingImage = !0, V((e) => [...e, r]), (() => {
+						let t = n(a), r = de(() => {
 							let t = () => window.removeEventListener("focus", r);
 							if (!e._insertingImage) {
 								t();
 								return;
 							}
-							H(i), e._insertingImage = !1, t();
+							U(i), e._insertingImage = !1, t();
 						}, 500);
-						window.addEventListener("focus", r), g.imageSupport.add(t);
+						window.addEventListener("focus", r), v.imageSupport.add(t);
 					})();
 				}),
-				maxImageWidth: g.maxImageWidth,
-				maxImageHeight: g.maxImageHeight
+				maxImageWidth: v.maxImageWidth,
+				maxImageHeight: v.maxImageHeight
 			},
 			limit: 3
 		}),
-		l.configure({ uploadSoundSupport: g.uploadSoundSupport }),
-		oe.configure({ extraCSSRules: g.extraCSSRules })
-	], Y = g.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = g, Q = _({
-		extensions: J,
+		ae.configure({ uploadSoundSupport: v.uploadSoundSupport }),
+		oe.configure({ extraCSSRules: v.extraCSSRules })
+	], Y = v.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = v, Q = y({
+		extensions: he,
 		immediatelyRender: !1,
 		editorProps: {
-			attributes: F(Y, X, Z),
+			attributes: L(Y, X, Z),
 			handleKeyDown(e, t) {
-				return g.onKeyDown ? g.onKeyDown(t) : !1;
+				return v.onKeyDown ? v.onKeyDown(t) : !1;
 			}
 		},
-		editable: !g.disabled,
-		content: t(g.markup),
+		editable: !v.disabled,
+		content: t(v.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && g.onChange?.(e.getHTML());
+			t.isDone && v.onChange?.(e.getHTML());
 		},
 		onBlur: ({ editor: e }) => {
-			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || W(e);
+			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || G(e);
 		}
-	}, [g.charactersLimit]);
-	p(() => {
-		g.editorRef && g.editorRef(Q);
-	}, [g.editorRef, Q]), p(() => {
-		Q?.setEditable(!g.disabled);
-	}, [g.disabled, Q]), p(() => {
+	}, [v.charactersLimit]);
+	m(() => {
+		v.editorRef && v.editorRef(Q);
+	}, [v.editorRef, Q]), m(() => {
+		Q?.setEditable(!v.disabled);
+	}, [v.disabled, Q]), m(() => {
 		if (!Q) return;
-		let e = Q.options?.editorProps, t = e?.attributes || {}, n = F(Y, X, Z);
-		if (["spellcheck", ...I].every((e) => t[e] === n[e])) return;
-		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !I.includes(e)));
+		let e = Q.options?.editorProps, t = e?.attributes || {}, n = L(Y, X, Z);
+		if (["spellcheck", ...R].every((e) => t[e] === n[e])) return;
+		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !R.includes(e)));
 		Q.setOptions({ editorProps: {
 			...e,
 			attributes: {
@@ -284,20 +288,20 @@ var A = {
 		X,
 		Z,
 		Q
-	]), p(() => {
+	]), m(() => {
 		if (!Q) return;
-		let e = t(g.markup);
+		let e = t(v.markup);
 		e !== Q.getHTML() && Q.commands.setContent(e, { emitUpdate: !1 });
-	}, [g.markup, Q]), p(() => {
-		Object.entries(P).forEach(([e, t]) => {
+	}, [v.markup, Q]), m(() => {
+		Object.entries(I).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let he = v({
+	let ge = b({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
-	}), $ = m(() => {
-		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = g;
+	}), $ = h(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = v;
 		return {
 			width: d(t),
 			minWidth: d(e),
@@ -306,25 +310,25 @@ var A = {
 			minHeight: d(r),
 			maxHeight: d(a)
 		};
-	}, [g]);
-	return /* @__PURE__ */ k(ce, {
-		...g,
-		activePlugins: K,
-		toolbarOpts: U,
-		editorState: he,
+	}, [v]);
+	return /* @__PURE__ */ j(le, {
+		...v,
+		activePlugins: q,
+		toolbarOpts: W,
+		editorState: ge,
 		editor: Q,
-		children: Q && /* @__PURE__ */ k(R, {
+		children: Q && /* @__PURE__ */ j(B, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
-			showParagraph: y && !y.disabled,
-			separateParagraph: L && !L.disabled,
+			showParagraph: x && !x.disabled,
+			separateParagraph: z && !z.disabled,
 			editor: Q
 		})
 	});
-}, R = y(g, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, B = x(v, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {
@@ -354,4 +358,4 @@ var A = {
 	}
 }));
 //#endregion
-export { L as EditableHtml, L as default };
+export { z as EditableHtml, z as default };

package/dist/extensions/image.d.ts

@@ -1,2 +1,7 @@
 import { Node } from '@tiptap/core';
+/**
+ * Uploads the image pasted with `nodeKey` and a data URL src, as a pasted image file uploads.
+ * Resolves once the upload succeeds or fails.
+ */
+export declare function uploadPastedImage(editor: any, nodeKey: any): Promise<unknown>;
 export declare const ImageUploadNode: Node<any, any>;

package/dist/extensions/image.js

@@ -7,7 +7,30 @@ import { Node as a, mergeAttributes as o } from "@tiptap/core";
 import { Plugin as s } from "@tiptap/pm/state";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/extensions/image.tsx
-var l = a.create({
+var l = (e) => {
+	let [t, n] = e.split(","), r = /^data:([^;,]+)/.exec(t)?.[1] ?? "image/png", i = Uint8Array.from(atob(n), (e) => e.charCodeAt(0));
+	return new File([i], `image.${r.split("/")[1]}`, { type: r });
+};
+function u(t, r, i, a, o = () => {}) {
+	let s = e(t, i);
+	if (!s) {
+		o();
+		return;
+	}
+	r(t, s, (e) => {
+		let r;
+		return r = new n(t, s, (t) => {
+			t || r?.updateNode({ loaded: !0 }), e(t), o();
+		}, !0), r.fileChosen(a), r;
+	});
+}
+function d(t, n) {
+	let r = t.extensionManager.extensions.find((e) => e.name === "imageUploadNode")?.options.imageHandling?.insertImageRequested, i = e(t, n)?.[0].attrs.src;
+	return new Promise((e) => {
+		r && i ? u(t, r, n, l(i), e) : e();
+	});
+}
+var f = a.create({
 	name: "imageUploadNode",
 	group: "block",
 	atom: !0,
@@ -45,33 +68,26 @@ var l = a.create({
 		}) };
 	},
 	addProseMirrorPlugins() {
-		let r = this.editor, i = this.options;
-		return [new s({ props: { handlePaste(a, o) {
-			let s = Array.from(o.clipboardData?.items || []).find((e) => e.kind === "file" && e.type.startsWith("image/"));
-			if (!s) return !1;
-			let c = s.getAsFile();
-			if (!c) return !1;
-			let l = i?.imageHandling?.insertImageRequested, u = t(), d = new FileReader();
-			return d.onload = () => {
-				let t = d.result;
-				if (typeof t != "string" || (r.commands.insertContent({
+		let e = this.editor, n = this.options;
+		return [new s({ props: { handlePaste(r, i) {
+			let a = Array.from(i.clipboardData?.items || []).find((e) => e.kind === "file" && e.type.startsWith("image/"));
+			if (!a) return !1;
+			let o = a.getAsFile();
+			if (!o) return !1;
+			let s = n?.imageHandling?.insertImageRequested, c = t(), l = new FileReader();
+			return l.onload = () => {
+				let t = l.result;
+				typeof t == "string" && (e.commands.insertContent({
 					type: "imageUploadNode",
 					attrs: {
 						src: t,
-						loaded: !l,
-						nodeKey: u
+						loaded: !s,
+						nodeKey: c
 					}
-				}), !l)) return;
-				let i = e(r, u);
-				i && l(r, i, (e) => {
-					let t;
-					return t = new n(r, i, (n) => {
-						n || t?.updateNode({ loaded: !0 }), e(n);
-					}, !0), t.fileChosen(c), t;
-				});
-			}, d.readAsDataURL(c), !0;
+				}), s && u(e, s, c, o));
+			}, l.readAsDataURL(o), !0;
 		} } })];
 	}
 });
 //#endregion
-export { l as ImageUploadNode };
+export { f as ImageUploadNode, d as uploadPastedImage };

package/dist/external-paste.d.ts

@@ -1,16 +1,27 @@
-import { Extension } from '@tiptap/core';
+import { type Editor, Extension } from '@tiptap/core';
 /** The formatting that content pasted from outside a PIE editor can keep, by mark or node name. */
-export declare const PASTED_FORMATTING: readonly ["bold", "italic", "underline", "strike", "superscript", "subscript", "bulletList", "orderedList", "table"];
+export declare const PASTED_FORMATTING: readonly ["bold", "italic", "underline", "strike", "superscript", "subscript", "bulletList", "orderedList", "table", "image"];
 export type PastedFormatting = (typeof PASTED_FORMATTING)[number];
 export type ExternalPasteSettings = {
     /** Paste as plain text, as the Slate editor did. Math copied from rendered PIE content stays math. */
     plainText: boolean;
-    /** The formatting a paste keeps. The rest becomes text: a list its items, a table its rows. */
+    /**
+     * The formatting a paste keeps. The rest becomes text: a list its items, a table its rows.
+     * `image` keeps the pictures Word puts in its HTML as data URLs, in an editor with image upload
+     * nodes. Other images go.
+     */
     formatting: readonly PastedFormatting[];
 };
 export type ExternalPasteOptions = {
     /** Read at each paste and drop, so a mounted editor follows a change of toolbar or setting. */
     settings: () => ExternalPasteSettings;
+    /**
+     * Uploads the picture pasted as the image upload node with `nodeKey`, which shows its data URL
+     * until the upload replaces it, and resolves once the upload finishes. Pictures upload one at a
+     * time, as a host on pie-player-components serves one upload at a time. Without it, the data
+     * URL is the picture's src.
+     */
+    uploadImage?: (editor: Editor, nodeKey: string) => Promise<void>;
 };
 /**
  * Pastes and drops content from outside a PIE editor, such as from Word or Google Docs, with its
@@ -18,8 +29,9 @@ export type ExternalPasteOptions = {
  * superscript, subscript, lists and tables in `formatting`. Its fonts, sizes, colours, alignment,
  * headings, links and class names go, which TextStyleKit, TextAlign and CSSMark would otherwise keep
  * (PIE-1145). Word for Windows and Mac copies lists as styled paragraphs, which are rebuilt as
- * lists first. With `plainText` set it pastes plain text. Copies from a PIE editor and pasted
- * images are left to ProseMirror and the image upload handler.
+ * lists first. Word's pictures paste as image upload nodes when `formatting` has `image`, and
+ * upload through `uploadImage`. With `plainText` set it pastes plain text. Copies from a PIE editor
+ * and pasted image files are left to ProseMirror and the image upload handler.
  *
  * Mirrored in `packages/lib-svelte/editable-html-tiptap-svelte/src/external-paste.ts`.
  */

package/dist/external-paste.js

@@ -11,14 +11,22 @@ var a = [
 	"subscript",
 	"bulletList",
 	"orderedList",
-	"table"
-], o = (e) => Array.from(e.items ?? []).some((e) => e.kind === "file" && e.type.startsWith("image/")), s = (e, t) => new DOMParser().parseFromString(e, "text/html").querySelector(t) !== null, c = (e) => e.includes("data-pm-slice") && s(e, "[data-pm-slice]"), l = (e) => /data-latex|data-type="?mathml/.test(e) && s(e, "[data-latex], [data-type=\"mathml\"]"), u = null, d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), f = (e) => e.replace(/\r*\n|\r/g, "\n").replace(/\n+$/, ""), p = (e) => {
+	"table",
+	"image"
+], o = (e) => Array.from(e.items ?? []).some((e) => e.kind === "file" && e.type.startsWith("image/")), s = (e, t) => new DOMParser().parseFromString(e, "text/html").querySelector(t) !== null, c = (e) => e.includes("data-pm-slice") && s(e, "[data-pm-slice]"), l = (e) => /data-latex|data-type="?mathml/.test(e) && s(e, "[data-latex], [data-type=\"mathml\"]"), u = null, d = /^data:image\/(?:png|jpeg|gif|webp);base64,/i, f = () => `img-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+function p(e) {
+	if (!e.includes("data:image/")) return e;
+	let t = new DOMParser().parseFromString(e, "text/html");
+	for (let e of Array.from(t.body.querySelectorAll("img"))) d.test(e.getAttribute("src") ?? "") && e.setAttribute("data-type", "image-upload-node");
+	return t.body.innerHTML;
+}
+var m = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), h = (e) => e.replace(/\r*\n|\r/g, "\n").replace(/\n+$/, ""), g = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		t.push(e);
 	}), t;
 };
-function m(e, t) {
+function _(e, t) {
 	let n = e.topNodeType.create(null, t), r = (e) => {
 		let t = 0;
 		for (let r = n[e]; r && !r.isLeaf && !r.type.spec.isolating; r = r[e]) t += 1;
@@ -26,7 +34,7 @@ function m(e, t) {
 	};
 	return t.length ? n.slice(r("firstChild"), n.content.size - r("lastChild"), !0) : n.slice(0, 0);
 }
-var h = [
+var v = [
 	[1e3, "m"],
 	[900, "cm"],
 	[500, "d"],
@@ -40,19 +48,19 @@ var h = [
 	[5, "v"],
 	[4, "iv"],
 	[1, "i"]
-], g = (e) => h.reduce(({ numeral: e, rest: t }, [n, r]) => ({
+], y = (e) => v.reduce(({ numeral: e, rest: t }, [n, r]) => ({
 	numeral: e + r.repeat(Math.floor(t / n)),
 	rest: t % n
 }), {
 	numeral: "",
 	rest: e
-}).numeral, _ = (e) => (e > 26 ? _(Math.floor((e - 1) / 26)) : "") + String.fromCharCode(97 + (e - 1) % 26);
-function v(e, t) {
+}).numeral, b = (e) => (e > 26 ? b(Math.floor((e - 1) / 26)) : "") + String.fromCharCode(97 + (e - 1) % 26);
+function x(e, t) {
 	if (t < 1 || !e || !/^[aAiI]$/.test(e)) return String(t);
-	let n = /^[aA]$/.test(e) ? _(t) : g(t);
+	let n = /^[aA]$/.test(e) ? b(t) : y(t);
 	return e === e.toUpperCase() ? n.toUpperCase() : n;
 }
-function y(e) {
+function S(e) {
 	let t = e?.getData("text/html");
 	if (!e || !t || c(t)) return null;
 	let n = e.getData("text/plain"), r = Array.from(e.types).includes("text/rtf") && n.trim() !== "";
@@ -61,55 +69,67 @@ function y(e) {
 		html: t
 	};
 }
-var b = (e) => (t, n) => {
-	let { schema: r } = n, { paragraph: i, hardBreak: a, math: o } = r.nodes, s = (e) => i.create(null, e), c = (t) => t.filter((t) => e.has(t.type.name)).map((e) => e.type.create()), l = (e) => p(e).flatMap((e) => {
+var C = (e, t = null) => (n, r) => {
+	let { schema: i } = r, { paragraph: a, hardBreak: o, math: s, imageUploadNode: c } = i.nodes, l = (e) => a.create(null, e), u = (t) => t.filter((t) => e.has(t.type.name)).map((e) => e.type.create()), p = (e) => g(e).flatMap((e) => {
 		if (e.isText) {
-			let t = c(e.marks);
-			return (e.text ?? "").split("\n").flatMap((e, n) => [...n && a ? [a.create(null, null, t)] : [], ...e ? [r.text(e, t)] : []]);
+			let t = u(e.marks);
+			return (e.text ?? "").split("\n").flatMap((e, n) => [...n && o ? [o.create(null, null, t)] : [], ...e ? [i.text(e, t)] : []]);
 		}
-		return e.type === a || o && e.type === o ? [e.mark(c(e.marks))] : e.isLeaf ? [] : l(e);
-	}), u = (e) => {
+		return e.type === o || s && e.type === s ? [e.mark(u(e.marks))] : e.isLeaf ? [] : p(e);
+	}), m = (e) => {
+		let { src: n, width: r, height: i, alt: a } = e.attrs;
+		if (!t || !d.test(n ?? "")) return [];
+		let o = f();
+		return t.keys.push(o), [e.type.create({
+			src: n,
+			width: r,
+			height: i,
+			alt: a,
+			nodeKey: o,
+			loaded: !t.upload
+		})];
+	}, h = (e) => {
 		let t = [];
-		return e.descendants((e) => e.isTextblock ? (t.length && t.push(r.text(" ")), t.push(...l(e)), !1) : !0), t;
-	}, d = (t) => {
+		return e.descendants((e) => e.isTextblock ? (t.length && t.push(i.text(" ")), t.push(...p(e)), !1) : !0), t;
+	}, v = (t) => {
 		let n = t.type.name === "orderedList";
 		if (e.has(t.type.name)) {
-			let e = p(t).flatMap((e) => e.type.createAndFill(null, h(e)) ?? []), r = n ? {
+			let e = g(t).flatMap((e) => e.type.createAndFill(null, C(e)) ?? []), r = n ? {
 				start: t.attrs.start,
 				type: t.attrs.type
 			} : null;
 			return e.length ? [t.type.create(r, e)] : [];
 		}
-		let a = n ? t.attrs.start ?? 1 : 0;
-		return p(t).flatMap((e) => {
-			let o = r.text(n ? `${v(t.attrs.type, a++)}. ` : "• "), [c, ...l] = h(e);
-			return c?.type === i ? [s([o, ...p(c)]), ...l] : [
-				s([o]),
-				...c ? [c] : [],
-				...l
+		let r = n ? t.attrs.start ?? 1 : 0;
+		return g(t).flatMap((e) => {
+			let o = i.text(n ? `${x(t.attrs.type, r++)}. ` : "• "), [s, ...c] = C(e);
+			return s?.type === a ? [l([o, ...g(s)]), ...c] : [
+				l([o]),
+				...s ? [s] : [],
+				...c
 			];
 		});
-	}, f = (t) => {
+	}, y = (t) => {
 		let n = t.attrs.caption ?? null;
 		if (e.has("table")) {
-			let e = p(t).flatMap((e) => {
-				let t = p(e).flatMap((e) => {
+			let e = g(t).flatMap((e) => {
+				let t = g(e).flatMap((e) => {
 					let { colspan: t, rowspan: n, scope: r } = e.attrs;
 					return e.type.createAndFill({
 						colspan: t,
 						rowspan: n,
 						scope: r
-					}, h(e)) ?? [];
+					}, C(e)) ?? [];
 				});
 				return t.length ? [e.type.create(null, t)] : [];
 			});
 			return e.length ? [t.type.create({ caption: n }, e)] : [];
 		}
-		return [...n ? [s([r.text(n)])] : [], ...p(t).map((e) => s(p(e).flatMap((e, t) => t ? [r.text("	"), ...u(e)] : u(e))))];
-	}, h = (e) => p(e).flatMap((e) => e.isTextblock ? [s(l(e))] : e.type.spec.tableRole === "table" ? f(e) : e.type.name === "bulletList" || e.type.name === "orderedList" ? d(e) : e.isLeaf ? [] : h(e));
-	return m(r, t.content.firstChild?.isInline ? [s(l(t.content))] : h(t.content));
+		return [...n ? [l([i.text(n)])] : [], ...g(t).map((e) => l(g(e).flatMap((e, t) => t ? [i.text("	"), ...h(e)] : h(e))))];
+	}, b = (e) => /^\s+$/.test(e.textContent) && g(e).every((e) => e.isText), S = (e) => !!t && !!e && e.type === c, C = (e) => g(e).flatMap((e, t, n) => e.isTextblock && !e.content.size && (S(n[t - 1]) || S(n[t + 1])) ? [] : e.isTextblock && b(e) ? [l([i.text(e.textContent)])] : e.isTextblock ? [l(p(e))] : e.type.spec.tableRole === "table" ? y(e) : e.type.name === "bulletList" || e.type.name === "orderedList" ? v(e) : S(e) ? m(e) : e.isLeaf ? [] : C(e));
+	return _(i, n.content.firstChild?.isInline ? [l(p(n.content))] : C(n.content));
 };
-function x(e, t) {
+function w(e, t) {
 	let { schema: n } = t, r = t.selection.$from.marks(), i = (e) => {
 		let t = [];
 		return e.descendants((e) => (e.isTextblock && t.length && t.push(n.text(" ", r)), e.isText && e.text && t.push(n.text(e.text, r)), e.type === n.nodes.math && t.push(e.mark([])), !e.isInline)), t;
@@ -122,9 +142,9 @@ function x(e, t) {
 			}), a.push(t.flatMap((e, t) => t ? [n.text("	", r), ...e] : e)), !1;
 		}
 		return e.isTextblock ? (a.push(i(e)), !1) : !0;
-	}), m(n, a.map((e) => n.nodes.paragraph.create(null, e)));
+	}), _(n, a.map((e) => n.nodes.paragraph.create(null, e)));
 }
-function S(e, t, n) {
+function T(e, t, n) {
 	u = n;
 	try {
 		e.pasteHTML(t);
@@ -132,34 +152,43 @@ function S(e, t, n) {
 		u = null;
 	}
 }
-function C(t, { text: n, html: r }, i) {
-	let { selection: a, schema: o } = t.state, c = new Set(i.plainText ? [] : i.formatting);
-	if ("$anchorCell" in a && !(c.has("table") && s(r, "table"))) {
-		let e = f(n).split("\n").map((e) => `<tr>${e.split("	").map((e) => `<td>${d(e)}</td>`).join("")}</tr>`);
+function E(t, { text: n, html: r }, i, a) {
+	let { selection: o, schema: c } = t.state, u = new Set(i.plainText ? [] : i.formatting);
+	if ("$anchorCell" in o && !(u.has("table") && s(r, "table"))) {
+		let e = h(n).split("\n").map((e) => `<tr>${e.split("	").map((e) => `<td>${m(e)}</td>`).join("")}</tr>`);
 		t.pasteHTML(`<table><tbody>${e.join("")}</tbody></table>`);
 		return;
 	}
 	if (!i.plainText) {
-		S(t, e(r), b(c));
+		let n = u.has("image") && c.nodes.imageUploadNode ? {
+			keys: [],
+			upload: !!a
+		} : null;
+		T(t, e(n ? p(r) : r), C(u, n));
+		let i = Promise.resolve();
+		for (let e of n?.keys ?? []) i = i.then(() => a?.(e));
 		return;
 	}
-	if (o.nodes.math && l(r)) {
-		S(t, r, x);
+	if (c.nodes.math && l(r)) {
+		T(t, r, w);
 		return;
 	}
-	t.pasteText(a.$from.parent.type.spec.code ? f(n) : f(n).replace(/^$/gm, "\xA0"));
+	t.pasteText(o.$from.parent.type.spec.code ? h(n) : h(n).replace(/^$/gm, "\xA0"));
 }
-var w = t.create({
+var D = t.create({
 	name: "externalPaste",
 	priority: 1e3,
 	addOptions() {
-		return { settings: () => ({
-			plainText: !1,
-			formatting: a
-		}) };
+		return {
+			settings: () => ({
+				plainText: !1,
+				formatting: a
+			}),
+			uploadImage: void 0
+		};
 	},
 	addProseMirrorPlugins() {
-		let { settings: e } = this.options;
+		let { settings: e, uploadImage: t } = this.options, { editor: a } = this, o = t ? (e) => t(a, e) : null;
 		return [new n({
 			key: new r("externalPaste"),
 			props: {
@@ -167,19 +196,19 @@ var w = t.create({
 					return u ? u(e, t.state) : e;
 				},
 				handlePaste(t, n) {
-					let r = y(n.clipboardData);
-					return r === null ? !1 : (C(t, r, e()), !0);
+					let r = S(n.clipboardData);
+					return r === null ? !1 : (E(t, r, e(), o), !0);
 				},
 				handleDrop(t, n) {
-					let r = t.dragging ? null : y(n.dataTransfer), a = r === null ? null : t.posAtCoords({
+					let r = t.dragging ? null : S(n.dataTransfer), a = r === null ? null : t.posAtCoords({
 						left: n.clientX,
 						top: n.clientY
 					});
-					return r === null || !a ? !1 : (t.dispatch(t.state.tr.setSelection(i.near(t.state.doc.resolve(a.pos)))), C(t, r, e()), t.focus(), !0);
+					return r === null || !a ? !1 : (t.dispatch(t.state.tr.setSelection(i.near(t.state.doc.resolve(a.pos)))), E(t, r, e(), o), t.focus(), !0);
 				}
 			}
 		})];
 	}
 });
 //#endregion
-export { w as ExternalPaste, a as PASTED_FORMATTING };
+export { D as ExternalPaste, a as PASTED_FORMATTING };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.0.3-next.20261007075859",
+  "version": "3.0.3-next.20261007181944",
   "description": "",
   "repository": {
     "type": "git",
@@ -13,10 +13,10 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "5.0.3-next.20261007075859",
-    "@pie-lib/math-input": "9.0.3-next.20261007075859",
-    "@pie-lib/math-toolbar": "4.0.3-next.20261007075859",
-    "@pie-lib/render-ui": "8.0.3-next.20261007075859",
+    "@pie-lib/drag": "5.0.3-next.20261007175429",
+    "@pie-lib/math-input": "9.0.3-next.20261007175429",
+    "@pie-lib/math-toolbar": "4.0.3-next.20261007175429",
+    "@pie-lib/render-ui": "8.0.3-next.20261007175429",
     "@pie-lib/translator": "5.0.2-next.20261006160832",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-character-count": "3.31.4",
@@ -47,7 +47,7 @@
     "@pie-element/shared-lodash": "0.1.3-next.20261006160832",
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.4-next.20261007064237",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.4-next.20261007175429",
     "@tiptap/extensions": "3.31.4",
     "@tiptap/extension-list": "3.31.4",
     "@tiptap/extension-bubble-menu": "3.31.4",