@pie-lib/editable-html-tip-tap 2.2.0-beta.9 → 3.0.0-next.36

package/dist/components/CharacterPicker.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/CharacterPicker.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 React from 'react';
+import PropTypes from 'prop-types';
+declare const CharacterIcon: {
+    ({ letter }: {
+        letter: any;
+    }): React.JSX.Element;
+    propTypes: {
+        letter: PropTypes.Requireable<string>;
+    };
+};
+export declare function CharacterPicker({ editor, opts, onClose }: {
+    editor: any;
+    opts: any;
+    onClose: any;
+}): React.JSX.Element | null;
+export declare namespace CharacterPicker {
+    var propTypes: {
+        editor: PropTypes.Requireable<object>;
+        opts: PropTypes.Requireable<object>;
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export { CharacterIcon };

package/dist/components/CharacterPicker.js

@@ -0,0 +1,141 @@
+import { spanishConfig as e, specialConfig as t } from "./characters/characterUtils.js";
+import n from "./characters/custom-popper.js";
+import { useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { get as s } from "@pie-element/shared-lodash";
+import c from "react-dom";
+import l from "prop-types";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { PureToolbar as p } from "@pie-lib/math-toolbar";
+//#region src/components/CharacterPicker.tsx
+var m = ({ letter: e }) => /* @__PURE__ */ d("div", {
+	style: {
+		fontSize: "24px",
+		lineHeight: "24px"
+	},
+	children: e
+});
+m.propTypes = { letter: l.string };
+function h({ editor: l, opts: m, onClose: h }) {
+	if (!m?.characters?.length) return null;
+	let g = a(null), _ = a(h), [v, y] = o({
+		top: 0,
+		left: 0
+	}), [b, x] = o(null);
+	_.current = h;
+	let S = i(() => {
+		if (!m) return e;
+		switch (!0) {
+			case m.language === "spanish": return e;
+			case m.language === "special": return t;
+			default: return m;
+		}
+	}, [m]), C = i(() => S.characters.reduce((e, t) => (t.length >= e.columns && (e.columns = t.length), e), {
+		rows: S.characters.length,
+		columns: 0
+	}), [S]), w = () => x(null);
+	r(() => () => {
+		w();
+	}, []), r(() => {
+		if (!l) return;
+		let e = l.options.element, t = l.view.dom, n = () => {
+			if (!g.current) return;
+			let t = e.getBoundingClientRect(), { from: n } = l.state.selection, r = l.view.coordsAtPos(n), i = g.current.offsetHeight, a = g.current.offsetWidth, o = window.innerHeight - (t.bottom + 60) >= i || t.top < i + 80 ? t.bottom + 60 : t.top - i - 20, s = r.left;
+			o = Math.max(8, Math.min(o, window.innerHeight - i - 8)), s = Math.max(8, Math.min(s, window.innerWidth - a - 8)), y({
+				top: o,
+				left: s
+			});
+		};
+		n();
+		let r = null, i = () => {
+			r === null && (r = requestAnimationFrame(() => {
+				r = null, n();
+			}));
+		};
+		window.addEventListener("scroll", i, !0), window.addEventListener("resize", i);
+		let a = (e) => {
+			g.current && !g.current.contains(e.target) && !t.contains(e.target) && _.current();
+		}, o = setTimeout(() => {
+			document.addEventListener("click", a);
+		});
+		return () => {
+			clearTimeout(o), r !== null && cancelAnimationFrame(r), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i), document.removeEventListener("click", a);
+		};
+	}, [l]);
+	let T = (e, t) => x({
+		anchorEl: e.currentTarget,
+		el: t
+	});
+	return /* @__PURE__ */ f(u, { children: [c.createPortal(/* @__PURE__ */ d("div", {
+		ref: g,
+		className: "insert-character-dialog",
+		"data-toolbar-for": l.instanceId,
+		style: {
+			visibility: v.top === 0 && v.left === 0 ? "hidden" : "initial",
+			position: "fixed",
+			top: `${v.top}px`,
+			left: `${v.left}px`,
+			maxWidth: "500px",
+			zIndex: 1e3
+		},
+		children: /* @__PURE__ */ d("div", { children: /* @__PURE__ */ d(p, {
+			keyPadCharacterRef: m.keyPadCharacterRef,
+			setKeypadInteraction: m.setKeypadInteraction,
+			autoFocus: !0,
+			noDecimal: !0,
+			hideInput: !0,
+			noLatexHandling: !0,
+			hideDoneButtonBackground: !0,
+			layoutForKeyPad: C,
+			additionalKeys: S.characters.reduce((e, t) => (e = [...e, ...t.map((e) => ({
+				name: s(e, "name") || e,
+				write: s(e, "write") || e,
+				label: s(e, "label") || e,
+				category: "character",
+				extraClass: "character",
+				extraProps: {
+					...e.extraProps || {},
+					style: {
+						...(e.extraProps || {}).style,
+						border: "1px solid #000"
+					}
+				},
+				...S.hasPreview ? { actions: {
+					onMouseEnter: (t) => T(t, e),
+					onMouseLeave: w
+				} } : {}
+			}))], e), []),
+			keypadMode: "language",
+			onChange: (e) => {
+				typeof e == "string" && l.chain().focus().insertContent(e).run();
+			},
+			onDone: h
+		}) })
+	}), document.body), b && c.createPortal(/* @__PURE__ */ f(n, {
+		onClose: w,
+		anchorEl: b.anchorEl,
+		children: [
+			/* @__PURE__ */ d("div", { children: b.el.label }),
+			/* @__PURE__ */ d("div", {
+				style: {
+					fontSize: 20,
+					lineHeight: "20px"
+				},
+				children: b.el.description
+			}),
+			/* @__PURE__ */ d("div", {
+				style: {
+					fontSize: 20,
+					lineHeight: "20px"
+				},
+				children: b.el.unicode
+			})
+		]
+	}), document.body)] });
+}
+h.propTypes = {
+	editor: l.object,
+	opts: l.object,
+	onClose: l.func.isRequired
+};
+//#endregion
+export { m as CharacterIcon, h as CharacterPicker };

package/dist/components/EditableHtml.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/EditableHtml.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 React from 'react';
+export declare const EditableHtml: (props: any) => React.JSX.Element;
+export default EditableHtml;

package/dist/components/EditableHtml.js

@@ -0,0 +1,330 @@
+import { normalizeInitialMarkup as e } from "../utils/helper.js";
+import t from "../extensions/extended-table.js";
+import { ExtendedTableCell as n, ExtendedTableHeader as r } from "../extensions/extended-table-cell.js";
+import { DivNode as i } from "../extensions/div-node.js";
+import { EnsureEmptyRootIsDiv as a } from "../extensions/ensure-empty-root-div.js";
+import { EnsureListItemContentIsDiv as o } from "../extensions/ensure-list-item-content-is-div.js";
+import { DragInTheBlankNode as s, ExplicitConstructedResponseNode as c, InlineDropdownNode as l, MathTemplatedNode as u, ResponseAreaExtension as ee } from "../extensions/responseArea.js";
+import { MathNode as te } from "../extensions/math.js";
+import { ImageUploadNode as d } from "../extensions/image.js";
+import { Media as f } from "../extensions/media.js";
+import { CSSMark as ne } from "../extensions/css.js";
+import { ExtendedListItem as p } from "../extensions/extended-list-item.js";
+import { HeadingParagraph as re } from "../extensions/heading-paragraph.js";
+import { valueToSize as m } from "../utils/size.js";
+import h from "./TiptapContainer.js";
+import { PLUGINS_MAP as g, buildExtensions as _ } from "../extensions/index.js";
+import { useCallback as v, useEffect as y, useMemo as b, useState as x } from "react";
+import { debounce as S } from "@pie-element/shared-lodash";
+import { EditorContent as C, useEditor as w, useEditorState as T } from "@tiptap/react";
+import { styled as E } from "@mui/material/styles";
+import D from "@tiptap/starter-kit";
+import { TextStyleKit as O } from "@tiptap/extension-text-style";
+import { CharacterCount as k } from "@tiptap/extension-character-count";
+import A from "@tiptap/extension-superscript";
+import j from "@tiptap/extension-subscript";
+import M from "@tiptap/extension-text-align";
+import N from "@tiptap/extension-image";
+import P from "@tiptap/extension-placeholder";
+import { TableRow as F } from "@tiptap/extension-table-row";
+import { jsx as I } from "react/jsx-runtime";
+//#region src/components/EditableHtml.tsx
+var ie = {
+	position: "bottom",
+	alignment: "left",
+	alwaysVisible: !1,
+	showDone: !0,
+	doneOn: "blur"
+}, L = {
+	options: {},
+	respAreaToolbar: () => {},
+	onHandleAreaChange: () => {}
+}, R = [
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"code",
+	"bulleted-list",
+	"numbered-list",
+	"image",
+	"math",
+	"languageCharacters",
+	"text-align",
+	"table",
+	"video",
+	"audio",
+	"responseArea",
+	"superscript",
+	"subscript",
+	"css",
+	"h3",
+	"undo",
+	"redo"
+], z = {
+	"--white": "#fff",
+	"--black": "#2e2b29",
+	"--black-contrast": "#110f0e",
+	"--gray-1": "rgba(61, 37, 20, .05)",
+	"--gray-2": "rgba(61, 37, 20, .08)",
+	"--gray-3": "rgba(61, 37, 20, .12)",
+	"--gray-4": "rgba(53, 38, 28, .3)",
+	"--gray-5": "rgba(28, 25, 23, .6)",
+	"--green": "#22c55e",
+	"--purple": "#6a00f5",
+	"--purple-contrast": "#5800cc",
+	"--purple-light": "rgba(88, 5, 255, .05)",
+	"--yellow-contrast": "#facc15",
+	"--yellow": "rgba(250, 204, 21, .4)",
+	"--yellow-light": "#fffae5",
+	"--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)"
+}, B = (e) => ({
+	role: "textbox",
+	"data-pie-editor": "true",
+	spellcheck: e ? "true" : "false",
+	autocorrect: e ? "on" : "off",
+	autocapitalize: e ? "on" : "off"
+}), V = (C) => {
+	let { showParagraphs: E, separateParagraphs: V } = C.pluginProps || {}, [ae, U] = x([]), [W, G] = x(!1), { toolbarOpts: K } = C, q = v((e) => {
+		U((t) => {
+			let n = t.filter((t) => t.pos !== e);
+			return n.length === 0 && G(!1), n;
+		});
+	}, [U]), J = {
+		...ie,
+		...K
+	}, Y = v((e) => {
+		let t = e.getHTML();
+		C.markup !== t && C.onChange?.(t), J.doneOn === "blur" && C.onDone?.(t);
+	}, [
+		C.markup,
+		C.onChange,
+		C.onDone,
+		J.doneOn
+	]), X = b(() => ({
+		...L,
+		...C.responseAreaProps,
+		onInlineDropdownToolbarClose: Y
+	}), [C.responseAreaProps, Y]), oe = b(() => {
+		let { customPlugins: e, ...t } = C.pluginProps || {};
+		e ||= [];
+		let n = (C.activePlugins || R)?.filter((e) => {
+			let n = g[e] || e, r = t[n] || {};
+			return !r || !r.disabled;
+		});
+		return _(n, e, {
+			math: {},
+			textAlign: C.textAlign,
+			html: {},
+			extraCSSRules: C.extraCSSRules || {},
+			image: { ...C.imageSupport },
+			toolbar: {},
+			table: {},
+			responseArea: { type: X.type },
+			languageCharacters: C.languageCharactersProps,
+			keyPadCharacterRef: {},
+			setKeypadInteraction: {},
+			media: {}
+		});
+	}, [C, X.type]), se = [
+		M.configure({
+			types: [
+				"heading",
+				"paragraph",
+				"div",
+				"headingParagraph",
+				"h1",
+				"h2",
+				"h3",
+				"h4",
+				"h5",
+				"h6",
+				"td",
+				"th"
+			],
+			alignments: [
+				"left",
+				"right",
+				"center",
+				"justify"
+			]
+		}),
+		O,
+		k.configure({ limit: C.charactersLimit || 1e6 }),
+		D.configure({
+			trailingNode: {
+				node: "paragraph",
+				notAfter: ["paragraph", "div"]
+			},
+			link: {
+				autolink: !1,
+				linkOnPaste: !1
+			}
+		}),
+		p,
+		i,
+		re,
+		a,
+		o,
+		P.configure({
+			placeholder: C.placeholder,
+			showOnlyWhenEditable: !0,
+			showOnlyCurrent: !1,
+			includeChildren: !0
+		}),
+		t,
+		F,
+		r,
+		n,
+		ee.configure(X),
+		c.configure(X),
+		s.configure(X),
+		l.configure(X),
+		u.configure(X),
+		te.configure({
+			toolbarOpts: J,
+			math: C.pluginProps?.math || {}
+		}),
+		j,
+		A,
+		N,
+		d.configure({
+			toolbarOpts: J,
+			imageHandling: {
+				disableImageAlignmentButtons: C.disableImageAlignmentButtons,
+				onDone: (e) => C.onDone?.(e.getHTML()),
+				onDelete: C.imageSupport && C.imageSupport.delete && ((e) => {
+					let { src: t } = e.attrs;
+					C.imageSupport.delete(t, (t) => {
+						q(e.pos);
+					});
+				}),
+				insertImageRequested: C.imageSupport && ((e, t, n) => {
+					let [r, i] = t, a = (t) => {
+						let n;
+						W && t && (n = C.onChange), q(i), n?.(e.getHTML());
+					};
+					e._insertingImage = !0, U((e) => [...e, r]), (() => {
+						let t = n(a), r = S(() => {
+							let t = () => window.removeEventListener("focus", r);
+							if (!e._insertingImage) {
+								t();
+								return;
+							}
+							q(i), e._insertingImage = !1, t();
+						}, 500);
+						window.addEventListener("focus", r), C.imageSupport.add(t);
+					})();
+				}),
+				maxImageWidth: C.maxImageWidth,
+				maxImageHeight: C.maxImageHeight
+			},
+			limit: 3
+		}),
+		f.configure({ uploadSoundSupport: C.uploadSoundSupport }),
+		ne.configure({ extraCSSRules: C.extraCSSRules })
+	], Z = C.spellCheck !== !1, Q = w({
+		extensions: se,
+		immediatelyRender: !1,
+		editorProps: {
+			attributes: B(Z),
+			handleKeyDown(e, t) {
+				return C.onKeyDown ? C.onKeyDown(t) : !1;
+			}
+		},
+		editable: !C.disabled,
+		content: e(C.markup),
+		onUpdate: ({ editor: e, transaction: t }) => {
+			t.isDone && C.onChange?.(e.getHTML());
+		},
+		onBlur: ({ editor: e }) => {
+			e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || !e.schema || Y(e);
+		}
+	}, [C.charactersLimit]);
+	y(() => {
+		C.editorRef && C.editorRef(Q);
+	}, [C.editorRef, Q]), y(() => {
+		Q?.setEditable(!C.disabled);
+	}, [C.disabled, Q]), y(() => {
+		if (!Q) return;
+		let e = Q.options?.editorProps, t = {
+			...e?.attributes,
+			...B(Z)
+		};
+		e?.attributes?.spellcheck !== t.spellcheck && Q.setOptions({ editorProps: {
+			...e,
+			attributes: t
+		} });
+	}, [Z, Q]), y(() => {
+		if (!Q) return;
+		let t = e(C.markup);
+		t !== Q.getHTML() && Q.commands.setContent(t, { emitUpdate: !1 });
+	}, [C.markup, Q]), y(() => {
+		Object.entries(z).forEach(([e, t]) => {
+			document.documentElement.style.setProperty(e, t);
+		});
+	}, []);
+	let ce = T({
+		editor: Q,
+		selector: (e) => ({ isFocused: e.editor?.isFocused })
+	}), $ = b(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = C;
+		return {
+			width: m(t),
+			minWidth: m(e),
+			maxWidth: m(n),
+			height: m(i),
+			minHeight: m(r),
+			maxHeight: m(a)
+		};
+	}, [C]);
+	return /* @__PURE__ */ I(h, {
+		...C,
+		activePlugins: oe,
+		toolbarOpts: J,
+		editorState: ce,
+		editor: Q,
+		children: Q && /* @__PURE__ */ I(H, {
+			style: {
+				minHeight: $.minHeight,
+				height: $.height,
+				maxHeight: $.maxHeight
+			},
+			showParagraph: E && !E.disabled,
+			separateParagraph: V && !V.disabled,
+			editor: Q
+		})
+	});
+}, H = E(C, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+	display: "flex",
+	outline: "none !important",
+	"& .ProseMirror": {
+		flex: 1,
+		padding: "5px",
+		maxHeight: "500px",
+		outline: "none !important",
+		position: "initial",
+		"& > p, & > div": { margin: "0" },
+		"& p[data-placeholder].is-empty:only-child, & div[data-placeholder].is-empty:only-child": { position: "relative" },
+		"& p[data-placeholder].is-empty:only-child::before, & div[data-placeholder].is-empty:only-child::before": {
+			content: "attr(data-placeholder)",
+			position: "absolute",
+			left: 0,
+			top: 0,
+			color: "#9CA3AF",
+			pointerEvents: "none",
+			whiteSpace: "pre-wrap"
+		},
+		...e && { "& > p:has(+ p)::after, & > div:has(+ div)::after": {
+			display: "block",
+			content: "\"¶\"",
+			fontSize: "1em",
+			color: "#146EB3"
+		} },
+		...t && { "& > p:has(+ p)": { marginBottom: "1em" } }
+	}
+}));
+//#endregion
+export { V as EditableHtml, V as default };

package/dist/components/MenuBar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/MenuBar.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 React from 'react';
+declare const StyledMenuBar: (props: any) => React.JSX.Element;
+export default StyledMenuBar;