@simplysm/solid 13.0.75 → 13.0.76

package/dist/components/form-control/editor/EditorToolbar.js

@@ -2,25 +2,26 @@ import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<div><button type=button></button><button type=button></button><div></div><button type=button></button><button type=button></button><button type=button></button><button type=button></button><div></div><label><span>A</span><div></div><input type=color></label><label><span>A</span><input type=color></label><div></div><button type=button></button><button type=button></button><div></div><button type=button></button><button type=button></button><div></div><button type=button></button><button type=button></button><div></div><button type=button></button><button type=button></button><button type=button></button><button type=button></button><div></div><button type=button></button><button type=button></button><div></div><button type=button>`);
+var _tmpl$ = /* @__PURE__ */ _$template(`<div><div></div><div></div><label><span>A</span><div class="absolute inset-x-1 bottom-0.5 h-0.5 rounded-full"></div><input type=color></label><label><span>A</span><input type=color></label><div></div><div></div><div></div><div></div><div></div><div>`);
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createEditorTransaction } from "solid-tiptap";
-import { iconButtonBase } from "../../../styles/patterns.styles.js";
+import { Button } from "../Button.js";
 import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconList, IconListNumbers, IconIndentIncrease, IconIndentDecrease, IconQuote, IconCode, IconAlignLeft, IconAlignCenter, IconAlignRight, IconAlignJustified, IconTablePlus, IconPhoto, IconClearFormatting } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
-const toolbarClass = clsx("flex flex-wrap items-center gap-0.5", "border-b border-base-300 dark:border-base-700", "px-2 py-1");
-const toolbarBtnClass = twMerge(iconButtonBase, "size-7");
-const toolbarBtnActiveClass = clsx("bg-primary-100 text-primary-700", "dark:bg-primary-900/40 dark:text-primary-300");
+import { border, text } from "../../../styles/base.styles.js";
+import { gap, pad } from "../../../styles/control.styles.js";
+import { themeTokens } from "../../../styles/theme.styles.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
+const toolbarBtnExtra = "size-7";
+const toolbarBtnActiveClass = themeTokens.primary.light;
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
-const colorLabelClass = twMerge(iconButtonBase, "relative", "size-7");
+const colorLabelClass = clsx("inline-flex items-center justify-center", "cursor-pointer", "rounded", "transition-colors", text.muted, themeTokens.base.hoverBg, "relative", "size-7");
 const colorInputClass = clsx("absolute opacity-0", "size-0");
-const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded-full");
 const EditorToolbar = (props) => {
   const e = () => props.editor;
   const i18n = useI18n();
@@ -52,7 +53,7 @@ const EditorToolbar = (props) => {
   }));
   const currentColor = createEditorTransaction(e, (editor) => editor.getAttributes("textStyle")["color"] ?? "#000000");
   const currentHighlight = createEditorTransaction(e, (editor) => editor.getAttributes("highlight")["color"] ?? "#ffff00");
-  const btnClass = (active) => twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
+  const btnClass = (active) => twMerge(toolbarBtnExtra, active() && toolbarBtnActiveClass);
   const handleImageInsert = () => {
     const input = document.createElement("input");
     input.type = "file";
@@ -76,174 +77,353 @@ const EditorToolbar = (props) => {
     input.click();
   };
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$0.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$12.nextSibling, _el$16 = _el$15.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$26.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.nextSibling, _el$30 = _el$29.nextSibling, _el$31 = _el$30.nextSibling, _el$32 = _el$31.nextSibling, _el$33 = _el$32.nextSibling;
-    _el$2.$$click = () => props.editor.chain().focus().toggleHeading({
-      level: 1
-    }).run();
-    _$insert(_el$2, _$createComponent(Icon, {
-      icon: IconH1,
-      size: "1em"
-    }));
-    _el$3.$$click = () => props.editor.chain().focus().toggleHeading({
-      level: 2
-    }).run();
-    _$insert(_el$3, _$createComponent(Icon, {
-      icon: IconH2,
-      size: "1em"
-    }));
-    _$className(_el$4, separatorClass);
-    _el$5.$$click = () => props.editor.chain().focus().toggleBold().run();
-    _$insert(_el$5, _$createComponent(Icon, {
-      icon: IconBold,
-      size: "1em"
-    }));
-    _el$6.$$click = () => props.editor.chain().focus().toggleItalic().run();
-    _$insert(_el$6, _$createComponent(Icon, {
-      icon: IconItalic,
-      size: "1em"
-    }));
-    _el$7.$$click = () => props.editor.chain().focus().toggleUnderline().run();
-    _$insert(_el$7, _$createComponent(Icon, {
-      icon: IconUnderline,
-      size: "1em"
-    }));
-    _el$8.$$click = () => props.editor.chain().focus().toggleStrike().run();
-    _$insert(_el$8, _$createComponent(Icon, {
-      icon: IconStrikethrough,
-      size: "1em"
-    }));
-    _$className(_el$9, separatorClass);
-    _$className(_el$0, colorLabelClass);
-    _$className(_el$10, colorIndicatorClass);
-    _el$11.$$input = (ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run();
-    _$className(_el$11, colorInputClass);
-    _$className(_el$12, colorLabelClass);
-    _el$14.$$input = (ev) => props.editor.chain().focus().toggleHighlight({
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$8.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling;
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isH1);
+      },
+      get title() {
+        return i18n.t("editorToolbar.heading1");
+      },
+      onClick: () => props.editor.chain().focus().toggleHeading({
+        level: 1
+      }).run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconH1,
+          size: "1em"
+        });
+      }
+    }), _el$2);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isH2);
+      },
+      get title() {
+        return i18n.t("editorToolbar.heading2");
+      },
+      onClick: () => props.editor.chain().focus().toggleHeading({
+        level: 2
+      }).run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconH2,
+          size: "1em"
+        });
+      }
+    }), _el$2);
+    _$className(_el$2, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isBold);
+      },
+      get title() {
+        return i18n.t("editorToolbar.bold");
+      },
+      onClick: () => props.editor.chain().focus().toggleBold().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconBold,
+          size: "1em"
+        });
+      }
+    }), _el$3);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isItalic);
+      },
+      get title() {
+        return i18n.t("editorToolbar.italic");
+      },
+      onClick: () => props.editor.chain().focus().toggleItalic().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconItalic,
+          size: "1em"
+        });
+      }
+    }), _el$3);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isUnderline);
+      },
+      get title() {
+        return i18n.t("editorToolbar.underline");
+      },
+      onClick: () => props.editor.chain().focus().toggleUnderline().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconUnderline,
+          size: "1em"
+        });
+      }
+    }), _el$3);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isStrike);
+      },
+      get title() {
+        return i18n.t("editorToolbar.strikethrough");
+      },
+      onClick: () => props.editor.chain().focus().toggleStrike().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconStrikethrough,
+          size: "1em"
+        });
+      }
+    }), _el$3);
+    _$className(_el$3, separatorClass);
+    _$className(_el$4, colorLabelClass);
+    _el$7.$$input = (ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run();
+    _$className(_el$7, colorInputClass);
+    _$className(_el$8, colorLabelClass);
+    _el$0.$$input = (ev) => props.editor.chain().focus().toggleHighlight({
       color: ev.currentTarget.value
     }).run();
-    _$className(_el$14, colorInputClass);
-    _$className(_el$15, separatorClass);
-    _el$16.$$click = () => props.editor.chain().focus().toggleBulletList().run();
-    _$insert(_el$16, _$createComponent(Icon, {
-      icon: IconList,
-      size: "1em"
-    }));
-    _el$17.$$click = () => props.editor.chain().focus().toggleOrderedList().run();
-    _$insert(_el$17, _$createComponent(Icon, {
-      icon: IconListNumbers,
-      size: "1em"
-    }));
-    _$className(_el$18, separatorClass);
-    _el$19.$$click = () => props.editor.chain().focus().sinkListItem("listItem").run();
-    _$className(_el$19, toolbarBtnClass);
-    _$insert(_el$19, _$createComponent(Icon, {
-      icon: IconIndentIncrease,
-      size: "1em"
-    }));
-    _el$20.$$click = () => props.editor.chain().focus().liftListItem("listItem").run();
-    _$className(_el$20, toolbarBtnClass);
-    _$insert(_el$20, _$createComponent(Icon, {
-      icon: IconIndentDecrease,
-      size: "1em"
-    }));
-    _$className(_el$21, separatorClass);
-    _el$22.$$click = () => props.editor.chain().focus().toggleBlockquote().run();
-    _$insert(_el$22, _$createComponent(Icon, {
-      icon: IconQuote,
-      size: "1em"
-    }));
-    _el$23.$$click = () => props.editor.chain().focus().toggleCodeBlock().run();
-    _$insert(_el$23, _$createComponent(Icon, {
-      icon: IconCode,
-      size: "1em"
-    }));
-    _$className(_el$24, separatorClass);
-    _el$25.$$click = () => props.editor.chain().focus().setTextAlign("left").run();
-    _$insert(_el$25, _$createComponent(Icon, {
-      icon: IconAlignLeft,
-      size: "1em"
-    }));
-    _el$26.$$click = () => props.editor.chain().focus().setTextAlign("center").run();
-    _$insert(_el$26, _$createComponent(Icon, {
-      icon: IconAlignCenter,
-      size: "1em"
-    }));
-    _el$27.$$click = () => props.editor.chain().focus().setTextAlign("right").run();
-    _$insert(_el$27, _$createComponent(Icon, {
-      icon: IconAlignRight,
-      size: "1em"
-    }));
-    _el$28.$$click = () => props.editor.chain().focus().setTextAlign("justify").run();
-    _$insert(_el$28, _$createComponent(Icon, {
-      icon: IconAlignJustified,
-      size: "1em"
-    }));
-    _$className(_el$29, separatorClass);
-    _el$30.$$click = () => props.editor.chain().focus().insertTable({
-      rows: 3,
-      cols: 3,
-      withHeaderRow: true
-    }).run();
-    _$className(_el$30, toolbarBtnClass);
-    _$insert(_el$30, _$createComponent(Icon, {
-      icon: IconTablePlus,
-      size: "1em"
-    }));
-    _el$31.$$click = handleImageInsert;
-    _$className(_el$31, toolbarBtnClass);
-    _$insert(_el$31, _$createComponent(Icon, {
-      icon: IconPhoto,
-      size: "1em"
-    }));
-    _$className(_el$32, separatorClass);
-    _el$33.$$click = () => props.editor.chain().focus().clearNodes().unsetAllMarks().run();
-    _$className(_el$33, toolbarBtnClass);
-    _$insert(_el$33, _$createComponent(Icon, {
-      icon: IconClearFormatting,
-      size: "1em"
-    }));
+    _$className(_el$0, colorInputClass);
+    _$className(_el$1, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isBulletList);
+      },
+      get title() {
+        return i18n.t("editorToolbar.bulletList");
+      },
+      onClick: () => props.editor.chain().focus().toggleBulletList().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconList,
+          size: "1em"
+        });
+      }
+    }), _el$10);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isOrderedList);
+      },
+      get title() {
+        return i18n.t("editorToolbar.numberedList");
+      },
+      onClick: () => props.editor.chain().focus().toggleOrderedList().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconListNumbers,
+          size: "1em"
+        });
+      }
+    }), _el$10);
+    _$className(_el$10, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      "class": toolbarBtnExtra,
+      get title() {
+        return i18n.t("editorToolbar.increaseIndent");
+      },
+      onClick: () => props.editor.chain().focus().sinkListItem("listItem").run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconIndentIncrease,
+          size: "1em"
+        });
+      }
+    }), _el$11);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      "class": toolbarBtnExtra,
+      get title() {
+        return i18n.t("editorToolbar.decreaseIndent");
+      },
+      onClick: () => props.editor.chain().focus().liftListItem("listItem").run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconIndentDecrease,
+          size: "1em"
+        });
+      }
+    }), _el$11);
+    _$className(_el$11, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isBlockquote);
+      },
+      get title() {
+        return i18n.t("editorToolbar.blockquote");
+      },
+      onClick: () => props.editor.chain().focus().toggleBlockquote().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconQuote,
+          size: "1em"
+        });
+      }
+    }), _el$12);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isCodeBlock);
+      },
+      get title() {
+        return i18n.t("editorToolbar.codeBlock");
+      },
+      onClick: () => props.editor.chain().focus().toggleCodeBlock().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconCode,
+          size: "1em"
+        });
+      }
+    }), _el$12);
+    _$className(_el$12, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isAlignLeft);
+      },
+      get title() {
+        return i18n.t("editorToolbar.alignLeft");
+      },
+      onClick: () => props.editor.chain().focus().setTextAlign("left").run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconAlignLeft,
+          size: "1em"
+        });
+      }
+    }), _el$13);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isAlignCenter);
+      },
+      get title() {
+        return i18n.t("editorToolbar.alignCenter");
+      },
+      onClick: () => props.editor.chain().focus().setTextAlign("center").run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconAlignCenter,
+          size: "1em"
+        });
+      }
+    }), _el$13);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isAlignRight);
+      },
+      get title() {
+        return i18n.t("editorToolbar.alignRight");
+      },
+      onClick: () => props.editor.chain().focus().setTextAlign("right").run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconAlignRight,
+          size: "1em"
+        });
+      }
+    }), _el$13);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      get ["class"]() {
+        return btnClass(isAlignJustify);
+      },
+      get title() {
+        return i18n.t("editorToolbar.justify");
+      },
+      onClick: () => props.editor.chain().focus().setTextAlign("justify").run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconAlignJustified,
+          size: "1em"
+        });
+      }
+    }), _el$13);
+    _$className(_el$13, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      "class": toolbarBtnExtra,
+      get title() {
+        return i18n.t("editorToolbar.insertTable");
+      },
+      onClick: () => props.editor.chain().focus().insertTable({
+        rows: 3,
+        cols: 3,
+        withHeaderRow: true
+      }).run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconTablePlus,
+          size: "1em"
+        });
+      }
+    }), _el$14);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      "class": toolbarBtnExtra,
+      get title() {
+        return i18n.t("editorToolbar.insertImage");
+      },
+      onClick: handleImageInsert,
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconPhoto,
+          size: "1em"
+        });
+      }
+    }), _el$14);
+    _$className(_el$14, separatorClass);
+    _$insert(_el$, _$createComponent(Button, {
+      variant: "ghost",
+      size: "xs",
+      "class": toolbarBtnExtra,
+      get title() {
+        return i18n.t("editorToolbar.clearFormatting");
+      },
+      onClick: () => props.editor.chain().focus().clearNodes().unsetAllMarks().run(),
+      get children() {
+        return _$createComponent(Icon, {
+          icon: IconClearFormatting,
+          size: "1em"
+        });
+      }
+    }), null);
     _$effect((_p$) => {
-      var _v$ = twMerge(toolbarClass, props.class), _v$2 = btnClass(isH1), _v$3 = i18n.t("editorToolbar.heading1"), _v$4 = btnClass(isH2), _v$5 = i18n.t("editorToolbar.heading2"), _v$6 = btnClass(isBold), _v$7 = i18n.t("editorToolbar.bold"), _v$8 = btnClass(isItalic), _v$9 = i18n.t("editorToolbar.italic"), _v$0 = btnClass(isUnderline), _v$1 = i18n.t("editorToolbar.underline"), _v$10 = btnClass(isStrike), _v$11 = i18n.t("editorToolbar.strikethrough"), _v$12 = i18n.t("editorToolbar.textColor"), _v$13 = clsx("text-sm font-bold"), _v$14 = currentColor(), _v$15 = i18n.t("editorToolbar.bgColor"), _v$16 = clsx("rounded px-0.5 text-sm font-bold"), _v$17 = currentHighlight(), _v$18 = btnClass(isBulletList), _v$19 = i18n.t("editorToolbar.bulletList"), _v$20 = btnClass(isOrderedList), _v$21 = i18n.t("editorToolbar.numberedList"), _v$22 = i18n.t("editorToolbar.increaseIndent"), _v$23 = i18n.t("editorToolbar.decreaseIndent"), _v$24 = btnClass(isBlockquote), _v$25 = i18n.t("editorToolbar.blockquote"), _v$26 = btnClass(isCodeBlock), _v$27 = i18n.t("editorToolbar.codeBlock"), _v$28 = btnClass(isAlignLeft), _v$29 = i18n.t("editorToolbar.alignLeft"), _v$30 = btnClass(isAlignCenter), _v$31 = i18n.t("editorToolbar.alignCenter"), _v$32 = btnClass(isAlignRight), _v$33 = i18n.t("editorToolbar.alignRight"), _v$34 = btnClass(isAlignJustify), _v$35 = i18n.t("editorToolbar.justify"), _v$36 = i18n.t("editorToolbar.insertTable"), _v$37 = i18n.t("editorToolbar.insertImage"), _v$38 = i18n.t("editorToolbar.clearFormatting");
+      var _v$ = twMerge(clsx("flex flex-wrap items-center", gap.sm, "border-b", border.default, pad.default), props.class), _v$2 = i18n.t("editorToolbar.textColor"), _v$3 = clsx("text-sm font-bold"), _v$4 = currentColor(), _v$5 = i18n.t("editorToolbar.bgColor"), _v$6 = clsx("rounded px-0.5 text-sm font-bold"), _v$7 = currentHighlight();
       _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && _$className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$2, "title", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$className(_el$3, _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setAttribute(_el$3, "title", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$className(_el$5, _p$.n = _v$6);
-      _v$7 !== _p$.s && _$setAttribute(_el$5, "title", _p$.s = _v$7);
-      _v$8 !== _p$.h && _$className(_el$6, _p$.h = _v$8);
-      _v$9 !== _p$.r && _$setAttribute(_el$6, "title", _p$.r = _v$9);
-      _v$0 !== _p$.d && _$className(_el$7, _p$.d = _v$0);
-      _v$1 !== _p$.l && _$setAttribute(_el$7, "title", _p$.l = _v$1);
-      _v$10 !== _p$.u && _$className(_el$8, _p$.u = _v$10);
-      _v$11 !== _p$.c && _$setAttribute(_el$8, "title", _p$.c = _v$11);
-      _v$12 !== _p$.w && _$setAttribute(_el$0, "title", _p$.w = _v$12);
-      _v$13 !== _p$.m && _$className(_el$1, _p$.m = _v$13);
-      _v$14 !== _p$.f && _$setStyleProperty(_el$10, "background-color", _p$.f = _v$14);
-      _v$15 !== _p$.y && _$setAttribute(_el$12, "title", _p$.y = _v$15);
-      _v$16 !== _p$.g && _$className(_el$13, _p$.g = _v$16);
-      _v$17 !== _p$.p && _$setStyleProperty(_el$13, "background-color", _p$.p = _v$17);
-      _v$18 !== _p$.b && _$className(_el$16, _p$.b = _v$18);
-      _v$19 !== _p$.T && _$setAttribute(_el$16, "title", _p$.T = _v$19);
-      _v$20 !== _p$.A && _$className(_el$17, _p$.A = _v$20);
-      _v$21 !== _p$.O && _$setAttribute(_el$17, "title", _p$.O = _v$21);
-      _v$22 !== _p$.I && _$setAttribute(_el$19, "title", _p$.I = _v$22);
-      _v$23 !== _p$.S && _$setAttribute(_el$20, "title", _p$.S = _v$23);
-      _v$24 !== _p$.W && _$className(_el$22, _p$.W = _v$24);
-      _v$25 !== _p$.C && _$setAttribute(_el$22, "title", _p$.C = _v$25);
-      _v$26 !== _p$.B && _$className(_el$23, _p$.B = _v$26);
-      _v$27 !== _p$.v && _$setAttribute(_el$23, "title", _p$.v = _v$27);
-      _v$28 !== _p$.k && _$className(_el$25, _p$.k = _v$28);
-      _v$29 !== _p$.x && _$setAttribute(_el$25, "title", _p$.x = _v$29);
-      _v$30 !== _p$.j && _$className(_el$26, _p$.j = _v$30);
-      _v$31 !== _p$.q && _$setAttribute(_el$26, "title", _p$.q = _v$31);
-      _v$32 !== _p$.z && _$className(_el$27, _p$.z = _v$32);
-      _v$33 !== _p$.P && _$setAttribute(_el$27, "title", _p$.P = _v$33);
-      _v$34 !== _p$.H && _$className(_el$28, _p$.H = _v$34);
-      _v$35 !== _p$.F && _$setAttribute(_el$28, "title", _p$.F = _v$35);
-      _v$36 !== _p$.M && _$setAttribute(_el$30, "title", _p$.M = _v$36);
-      _v$37 !== _p$.D && _$setAttribute(_el$31, "title", _p$.D = _v$37);
-      _v$38 !== _p$.R && _$setAttribute(_el$33, "title", _p$.R = _v$38);
+      _v$2 !== _p$.t && _$setAttribute(_el$4, "title", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$className(_el$5, _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$6, "background-color", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$8, "title", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$className(_el$9, _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$9, "background-color", _p$.s = _v$7);
       return _p$;
     }, {
       e: void 0,
@@ -252,47 +432,14 @@ const EditorToolbar = (props) => {
       o: void 0,
       i: void 0,
       n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0,
-      d: void 0,
-      l: void 0,
-      u: void 0,
-      c: void 0,
-      w: void 0,
-      m: void 0,
-      f: void 0,
-      y: void 0,
-      g: void 0,
-      p: void 0,
-      b: void 0,
-      T: void 0,
-      A: void 0,
-      O: void 0,
-      I: void 0,
-      S: void 0,
-      W: void 0,
-      C: void 0,
-      B: void 0,
-      v: void 0,
-      k: void 0,
-      x: void 0,
-      j: void 0,
-      q: void 0,
-      z: void 0,
-      P: void 0,
-      H: void 0,
-      F: void 0,
-      M: void 0,
-      D: void 0,
-      R: void 0
+      s: void 0
     });
-    _$effect(() => _el$11.value = currentColor());
-    _$effect(() => _el$14.value = currentHighlight());
+    _$effect(() => _el$7.value = currentColor());
+    _$effect(() => _el$0.value = currentHighlight());
     return _el$;
   })();
 };
-_$delegateEvents(["click", "input"]);
+_$delegateEvents(["input"]);
 export {
   EditorToolbar
 };