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

package/dist/components/MenuBar.js

@@ -0,0 +1,531 @@
+import { PIE_TOOLBAR__CLASS as e } from "../constants.js";
+import { DoneButton as t } from "./common/done-button.js";
+import { clsx as n } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { ToolbarIcon as r } from "./respArea/ToolbarIcon.js";
+import { spanishConfig as i, specialConfig as a } from "./characters/characterUtils.js";
+import o from "./icons/TextAlign.js";
+import s from "./icons/CssIcon.js";
+import { AddColumn as c, AddRow as l, RemoveColumn as u, RemoveRow as d, RemoveTable as f } from "./icons/TableIcons.js";
+import { CharacterIcon as p, CharacterPicker as m } from "./CharacterPicker.js";
+import { useMemo as h, useState as g } from "react";
+import { useEditorState as _ } from "@tiptap/react";
+import { styled as v, useTheme as y } from "@mui/material/styles";
+import { NodeSelection as b } from "prosemirror-state";
+import x from "@mui/icons-material/Delete";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { color as w } from "@pie-lib/render-ui";
+import T from "@mui/icons-material/FormatBold";
+import E from "@mui/icons-material/FormatItalic";
+import D from "@mui/icons-material/FormatStrikethrough";
+import O from "@mui/icons-material/Code";
+import k from "@mui/icons-material/GridOn";
+import A from "@mui/icons-material/FormatListBulleted";
+import j from "@mui/icons-material/FormatListNumbered";
+import M from "@mui/icons-material/FormatUnderlined";
+import N from "@mui/icons-material/Functions";
+import P from "@mui/icons-material/Image";
+import F from "@mui/icons-material/Redo";
+import ee from "@mui/icons-material/Undo";
+import I from "@mui/icons-material/FormatQuote";
+import L from "@mui/icons-material/Theaters";
+import R from "@mui/icons-material/VolumeUp";
+import z from "@mui/icons-material/BorderAll";
+//#region src/components/MenuBar.tsx
+var B = () => /* @__PURE__ */ S("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	height: "24px",
+	viewBox: "0 0 24 24",
+	width: "24px",
+	fill: "none",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ S("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"
+	})
+}), V = () => /* @__PURE__ */ S("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	height: "24px",
+	viewBox: "0 0 24 24",
+	width: "24px",
+	fill: "none",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ S("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"
+	})
+}), H = () => /* @__PURE__ */ S("svg", {
+	width: "30",
+	height: "28",
+	viewBox: "0 0 30 28",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	style: {
+		width: "20px",
+		height: "18px"
+	},
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ S("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 U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAreaProps: W, onChange: G, autoWidthToolbar: K }) {
+	let [q, J] = g(!1), Y = U ?? {}, X = _({
+		editor: v,
+		selector: (e) => {
+			let { selection: t } = e.editor?.state || {}, n;
+			if (!e.editor?.commandManager) return {};
+			t instanceof b && (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,
+				toolbarOpened: e.editor?._toolbarOpened ?? !1,
+				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,
+				isHeadingParagraph: e.editor.isActive("headingParagraph") ?? !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 = n(y.toolbar, e, {
+		[y.toolbarWithNoDone]: !0,
+		[y.toolbarTop]: Y.position === "top",
+		[y.toolbarRight]: Y.alignment === "right",
+		[y.focused]: Y.alwaysVisible || X.isFocused && !X.toolbarOpened && !X.hideDefaultToolbar,
+		[y.autoWidth]: Z,
+		[y.fullWidth]: !Z,
+		[y.hidden]: Y.isHidden === !0
+	}), $ = Y.minWidth === void 0 ? {} : { minWidth: Y.minWidth }, te = (e) => {
+		e.preventDefault();
+	}, ne = h(() => [
+		{
+			icon: /* @__PURE__ */ S(k, {}),
+			label: "Insert table",
+			onClick: (e) => e.chain().focus().insertTable({
+				rows: 2,
+				cols: 2,
+				withHeaderRow: !1
+			}).run(),
+			hidden: (e) => !w?.includes("table") || e.isTable,
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ S(l, {}),
+			label: "Add table row",
+			onClick: (e) => e.chain().focus().addRowAfter().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ S(d, {}),
+			label: "Remove table row",
+			onClick: (e) => e.chain().focus().deleteRow().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ S(c, {}),
+			label: "Add table column",
+			onClick: (e) => e.chain().focus().addColumnAfter().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ S(u, {}),
+			label: "Remove table column",
+			onClick: (e) => e.chain().focus().deleteColumn().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ S(f, {}),
+			label: "Remove table",
+			onClick: (e) => e.chain().focus().deleteTable().run(),
+			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
+			isActive: (e) => e.isTable,
+			isDisabled: (e) => !e.canTable
+		},
+		{
+			icon: /* @__PURE__ */ S(z, {}),
+			label: "Table borders",
+			toggle: !0,
+			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__ */ S(T, {}),
+			label: "Bold",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleBold().run(),
+			hidden: () => !w?.includes("bold"),
+			isActive: (e) => e.isBold,
+			isDisabled: (e) => !e.canBold
+		},
+		{
+			icon: /* @__PURE__ */ S(E, {}),
+			label: "Italic",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleItalic().run(),
+			hidden: () => !w?.includes("italic"),
+			isActive: (e) => e.isItalic,
+			isDisabled: (e) => !e.canItalic
+		},
+		{
+			icon: /* @__PURE__ */ S(D, {}),
+			label: "Strikethrough",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleStrike().run(),
+			hidden: () => !w?.includes("strikethrough"),
+			isActive: (e) => e.isStrike,
+			isDisabled: (e) => !e.canStrike
+		},
+		{
+			icon: /* @__PURE__ */ S(O, {}),
+			label: "Code",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleCode().run(),
+			hidden: () => !w?.includes("code"),
+			isActive: (e) => e.isCode,
+			isDisabled: (e) => !e.canCode
+		},
+		{
+			icon: /* @__PURE__ */ S(M, {}),
+			label: "Underline",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleUnderline().run(),
+			hidden: () => !w?.includes("underline"),
+			isActive: (e) => e.isUnderline
+		},
+		{
+			icon: /* @__PURE__ */ S(V, {}),
+			label: "Subscript",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleSubscript().run(),
+			hidden: () => !w?.includes("subscript"),
+			isActive: (e) => e.isSubScript
+		},
+		{
+			icon: /* @__PURE__ */ S(B, {}),
+			label: "Superscript",
+			toggle: !0,
+			onClick: (e) => e.chain().focus().toggleSuperscript().run(),
+			hidden: () => !w?.includes("superscript"),
+			isActive: (e) => e.isSuperScript
+		},
+		{
+			icon: /* @__PURE__ */ S(P, {}),
+			label: "Insert image",
+			hidden: () => !w?.includes("image"),
+			onClick: (e) => e.chain().focus().setImageUploadNode().run()
+		},
+		{
+			icon: /* @__PURE__ */ S(L, {}),
+			label: "Insert video",
+			hidden: () => !w?.includes("video"),
+			onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
+		},
+		{
+			icon: /* @__PURE__ */ S(R, {}),
+			label: "Insert audio",
+			hidden: () => !w?.includes("audio"),
+			onClick: (e) => e.chain().focus().insertMedia({
+				type: "audio",
+				tag: "audio"
+			}).run()
+		},
+		{
+			icon: /* @__PURE__ */ S(s, {}),
+			label: "CSS classes",
+			hidden: () => !w?.includes("css"),
+			onClick: (e) => e.commands.openCSSClassDialog()
+		},
+		{
+			icon: /* @__PURE__ */ S(I, {}),
+			label: "Blockquote",
+			toggle: !0,
+			hidden: () => !w?.includes("blockquote"),
+			onClick: (e) => e.chain().focus().toggleBlockquote().run(),
+			isActive: (e) => e.isBlockquote
+		},
+		{
+			icon: /* @__PURE__ */ S(H, {}),
+			label: "Heading",
+			toggle: !0,
+			hidden: () => !w?.includes("h3"),
+			onClick: (e) => e.chain().focus().toggleHeadingParagraph().run(),
+			isActive: (e) => e.isHeadingParagraph
+		},
+		{
+			icon: /* @__PURE__ */ S(N, {}),
+			label: "Insert math",
+			hidden: () => !w?.includes("math"),
+			onClick: (e) => e.chain().focus().insertMath("").run()
+		},
+		{
+			icon: /* @__PURE__ */ S(p, { letter: "ñ" }),
+			label: "Spanish characters (ñ)",
+			hidden: () => !w?.includes("languageCharacters"),
+			onClick: () => J(i)
+		},
+		{
+			icon: /* @__PURE__ */ S(p, { letter: "€" }),
+			label: "Special characters (€)",
+			hidden: () => w?.filter((e) => e === "languageCharacters").length !== 2,
+			onClick: () => J(a)
+		},
+		{
+			icon: /* @__PURE__ */ S(o, { editor: v }),
+			label: "Text alignment",
+			hidden: () => !w?.includes("text-align"),
+			onClick: () => {}
+		},
+		{
+			icon: /* @__PURE__ */ S(A, {}),
+			label: "Bulleted list",
+			toggle: !0,
+			hidden: () => !w?.includes("bulleted-list"),
+			onClick: (e) => e.chain().focus().toggleBulletList().run(),
+			isActive: (e) => e.isBulletList
+		},
+		{
+			icon: /* @__PURE__ */ S(j, {}),
+			label: "Numbered list",
+			toggle: !0,
+			hidden: () => !w?.includes("numbered-list"),
+			onClick: (e) => e.chain().focus().toggleOrderedList().run(),
+			isActive: (e) => e.isOrderedList
+		},
+		{
+			icon: /* @__PURE__ */ S(ee, {}),
+			label: "Undo",
+			hidden: () => !w?.includes("undo"),
+			onClick: (e) => e.chain().focus().undo().run(),
+			isDisabled: (e) => !e.canUndo
+		},
+		{
+			icon: /* @__PURE__ */ S(F, {}),
+			label: "Redo",
+			hidden: () => !w?.includes("redo"),
+			onClick: (e) => e.chain().focus().redo().run(),
+			isDisabled: (e) => !e.canRedo
+		}
+	], [w, v]), re = X.hideDefaultToolbar && X.currentNode?.type?.name === "drag_in_the_blank";
+	return /* @__PURE__ */ C("div", {
+		className: Q,
+		style: { ...$ },
+		onMouseDown: te,
+		children: [
+			re && /* @__PURE__ */ S("div", {
+				className: y.defaultToolbar,
+				tabIndex: "1",
+				children: /* @__PURE__ */ S("div", {
+					className: y.buttonsContainer,
+					children: /* @__PURE__ */ S("button", {
+						type: "button",
+						className: y.button,
+						onClick: (e) => {
+							e.preventDefault(), v.chain().focus().deleteSelection().run(), G?.(v.getHTML());
+						},
+						"aria-label": "Delete response area",
+						title: "Delete response area",
+						children: /* @__PURE__ */ S(x, {})
+					})
+				})
+			}),
+			!X.hideDefaultToolbar && /* @__PURE__ */ C("div", {
+				className: y.defaultToolbar,
+				tabIndex: "1",
+				children: [
+					/* @__PURE__ */ S("div", {
+						className: y.buttonsContainer,
+						children: ne.filter((e) => !e.hidden?.(X)).map((e, t) => {
+							let r = e.isDisabled?.(X), i = e.isActive?.(X);
+							return /* @__PURE__ */ S("button", {
+								type: "button",
+								disabled: r,
+								"aria-label": e.label,
+								title: e.label,
+								"aria-pressed": e.toggle ? !!i : void 0,
+								onClick: (t) => {
+									t.preventDefault(), e.onClick(v);
+								},
+								className: n(y.button, { [y.active]: i }),
+								children: e.icon
+							}, t);
+						})
+					}),
+					w?.includes("responseArea") && /* @__PURE__ */ S("button", {
+						type: "button",
+						"aria-label": "Insert response area",
+						title: "Insert response area",
+						onClick: () => {
+							v.chain().focus().insertResponseArea(W.type).run();
+						},
+						className: y.button,
+						children: /* @__PURE__ */ S(r, {})
+					}),
+					Y.showDone && /* @__PURE__ */ S(t, { onClick: () => {
+						G?.(v.getHTML()), v.commands.blur();
+					} })
+				]
+			}),
+			q && /* @__PURE__ */ S(m, {
+				editor: v,
+				opts: {
+					...q,
+					renderPopOver: (e, t) => console.log("Show popover", t),
+					closePopOver: () => console.log("Close popover")
+				},
+				onClose: () => J(!1)
+			})
+		]
+	});
+}
+var W = (e) => {
+	y();
+	let t = {
+		defaultToolbar: "defaultToolbar",
+		buttonsContainer: "buttonsContainer",
+		button: "toolbarButton",
+		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__ */ S(G, { children: /* @__PURE__ */ S(U, {
+		...e,
+		classes: t
+	}) });
+}, G = v("div")(() => ({
+	height: 0,
+	overflow: "visible",
+	"& .defaultToolbar": {
+		display: "flex",
+		width: "100%",
+		justifyContent: "space-between"
+	},
+	"& .buttonsContainer": {
+		alignItems: "center",
+		display: "flex",
+		width: "100%"
+	},
+	"& .toolbarButton": {
+		color: "grey",
+		display: "inline-flex",
+		padding: "2px",
+		background: "none",
+		border: "none",
+		cursor: "pointer",
+		"& svg": {
+			width: "24px",
+			height: "24px"
+		},
+		"&:hover": { color: w.text() },
+		"&:focus": { outline: `2px solid ${w.buttonFocusOutline()}` }
+	},
+	"& .active": { color: w.text() },
+	"& .disabled": {
+		opacity: .7,
+		cursor: "not-allowed",
+		"& :hover": { color: w.disabled() }
+	},
+	"& .isActive": {
+		background: "var(--purple)",
+		color: "var(--white)"
+	},
+	"& .toolbar": {
+		position: "relative",
+		top: "5px",
+		zIndex: 20,
+		cursor: "pointer",
+		justifyContent: "space-between",
+		background: "var(--editable-html-toolbar-bg, #efefef)",
+		minWidth: "280px",
+		margin: 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": {
+		position: "absolute",
+		top: "-45px"
+	},
+	"& .toolbarRight": { right: 0 },
+	"& .fullWidth": {
+		width: "fit-content",
+		minWidth: "100%"
+	},
+	"& .hidden": { visibility: "hidden" },
+	"& .autoWidth": { width: "fit-content" },
+	"& .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 { W 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.
+ */
+import React from 'react';
+declare function TiptapContainer(props: any): React.JSX.Element;
+export default TiptapContainer;