@pie-lib/editable-html-tip-tap 3.0.1-next.20261005000911 → 3.0.1-next.20261005005201

package/dist/components/MenuBar.js

@@ -1,38 +1,38 @@
-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 ee from "./icons/TextAlign.js";
-import te from "./icons/CssIcon.js";
-import { AddColumn as ne, AddRow as o, RemoveColumn as s, RemoveRow as re, RemoveTable as ie } from "./icons/TableIcons.js";
-import { CharacterIcon as c, CharacterPicker as ae } from "./CharacterPicker.js";
-import { useLayoutEffect as l, useMemo as u, useRef as d, useState as oe } from "react";
-import { useEditorState as f } from "@tiptap/react";
-import { styled as p, useTheme as m } from "@mui/material/styles";
-import { NodeSelection as h } from "prosemirror-state";
-import g from "@mui/icons-material/Delete";
-import _ from "@pie-lib/translator";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { color as b } from "@pie-lib/render-ui";
-import x from "@mui/icons-material/FormatBold";
-import S from "@mui/icons-material/FormatItalic";
-import C from "@mui/icons-material/FormatStrikethrough";
-import w from "@mui/icons-material/Code";
-import T from "@mui/icons-material/GridOn";
-import E from "@mui/icons-material/FormatListBulleted";
-import D from "@mui/icons-material/FormatListNumbered";
-import O from "@mui/icons-material/FormatUnderlined";
-import k from "@mui/icons-material/Functions";
-import A from "@mui/icons-material/Image";
-import j from "@mui/icons-material/Redo";
-import M from "@mui/icons-material/Undo";
-import N from "@mui/icons-material/FormatQuote";
-import P from "@mui/icons-material/Theaters";
-import F from "@mui/icons-material/VolumeUp";
+import { PIE_TOOLBAR__CLASS as e, TOOLBAR_BACKGROUND as t } from "../constants.js";
+import { DoneButton as n } from "./common/done-button.js";
+import { clsx as r } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { ToolbarIcon as i } from "./respArea/ToolbarIcon.js";
+import { spanishConfig as a, specialConfig as ee } from "./characters/characterUtils.js";
+import te from "./icons/TextAlign.js";
+import o from "./icons/CssIcon.js";
+import { AddColumn as s, AddRow as ne, RemoveColumn as re, RemoveRow as ie, RemoveTable as c } from "./icons/TableIcons.js";
+import { CharacterIcon as l, CharacterPicker as u } from "./CharacterPicker.js";
+import { useLayoutEffect as d, useMemo as ae, useRef as f, useState as p } from "react";
+import { useEditorState as m } from "@tiptap/react";
+import { styled as h, useTheme as g } from "@mui/material/styles";
+import { NodeSelection as _ } from "prosemirror-state";
+import oe from "@mui/icons-material/Delete";
+import { color as v } from "@pie-lib/render-ui";
+import y from "@pie-lib/translator";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import S from "@mui/icons-material/FormatBold";
+import C from "@mui/icons-material/FormatItalic";
+import w from "@mui/icons-material/FormatStrikethrough";
+import T from "@mui/icons-material/Code";
+import E from "@mui/icons-material/GridOn";
+import D from "@mui/icons-material/FormatListBulleted";
+import O from "@mui/icons-material/FormatListNumbered";
+import k from "@mui/icons-material/FormatUnderlined";
+import A from "@mui/icons-material/Functions";
+import j from "@mui/icons-material/Image";
+import M from "@mui/icons-material/Redo";
+import N from "@mui/icons-material/Undo";
+import P from "@mui/icons-material/FormatQuote";
+import F from "@mui/icons-material/Theaters";
+import I from "@mui/icons-material/VolumeUp";
 import se from "@mui/icons-material/BorderAll";
 //#region src/components/MenuBar.tsx
-var { translator: I } = _, L = () => /* @__PURE__ */ v("svg", {
+var { translator: L } = y, R = () => /* @__PURE__ */ b("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	height: "24px",
 	viewBox: "0 0 24 24",
@@ -40,11 +40,11 @@ var { translator: I } = _, L = () => /* @__PURE__ */ v("svg", {
 	fill: "none",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: /* @__PURE__ */ v("path", {
+	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"
 	})
-}), R = () => /* @__PURE__ */ v("svg", {
+}), z = () => /* @__PURE__ */ b("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	height: "24px",
 	viewBox: "0 0 24 24",
@@ -52,11 +52,11 @@ var { translator: I } = _, L = () => /* @__PURE__ */ v("svg", {
 	fill: "none",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: /* @__PURE__ */ v("path", {
+	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"
 	})
-}), z = () => /* @__PURE__ */ v("svg", {
+}), B = () => /* @__PURE__ */ b("svg", {
 	width: "30",
 	height: "28",
 	viewBox: "0 0 30 28",
@@ -68,18 +68,18 @@ var { translator: I } = _, L = () => /* @__PURE__ */ v("svg", {
 	},
 	"aria-hidden": "true",
 	focusable: "false",
-	children: /* @__PURE__ */ v("path", {
+	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 B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAreaProps: B, onChange: V, autoWidthToolbar: H, hasFocus: U, language: W }) {
-	let [G, K] = oe(!1), q = d(null), J = b ?? {}, Y = f({
-		editor: p,
+function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAreaProps: y, onChange: V, autoWidthToolbar: H, hasFocus: U, language: W }) {
+	let [G, K] = p(!1), q = f(null), J = v ?? {}, Y = m({
+		editor: t,
 		selector: (e) => {
 			let { selection: t } = e.editor?.state || {}, n;
 			if (!e.editor?.commandManager) return {};
-			t instanceof h && (n = t.node);
+			t instanceof _ && (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,
@@ -118,34 +118,34 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			};
 		}
 	}), X = !!H, Z = Y.hideDefaultToolbar && Y.currentNode?.type?.name === "drag_in_the_blank", Q = J.alwaysVisible || U && !Y.toolbarOpened && (!Y.hideDefaultToolbar || Z);
-	l(() => {
+	d(() => {
 		q.current?.toggleAttribute("inert", !Q);
 	}, [Q]);
-	let ce = n(m.toolbar, e, {
-		[m.toolbarWithNoDone]: !0,
-		[m.toolbarTop]: J.position === "top",
-		[m.toolbarRight]: J.alignment === "right",
-		[m.focused]: Q,
-		[m.autoWidth]: X,
-		[m.fullWidth]: !X,
-		[m.hidden]: J.isHidden === !0
+	let ce = r(h.toolbar, e, {
+		[h.toolbarWithNoDone]: !0,
+		[h.toolbarTop]: J.position === "top",
+		[h.toolbarRight]: J.alignment === "right",
+		[h.focused]: Q,
+		[h.autoWidth]: X,
+		[h.fullWidth]: !X,
+		[h.hidden]: J.isHidden === !0
 	}), le = J.minWidth === void 0 ? {} : { minWidth: J.minWidth }, ue = (e) => {
 		e.preventDefault();
-	}, $ = (e) => I.t(`editableHtml.buttons.${e}`, { lng: W }), de = u(() => [
+	}, $ = (e) => L.t(`editableHtml.buttons.${e}`, { lng: W }), de = ae(() => [
 		{
-			icon: /* @__PURE__ */ v(T, {}),
+			icon: /* @__PURE__ */ b(E, {}),
 			label: $("insertTable"),
 			onClick: (e) => e.chain().focus().insertTable({
 				rows: 2,
 				cols: 2,
 				withHeaderRow: !1
 			}).run(),
-			hidden: (e) => !_?.includes("table") || e.isTable,
+			hidden: (e) => !g?.includes("table") || e.isTable,
 			isActive: (e) => e.isTable,
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(o, {}),
+			icon: /* @__PURE__ */ b(ne, {}),
 			label: $("addTableRow"),
 			onClick: (e) => e.chain().focus().addRowAfter().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -153,7 +153,7 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(re, {}),
+			icon: /* @__PURE__ */ b(ie, {}),
 			label: $("removeTableRow"),
 			onClick: (e) => e.chain().focus().deleteRow().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -161,7 +161,7 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(ne, {}),
+			icon: /* @__PURE__ */ b(s, {}),
 			label: $("addTableColumn"),
 			onClick: (e) => e.chain().focus().addColumnAfter().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -169,7 +169,7 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(s, {}),
+			icon: /* @__PURE__ */ b(re, {}),
 			label: $("removeTableColumn"),
 			onClick: (e) => e.chain().focus().deleteColumn().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -177,7 +177,7 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(ie, {}),
+			icon: /* @__PURE__ */ b(c, {}),
 			label: $("removeTable"),
 			onClick: (e) => e.chain().focus().deleteTable().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -185,7 +185,7 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(se, {}),
+			icon: /* @__PURE__ */ b(se, {}),
 			label: $("tableBorders"),
 			toggle: !0,
 			onClick: (e) => {
@@ -200,236 +200,236 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ v(x, {}),
+			icon: /* @__PURE__ */ b(S, {}),
 			label: $("bold"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleBold().run(),
-			hidden: () => !_?.includes("bold"),
+			hidden: () => !g?.includes("bold"),
 			isActive: (e) => e.isBold,
 			isDisabled: (e) => !e.canBold
 		},
 		{
-			icon: /* @__PURE__ */ v(S, {}),
+			icon: /* @__PURE__ */ b(C, {}),
 			label: $("italic"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleItalic().run(),
-			hidden: () => !_?.includes("italic"),
+			hidden: () => !g?.includes("italic"),
 			isActive: (e) => e.isItalic,
 			isDisabled: (e) => !e.canItalic
 		},
 		{
-			icon: /* @__PURE__ */ v(C, {}),
+			icon: /* @__PURE__ */ b(w, {}),
 			label: $("strikethrough"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleStrike().run(),
-			hidden: () => !_?.includes("strikethrough"),
+			hidden: () => !g?.includes("strikethrough"),
 			isActive: (e) => e.isStrike,
 			isDisabled: (e) => !e.canStrike
 		},
 		{
-			icon: /* @__PURE__ */ v(w, {}),
+			icon: /* @__PURE__ */ b(T, {}),
 			label: $("code"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleCode().run(),
-			hidden: () => !_?.includes("code"),
+			hidden: () => !g?.includes("code"),
 			isActive: (e) => e.isCode,
 			isDisabled: (e) => !e.canCode
 		},
 		{
-			icon: /* @__PURE__ */ v(O, {}),
+			icon: /* @__PURE__ */ b(k, {}),
 			label: $("underline"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleUnderline().run(),
-			hidden: () => !_?.includes("underline"),
+			hidden: () => !g?.includes("underline"),
 			isActive: (e) => e.isUnderline
 		},
 		{
-			icon: /* @__PURE__ */ v(R, {}),
+			icon: /* @__PURE__ */ b(z, {}),
 			label: $("subscript"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleSubscript().run(),
-			hidden: () => !_?.includes("subscript"),
+			hidden: () => !g?.includes("subscript"),
 			isActive: (e) => e.isSubScript
 		},
 		{
-			icon: /* @__PURE__ */ v(L, {}),
+			icon: /* @__PURE__ */ b(R, {}),
 			label: $("superscript"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleSuperscript().run(),
-			hidden: () => !_?.includes("superscript"),
+			hidden: () => !g?.includes("superscript"),
 			isActive: (e) => e.isSuperScript
 		},
 		{
-			icon: /* @__PURE__ */ v(A, {}),
+			icon: /* @__PURE__ */ b(j, {}),
 			label: $("insertImage"),
-			hidden: () => !_?.includes("image"),
+			hidden: () => !g?.includes("image"),
 			onClick: (e) => e.chain().focus().setImageUploadNode().run()
 		},
 		{
-			icon: /* @__PURE__ */ v(P, {}),
+			icon: /* @__PURE__ */ b(F, {}),
 			label: $("insertVideo"),
-			hidden: () => !_?.includes("video"),
+			hidden: () => !g?.includes("video"),
 			onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
 		},
 		{
-			icon: /* @__PURE__ */ v(F, {}),
+			icon: /* @__PURE__ */ b(I, {}),
 			label: $("insertAudio"),
-			hidden: () => !_?.includes("audio"),
+			hidden: () => !g?.includes("audio"),
 			onClick: (e) => e.chain().focus().insertMedia({
 				type: "audio",
 				tag: "audio"
 			}).run()
 		},
 		{
-			icon: /* @__PURE__ */ v(te, {}),
+			icon: /* @__PURE__ */ b(o, {}),
 			label: $("cssClasses"),
-			hidden: () => !_?.includes("css"),
+			hidden: () => !g?.includes("css"),
 			onClick: (e) => e.commands.openCSSClassDialog()
 		},
 		{
-			icon: /* @__PURE__ */ v(N, {}),
+			icon: /* @__PURE__ */ b(P, {}),
 			label: $("blockquote"),
 			toggle: !0,
-			hidden: () => !_?.includes("blockquote"),
+			hidden: () => !g?.includes("blockquote"),
 			onClick: (e) => e.chain().focus().toggleBlockquote().run(),
 			isActive: (e) => e.isBlockquote
 		},
 		{
-			icon: /* @__PURE__ */ v(z, {}),
+			icon: /* @__PURE__ */ b(B, {}),
 			label: $("heading"),
 			toggle: !0,
-			hidden: () => !_?.includes("h3"),
+			hidden: () => !g?.includes("h3"),
 			onClick: (e) => e.chain().focus().toggleHeadingParagraph().run(),
 			isActive: (e) => e.isHeadingParagraph
 		},
 		{
-			icon: /* @__PURE__ */ v(k, {}),
+			icon: /* @__PURE__ */ b(A, {}),
 			label: $("insertMath"),
-			hidden: () => !_?.includes("math"),
+			hidden: () => !g?.includes("math"),
 			onClick: (e) => e.chain().focus().insertMath("").run()
 		},
 		{
-			icon: /* @__PURE__ */ v(c, { letter: "ñ" }),
+			icon: /* @__PURE__ */ b(l, { letter: "ñ" }),
 			label: $("spanishCharacters"),
-			hidden: () => !_?.includes("languageCharacters"),
-			onClick: () => K(i)
+			hidden: () => !g?.includes("languageCharacters"),
+			onClick: () => K(a)
 		},
 		{
-			icon: /* @__PURE__ */ v(c, { letter: "€" }),
+			icon: /* @__PURE__ */ b(l, { letter: "€" }),
 			label: $("specialCharacters"),
-			hidden: () => _?.filter((e) => e === "languageCharacters").length !== 2,
-			onClick: () => K(a)
+			hidden: () => g?.filter((e) => e === "languageCharacters").length !== 2,
+			onClick: () => K(ee)
 		},
 		{
-			icon: /* @__PURE__ */ v(ee, { editor: p }),
+			icon: /* @__PURE__ */ b(te, { editor: t }),
 			label: $("textAlignment"),
-			hidden: () => !_?.includes("text-align"),
+			hidden: () => !g?.includes("text-align"),
 			onClick: () => {}
 		},
 		{
-			icon: /* @__PURE__ */ v(E, {}),
+			icon: /* @__PURE__ */ b(D, {}),
 			label: $("bulletedList"),
 			toggle: !0,
-			hidden: () => !_?.includes("bulleted-list"),
+			hidden: () => !g?.includes("bulleted-list"),
 			onClick: (e) => e.chain().focus().toggleBulletList().run(),
 			isActive: (e) => e.isBulletList
 		},
 		{
-			icon: /* @__PURE__ */ v(D, {}),
+			icon: /* @__PURE__ */ b(O, {}),
 			label: $("numberedList"),
 			toggle: !0,
-			hidden: () => !_?.includes("numbered-list"),
+			hidden: () => !g?.includes("numbered-list"),
 			onClick: (e) => e.chain().focus().toggleOrderedList().run(),
 			isActive: (e) => e.isOrderedList
 		},
 		{
-			icon: /* @__PURE__ */ v(M, {}),
-			label: I.t("common:undo", { lng: W }),
-			hidden: () => !_?.includes("undo"),
+			icon: /* @__PURE__ */ b(N, {}),
+			label: L.t("common:undo", { lng: W }),
+			hidden: () => !g?.includes("undo"),
 			onClick: (e) => e.chain().focus().undo().run(),
 			isDisabled: (e) => !e.canUndo
 		},
 		{
-			icon: /* @__PURE__ */ v(j, {}),
-			label: I.t("graphing.redo", { lng: W }),
-			hidden: () => !_?.includes("redo"),
+			icon: /* @__PURE__ */ b(M, {}),
+			label: L.t("graphing.redo", { lng: W }),
+			hidden: () => !g?.includes("redo"),
 			onClick: (e) => e.chain().focus().redo().run(),
 			isDisabled: (e) => !e.canRedo
 		}
 	], [
-		_,
-		p,
+		g,
+		t,
 		W
 	]);
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ x("div", {
 		ref: q,
 		className: ce,
 		style: { ...le },
 		onMouseDown: ue,
 		children: [
-			Z && /* @__PURE__ */ v("div", {
-				className: m.defaultToolbar,
+			Z && /* @__PURE__ */ b("div", {
+				className: h.defaultToolbar,
 				role: "toolbar",
 				tabIndex: -1,
-				"aria-label": I.t("editableHtml.responseAreaToolbar", { lng: W }),
-				children: /* @__PURE__ */ v("div", {
-					className: m.buttonsContainer,
-					children: /* @__PURE__ */ v("button", {
+				"aria-label": L.t("editableHtml.responseAreaToolbar", { lng: W }),
+				children: /* @__PURE__ */ b("div", {
+					className: h.buttonsContainer,
+					children: /* @__PURE__ */ b("button", {
 						type: "button",
-						className: m.button,
+						className: h.button,
 						onClick: (e) => {
-							e.preventDefault(), p.chain().focus().deleteSelection().run(), V?.(p.getHTML());
+							e.preventDefault(), t.chain().focus().deleteSelection().run(), V?.(t.getHTML());
 						},
 						"aria-label": "Delete response area",
 						title: "Delete response area",
-						children: /* @__PURE__ */ v(g, {})
+						children: /* @__PURE__ */ b(oe, {})
 					})
 				})
 			}),
-			!Y.hideDefaultToolbar && /* @__PURE__ */ y("div", {
-				className: m.defaultToolbar,
+			!Y.hideDefaultToolbar && /* @__PURE__ */ x("div", {
+				className: h.defaultToolbar,
 				role: "toolbar",
 				tabIndex: -1,
-				"aria-label": I.t("editableHtml.toolbar", { lng: W }),
+				"aria-label": L.t("editableHtml.toolbar", { lng: W }),
 				children: [
-					/* @__PURE__ */ v("div", {
-						className: m.buttonsContainer,
-						children: de.filter((e) => !e.hidden?.(Y)).map((e, t) => {
-							let r = e.isDisabled?.(Y), i = e.isActive?.(Y);
-							return /* @__PURE__ */ v("button", {
+					/* @__PURE__ */ b("div", {
+						className: h.buttonsContainer,
+						children: de.filter((e) => !e.hidden?.(Y)).map((e, n) => {
+							let i = e.isDisabled?.(Y), a = e.isActive?.(Y);
+							return /* @__PURE__ */ b("button", {
 								type: "button",
-								disabled: r,
+								disabled: i,
 								"aria-label": e.label,
 								title: e.label,
-								"aria-pressed": e.toggle ? !!i : void 0,
-								onClick: (t) => {
-									t.preventDefault(), e.onClick(p);
+								"aria-pressed": e.toggle ? !!a : void 0,
+								onClick: (n) => {
+									n.preventDefault(), e.onClick(t);
 								},
-								className: n(m.button, { [m.active]: i }),
+								className: r(h.button, { [h.active]: a }),
 								children: e.icon
-							}, t);
+							}, n);
 						})
 					}),
-					_?.includes("responseArea") && /* @__PURE__ */ v("button", {
+					g?.includes("responseArea") && /* @__PURE__ */ b("button", {
 						type: "button",
 						"aria-label": "Insert response area",
 						title: "Insert response area",
 						onClick: () => {
-							p.chain().focus().insertResponseArea(B.type).run();
+							t.chain().focus().insertResponseArea(y.type).run();
 						},
-						className: m.button,
-						children: /* @__PURE__ */ v(r, {})
+						className: h.button,
+						children: /* @__PURE__ */ b(i, {})
 					}),
-					J.showDone && /* @__PURE__ */ v(t, {
+					J.showDone && /* @__PURE__ */ b(n, {
 						language: W,
 						onClick: () => {
-							V?.(p.getHTML()), p.commands.blur();
+							V?.(t.getHTML()), t.commands.blur();
 						}
 					})
 				]
 			}),
-			G && /* @__PURE__ */ v(ae, {
-				editor: p,
+			G && /* @__PURE__ */ b(u, {
+				editor: t,
 				opts: {
 					...G,
 					renderPopOver: (e, t) => console.log("Show popover", t),
@@ -440,8 +440,8 @@ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAr
 		]
 	});
 }
-var V = (e) => {
-	m();
+var H = (e) => {
+	g();
 	let t = {
 		defaultToolbar: "defaultToolbar",
 		buttonsContainer: "buttonsContainer",
@@ -461,11 +461,11 @@ var V = (e) => {
 		label: "label",
 		shared: "shared"
 	};
-	return /* @__PURE__ */ v(H, { children: /* @__PURE__ */ v(B, {
+	return /* @__PURE__ */ b(U, { children: /* @__PURE__ */ b(V, {
 		...e,
 		classes: t
 	}) });
-}, H = p("div")(() => ({
+}, U = h("div")(() => ({
 	height: 0,
 	overflow: "visible",
 	"& .defaultToolbar": {
@@ -489,14 +489,14 @@ var V = (e) => {
 			width: "24px",
 			height: "24px"
 		},
-		"&:hover": { color: b.text() },
-		"&:focus": { outline: `2px solid ${b.buttonFocusOutline()}` }
+		"&:hover": { color: v.text() },
+		"&:focus": { outline: `2px solid ${v.buttonFocusOutline()}` }
 	},
-	"& .active": { color: b.text() },
+	"& .active": { color: v.text() },
 	"& .disabled": {
 		opacity: .7,
 		cursor: "not-allowed",
-		"& :hover": { color: b.disabled() }
+		"& :hover": { color: v.disabled() }
 	},
 	"& .isActive": {
 		background: "var(--purple)",
@@ -508,7 +508,7 @@ var V = (e) => {
 		zIndex: 20,
 		cursor: "pointer",
 		justifyContent: "space-between",
-		background: "var(--editable-html-toolbar-bg, #efefef)",
+		background: t,
 		minWidth: "280px",
 		margin: 0,
 		padding: "2px",
@@ -544,4 +544,4 @@ var V = (e) => {
 	"& .shared": { display: "flex" }
 }));
 //#endregion
-export { V as default };
+export { H as default };