@pie-lib/editable-html-tip-tap 0.1.0

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 PropTypes from 'prop-types';
+declare const CharacterIcon: {
+    ({ letter }: {
+        letter: any;
+    }): JSX.Element;
+    propTypes: {
+        letter: PropTypes.Requireable<string>;
+    };
+};
+export declare function CharacterPicker({ editor, opts, onClose }: {
+    editor: any;
+    opts: any;
+    onClose: any;
+}): 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 };
+//# sourceMappingURL=CharacterPicker.d.ts.map

package/dist/components/CharacterPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterPicker.d.ts","sourceRoot":"","sources":["../../src/components/CharacterPicker.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,QAAA,MAAM,aAAa;;;;;;;CASlB,CAAC;AAMF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE;;;;CAAA,sBAsKxD;yBAtKe,eAAe;;;;;;;AA8K/B,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/CharacterPicker.js

@@ -0,0 +1,129 @@
+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 s from "prop-types";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "react-dom";
+import { PureToolbar as f } from "@pie-lib/math-toolbar";
+import p from "lodash-es/get.js";
+//#region src/components/CharacterPicker.tsx
+var m = ({ letter: e }) => /* @__PURE__ */ l("div", {
+	style: {
+		fontSize: "24px",
+		lineHeight: "24px"
+	},
+	children: e
+});
+m.propTypes = { letter: s.string };
+function h({ editor: s, opts: m, onClose: h }) {
+	if (!m?.characters?.length) return null;
+	let g = a(null), [_, v] = o({
+		top: 0,
+		left: 0
+	}), [y, b] = o(null), x = i(() => {
+		if (!m) return e;
+		switch (!0) {
+			case m.language === "spanish": return e;
+			case m.language === "special": return t;
+			default: return m;
+		}
+	}, [m]), S = i(() => x.characters.reduce((e, t) => (t.length >= e.columns && (e.columns = t.length), e), {
+		rows: x.characters.length,
+		columns: 0
+	}), [x]), C = () => b(null);
+	r(() => () => {
+		C();
+	}, []), r(() => {
+		if (!s) return;
+		let e = s.options.element.getBoundingClientRect(), t = document.body.getBoundingClientRect(), { from: n } = s.state.selection, r = s.view.coordsAtPos(n), i = e.top + Math.abs(t.top) + e.height + 60;
+		e.y > g.current.offsetHeight && (i = i - (g.current.offsetHeight + e.height) - 80), v({
+			top: i,
+			left: r.left
+		});
+		let a = (e) => {
+			g.current && !g.current.contains(e.target) && !s.view.dom.contains(e.target) && h();
+		}, o = setTimeout(() => {
+			document.addEventListener("click", a);
+		});
+		return () => {
+			clearTimeout(o), document.removeEventListener("click", a);
+		};
+	}, [s, h]);
+	let w = (e, t) => b({
+		anchorEl: e.currentTarget,
+		el: t
+	}), T = (e) => {
+		typeof e == "string" && s.chain().focus().insertContent(e).run();
+	};
+	return /* @__PURE__ */ u(c, { children: [d.createPortal(/* @__PURE__ */ l("div", {
+		ref: g,
+		className: "insert-character-dialog",
+		"data-toolbar-for": s.instanceId,
+		style: {
+			visibility: _.top === 0 && _.left === 0 ? "hidden" : "initial",
+			position: "absolute",
+			top: `${_.top}px`,
+			left: `${_.left}px`,
+			maxWidth: "500px",
+			zIndex: 99
+		},
+		children: /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(f, {
+			keyPadCharacterRef: m.keyPadCharacterRef,
+			setKeypadInteraction: m.setKeypadInteraction,
+			autoFocus: !0,
+			noDecimal: !0,
+			hideInput: !0,
+			noLatexHandling: !0,
+			hideDoneButtonBackground: !0,
+			layoutForKeyPad: S,
+			additionalKeys: x.characters.reduce((e, t) => (e = [...e, ...t.map((e) => ({
+				name: p(e, "name") || e,
+				write: p(e, "write") || e,
+				label: p(e, "label") || e,
+				category: "character",
+				extraClass: "character",
+				extraProps: {
+					...e.extraProps || {},
+					style: {
+						...(e.extraProps || {}).style,
+						border: "1px solid #000"
+					}
+				},
+				...x.hasPreview ? { actions: {
+					onMouseEnter: (t) => w(t, e),
+					onMouseLeave: C
+				} } : {}
+			}))], e), []),
+			keypadMode: "language",
+			onChange: T,
+			onDone: h
+		}) })
+	}), document.body), y && d.createPortal(/* @__PURE__ */ u(n, {
+		onClose: C,
+		anchorEl: y.anchorEl,
+		children: [
+			/* @__PURE__ */ l("div", { children: y.el.label }),
+			/* @__PURE__ */ l("div", {
+				style: {
+					fontSize: 20,
+					lineHeight: "20px"
+				},
+				children: y.el.description
+			}),
+			/* @__PURE__ */ l("div", {
+				style: {
+					fontSize: 20,
+					lineHeight: "20px"
+				},
+				children: y.el.unicode
+			})
+		]
+	}), document.body)] });
+}
+h.propTypes = {
+	editor: s.object,
+	opts: s.object,
+	onClose: s.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.
+ */
+export declare const EditableHtml: (props: any) => JSX.Element;
+export default EditableHtml;
+//# sourceMappingURL=EditableHtml.d.ts.map

package/dist/components/EditableHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableHtml.d.ts","sourceRoot":"","sources":["../../src/components/EditableHtml.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAiGH,eAAO,MAAM,YAAY,GAAI,UAAK,gBA0QjC,CAAC;AA4CF,eAAe,YAAY,CAAC"}

package/dist/components/EditableHtml.js

@@ -0,0 +1,270 @@
+import { normalizeInitialMarkup as e } from "../utils/helper.js";
+import t from "../extensions/extended-table.js";
+import { DivNode as n } from "../extensions/div-node.js";
+import { DragInTheBlankNode as r, ExplicitConstructedResponseNode as i, InlineDropdownNode as a, MathTemplatedNode as o, ResponseAreaExtension as s } from "../extensions/responseArea.js";
+import { MathNode as c } from "../extensions/math.js";
+import { ImageUploadNode as l } from "../extensions/image.js";
+import { Media as u } from "../extensions/media.js";
+import { CSSMark as d } from "../extensions/css.js";
+import { valueToSize as f } from "../utils/size.js";
+import p from "./TiptapContainer.js";
+import { PLUGINS_MAP as m, buildExtensions as h } from "../extensions/index.js";
+import { useEffect as g, useMemo as _, useState as v } from "react";
+import y from "lodash-es/debounce.js";
+import { EditorContent as b, useEditor as x, useEditorState as S } from "@tiptap/react";
+import { styled as C } from "@mui/material/styles";
+import w from "@tiptap/starter-kit";
+import { TextStyleKit as T } from "@tiptap/extension-text-style";
+import { CharacterCount as E } from "@tiptap/extension-character-count";
+import D from "@tiptap/extension-superscript";
+import O from "@tiptap/extension-subscript";
+import k from "@tiptap/extension-text-align";
+import A from "@tiptap/extension-image";
+import j from "@tiptap/extension-placeholder";
+import { TableRow as M } from "@tiptap/extension-table-row";
+import { TableCell as N } from "@tiptap/extension-table-cell";
+import { TableHeader as P } from "@tiptap/extension-table-header";
+import { jsx as F } from "react/jsx-runtime";
+//#region src/components/EditableHtml.tsx
+var I = {
+	position: "bottom",
+	alignment: "left",
+	alwaysVisible: !1,
+	showDone: !0,
+	doneOn: "blur"
+}, L = [
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"code",
+	"bulleted-list",
+	"numbered-list",
+	"image",
+	"math",
+	"languageCharacters",
+	"text-align",
+	"table",
+	"video",
+	"audio",
+	"responseArea",
+	"superscript",
+	"subscript",
+	"css",
+	"h3",
+	"undo",
+	"redo"
+], R = {
+	"--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)"
+}, z = (b) => {
+	let { showParagraphs: C, separateParagraphs: z } = b.pluginProps || {}, [V, H] = v([]), [U, W] = v(!1), { toolbarOpts: G } = b, K = {
+		...I,
+		...G
+	}, q = _(() => {
+		let { customPlugins: e, ...t } = b.pluginProps || {};
+		e ||= [];
+		let n = (b.activePlugins || L)?.filter((e) => {
+			let n = t[m[e] || e] || {};
+			return !n || !n.disabled;
+		});
+		return h(n, e, {
+			math: {},
+			textAlign: b.textAlign,
+			html: {},
+			extraCSSRules: b.extraCSSRules || {},
+			image: { ...b.imageSupport },
+			toolbar: {},
+			table: {},
+			responseArea: { type: b.responseAreaProps?.type },
+			languageCharacters: b.languageCharactersProps,
+			keyPadCharacterRef: {},
+			setKeypadInteraction: {},
+			media: {}
+		});
+	}, [b]), J = x({
+		extensions: [
+			k.configure({
+				types: [
+					"heading",
+					"paragraph",
+					"div",
+					"h1",
+					"h2",
+					"h3",
+					"h4",
+					"h5",
+					"h6",
+					"td",
+					"th"
+				],
+				alignments: [
+					"left",
+					"right",
+					"center",
+					"justify"
+				]
+			}),
+			T,
+			E.configure({ limit: b.charactersLimit || 1e6 }),
+			w.configure({ trailingNode: {
+				node: "paragraph",
+				notAfter: ["paragraph", "div"]
+			} }),
+			n,
+			j.configure({
+				placeholder: b.placeholder,
+				showOnlyWhenEditable: !0,
+				showOnlyCurrent: !1,
+				includeChildren: !0
+			}),
+			t,
+			M,
+			P,
+			N,
+			s.configure(b.responseAreaProps),
+			i.configure(b.responseAreaProps),
+			r.configure(b.responseAreaProps),
+			a.configure(b.responseAreaProps),
+			o.configure(b.responseAreaProps),
+			c.configure({ toolbarOpts: K }),
+			O,
+			D,
+			A,
+			l.configure({
+				toolbarOpts: K,
+				imageHandling: {
+					disableImageAlignmentButtons: b.disableImageAlignmentButtons,
+					onDone: () => b.onDone?.(J.getHTML()),
+					onDelete: b.imageSupport && b.imageSupport.delete && ((e) => {
+						let { src: t } = e.attrs;
+						b.imageSupport.delete(t, (t) => {
+							let n = V.filter((t) => t.key !== e.key), r = {
+								pendingImages: n,
+								scheduled: U && n.length === 0 ? !1 : U
+							};
+							H(r.pendingImages), W(r.scheduled);
+						});
+					}),
+					insertImageRequested: b.imageSupport && ((e, t) => {
+						let n = (t) => {
+							let n;
+							U && t && (n = b.onChange);
+							let r = V.filter((t) => t.key !== e.key), i = { pendingImages: r };
+							r.length === 0 && (i.scheduled = !1), H(i.pendingImages), W(i.scheduled), n?.(J.getHTML());
+						}, r = () => {
+							let e = t(n);
+							b.imageSupport.add(e);
+						};
+						H([...V, e]), r();
+					}),
+					maxImageWidth: b.maxImageWidth,
+					maxImageHeight: b.maxImageHeight
+				},
+				limit: 3
+			}),
+			u.configure({ uploadSoundSupport: b.uploadSoundSupport }),
+			d.configure({ extraCSSRules: b.extraCSSRules })
+		],
+		immediatelyRender: !1,
+		editorProps: { handleKeyDown(e, t) {
+			return b.onKeyDown ? b.onKeyDown(t) : !1;
+		} },
+		editable: !b.disabled,
+		content: e(b.markup),
+		onUpdate: ({ editor: e, transaction: t }) => {
+			t.isDone && b.onChange?.(e.getHTML());
+		},
+		onBlur: y(({ editor: e }) => {
+			e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response") || (b.markup !== e.getHTML() && b.onChange?.(e.getHTML()), K.doneOn === "blur" && b.onDone?.(e.getHTML()));
+		}, 200)
+	}, [b.charactersLimit]);
+	g(() => {
+		b.editorRef && b.editorRef(J);
+	}, [b.editorRef, J]), g(() => {
+		J?.setEditable(!b.disabled);
+	}, [b.disabled, J]), g(() => {
+		if (!J) return;
+		let t = e(b.markup);
+		t !== J.getHTML() && J.commands.setContent(t, !1);
+	}, [b.markup, J]), g(() => {
+		Object.entries(R).forEach(([e, t]) => {
+			document.documentElement.style.setProperty(e, t);
+		});
+	}, []);
+	let Y = S({
+		editor: J,
+		selector: (e) => ({ isFocused: e.editor?.isFocused })
+	}), X = _(() => {
+		let { minWidth: e, width: t, maxWidth: n, minHeight: r, height: i, maxHeight: a } = b;
+		return {
+			width: f(t),
+			minWidth: f(e),
+			maxWidth: f(n),
+			height: f(i),
+			minHeight: f(r),
+			maxHeight: f(a)
+		};
+	}, [b]);
+	return /* @__PURE__ */ F(p, {
+		...b,
+		activePlugins: q,
+		toolbarOpts: K,
+		editorState: Y,
+		editor: J,
+		children: J && /* @__PURE__ */ F(B, {
+			style: {
+				minHeight: X.minHeight,
+				height: X.height,
+				maxHeight: X.maxHeight
+			},
+			showParagraph: C && !C.disabled,
+			separateParagraph: z && !z.disabled,
+			editor: J
+		})
+	});
+}, B = C(b, { 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.is-editor-empty:first-child::before, & div.is-editor-empty:first-child::before": {
+			content: "attr(data-placeholder)",
+			float: "left",
+			height: 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 && { "& > div:has(+ div)": { marginBottom: "1em" } }
+	}
+}));
+//#endregion
+export { z 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.
+ */
+declare const StyledMenuBar: (props: any) => JSX.Element;
+export default StyledMenuBar;
+//# sourceMappingURL=MenuBar.d.ts.map

package/dist/components/MenuBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../../src/components/MenuBar.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AA4aH,QAAA,MAAM,aAAa,GAAI,UAAK,gBA4B3B,CAAC;AA6FF,eAAe,aAAa,CAAC"}