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

package/src/utils/helper.js

@@ -0,0 +1,69 @@
+const escapeHtml = (str) =>
+  String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+/**
+ * Converts consecutive div elements into a single paragraph with line breaks.
+ * Example: "<div>A</div><div>B</div>" becomes "<p>A<br>B</p>"
+ */
+const convertConsecutiveDivsToParagraph = (html) => {
+  // Create a temporary element to parse the HTML
+  const temp = document.createElement('div');
+  temp.innerHTML = html;
+
+  // Get all top-level children
+  const children = Array.from(temp.children);
+
+  // Only convert if there are 2 or more divs
+  if (children.length < 2) {
+    return html;
+  }
+
+  // Check if all children are divs with simple content (text or inline elements)
+  const allDivs = children.every((child) => child.tagName === 'DIV');
+
+  if (!allDivs) {
+    return html;
+  }
+
+  // Check if divs have no attributes (only convert plain divs)
+  const hasNoAttributes = children.every((div) => div.attributes.length === 0);
+
+  if (!hasNoAttributes) {
+    return html;
+  }
+
+  // Check if divs contain only simple content (no nested block elements)
+  const hasOnlySimpleContent = children.every((div) => {
+    return Array.from(div.children).every((child) => {
+      const tag = child.tagName;
+      // Allow inline elements and br tags
+      return ['SPAN', 'B', 'I', 'EM', 'STRONG', 'U', 'SUB', 'SUP', 'A', 'CODE', 'BR'].includes(tag);
+    });
+  });
+
+  if (!hasOnlySimpleContent) {
+    return html;
+  }
+
+  // Convert to paragraph with br tags
+  const contents = children.map((div) => div.innerHTML);
+  return `<p>${contents.join('<br>')}</p>`;
+};
+
+export const normalizeInitialMarkup = (markup) => {
+  const trimmed = String(markup ?? '').trim();
+  if (!trimmed) return '<div></div>';
+
+  const looksLikeHtml = /<[^>]+>/.test(trimmed);
+  if (!looksLikeHtml) {
+    return `<div>${escapeHtml(trimmed)}</div>`;
+  }
+
+  // Apply the div-to-paragraph transformation
+  return convertConsecutiveDivsToParagraph(trimmed);
+};

package/src/utils/size.js

@@ -0,0 +1,32 @@
+export const valueToSize = (v) => {
+  if (!v) {
+    return;
+  }
+
+  const calcRegex = /^calc\((.*)\)$/;
+
+  if (typeof v === 'string') {
+    if (v.endsWith('%')) {
+      return undefined;
+    }
+
+    if (
+      v.endsWith('px') ||
+      v.endsWith('vh') ||
+      v.endsWith('vw') ||
+      v.endsWith('ch') ||
+      v.endsWith('em') ||
+      v.match(calcRegex)
+    ) {
+      return v;
+    }
+
+    const value = parseInt(v, 10);
+
+    return Number.isNaN(value) ? value : `${value}px`;
+  }
+
+  if (typeof v === 'number') {
+    return `${v}px`;
+  }
+};

package/dist/components/CharacterPicker.d.ts

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

@@ -1,131 +0,0 @@
-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.getBoundingClientRect(), t = document.body.getBoundingClientRect(), { from: n } = l.state.selection, r = l.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), y({
-			top: i,
-			left: r.left
-		});
-		let a = l.view.dom, o = (e) => {
-			g.current && !g.current.contains(e.target) && !a.contains(e.target) && _.current();
-		}, s = setTimeout(() => {
-			document.addEventListener("click", o);
-		});
-		return () => {
-			clearTimeout(s), document.removeEventListener("click", o);
-		};
-	}, [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: "absolute",
-			top: `${v.top}px`,
-			left: `${v.left}px`,
-			maxWidth: "500px",
-			zIndex: 99
-		},
-		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

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

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

package/dist/components/MenuBar.d.ts

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