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

package/dist/components/TiptapContainer.js

@@ -0,0 +1,167 @@
+import { valueToSize as e } from "../utils/size.js";
+import t from "./MenuBar.js";
+import { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { styled as o } from "@mui/material/styles";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { color as l } from "@pie-lib/render-ui";
+//#region src/components/TiptapContainer.tsx
+var u = o("div", { shouldForwardProp: (e) => !["noBorder", "error"].includes(e) })(({ theme: e, noBorder: t, error: n }) => ({
+	position: "relative",
+	padding: "0px",
+	border: t ? "none" : "1px solid #ccc",
+	borderRadius: "4px",
+	cursor: "text",
+	"& [data-slate-editor=\"true\"]": {
+		wordBreak: "break-word",
+		overflow: "visible",
+		maxHeight: "500px",
+		padding: "5px"
+	},
+	"&:first-child": { marginTop: 0 },
+	"& ul, & ol": {
+		padding: "0 1rem",
+		margin: "1.25rem 1rem 1.25rem 0.4rem"
+	},
+	"& ul li p, & ol li p": {
+		marginTop: "0.25em",
+		marginBottom: "0.25em"
+	},
+	"& h1, & h2, & h3, & h4, & h5, & h6": {
+		lineHeight: 1.1,
+		marginTop: "2.5rem",
+		textWrap: "pretty"
+	},
+	"& h1, & h2": {
+		marginTop: "3.5rem",
+		marginBottom: "1.5rem"
+	},
+	"& h1": { fontSize: "1.4rem" },
+	"& h2": { fontSize: "1.2rem" },
+	"& h3": { fontSize: "1.1rem" },
+	"& h4, & h5, & h6": { fontSize: "1rem" },
+	"& code": {
+		backgroundColor: "var(--purple-light)",
+		borderRadius: "0.4rem",
+		color: "var(--black)",
+		fontSize: "0.85rem",
+		padding: "0.25em 0.3em"
+	},
+	"& pre": {
+		background: "var(--black)",
+		borderRadius: "0.5rem",
+		color: "var(--white)",
+		fontFamily: "'JetBrainsMono', monospace",
+		margin: "1.5rem 0",
+		padding: "0.75rem 1rem",
+		"& code": {
+			background: "none",
+			color: "inherit",
+			fontSize: "0.8rem",
+			padding: 0
+		}
+	},
+	"& blockquote": {
+		background: "#f9f9f9",
+		borderLeft: "5px solid #ccc",
+		margin: "1.5em 10px",
+		padding: ".5em 10px"
+	},
+	"& p": { margin: "0" },
+	"& table": {
+		tableLayout: "fixed",
+		width: "100%",
+		borderCollapse: "collapse",
+		color: l.text(),
+		backgroundColor: l.background()
+	},
+	"& table:not([border=\"1\"]) tr": { borderTop: `1px solid ${l.tableGridLight()}` },
+	"& td, th": {
+		padding: ".6em 1em",
+		textAlign: "center"
+	},
+	"& table:not([border=\"1\"]) td, th": { border: `1px solid ${l.tableGridLight()}` },
+	...n && { border: `2px solid ${e.palette.error.main} !important` }
+})), d = o("div", { shouldForwardProp: (e) => !["disableScrollbar", "highlightShape"].includes(e) })(({ theme: e, disableScrollbar: t, highlightShape: n }) => ({
+	position: "relative",
+	padding: "0px",
+	overflowY: "auto",
+	color: l.text(),
+	backgroundColor: n ? e.palette.action.selected : l.background(),
+	...t && {
+		"&::-webkit-scrollbar": { display: "none" },
+		scrollbarWidth: "none",
+		"-ms-overflow-style": "none"
+	}
+})), f = o("div", { shouldForwardProp: (e) => e !== "noPadding" })(({ noPadding: e }) => ({ padding: e ? 0 : "10px 8px" }));
+function p(o) {
+	let [l, p] = a(null), m = i(null), { editor: h, disabled: g, children: _, disableScrollbar: v, activePlugins: y, toolbarOpts: b, responseAreaProps: x, autoFocus: S, minWidth: C, width: w, maxWidth: T, minHeight: E, height: D, maxHeight: O, highlightShape: k, ref: A } = o;
+	n(() => {
+		h && m.current && (h._tiptapContainerEl = m.current);
+	}, [h, m.current]), n(() => {
+		h && S && Promise.resolve().then(() => {
+			h.commands.focus("end");
+		});
+	}, [h, S]), n(() => {
+		if (o.adjustWidthForLimit) {
+			let e = document.createElement("p");
+			e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = "W".repeat(o.charactersLimit);
+			let t = window.getComputedStyle(m.current);
+			[
+				"fontFamily",
+				"fontSize",
+				"fontWeight",
+				"fontStyle",
+				"letterSpacing",
+				"wordSpacing",
+				"textTransform",
+				"lineHeight"
+			].forEach((n) => {
+				e.style[n] = t[n];
+			}), document.body.appendChild(e), p(`${e.offsetWidth + 27}px`), e.remove();
+		}
+	}, [o.adjustWidthForLimit, o.charactersLimit]);
+	let j = r(() => ({
+		width: e(l || w),
+		minWidth: e(C),
+		maxWidth: e(T),
+		height: e(D),
+		minHeight: e(E),
+		maxHeight: e(O)
+	}), [
+		l,
+		C,
+		w,
+		T,
+		E,
+		D,
+		O
+	]);
+	return /* @__PURE__ */ c(u, {
+		noBorder: b && b.noBorder,
+		error: b && b.error,
+		className: o.className,
+		style: {
+			width: j.width,
+			minWidth: j.minWidth,
+			maxWidth: j.maxWidth
+		},
+		ref: m,
+		children: [/* @__PURE__ */ s(d, {
+			disableScrollbar: v,
+			highlightShape: k,
+			children: /* @__PURE__ */ s(f, {
+				noPadding: b && b.noPadding,
+				children: _
+			})
+		}), h && /* @__PURE__ */ s(t, {
+			editor: h,
+			responseAreaProps: x,
+			toolbarOpts: b,
+			activePlugins: y,
+			onChange: o.onChange,
+			autoWidthToolbar: o.autoWidthToolbar
+		})]
+	});
+}
+//#endregion
+export { p as default };

package/dist/components/characters/characterUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/characters/characterUtils.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 spanishConfig: {
+    characters: string[][];
+};
+export declare const specialConfig: {
+    hasPreview: boolean;
+    characters: ({
+        unicode: string;
+        description: string;
+        write: string;
+        label: string;
+        extraProps?: undefined;
+    } | {
+        unicode: string;
+        description: string;
+        write: string;
+        label: string;
+        extraProps: {
+            style: {
+                gridRow: string;
+            };
+        };
+    })[][];
+};
+export declare const characterIcons: {
+    spanish: string;
+    special: string;
+};

package/dist/components/characters/characterUtils.js

@@ -0,0 +1,465 @@
+//#region src/components/characters/characterUtils.ts
+var e = { characters: [
+	[
+		"á",
+		"é",
+		"í",
+		"ó",
+		"ú"
+	],
+	[
+		"Á",
+		"É",
+		"Í",
+		"Ó",
+		"Ú"
+	],
+	[
+		"—",
+		"«",
+		"»",
+		"ñ",
+		"ü"
+	],
+	[
+		"-",
+		"¿",
+		"¡",
+		"Ñ",
+		"Ü"
+	]
+] }, t = {
+	hasPreview: !0,
+	characters: [
+		[
+			{
+				unicode: "U+00A2",
+				description: "CENT SIGN",
+				write: "¢",
+				label: "¢"
+			},
+			{
+				unicode: "U+00BF",
+				description: "INVERTED QUESTION MARK",
+				write: "¿",
+				label: "¿"
+			},
+			{
+				unicode: "U+00B4",
+				description: "ACUTE ACCENT",
+				write: "´",
+				label: "´",
+				extraProps: { style: { gridRow: "span 2" } }
+			},
+			{
+				unicode: "U+00E1",
+				description: "LATIN SMALL LETTER A WITH ACUTE",
+				write: "á",
+				label: "á"
+			},
+			{
+				unicode: "U+00E9",
+				description: "LATIN SMALL LETTER E WITH ACUTE",
+				write: "é",
+				label: "é"
+			},
+			{
+				unicode: "U+00ED",
+				description: "LATIN SMALL LETTER I WITH ACUTE",
+				write: "í",
+				label: "í"
+			},
+			{
+				unicode: "U+00F3",
+				description: "LATIN SMALL LETTER O WITH ACUTE",
+				write: "ó",
+				label: "ó"
+			},
+			{
+				unicode: "U+00FA",
+				description: "LATIN SMALL LETTER U WITH ACUTE",
+				write: "ú",
+				label: "ú"
+			},
+			{
+				unicode: "U+00F1",
+				description: "LATIN SMALL LETTER N WITH TILDE",
+				write: "ñ",
+				label: "ñ"
+			}
+		],
+		[
+			{
+				unicode: "U+20AC",
+				description: "EURO SIGN",
+				write: "€",
+				label: "€"
+			},
+			{
+				unicode: "U+00A1",
+				description: "INVERTED EXCLAMATION MARK",
+				write: "¡",
+				label: "¡"
+			},
+			{
+				unicode: "U+00C1",
+				description: "LATIN CAPITAL LETTER A WITH ACUTE",
+				write: "Á",
+				label: "Á"
+			},
+			{
+				unicode: "U+00C9",
+				description: "LATIN CAPITAL LETTER E WITH ACUTE",
+				write: "É",
+				label: "É"
+			},
+			{
+				unicode: "U+00CD",
+				description: "LATIN CAPITAL LETTER I WITH ACUTE",
+				write: "Í",
+				label: "Í"
+			},
+			{
+				unicode: "U+00D3",
+				description: "LATIN CAPITAL LETTER O WITH ACUTE",
+				write: "Ó",
+				label: "Ó"
+			},
+			{
+				unicode: "U+00DA",
+				description: "LATIN CAPITAL LETTER U WITH ACUTE",
+				write: "Ú",
+				label: "Ú"
+			},
+			{
+				unicode: "U+00D1",
+				description: "LATIN CAPITAL LETTER N WITH TILDE",
+				write: "Ñ",
+				label: "Ñ"
+			}
+		],
+		[
+			{
+				unicode: "U+00A3",
+				description: "POUND SIGN",
+				write: "£",
+				label: "£"
+			},
+			{
+				unicode: "U+00AB",
+				description: "LEFT-POINTING DOUBLE ANGLE QUOTATION MARK",
+				write: "«",
+				label: "«"
+			},
+			{
+				unicode: "U+005E",
+				description: "CIRCUMFLEX ACCENT",
+				write: "^",
+				label: "^",
+				extraProps: { style: { gridRow: "span 2" } }
+			},
+			{
+				unicode: "U+00E2",
+				description: "LATIN SMALL LETTER A WITH CIRCUMFLEX",
+				write: "â",
+				label: "â"
+			},
+			{
+				unicode: "U+00EA",
+				description: "LATIN SMALL LETTER E WITH CIRCUMFLEX",
+				write: "ê",
+				label: "ê"
+			},
+			{
+				unicode: "U+00EE",
+				description: "LATIN SMALL LETTER I WITH CIRCUMFLEX",
+				write: "î",
+				label: "î"
+			},
+			{
+				unicode: "U+00F4",
+				description: "LATIN SMALL LETTER O WITH CIRCUMFLEX",
+				write: "ô",
+				label: "ô"
+			},
+			{
+				unicode: "U+00FB",
+				description: "LATIN SMALL LETTER U WITH CIRCUMFLEX",
+				write: "û",
+				label: "û"
+			},
+			{
+				unicode: "U+00E7",
+				description: "LATIN SMALL LETTER C WITH CEDILLA",
+				write: "ç",
+				label: "ç"
+			}
+		],
+		[
+			{
+				unicode: "U+00A5",
+				description: "YEN SIGN",
+				write: "¥",
+				label: "¥"
+			},
+			{
+				unicode: "U+00BB",
+				description: "RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK",
+				write: "»",
+				label: "»"
+			},
+			{
+				unicode: "U+00C2",
+				description: "LATIN CAPITAL LETTER A WITH CIRCUMFLEX",
+				write: "Â",
+				label: "Â"
+			},
+			{
+				unicode: "U+00CA",
+				description: "LATIN CAPITAL LETTER E WITH CIRCUMFLEX",
+				write: "Ê",
+				label: "Ê"
+			},
+			{
+				unicode: "U+00CE",
+				description: "LATIN CAPITAL LETTER I WITH CIRCUMFLEX",
+				write: "Î",
+				label: "Î"
+			},
+			{
+				unicode: "U+00D4",
+				description: "LATIN CAPITAL LETTER O WITH CIRCUMFLEX",
+				write: "Ô",
+				label: "Ô"
+			},
+			{
+				unicode: "U+00DB",
+				description: "LATIN CAPITAL LETTER U WITH CIRCUMFLEX",
+				write: "Û",
+				label: "Û"
+			},
+			{
+				unicode: "U+00C7",
+				description: "LATIN CAPITAL LETTER C WITH CEDILLA",
+				write: "Ç",
+				label: "Ç"
+			}
+		],
+		[
+			{
+				unicode: "U+200A",
+				description: "HAIR SPACE",
+				write: String.fromCodePoint("0x200A"),
+				label: " "
+			},
+			{
+				unicode: "U+00A7",
+				description: "SECTION SIGN",
+				write: "§",
+				label: "§"
+			},
+			{
+				unicode: "U+00A8",
+				description: "DIAERESIS",
+				write: "¨",
+				label: "¨",
+				extraProps: { style: { gridRow: "span 2" } }
+			},
+			{
+				unicode: "U+00E4",
+				description: "LATIN SMALL LETTER A WITH DIAERESIS",
+				write: "ä",
+				label: "ä"
+			},
+			{
+				unicode: "U+00EB",
+				description: "LATIN SMALL LETTER E WITH DIAERESIS",
+				write: "ë",
+				label: "ë"
+			},
+			{
+				unicode: "U+00EF",
+				description: "LATIN SMALL LETTER I WITH DIAERESIS",
+				write: "ï",
+				label: "ï"
+			},
+			{
+				unicode: "U+00F6",
+				description: "LATIN SMALL LETTER O WITH DIAERESIS",
+				write: "ö",
+				label: "ö"
+			},
+			{
+				unicode: "U+00FC",
+				description: "LATIN SMALL LETTER U WITH DIAERESIS",
+				write: "ü",
+				label: "ü"
+			},
+			{
+				unicode: "U+00DF",
+				description: "LATIN SMALL LETTER SHARP S",
+				write: "ß",
+				label: "ß"
+			}
+		],
+		[
+			{
+				unicode: "U+2009",
+				description: "THIN SPACE",
+				write: String.fromCodePoint("0x2009"),
+				label: " "
+			},
+			{
+				unicode: "U+2026",
+				description: "HORIZONTAL ELLIPSIS",
+				write: "…",
+				label: "…"
+			},
+			{
+				unicode: "U+00C4",
+				description: "LATIN CAPITAL LETTER A WITH DIAERESIS",
+				write: "Ä",
+				label: "Ä"
+			},
+			{
+				unicode: "U+00CB",
+				description: "LATIN CAPITAL LETTER E WITH DIAERESIS",
+				write: "Ë",
+				label: "Ë"
+			},
+			{
+				unicode: "U+00CF",
+				description: "LATIN CAPITAL LETTER I WITH DIAERESIS",
+				write: "Ï",
+				label: "Ï"
+			},
+			{
+				unicode: "U+00D6",
+				description: "LATIN CAPITAL LETTER O WITH DIAERESIS",
+				write: "Ö",
+				label: "Ö"
+			},
+			{
+				unicode: "U+00DC",
+				description: "LATIN CAPITAL LETTER U WITH DIAERESIS",
+				write: "Ü",
+				label: "Ü"
+			},
+			{
+				unicode: "U+2212",
+				description: "MINUS SIGN",
+				write: "−",
+				label: "−"
+			}
+		],
+		[
+			{
+				unicode: "U+00A0",
+				description: "NO-BREAK SPACE",
+				write: String.fromCodePoint("0x00A0"),
+				label: " "
+			},
+			{
+				unicode: "U+2022",
+				description: "BULLET",
+				write: "•",
+				label: "•"
+			},
+			{
+				unicode: "U+0060",
+				description: "GRAVE ACCENT",
+				write: "`",
+				label: "`",
+				extraProps: { style: { gridRow: "span 2" } }
+			},
+			{
+				unicode: "U+00E0",
+				description: "LATIN SMALL LETTER A WITH GRAVE",
+				write: "à",
+				label: "à"
+			},
+			{
+				unicode: "U+00E8",
+				description: "LATIN SMALL LETTER E WITH GRAVE",
+				write: "è",
+				label: "è"
+			},
+			{
+				unicode: "U+00EC",
+				description: "LATIN SMALL LETTER I WITH GRAVE",
+				write: "ì",
+				label: "ì"
+			},
+			{
+				unicode: "U+00F2",
+				description: "LATIN SMALL LETTER O WITH GRAVE",
+				write: "ò",
+				label: "ò"
+			},
+			{
+				unicode: "U+00F9",
+				description: "LATIN SMALL LETTER U WITH GRAVE",
+				write: "ù",
+				label: "ù"
+			},
+			{
+				unicode: "U+2013",
+				description: "EN DASH",
+				write: "–",
+				label: "–"
+			}
+		],
+		[
+			{
+				unicode: "U+2003",
+				description: "EM SPACE",
+				write: String.fromCodePoint("0x2003"),
+				label: " "
+			},
+			{
+				unicode: "U+25E6",
+				description: "WHITE BULLET",
+				write: "◦",
+				label: "◦"
+			},
+			{
+				unicode: "U+00C0",
+				description: "LATIN CAPITAL LETTER A WITH GRAVE",
+				write: "À",
+				label: "À"
+			},
+			{
+				unicode: "U+00C8",
+				description: "LATIN CAPITAL LETTER E WITH GRAVE",
+				write: "È",
+				label: "È"
+			},
+			{
+				unicode: "U+00CC",
+				description: "LATIN CAPITAL LETTER I WITH GRAVE",
+				write: "Ì",
+				label: "Ì"
+			},
+			{
+				unicode: "U+00D2",
+				description: "LATIN CAPITAL LETTER O WITH GRAVE",
+				write: "Ò",
+				label: "Ò"
+			},
+			{
+				unicode: "U+00D9",
+				description: "LATIN CAPITAL LETTER U WITH GRAVE",
+				write: "Ù",
+				label: "Ù"
+			},
+			{
+				unicode: "U+2014",
+				description: "EM DASH",
+				write: "—",
+				label: "—"
+			}
+		]
+	]
+};
+//#endregion
+export { e as spanishConfig, t as specialConfig };

package/dist/components/characters/custom-popper.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/characters/custom-popper.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';
+declare const CustomPopper: ({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}) => React.JSX.Element;
+export default CustomPopper;

package/dist/components/characters/custom-popper.js

@@ -0,0 +1,32 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@mui/material/Typography";
+import r from "@mui/material/Popper";
+//#region src/components/characters/custom-popper.tsx
+var i = e(r)({
+	background: "#fff",
+	padding: "10px",
+	pointerEvents: "none",
+	zIndex: 99999
+}), a = e(n)({
+	fontSize: 50,
+	textAlign: "center"
+}), o = ({ children: e, ...n }) => /* @__PURE__ */ t(i, {
+	id: "mouse-over-popover",
+	open: !0,
+	anchorOrigin: {
+		vertical: "bottom",
+		horizontal: "left"
+	},
+	transformOrigin: {
+		vertical: "top",
+		horizontal: "left"
+	},
+	disableRestoreFocus: !0,
+	disableAutoFocus: !0,
+	...n,
+	children: /* @__PURE__ */ t(a, { children: e })
+});
+//#endregion
+export { o as default };