@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.TextSize.js

@@ -1,62 +1,63 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
-import { useTranslation } from "react-i18next";
-import { useEditorContext } from "../../hooks/useEditorContext.js";
-import { hasExtension } from "../../utils/has-extension.js";
-import { Tooltip } from "../../../../components/Tooltip/Tooltip.js";
-import { IconButton } from "../../../../components/Button/IconButton.js";
-import { Icon } from "../../../../components/Icon/Icon.js";
-import { Dropdown } from "../../../../components/Dropdown/Dropdown.js";
-const EditorToolbarTextSize = ({
-  triggerProps
+import { jsxs as r, Fragment as c, jsx as i } from "react/jsx-runtime";
+import { Fragment as m } from "react";
+import { useTranslation as p } from "react-i18next";
+import { useEditorContext as b } from "../../hooks/useEditorContext.js";
+import { hasExtension as s } from "../../utils/has-extension.js";
+import { Tooltip as f } from "../../../../components/Tooltip/Tooltip.js";
+import { IconButton as u } from "../../../../components/Button/IconButton.js";
+import { Icon as d } from "../../../../components/Icon/Icon.js";
+import { Dropdown as o } from "../../../../components/Dropdown/Dropdown.js";
+const H = ({
+  triggerProps: l
 }) => {
   const {
-    t
-  } = useTranslation(), {
-    editor
-  } = useEditorContext(), textOptions = [{
+    t: a
+  } = p(), {
+    editor: t
+  } = b(), n = [{
     id: "title-1",
-    label: t("tiptap.toolbar.size.h1"),
+    label: a("tiptap.toolbar.size.h1"),
     className: "fs-2 fw-bold text-secondary",
-    action: () => editor == null ? void 0 : editor.chain().focus().setCustomHeading({
+    action: () => t == null ? void 0 : t.chain().focus().setCustomHeading({
       level: 1
     }).run(),
-    visibility: hasExtension("customHeading", editor)
+    visibility: s("customHeading", t)
   }, {
     id: "title-2",
-    label: t("tiptap.toolbar.size.h2"),
+    label: a("tiptap.toolbar.size.h2"),
     className: "fs-3 fw-bold text-secondary",
-    action: () => editor == null ? void 0 : editor.chain().focus().setCustomHeading({
+    action: () => t == null ? void 0 : t.chain().focus().setCustomHeading({
       level: 2
     }).run(),
-    visibility: hasExtension("customHeading", editor)
+    visibility: s("customHeading", t)
   }, {
     id: "divider",
     type: "divider",
-    visibility: hasExtension("customHeading", editor) && hasExtension("fontSize", editor)
+    visibility: s("customHeading", t) && s("fontSize", t)
   }, {
     id: "big-text",
-    label: t("tiptap.toolbar.size.big"),
+    label: a("tiptap.toolbar.size.big"),
     className: "fs-4",
-    action: () => editor == null ? void 0 : editor.chain().focus().setParagraph().setFontSize("18px").run(),
-    visibility: hasExtension("fontSize", editor)
+    action: () => t == null ? void 0 : t.chain().focus().setParagraph().setFontSize("18px").run(),
+    visibility: s("fontSize", t)
   }, {
     id: "normal-text",
-    label: t("tiptap.toolbar.size.normal"),
-    action: () => editor == null ? void 0 : editor.chain().focus().setParagraph().setFontSize("16px").run(),
-    visibility: hasExtension("fontSize", editor)
+    label: a("tiptap.toolbar.size.normal"),
+    action: () => t == null ? void 0 : t.chain().focus().setParagraph().setFontSize("16px").run(),
+    visibility: s("fontSize", t)
   }, {
     id: "small-text",
-    label: t("tiptap.toolbar.size.small"),
+    label: a("tiptap.toolbar.size.small"),
     className: "fs-6",
-    action: () => editor == null ? void 0 : editor.chain().focus().setParagraph().setFontSize("14px").run(),
-    visibility: hasExtension("fontSize", editor)
+    action: () => t == null ? void 0 : t.chain().focus().setParagraph().setFontSize("14px").run(),
+    visibility: s("fontSize", t)
   }];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.size.choice"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "text-size" }), "aria-label": t("tiptap.toolbar.size.choice") }) }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: textOptions.map((option) => /* @__PURE__ */ jsx(Fragment$1, { children: option.type === "divider" && option.visibility ? /* @__PURE__ */ jsx(Dropdown.Separator, {}) : option.visibility ? /* @__PURE__ */ jsx(Dropdown.Item, { onClick: option.action, children: /* @__PURE__ */ jsx("span", { className: option.className, children: option.label }) }) : null }, option.id)) })
+  return /* @__PURE__ */ r(c, { children: [
+    /* @__PURE__ */ i(f, { message: a("tiptap.toolbar.size.choice"), placement: "top", children: /* @__PURE__ */ i(u, { ...l, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ i(d, { name: "text-size" }), "aria-label": a("tiptap.toolbar.size.choice") }) }),
+    /* @__PURE__ */ i(o.Menu, { children: n.map((e) => /* @__PURE__ */ i(m, { children: e.type === "divider" && e.visibility ? /* @__PURE__ */ i(o.Separator, {}) : e.visibility ? /* @__PURE__ */ i(o.Item, { onClick: e.action, children: /* @__PURE__ */ i("span", { className: e.className, children: e.label }) }) : null }, e.id)) })
   ] });
 };
 export {
-  EditorToolbarTextSize
+  H as EditorToolbarTextSize
 };
+//# sourceMappingURL=EditorToolbar.TextSize.js.map

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.TextSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.TextSize.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.TextSize.tsx"],"sourcesContent":["import { Fragment, RefAttributes } from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  Dropdown,\n  Icon,\n  IconButton,\n  IconButtonProps,\n  Tooltip,\n} from '../../../..';\nimport { useEditorContext } from '../../hooks/useEditorContext';\nimport { hasExtension } from '../../utils/has-extension';\n\ninterface Props {\n  /**\n   * Props for the trigger\n   */\n  triggerProps: JSX.IntrinsicAttributes &\n    Omit<IconButtonProps, 'ref'> &\n    RefAttributes<HTMLButtonElement>;\n}\n\nexport const EditorToolbarTextSize = ({ triggerProps }: Props) => {\n  const { t } = useTranslation();\n  const { editor } = useEditorContext();\n\n  const textOptions = [\n    {\n      id: 'title-1',\n      label: t('tiptap.toolbar.size.h1'),\n      className: 'fs-2 fw-bold text-secondary',\n      action: () =>\n        editor?.chain().focus().setCustomHeading({ level: 1 }).run(),\n      visibility: hasExtension('customHeading', editor),\n    },\n    {\n      id: 'title-2',\n      label: t('tiptap.toolbar.size.h2'),\n      className: 'fs-3 fw-bold text-secondary',\n      action: () =>\n        editor?.chain().focus().setCustomHeading({ level: 2 }).run(),\n      visibility: hasExtension('customHeading', editor),\n    },\n    {\n      id: 'divider',\n      type: 'divider',\n      visibility:\n        hasExtension('customHeading', editor) &&\n        hasExtension('fontSize', editor),\n    },\n    {\n      id: 'big-text',\n      label: t('tiptap.toolbar.size.big'),\n      className: 'fs-4',\n      action: () =>\n        editor?.chain().focus().setParagraph().setFontSize('18px').run(),\n      visibility: hasExtension('fontSize', editor),\n    },\n    {\n      id: 'normal-text',\n      label: t('tiptap.toolbar.size.normal'),\n      action: () =>\n        editor?.chain().focus().setParagraph().setFontSize('16px').run(),\n      visibility: hasExtension('fontSize', editor),\n    },\n    {\n      id: 'small-text',\n      label: t('tiptap.toolbar.size.small'),\n      className: 'fs-6',\n      action: () =>\n        editor?.chain().focus().setParagraph().setFontSize('14px').run(),\n      visibility: hasExtension('fontSize', editor),\n    },\n  ];\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.toolbar.size.choice')} placement=\"top\">\n        <IconButton\n          {...triggerProps}\n          type=\"button\"\n          variant=\"ghost\"\n          color=\"tertiary\"\n          icon={<Icon name=\"text-size\" />}\n          aria-label={t('tiptap.toolbar.size.choice')}\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        {textOptions.map((option) => {\n          return (\n            <Fragment key={option.id}>\n              {option.type === 'divider' && option.visibility ? (\n                <Dropdown.Separator />\n              ) : option.visibility ? (\n                <Dropdown.Item onClick={option.action}>\n                  <span className={option.className}>{option.label}</span>\n                </Dropdown.Item>\n              ) : null}\n            </Fragment>\n          );\n        })}\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarTextSize","triggerProps","t","useTranslation","editor","useEditorContext","textOptions","id","label","className","action","chain","focus","setCustomHeading","level","run","visibility","hasExtension","type","setParagraph","setFontSize","jsxs","Fragment","jsx","Tooltip","IconButton","Icon","Dropdown","map","option"],"mappings":";;;;;;;;;AAuBO,MAAMA,IAAwBA,CAAC;AAAA,EAAEC,cAAAA;AAAoB,MAAM;AAC1D,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAiB,GAE9BC,IAAc,CAClB;AAAA,IACEC,IAAI;AAAA,IACJC,OAAON,EAAE,wBAAwB;AAAA,IACjCO,WAAW;AAAA,IACXC,QAAQA,MACNN,KAAAA,gBAAAA,EAAQO,QAAQC,QAAQC,iBAAiB;AAAA,MAAEC,OAAO;AAAA,IAAG,GAAEC;AAAAA,IACzDC,YAAYC,EAAa,iBAAiBb,CAAM;AAAA,EAAA,GAElD;AAAA,IACEG,IAAI;AAAA,IACJC,OAAON,EAAE,wBAAwB;AAAA,IACjCO,WAAW;AAAA,IACXC,QAAQA,MACNN,KAAAA,gBAAAA,EAAQO,QAAQC,QAAQC,iBAAiB;AAAA,MAAEC,OAAO;AAAA,IAAG,GAAEC;AAAAA,IACzDC,YAAYC,EAAa,iBAAiBb,CAAM;AAAA,EAAA,GAElD;AAAA,IACEG,IAAI;AAAA,IACJW,MAAM;AAAA,IACNF,YACEC,EAAa,iBAAiBb,CAAM,KACpCa,EAAa,YAAYb,CAAM;AAAA,EAAA,GAEnC;AAAA,IACEG,IAAI;AAAA,IACJC,OAAON,EAAE,yBAAyB;AAAA,IAClCO,WAAW;AAAA,IACXC,QAAQA,MACNN,KAAAA,gBAAAA,EAAQO,QAAQC,QAAQO,eAAeC,YAAY,QAAQL;AAAAA,IAC7DC,YAAYC,EAAa,YAAYb,CAAM;AAAA,EAAA,GAE7C;AAAA,IACEG,IAAI;AAAA,IACJC,OAAON,EAAE,4BAA4B;AAAA,IACrCQ,QAAQA,MACNN,KAAAA,gBAAAA,EAAQO,QAAQC,QAAQO,eAAeC,YAAY,QAAQL;AAAAA,IAC7DC,YAAYC,EAAa,YAAYb,CAAM;AAAA,EAAA,GAE7C;AAAA,IACEG,IAAI;AAAA,IACJC,OAAON,EAAE,2BAA2B;AAAA,IACpCO,WAAW;AAAA,IACXC,QAAQA,MACNN,KAAAA,gBAAAA,EAAQO,QAAQC,QAAQO,eAAeC,YAAY,QAAQL;AAAAA,IAC7DC,YAAYC,EAAa,YAAYb,CAAM;AAAA,EAAA,CAC5C;AAGH,SAEI,gBAAAiB,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAQ,SAAStB,EAAE,4BAA4B,GAAG,WAAU,OAC3D,UAAC,gBAAAqB,EAAAE,GAAA,EACKxB,GAAAA,GACJ,MAAK,UACL,SAAQ,SACR,OAAM,YACN,MAAM,gBAAAsB,EAACG,GAAK,EAAA,MAAK,YAAW,CAAA,GAC5B,cAAYxB,EAAE,4BAA4B,EAAA,CAAE,EAEhD,CAAA;AAAA,sBACCyB,EAAS,MAAT,EACErB,UAAAA,EAAYsB,IAAKC,CAAWA,MAExBP,gBAAAA,EAAAA,GAAA,EACEO,UAAAA,EAAOX,SAAS,aAAaW,EAAOb,aACnC,gBAAAO,EAACI,EAAS,WAAT,EAAkB,IACjBE,EAAOb,aACT,gBAAAO,EAACI,EAAS,MAAT,EAAc,SAASE,EAAOnB,QAC7B,4BAAC,QAAK,EAAA,WAAWmB,EAAOpB,WAAYoB,YAAOrB,MAAM,CAAA,EACnD,CAAA,IACE,QAPSqB,EAAOtB,EAQtB,CAEH,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.Typography.js

@@ -1,52 +1,53 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useEffect, Fragment as Fragment$1 } from "react";
-import { useTranslation } from "react-i18next";
-import { useEditorContext } from "../../hooks/useEditorContext.js";
-import { Tooltip } from "../../../../components/Tooltip/Tooltip.js";
-import { IconButton } from "../../../../components/Button/IconButton.js";
-import { Icon } from "../../../../components/Icon/Icon.js";
-import { Dropdown } from "../../../../components/Dropdown/Dropdown.js";
-const EditorToolbarTypography = ({
-  triggerProps
+import { jsxs as p, Fragment as m, jsx as o } from "react/jsx-runtime";
+import { useState as f, useEffect as u, Fragment as y } from "react";
+import { useTranslation as b } from "react-i18next";
+import { useEditorContext as h } from "../../hooks/useEditorContext.js";
+import { Tooltip as g } from "../../../../components/Tooltip/Tooltip.js";
+import { IconButton as x } from "../../../../components/Button/IconButton.js";
+import { Icon as v } from "../../../../components/Icon/Icon.js";
+import { Dropdown as r } from "../../../../components/Dropdown/Dropdown.js";
+const j = ({
+  triggerProps: n
 }) => {
   const {
-    t
-  } = useTranslation(), {
-    editor
-  } = useEditorContext(), [value, setValue] = useState("sans-serif");
-  useEffect(() => {
-    const textStyle = editor == null ? void 0 : editor.getAttributes("textStyle");
-    setValue((textStyle == null ? void 0 : textStyle.fontFamily) ?? "");
-  }, [editor, editor == null ? void 0 : editor.state]);
-  const options = [{
+    t: e
+  } = b(), {
+    editor: t
+  } = h(), [c, s] = f("sans-serif");
+  u(() => {
+    const a = t == null ? void 0 : t.getAttributes("textStyle");
+    s((a == null ? void 0 : a.fontFamily) ?? "");
+  }, [t, t == null ? void 0 : t.state]);
+  const i = [{
     value: "",
-    label: t("tiptap.toolbar.typo.sans")
+    label: e("tiptap.toolbar.typo.sans")
   }, {
     value: "Lora",
-    label: t("tiptap.toolbar.typo.serif"),
+    label: e("tiptap.toolbar.typo.serif"),
     className: "ff-serif"
   }, {
     value: "IBM Plex Mono",
-    label: t("tiptap.toolbar.typo.mono"),
+    label: e("tiptap.toolbar.typo.mono"),
     className: "ff-script"
   }, {
     value: "Ecriture A",
-    label: t("tiptap.toolbar.typo.cursive"),
+    label: e("tiptap.toolbar.typo.cursive"),
     className: "ff-cursive"
   }, {
     value: "OpenDyslexic",
-    label: t("tiptap.toolbar.typo.dyslexic"),
+    label: e("tiptap.toolbar.typo.dyslexic"),
     className: "ff-dyslexic"
   }];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.typo.choice"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "text-typo" }), "aria-label": t("tiptap.toolbar.typo.choice"), className: editor != null && editor.isActive("textStyle", {
+  return /* @__PURE__ */ p(m, { children: [
+    /* @__PURE__ */ o(g, { message: e("tiptap.toolbar.typo.choice"), placement: "top", children: /* @__PURE__ */ o(x, { ...n, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ o(v, { name: "text-typo" }), "aria-label": e("tiptap.toolbar.typo.choice"), className: t != null && t.isActive("textStyle", {
       color: /^#([0-9a-f]{3}){1,2}$/i
     }) ? "selected" : "" }) }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Dropdown.RadioItem, { value: option.value, model: value, onChange: (value2) => {
-      typeof value2 == "string" && value2.length > 0 ? (editor == null || editor.chain().focus().setFontFamily(value2).run(), setValue(value2)) : (editor == null || editor.chain().focus().unsetFontFamily().run(), setValue(""));
-    }, children: /* @__PURE__ */ jsx("span", { className: option.className, children: option.label }) }) }, option.label)) })
+    /* @__PURE__ */ o(r.Menu, { children: i.map((a) => /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(r.RadioItem, { value: a.value, model: c, onChange: (l) => {
+      typeof l == "string" && l.length > 0 ? (t == null || t.chain().focus().setFontFamily(l).run(), s(l)) : (t == null || t.chain().focus().unsetFontFamily().run(), s(""));
+    }, children: /* @__PURE__ */ o("span", { className: a.className, children: a.label }) }) }, a.label)) })
   ] });
 };
 export {
-  EditorToolbarTypography
+  j as EditorToolbarTypography
 };
+//# sourceMappingURL=EditorToolbar.Typography.js.map

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.Typography.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.Typography.tsx"],"sourcesContent":["import { Fragment, RefAttributes, useEffect, useState } from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  Dropdown,\n  Icon,\n  IconButton,\n  IconButtonProps,\n  Tooltip,\n} from '../../../..';\nimport { useEditorContext } from '../../hooks/useEditorContext';\n\ninterface Props {\n  /**\n   * Props for the trigger\n   */\n  triggerProps: JSX.IntrinsicAttributes &\n    Omit<IconButtonProps, 'ref'> &\n    RefAttributes<HTMLButtonElement>;\n}\n\nexport const EditorToolbarTypography = ({ triggerProps }: Props) => {\n  const { t } = useTranslation();\n  const { editor } = useEditorContext();\n\n  const [value, setValue] = useState<string>('sans-serif');\n\n  useEffect(() => {\n    // When cursor moves in editor, update the actual text typo.\n    const textStyle = editor?.getAttributes('textStyle');\n    setValue(textStyle?.fontFamily ?? '');\n  }, [editor, editor?.state]);\n\n  const options = [\n    {\n      value: '',\n      label: t('tiptap.toolbar.typo.sans'),\n    },\n    {\n      value: 'Lora',\n      label: t('tiptap.toolbar.typo.serif'),\n      className: 'ff-serif',\n    },\n    {\n      value: 'IBM Plex Mono',\n      label: t('tiptap.toolbar.typo.mono'),\n      className: 'ff-script',\n    },\n    {\n      value: 'Ecriture A',\n      label: t('tiptap.toolbar.typo.cursive'),\n      className: 'ff-cursive',\n    },\n    {\n      value: 'OpenDyslexic',\n      label: t('tiptap.toolbar.typo.dyslexic'),\n      className: 'ff-dyslexic',\n    },\n  ];\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.toolbar.typo.choice')} placement=\"top\">\n        <IconButton\n          {...triggerProps}\n          type=\"button\"\n          variant=\"ghost\"\n          color=\"tertiary\"\n          icon={<Icon name=\"text-typo\" />}\n          aria-label={t('tiptap.toolbar.typo.choice')}\n          className={\n            editor?.isActive('textStyle', {\n              color: /^#([0-9a-f]{3}){1,2}$/i,\n            })\n              ? 'selected'\n              : ''\n          }\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        {options.map((option) => {\n          return (\n            <Fragment key={option.label}>\n              <Dropdown.RadioItem\n                value={option.value}\n                model={value}\n                onChange={(value: string) => {\n                  if (typeof value === 'string' && value.length > 0) {\n                    editor?.chain().focus().setFontFamily(value).run();\n                    setValue(value);\n                  } else {\n                    editor?.chain().focus().unsetFontFamily().run();\n                    setValue('');\n                  }\n                }}\n              >\n                <span className={option.className}>{option.label}</span>\n              </Dropdown.RadioItem>\n            </Fragment>\n          );\n        })}\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarTypography","triggerProps","t","useTranslation","editor","useEditorContext","value","setValue","useState","useEffect","textStyle","getAttributes","fontFamily","state","options","label","className","jsxs","Fragment","jsx","Tooltip","IconButton","Icon","isActive","color","Dropdown","map","option","length","chain","focus","setFontFamily","run","unsetFontFamily"],"mappings":";;;;;;;;AAsBO,MAAMA,IAA0BA,CAAC;AAAA,EAAEC,cAAAA;AAAoB,MAAM;AAC5D,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAiB,GAE9B,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,YAAY;AAEvDC,EAAAA,EAAU,MAAM;AAERC,UAAAA,IAAYN,KAAAA,gBAAAA,EAAQO,cAAc;AAC/BD,IAAAA,GAAAA,KAAAA,gBAAAA,EAAWE,eAAc,EAAE;AAAA,EACnC,GAAA,CAACR,GAAQA,KAAAA,gBAAAA,EAAQS,KAAK,CAAC;AAE1B,QAAMC,IAAU,CACd;AAAA,IACER,OAAO;AAAA,IACPS,OAAOb,EAAE,0BAA0B;AAAA,EAAA,GAErC;AAAA,IACEI,OAAO;AAAA,IACPS,OAAOb,EAAE,2BAA2B;AAAA,IACpCc,WAAW;AAAA,EAAA,GAEb;AAAA,IACEV,OAAO;AAAA,IACPS,OAAOb,EAAE,0BAA0B;AAAA,IACnCc,WAAW;AAAA,EAAA,GAEb;AAAA,IACEV,OAAO;AAAA,IACPS,OAAOb,EAAE,6BAA6B;AAAA,IACtCc,WAAW;AAAA,EAAA,GAEb;AAAA,IACEV,OAAO;AAAA,IACPS,OAAOb,EAAE,8BAA8B;AAAA,IACvCc,WAAW;AAAA,EAAA,CACZ;AAGH,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAQ,EAAA,SAASlB,EAAE,4BAA4B,GAAG,WAAU,OAC3D,UAAA,gBAAAiB,EAACE,GACC,EAAA,GAAIpB,GACJ,MAAK,UACL,SAAQ,SACR,OAAM,YACN,MAAM,gBAAAkB,EAACG,GAAK,EAAA,MAAK,YAAc,CAAA,GAC/B,cAAYpB,EAAE,4BAA4B,GAC1C,WACEE,KAAAA,QAAAA,EAAQmB,SAAS,aAAa;AAAA,MAC5BC,OAAO;AAAA,IACR,KACG,aACA,GACL,CAAA,GAEL;AAAA,sBACCC,EAAS,MAAT,EACEX,UAAAA,EAAQY,IAAKC,CAAWA,MAEpBT,gBAAAA,EAAAA,GAAA,EACC,UAAA,gBAAAC,EAACM,EAAS,WAAT,EACC,OAAOE,EAAOrB,OACd,OAAOA,GACP,UAAU,CAACA,MAAkB;AAC3B,MAAI,OAAOA,KAAU,YAAYA,EAAMsB,SAAS,KAC9CxB,KAAAA,QAAAA,EAAQyB,QAAQC,QAAQC,cAAczB,GAAO0B,OAC7CzB,EAASD,CAAK,MAEdF,KAAAA,QAAAA,EAAQyB,QAAQC,QAAQG,kBAAkBD,OAC1CzB,EAAS,EAAE;AAAA,IACb,GAGF,UAAC,gBAAAY,EAAA,QAAA,EAAK,WAAWQ,EAAOX,WAAYW,UAAAA,EAAOZ,MAAM,CAAA,EAAA,CACnD,EAfaY,GAAAA,EAAOZ,KAgBtB,CAEH,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.js

@@ -1,47 +1,47 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { useTranslation as C } from "react-i18next";
 import "@tiptap/react";
-import { hasExtension } from "../../utils/has-extension.js";
-import { hasMark } from "../../utils/has-mark.js";
-import { hasTextStyle } from "../../utils/has-text-style.js";
-import { EditorToolbarDropdownMenu } from "./EditorToolbar.DropdownMenu.js";
-import { EditorToolbarEmoji } from "./EditorToolbar.Emoji.js";
-import { EditorToolbarHighlightColor } from "./EditorToolbar.HighlightColor.js";
-import { EditorToolbarPlusMenu } from "./EditorToolbar.PlusMenu.js";
-import { EditorToolbarTextColor } from "./EditorToolbar.TextColor.js";
-import { EditorToolbarTextSize } from "./EditorToolbar.TextSize.js";
-import { EditorToolbarTypography } from "./EditorToolbar.Typography.js";
-import { useEditorContext } from "../../hooks/useEditorContext.js";
-import { useActionOptions } from "../../hooks/useActionOptions.js";
-import { useSpeechRecognition } from "../../hooks/useSpeechRecognition.js";
-import { Icon } from "../../../../components/Icon/Icon.js";
-import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
-const EditorToolbar = ({
-  mediaLibraryRef,
-  toggleMathsModal
+import { hasExtension as r } from "../../utils/has-extension.js";
+import { hasMark as s } from "../../utils/has-mark.js";
+import { hasTextStyle as T } from "../../utils/has-text-style.js";
+import { EditorToolbarDropdownMenu as v } from "./EditorToolbar.DropdownMenu.js";
+import { EditorToolbarEmoji as N } from "./EditorToolbar.Emoji.js";
+import { EditorToolbarHighlightColor as E } from "./EditorToolbar.HighlightColor.js";
+import { EditorToolbarPlusMenu as A } from "./EditorToolbar.PlusMenu.js";
+import { EditorToolbarTextColor as S } from "./EditorToolbar.TextColor.js";
+import { EditorToolbarTextSize as z } from "./EditorToolbar.TextSize.js";
+import { EditorToolbarTypography as M } from "./EditorToolbar.Typography.js";
+import { useEditorContext as j } from "../../hooks/useEditorContext.js";
+import { useActionOptions as I } from "../../hooks/useActionOptions.js";
+import { useSpeechRecognition as O } from "../../hooks/useSpeechRecognition.js";
+import { Icon as n } from "../../../../components/Icon/Icon.js";
+import { Toolbar as _ } from "../../../../components/Toolbar/Toolbar.js";
+const oo = ({
+  mediaLibraryRef: a,
+  toggleMathsModal: g
 }) => {
   const {
     t
-  } = useTranslation(), {
-    id,
-    editor
-  } = useEditorContext(), [plusOptions, listOptions, alignmentOptions] = useActionOptions(editor, toggleMathsModal, mediaLibraryRef), {
-    isAvailable: canRecognizeSpeech,
-    isActive: speechRecognition,
-    toggle: toggleSpeechRecognition
-  } = useSpeechRecognition(editor), toolbarItems = useMemo(() => {
-    const showIf = (truthy) => truthy ? "show" : "hide", showLinkModal = () => {
-      var _a, _b;
+  } = C(), {
+    id: k,
+    editor: o
+  } = j(), [m, d, b] = I(o, g, a), {
+    isAvailable: c,
+    isActive: h,
+    toggle: u
+  } = O(o), f = x(() => {
+    const l = (i) => i ? "show" : "hide", w = () => {
+      var p, y;
       const {
-        state
-      } = editor;
-      state.selection.empty ? (_a = mediaLibraryRef.current) == null || _a.show("hyperlink") : (_b = mediaLibraryRef.current) == null || _b.showLink({
+        state: i
+      } = o;
+      i.selection.empty ? (p = a.current) == null || p.show("hyperlink") : (y = a.current) == null || y.showLink({
         link: {
-          text: state.selection.content().content.child(0).textContent,
+          text: i.selection.content().content.child(0).textContent,
           target: "_blank"
         },
-        multiNodeSelected: state.selection.content().content.childCount > 1
+        multiNodeSelected: i.selection.content().content.childCount > 1
       });
     };
     return [
@@ -49,27 +49,27 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "undo" }),
+          icon: /* @__PURE__ */ e(n, { name: "undo" }),
           "aria-label": t("editor.option.undo"),
-          onClick: () => editor == null ? void 0 : editor.chain().focus().undo().run(),
-          disabled: !(editor != null && editor.can().undo())
+          onClick: () => o == null ? void 0 : o.chain().focus().undo().run(),
+          disabled: !(o != null && o.can().undo())
         },
         name: "undo",
         tooltip: t("editor.option.undo"),
-        visibility: showIf(hasExtension("history", editor))
+        visibility: l(r("history", o))
       },
       //--------------- REDO ---------------//
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "redo" }),
+          icon: /* @__PURE__ */ e(n, { name: "redo" }),
           "aria-label": t("editor.option.redo"),
-          onClick: () => editor == null ? void 0 : editor.chain().focus().redo().run(),
-          disabled: !(editor != null && editor.can().redo())
+          onClick: () => o == null ? void 0 : o.chain().focus().redo().run(),
+          disabled: !(o != null && o.can().redo())
         },
         name: "redo",
         tooltip: t("editor.option.redo"),
-        visibility: showIf(hasExtension("history", editor))
+        visibility: l(r("history", o))
       },
       //-------------------------------------//
       {
@@ -80,12 +80,12 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "landscape" }),
+          icon: /* @__PURE__ */ e(n, { name: "landscape" }),
           className: "bg-green-200",
           "aria-label": t("tiptap.toolbar.picture"),
           onClick: () => {
-            var _a;
-            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("image");
+            var i;
+            return (i = a.current) == null ? void 0 : i.show("image");
           }
         },
         name: "image",
@@ -95,12 +95,12 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "record-video" }),
+          icon: /* @__PURE__ */ e(n, { name: "record-video" }),
           className: "bg-purple-200",
           "aria-label": t("tiptap.toolbar.video"),
           onClick: () => {
-            var _a;
-            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("video");
+            var i;
+            return (i = a.current) == null ? void 0 : i.show("video");
           }
         },
         name: "video",
@@ -110,12 +110,12 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "mic" }),
+          icon: /* @__PURE__ */ e(n, { name: "mic" }),
           className: "bg-red-200",
           "aria-label": t("tiptap.toolbar.audio"),
           onClick: () => {
-            var _a;
-            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("audio");
+            var i;
+            return (i = a.current) == null ? void 0 : i.show("audio");
           }
         },
         name: "audio",
@@ -125,12 +125,12 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "paperclip" }),
+          icon: /* @__PURE__ */ e(n, { name: "paperclip" }),
           className: "bg-yellow-200",
           "aria-label": t("tiptap.toolbar.attachment"),
           onClick: () => {
-            var _a;
-            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("attachment");
+            var i;
+            return (i = a.current) == null ? void 0 : i.show("attachment");
           }
         },
         name: "attachment",
@@ -144,12 +144,12 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "speech-to-text" }),
+          icon: /* @__PURE__ */ e(n, { name: "speech-to-text" }),
           "aria-label": t("tiptap.toolbar.stt"),
-          className: speechRecognition ? "is-selected" : "",
-          onClick: () => toggleSpeechRecognition()
+          className: h ? "is-selected" : "",
+          onClick: () => u()
         },
-        visibility: canRecognizeSpeech ? "show" : "hide",
+        visibility: c ? "show" : "hide",
         name: "speechtotext",
         tooltip: t("tiptap.toolbar.stt")
       },
@@ -157,47 +157,47 @@ const EditorToolbar = ({
       {
         type: "divider",
         name: "div-speech",
-        visibility: canRecognizeSpeech ? "show" : "hide"
+        visibility: c ? "show" : "hide"
       },
       //--------------- TYPOGRAPHY ---------------//
       {
         type: "dropdown",
         props: {
-          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarTypography, { triggerProps })
+          children: (i) => /* @__PURE__ */ e(M, { triggerProps: i })
         },
         name: "text_typo",
-        visibility: showIf(hasExtension("fontFamily", editor)),
+        visibility: l(r("fontFamily", o)),
         tooltip: t("tiptap.toolbar.typo.choice")
       },
       //--------------- TEXT SIZE ---------------//
       {
         type: "dropdown",
         props: {
-          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarTextSize, { triggerProps })
+          children: (i) => /* @__PURE__ */ e(z, { triggerProps: i })
         },
         name: "text_size",
-        visibility: showIf(hasExtension("fontSize", editor) || hasExtension("heading", editor)),
+        visibility: l(r("fontSize", o) || r("heading", o)),
         tooltip: t("tiptap.toolbar.size.choice")
       },
       //--------------- TEXT COLOR ---------------//
       {
         type: "dropdown",
         props: {
-          children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(EditorToolbarTextColor, { triggerProps, itemRefs })
+          children: (i, p) => /* @__PURE__ */ e(S, { triggerProps: i, itemRefs: p })
         },
         overflow: !1,
         name: "color",
-        visibility: hasTextStyle("color", editor) ? "show" : "hide",
+        visibility: T("color", o) ? "show" : "hide",
         tooltip: t("tiptap.toolbar.color.text")
       },
       //--------------- TEXT HIGHLIGHTING COLOR ---------------//
       {
         type: "dropdown",
         props: {
-          children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(EditorToolbarHighlightColor, { triggerProps, itemRefs })
+          children: (i, p) => /* @__PURE__ */ e(E, { triggerProps: i, itemRefs: p })
         },
         name: "highlight",
-        visibility: showIf(hasMark("customHighlight", editor)),
+        visibility: l(s("customHighlight", o)),
         tooltip: t("tiptap.toolbar.highlight.back")
       },
       //-------------------------------------//
@@ -209,40 +209,40 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "text-bold" }),
+          icon: /* @__PURE__ */ e(n, { name: "text-bold" }),
           "aria-label": t("tiptap.toolbar.bold"),
-          className: editor != null && editor.isActive("bold") ? "is-selected" : "",
-          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
-          disabled: editor == null ? void 0 : editor.isActive("heading")
+          className: o != null && o.isActive("bold") ? "is-selected" : "",
+          onClick: () => o == null ? void 0 : o.chain().focus().toggleBold().run(),
+          disabled: o == null ? void 0 : o.isActive("heading")
         },
         name: "bold",
-        visibility: showIf(hasMark("bold", editor)),
+        visibility: l(s("bold", o)),
         tooltip: t("tiptap.toolbar.bold")
       },
       //--------------- ITALIC ---------------//
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "text-italic" }),
+          icon: /* @__PURE__ */ e(n, { name: "text-italic" }),
           "aria-label": t("tiptap.toolbar.italic"),
-          className: editor != null && editor.isActive("italic") ? "is-selected" : "",
-          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run()
+          className: o != null && o.isActive("italic") ? "is-selected" : "",
+          onClick: () => o == null ? void 0 : o.chain().focus().toggleItalic().run()
         },
         name: "italic",
-        visibility: showIf(hasMark("italic", editor)),
+        visibility: l(s("italic", o)),
         tooltip: t("tiptap.toolbar.italic")
       },
       //--------------- UNDERLINE ---------------//
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "text-underline" }),
+          icon: /* @__PURE__ */ e(n, { name: "text-underline" }),
           "aria-label": t("tiptap.toolbar.underline"),
-          className: editor != null && editor.isActive("underline") ? "is-selected" : "",
-          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run()
+          className: o != null && o.isActive("underline") ? "is-selected" : "",
+          onClick: () => o == null ? void 0 : o.chain().focus().toggleUnderline().run()
         },
         name: "underline",
-        visibility: showIf(hasMark("underline", editor)),
+        visibility: l(s("underline", o)),
         tooltip: t("tiptap.toolbar.underline")
       },
       //-------------------------------------//
@@ -254,7 +254,7 @@ const EditorToolbar = ({
       {
         type: "dropdown",
         props: {
-          children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(EditorToolbarEmoji, { triggerProps, itemRefs })
+          children: (i, p) => /* @__PURE__ */ e(N, { triggerProps: i, itemRefs: p })
         },
         name: "emoji",
         tooltip: t("tiptap.toolbar.emojisPicker")
@@ -263,10 +263,10 @@ const EditorToolbar = ({
       {
         type: "icon",
         props: {
-          icon: /* @__PURE__ */ jsx(Icon, { name: "link" }),
+          icon: /* @__PURE__ */ e(n, { name: "link" }),
           "aria-label": t("tiptap.toolbar.linker"),
-          className: editor != null && editor.isActive("linker") ? "is-selected" : "",
-          onClick: () => showLinkModal()
+          className: o != null && o.isActive("linker") ? "is-selected" : "",
+          onClick: () => w()
         },
         name: "linker",
         tooltip: t("tiptap.toolbar.linker")
@@ -280,20 +280,20 @@ const EditorToolbar = ({
       {
         type: "dropdown",
         props: {
-          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarDropdownMenu, { triggerProps, icon: /* @__PURE__ */ jsx(Icon, { name: "bullet-list" }), ariaLabel: t("tiptap.toolbar.listoptions"), options: listOptions })
+          children: (i) => /* @__PURE__ */ e(v, { triggerProps: i, icon: /* @__PURE__ */ e(n, { name: "bullet-list" }), ariaLabel: t("tiptap.toolbar.listoptions"), options: d })
         },
         name: "list",
-        visibility: showIf(hasExtension("starterKit", editor)),
+        visibility: l(r("starterKit", o)),
         tooltip: t("tiptap.toolbar.listoptions")
       },
       //--------------- TEXT ALIGNMENT ---------------//
       {
         type: "dropdown",
         props: {
-          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarDropdownMenu, { triggerProps, icon: /* @__PURE__ */ jsx(Icon, { name: "align-left" }), ariaLabel: t("tiptap.toolbar.align"), options: alignmentOptions })
+          children: (i) => /* @__PURE__ */ e(v, { triggerProps: i, icon: /* @__PURE__ */ e(n, { name: "align-left" }), ariaLabel: t("tiptap.toolbar.align"), options: b })
         },
         name: "alignment",
-        visibility: showIf(hasExtension("textAlign", editor)),
+        visibility: l(r("textAlign", o)),
         tooltip: t("tiptap.toolbar.align")
       },
       //-------------------------------------//
@@ -305,15 +305,16 @@ const EditorToolbar = ({
       {
         type: "dropdown",
         props: {
-          children: () => /* @__PURE__ */ jsx(EditorToolbarPlusMenu, { options: plusOptions })
+          children: () => /* @__PURE__ */ e(A, { options: m })
         },
         name: "plus",
-        visibility: showIf(hasExtension("textAlign", editor))
+        visibility: l(r("textAlign", o))
       }
     ];
-  }, [alignmentOptions, canRecognizeSpeech, editor, listOptions, mediaLibraryRef, plusOptions, speechRecognition, t, toggleSpeechRecognition]);
-  return /* @__PURE__ */ jsx("div", { className: "sticky-top z-1 editor-toolbar rounded-3", children: /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems, variant: "no-shadow", className: "rounded-top-3", isBlock: !0, align: "left", ariaControls: id }) });
+  }, [b, c, o, d, a, m, h, t, u]);
+  return /* @__PURE__ */ e("div", { className: "sticky-top z-1 editor-toolbar rounded-3", children: /* @__PURE__ */ e(_, { items: f, variant: "no-shadow", className: "rounded-top-3", isBlock: !0, align: "left", ariaControls: k }) });
 };
 export {
-  EditorToolbar
+  oo as EditorToolbar
 };
+//# sourceMappingURL=EditorToolbar.js.map