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

package/dist/components/MenuBar.js

@@ -0,0 +1,460 @@
+import { PIE_TOOLBAR__CLASS as e } from "../constants.js";
+import { DoneButton as t } from "./common/done-button.js";
+import { ToolbarIcon as n } from "./respArea/ToolbarIcon.js";
+import { spanishConfig as r, specialConfig as i } from "./characters/characterUtils.js";
+import a from "./icons/TextAlign.js";
+import o from "./icons/CssIcon.js";
+import { AddColumn as s, AddRow as c, RemoveColumn as l, RemoveRow as u, RemoveTable as d } from "./icons/TableIcons.js";
+import { CharacterIcon as f, CharacterPicker as p } from "./CharacterPicker.js";
+import { useMemo as m, useState as h } from "react";
+import { useEditorState as g } from "@tiptap/react";
+import { styled as _, useTheme as v } from "@mui/material/styles";
+import { NodeSelection as y } from "prosemirror-state";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import S from "classnames";
+import C from "@mui/icons-material/Delete";
+import w from "@mui/icons-material/FormatBold";
+import T from "@mui/icons-material/FormatItalic";
+import E from "@mui/icons-material/FormatStrikethrough";
+import D from "@mui/icons-material/Code";
+import O from "@mui/icons-material/GridOn";
+import k from "@mui/icons-material/FormatListBulleted";
+import A from "@mui/icons-material/FormatListNumbered";
+import j from "@mui/icons-material/FormatUnderlined";
+import M from "@mui/icons-material/Functions";
+import N from "@mui/icons-material/Image";
+import P from "@mui/icons-material/Redo";
+import F from "@mui/icons-material/Undo";
+import I from "@mui/icons-material/FormatQuote";
+import ee from "@mui/icons-material/Theaters";
+import L from "@mui/icons-material/VolumeUp";
+import R from "@mui/icons-material/BorderAll";
+//#region src/components/MenuBar.tsx
+var z = () => /* @__PURE__ */ b("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	height: "24px",
+	viewBox: "0 0 24 24",
+	width: "24px",
+	fill: "none",
+	children: /* @__PURE__ */ b("path", {
+		d: "M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z",
+		fill: "currentColor"
+	})
+}), B = () => /* @__PURE__ */ b("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	height: "24px",
+	viewBox: "0 0 24 24",
+	width: "24px",
+	fill: "none",
+	children: /* @__PURE__ */ b("path", {
+		d: "M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z",
+		fill: "currentColor"
+	})
+}), V = () => /* @__PURE__ */ b("svg", {
+	width: "30",
+	height: "28",
+	viewBox: "0 0 30 28",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	style: {
+		width: "20px",
+		height: "18px"
+	},
+	children: /* @__PURE__ */ b("path", {
+		d: "M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z",
+		fill: "currentColor"
+	})
+});
+function H({ editor: _, classes: v, activePlugins: H, toolbarOpts: U, responseAreaProps: W, onChange: G, autoWidthToolbar: K }) {
+	let [q, J] = h(!1), Y = U ?? {}, X = g({
+		editor: _,
+		selector: (e) => {
+			let { selection: t } = e.editor?.state || {}, n;
+			t instanceof y && (n = t.node);
+			let r = e.editor?.isActive("math") || e.editor?.isActive("explicit_constructed_response") || e.editor?.isActive("imageUploadNode") || e.editor?.isActive("drag_in_the_blank"), i = t && t.empty === !1 && e.editor.isActive("table");
+			return {
+				currentNode: n,
+				hideDefaultToolbar: r,
+				hasTextSelectionInTable: i,
+				isFocused: e.editor?.isFocused,
+				isBold: e.editor.isActive("bold") ?? !1,
+				canBold: e.editor.can().chain().toggleBold().run() ?? !1,
+				isTable: e.editor.isActive("table") ?? !1,
+				tableHasBorder: e.editor.getAttributes("table")?.border === "1",
+				canTable: e.editor.can().chain().insertTable().run() ?? !1,
+				isItalic: e.editor.isActive("italic") ?? !1,
+				canItalic: e.editor.can().chain().toggleItalic().run() ?? !1,
+				isStrike: e.editor.isActive("strike") ?? !1,
+				canStrike: e.editor.can().chain().toggleStrike().run() ?? !1,
+				isCode: e.editor.isActive("code") ?? !1,
+				canCode: e.editor.can().chain().toggleCode().run() ?? !1,
+				canClearMarks: e.editor.can().chain().unsetAllMarks().run() ?? !1,
+				isUnderline: e.editor.isActive("underline") ?? !1,
+				isSubScript: e.editor.isActive("subscript") ?? !1,
+				isSuperScript: e.editor.isActive("superscript") ?? !1,
+				isParagraph: e.editor.isActive("paragraph") ?? !1,
+				isHeading1: e.editor.isActive("heading", { level: 1 }) ?? !1,
+				isHeading2: e.editor.isActive("heading", { level: 2 }) ?? !1,
+				isHeading3: e.editor.isActive("heading", { level: 3 }) ?? !1,
+				isHeading4: e.editor.isActive("heading", { level: 4 }) ?? !1,
+				isHeading5: e.editor.isActive("heading", { level: 5 }) ?? !1,
+				isHeading6: e.editor.isActive("heading", { level: 6 }) ?? !1,
+				isBulletList: e.editor.isActive("bulletList") ?? !1,
+				isOrderedList: e.editor.isActive("orderedList") ?? !1,
+				isCodeBlock: e.editor.isActive("codeBlock") ?? !1,
+				isBlockquote: e.editor.isActive("blockquote") ?? !1,
+				canUndo: e.editor.can().chain().undo().run() ?? !1,
+				canRedo: e.editor.can().chain().redo().run() ?? !1
+			};
+		}
+	}), Z = !!K, Q = S(v.toolbar, e, {
+		[v.toolbarWithNoDone]: !0,
+		[v.toolbarTop]: Y.position === "top",
+		[v.toolbarRight]: Y.alignment === "right",
+		[v.focused]: Y.alwaysVisible || X.isFocused && !_._toolbarOpened,
+		[v.autoWidth]: Z,
+		[v.fullWidth]: !Z,
+		[v.hidden]: Y.isHidden === !0
+	}), $ = Y.minWidth === void 0 ? {} : { minWidth: Y.minWidth }, te = (e) => {
+		e.preventDefault();
+	}, ne = m(() => [
+		{
+			icon: /* @__PURE__ */ b(O, {}),
+			onClick: (e) => e.chain().focus().insertTable({
+				rows: 2,
+				cols: 2,
+				withHeaderRow: !1
+			}).run(),
+			hidden: (e) => !H?.includes("table") || e.isTable,
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(c, {}),
+			onClick: (e) => e.chain().focus().addRowAfter().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(u, {}),
+			onClick: (e) => e.chain().focus().deleteRow().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(s, {}),
+			onClick: (e) => e.chain().focus().addColumnAfter().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(l, {}),
+			onClick: (e) => e.chain().focus().deleteColumn().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(d, {}),
+			onClick: (e) => e.chain().focus().deleteTable().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(R, {}),
+			onClick: (e) => {
+				let t = e.getAttributes("table"), n = {
+					...t,
+					border: t.border === "0" ? "1" : "0"
+				};
+				e.commands.updateAttributes("table", n);
+			},
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.tableHasBorder,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ b(w, {}),
+			onClick: (e) => e.chain().focus().toggleBold().run(),
+			hidden: () => !H?.includes("bold"),
+			isActive: (e) => e.isBold,
+			isDisabled: (e) => !e.canBold
+		},
+		{
+			icon: /* @__PURE__ */ b(T, {}),
+			onClick: (e) => e.chain().focus().toggleItalic().run(),
+			hidden: () => !H?.includes("italic"),
+			isActive: (e) => e.isItalic,
+			isDisabled: (e) => !e.canItalic
+		},
+		{
+			icon: /* @__PURE__ */ b(E, {}),
+			onClick: (e) => e.chain().focus().toggleStrike().run(),
+			hidden: () => !H?.includes("strikethrough"),
+			isActive: (e) => e.isStrike,
+			isDisabled: (e) => !e.canStrike
+		},
+		{
+			icon: /* @__PURE__ */ b(D, {}),
+			onClick: (e) => e.chain().focus().toggleCode().run(),
+			hidden: () => !H?.includes("code"),
+			isActive: (e) => e.isCode,
+			isDisabled: (e) => !e.canCode
+		},
+		{
+			icon: /* @__PURE__ */ b(j, {}),
+			onClick: (e) => e.chain().focus().toggleUnderline().run(),
+			hidden: () => !H?.includes("underline"),
+			isActive: (e) => e.isUnderline
+		},
+		{
+			icon: /* @__PURE__ */ b(B, {}),
+			onClick: (e) => e.chain().focus().toggleSubscript().run(),
+			hidden: () => !H?.includes("subscript"),
+			isActive: (e) => e.isSubScript
+		},
+		{
+			icon: /* @__PURE__ */ b(z, {}),
+			onClick: (e) => e.chain().focus().toggleSuperscript().run(),
+			hidden: () => !H?.includes("superscript"),
+			isActive: (e) => e.isSuperScript
+		},
+		{
+			icon: /* @__PURE__ */ b(N, {}),
+			hidden: () => !H?.includes("image"),
+			onClick: (e) => e.chain().focus().setImageUploadNode().run()
+		},
+		{
+			icon: /* @__PURE__ */ b(ee, {}),
+			hidden: () => !H?.includes("video"),
+			onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
+		},
+		{
+			icon: /* @__PURE__ */ b(L, {}),
+			hidden: () => !H?.includes("audio"),
+			onClick: (e) => e.chain().focus().insertMedia({
+				type: "audio",
+				tag: "audio"
+			}).run()
+		},
+		{
+			icon: /* @__PURE__ */ b(o, {}),
+			hidden: () => !H?.includes("css"),
+			onClick: (e) => e.commands.openCSSClassDialog()
+		},
+		{
+			icon: /* @__PURE__ */ b(I, {}),
+			hidden: () => !H?.includes("blockquote"),
+			onClick: (e) => e.chain().focus().toggleBlockquote().run(),
+			isActive: (e) => e.isBlockquote
+		},
+		{
+			icon: /* @__PURE__ */ b(V, {}),
+			hidden: () => !H?.includes("h3"),
+			onClick: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),
+			isActive: (e) => e.isHeading3
+		},
+		{
+			icon: /* @__PURE__ */ b(M, {}),
+			hidden: () => !H?.includes("math"),
+			onClick: (e) => e.chain().focus().insertMath("").run()
+		},
+		{
+			icon: /* @__PURE__ */ b(f, { letter: "ñ" }),
+			hidden: () => !H?.includes("languageCharacters"),
+			onClick: () => J(r)
+		},
+		{
+			icon: /* @__PURE__ */ b(f, { letter: "€" }),
+			hidden: () => H?.filter((e) => e === "languageCharacters").length !== 2,
+			onClick: () => J(i)
+		},
+		{
+			icon: /* @__PURE__ */ b(a, { editor: _ }),
+			hidden: () => !H?.includes("text-align"),
+			onClick: () => {}
+		},
+		{
+			icon: /* @__PURE__ */ b(k, {}),
+			hidden: () => !H?.includes("bulleted-list"),
+			onClick: (e) => e.chain().focus().toggleBulletList().run(),
+			isActive: (e) => e.isBulletList
+		},
+		{
+			icon: /* @__PURE__ */ b(A, {}),
+			hidden: () => !H?.includes("numbered-list"),
+			onClick: (e) => e.chain().focus().toggleOrderedList().run(),
+			isActive: (e) => e.isOrderedList
+		},
+		{
+			icon: /* @__PURE__ */ b(F, {}),
+			hidden: () => !H?.includes("undo"),
+			onClick: (e) => e.chain().focus().undo().run(),
+			isDisabled: (e) => !e.canUndo
+		},
+		{
+			icon: /* @__PURE__ */ b(P, {}),
+			hidden: () => !H?.includes("redo"),
+			onClick: (e) => e.chain().focus().redo().run(),
+			isDisabled: (e) => !e.canRedo
+		}
+	], [H, _]), re = X.hideDefaultToolbar && X.currentNode?.type?.name === "drag_in_the_blank";
+	return /* @__PURE__ */ x("div", {
+		className: Q,
+		style: { ...$ },
+		onMouseDown: te,
+		children: [
+			re && /* @__PURE__ */ b("div", {
+				className: v.defaultToolbar,
+				tabIndex: "1",
+				children: /* @__PURE__ */ b("div", {
+					className: v.buttonsContainer,
+					children: /* @__PURE__ */ b("button", {
+						type: "button",
+						className: v.button,
+						onClick: (e) => {
+							e.preventDefault(), _.chain().focus().deleteSelection().run(), G?.(_.getHTML());
+						},
+						"aria-label": "Delete response area",
+						children: /* @__PURE__ */ b(C, {})
+					})
+				})
+			}),
+			!X.hideDefaultToolbar && /* @__PURE__ */ x("div", {
+				className: v.defaultToolbar,
+				tabIndex: "1",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: v.buttonsContainer,
+						children: ne.filter((e) => !e.hidden?.(X)).map((e, t) => {
+							let n = e.isDisabled?.(X), r = e.isActive?.(X);
+							return /* @__PURE__ */ b("button", {
+								disabled: n,
+								onClick: (t) => {
+									t.preventDefault(), e.onClick(_);
+								},
+								className: S(v.button, { [v.active]: r }),
+								children: e.icon
+							}, t);
+						})
+					}),
+					H?.includes("responseArea") && /* @__PURE__ */ b("button", {
+						onClick: () => {
+							_.chain().focus().insertResponseArea(W.type).run();
+						},
+						className: v.button,
+						children: /* @__PURE__ */ b(n, {})
+					}),
+					Y.showDone && /* @__PURE__ */ b(t, { onClick: () => {
+						G?.(_.getHTML()), _.commands.blur();
+					} })
+				]
+			}),
+			q && /* @__PURE__ */ b(p, {
+				editor: _,
+				opts: {
+					...q,
+					renderPopOver: (e, t) => console.log("Show popover", t),
+					closePopOver: () => console.log("Close popover")
+				},
+				onClose: () => J(!1)
+			})
+		]
+	});
+}
+var U = (e) => {
+	v();
+	let t = {
+		defaultToolbar: "defaultToolbar",
+		buttonsContainer: "buttonsContainer",
+		button: "button",
+		active: "active",
+		disabled: "disabled",
+		isActive: "isActive",
+		toolbar: "toolbar",
+		toolbarWithNoDone: "toolbarWithNoDone",
+		toolbarTop: "toolbarTop",
+		toolbarRight: "toolbarRight",
+		fullWidth: "fullWidth",
+		hidden: "hidden",
+		autoWidth: "autoWidth",
+		focused: "focused",
+		iconRoot: "iconRoot",
+		label: "label",
+		shared: "shared"
+	};
+	return /* @__PURE__ */ b(W, { children: /* @__PURE__ */ b(H, {
+		...e,
+		classes: t
+	}) });
+}, W = _("div")(({ theme: e }) => ({
+	"& .defaultToolbar": {
+		display: "flex",
+		width: "100%",
+		justifyContent: "space-between"
+	},
+	"& .buttonsContainer": {
+		alignItems: "center",
+		display: "flex",
+		width: "100%"
+	},
+	"& .button": {
+		color: "grey",
+		display: "inline-flex",
+		padding: "2px",
+		background: "none",
+		border: "none",
+		cursor: "pointer",
+		"&:hover": { color: "black" },
+		"&:focus": { outline: `2px solid ${e.palette.grey[700]}` }
+	},
+	"& .active": { color: "black" },
+	"& .disabled": {
+		opacity: .7,
+		cursor: "not-allowed",
+		"& :hover": { color: "grey" }
+	},
+	"& .isActive": {
+		background: "var(--purple)",
+		color: "var(--white)"
+	},
+	"& .toolbar": {
+		position: "absolute",
+		zIndex: 20,
+		cursor: "pointer",
+		justifyContent: "space-between",
+		background: "var(--editable-html-toolbar-bg, #efefef)",
+		minWidth: "280px",
+		margin: "5px 0 0 0",
+		padding: "2px",
+		boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
+		boxSizing: "border-box",
+		display: "flex",
+		opacity: 0,
+		pointerEvents: "none"
+	},
+	"& .toolbarWithNoDone": { minWidth: "265px" },
+	"& .toolbarTop": { top: "-45px" },
+	"& .toolbarRight": { right: 0 },
+	"& .fullWidth": { width: "100%" },
+	"& .hidden": { visibility: "hidden" },
+	"& .autoWidth": { width: "auto" },
+	"& .focused": {
+		opacity: 1,
+		pointerEvents: "auto"
+	},
+	"& .iconRoot": {
+		width: "28px",
+		height: "28px",
+		padding: "4px",
+		verticalAlign: "top"
+	},
+	"& .label": { color: "var(--editable-html-toolbar-check, #00bb00)" },
+	"& .shared": { display: "flex" }
+}));
+//#endregion
+export { U as default };

package/dist/components/TiptapContainer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/TiptapContainer.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 function TiptapContainer(props: any): JSX.Element;
+export default TiptapContainer;
+//# sourceMappingURL=TiptapContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapContainer.d.ts","sourceRoot":"","sources":["../../src/components/TiptapContainer.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAuIH,iBAAS,eAAe,CAAC,KAAK,KAAA,eAkF7B;AAED,eAAe,eAAe,CAAC"}

package/dist/components/TiptapContainer.js

@@ -0,0 +1,157 @@
+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"
+	},
+	"& hr": {
+		border: "none",
+		borderTop: "1px solid var(--gray-2)",
+		margin: "2rem 0"
+	},
+	"& p": { margin: "0" },
+	"& table": {
+		tableLayout: "fixed",
+		width: "100%",
+		borderCollapse: "collapse",
+		color: l.text(),
+		backgroundColor: l.background()
+	},
+	"& table:not([border=\"1\"]) tr": { borderTop: "1px solid #dfe2e5" },
+	"& td, th": {
+		padding: ".6em 1em",
+		textAlign: "center"
+	},
+	"& table:not([border=\"1\"]) td, th": { border: "1px solid #dfe2e5" },
+	...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 && 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.textContent = "W".repeat(o.charactersLimit), m.current.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,36 @@
+/**
+ * @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;
+};
+//# sourceMappingURL=characterUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"characterUtils.d.ts","sourceRoot":"","sources":["../../../src/components/characters/characterUtils.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,eAAO,MAAM,aAAa;;CAOzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;CAgbzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;CAG1B,CAAC"}