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

package/dist/modules/editor/components/Editor/MathsModal.js

@@ -1,50 +1,51 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import Mathematics from "@tiptap-pro/extension-mathematics";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { createPortal } from "react-dom";
-import { useTranslation } from "react-i18next";
-import { Modal } from "../../../../components/Modal/Modal.js";
-import { Button } from "../../../../components/Button/Button.js";
-const MathsModal = ({
-  isOpen,
-  onSuccess,
-  onCancel
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as b, useEffect as $ } from "react";
+import x from "@tiptap-pro/extension-mathematics";
+import { useEditor as E, EditorContent as C } from "@tiptap/react";
+import M from "@tiptap/starter-kit";
+import { createPortal as g } from "react-dom";
+import { useTranslation as w } from "react-i18next";
+import { Modal as a } from "../../../../components/Modal/Modal.js";
+import { Button as c } from "../../../../components/Button/Button.js";
+const j = ({
+  isOpen: h,
+  onSuccess: l,
+  onCancel: o
 }) => {
-  const FORMULA_PLACEHOLDER = "\\frac{-b + \\sqrt{b^2 - 4ac}}{2a}", [formulaEditor, setFormulaEditor] = useState(`$${FORMULA_PLACEHOLDER}$`), {
-    t
-  } = useTranslation(), editor = useEditor({
-    extensions: [StarterKit, Mathematics],
+  const i = "\\frac{-b + \\sqrt{b^2 - 4ac}}{2a}", [m, d] = b(`$${i}$`), {
+    t: e
+  } = w(), t = E({
+    extensions: [M, x],
     content: "",
     editable: !1
   });
-  useEffect(() => {
-    editor == null || editor.commands.setContent(formulaEditor), editor == null || editor.commands.enter();
-  }, [editor, formulaEditor]);
-  const handleChange = (event) => {
-    const newFormulaEditor = event.target.value.replaceAll(`
+  $(() => {
+    t == null || t.commands.setContent(m), t == null || t.commands.enter();
+  }, [t, m]);
+  const f = (u) => {
+    const s = u.target.value.replaceAll(`
 `, "$<br/>$");
-    newFormulaEditor ? (editor == null || editor.commands.setContent(`$${newFormulaEditor}$`), setFormulaEditor(`$${newFormulaEditor}$`)) : (editor == null || editor.commands.setContent(""), setFormulaEditor("")), editor == null || editor.commands.enter();
-  }, handleOnCancel = () => {
-    onCancel == null || onCancel();
+    s ? (t == null || t.commands.setContent(`$${s}$`), d(`$${s}$`)) : (t == null || t.commands.setContent(""), d("")), t == null || t.commands.enter();
+  }, p = () => {
+    o == null || o();
   };
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "MathsModal", isOpen, onModalClose: handleOnCancel, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleOnCancel, children: t("tiptap.maths.title") }),
-    /* @__PURE__ */ jsxs(Modal.Subtitle, { children: [
-      t("tiptap.maths.subtitle.1"),
-      /* @__PURE__ */ jsx("a", { href: t("https://fr.wikibooks.org/wiki/LaTeX/%C3%89crire_des_math%C3%A9matiques"), target: "_blank", children: t("tiptap.maths.subtitle.2") })
+  return /* @__PURE__ */ g(/* @__PURE__ */ n(a, { id: "MathsModal", isOpen: h, onModalClose: p, children: [
+    /* @__PURE__ */ r(a.Header, { onModalClose: p, children: e("tiptap.maths.title") }),
+    /* @__PURE__ */ n(a.Subtitle, { children: [
+      e("tiptap.maths.subtitle.1"),
+      /* @__PURE__ */ r("a", { href: e("https://fr.wikibooks.org/wiki/LaTeX/%C3%89crire_des_math%C3%A9matiques"), target: "_blank", rel: "noreferrer", children: e("tiptap.maths.subtitle.2") })
     ] }),
-    /* @__PURE__ */ jsxs(Modal.Body, { children: [
-      /* @__PURE__ */ jsx("textarea", { id: "formulaTextArea", name: "formula", rows: 4, cols: 50, onChange: handleChange, placeholder: `Exemple : ${FORMULA_PLACEHOLDER}`, className: "border rounded-3 w-100 px-16 py-12" }),
-      /* @__PURE__ */ jsx(EditorContent, { editor, className: "pt-24 pb-0 text-center fs-1" })
+    /* @__PURE__ */ n(a.Body, { children: [
+      /* @__PURE__ */ r("textarea", { id: "formulaTextArea", name: "formula", rows: 4, cols: 50, onChange: f, placeholder: `Exemple : ${i}`, className: "border rounded-3 w-100 px-16 py-12" }),
+      /* @__PURE__ */ r(C, { editor: t, className: "pt-24 pb-0 text-center fs-1" })
     ] }),
-    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("tiptap.maths.cancel") }),
-      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: () => onSuccess == null ? void 0 : onSuccess(formulaEditor), type: "button", variant: "filled", children: t("tiptap.maths.add") })
+    /* @__PURE__ */ n(a.Footer, { children: [
+      /* @__PURE__ */ r(c, { color: "tertiary", onClick: o, type: "button", variant: "ghost", children: e("tiptap.maths.cancel") }),
+      /* @__PURE__ */ r(c, { color: "primary", onClick: () => l == null ? void 0 : l(m), type: "button", variant: "filled", children: e("tiptap.maths.add") })
     ] })
   ] }), document.getElementById("portal"));
 };
 export {
-  MathsModal as default
+  j as default
 };
+//# sourceMappingURL=MathsModal.js.map

package/dist/modules/editor/components/Editor/MathsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathsModal.js","sources":["../../../../../src/modules/editor/components/Editor/MathsModal.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport Mathematics from '@tiptap-pro/extension-mathematics';\nimport { Editor, EditorContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\nimport { Button, Modal } from '../../../..';\n\ninterface ModalProps {\n  isOpen: boolean;\n  onSuccess?: (formulaEditor: string) => void;\n  onCancel?: () => void;\n}\n\nconst MathsModal = ({ isOpen, onSuccess, onCancel }: ModalProps) => {\n  const FORMULA_PLACEHOLDER = '\\\\frac{-b + \\\\sqrt{b^2 - 4ac}}{2a}';\n  const [formulaEditor, setFormulaEditor] = useState<string>(\n    `$${FORMULA_PLACEHOLDER}$`,\n  );\n\n  const { t } = useTranslation();\n\n  const editor: Editor | null = useEditor({\n    extensions: [StarterKit, Mathematics],\n    content: ``,\n    editable: false,\n  });\n\n  useEffect(() => {\n    editor?.commands.setContent(formulaEditor);\n    editor?.commands.enter();\n    return;\n  }, [editor, formulaEditor]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const newFormulaTextarea: string = event.target.value;\n    const newFormulaEditor = newFormulaTextarea.replaceAll('\\n', '$<br/>$');\n    // replace editor content\n    if (newFormulaEditor) {\n      editor?.commands.setContent(`$${newFormulaEditor}$`);\n      setFormulaEditor(`$${newFormulaEditor}$`);\n    } else {\n      editor?.commands.setContent('');\n      setFormulaEditor('');\n    }\n    editor?.commands.enter();\n  };\n\n  const handleOnCancel = () => {\n    onCancel?.();\n  };\n\n  return createPortal(\n    <Modal id=\"MathsModal\" isOpen={isOpen} onModalClose={handleOnCancel}>\n      <Modal.Header onModalClose={handleOnCancel}>\n        {t('tiptap.maths.title')}\n      </Modal.Header>\n      <Modal.Subtitle>\n        {t('tiptap.maths.subtitle.1')}\n        <a\n          href={t(\n            'https://fr.wikibooks.org/wiki/LaTeX/%C3%89crire_des_math%C3%A9matiques',\n          )}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n        >\n          {t('tiptap.maths.subtitle.2')}\n        </a>\n      </Modal.Subtitle>\n      <Modal.Body>\n        <textarea\n          id=\"formulaTextArea\"\n          name=\"formula\"\n          rows={4}\n          cols={50}\n          onChange={handleChange}\n          placeholder={`Exemple : ${FORMULA_PLACEHOLDER}`}\n          className=\"border rounded-3 w-100 px-16 py-12\"\n        ></textarea>\n        <EditorContent\n          editor={editor}\n          className=\"pt-24 pb-0 text-center fs-1\"\n        />\n      </Modal.Body>\n      <Modal.Footer>\n        <Button\n          color=\"tertiary\"\n          onClick={onCancel}\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          {t('tiptap.maths.cancel')}\n        </Button>\n        <Button\n          color=\"primary\"\n          onClick={() => onSuccess?.(formulaEditor)}\n          type=\"button\"\n          variant=\"filled\"\n        >\n          {t('tiptap.maths.add')}\n        </Button>\n      </Modal.Footer>\n    </Modal>,\n    document.getElementById('portal') as HTMLElement,\n  );\n};\n\nexport default MathsModal;\n"],"names":["MathsModal","isOpen","onSuccess","onCancel","FORMULA_PLACEHOLDER","formulaEditor","setFormulaEditor","useState","t","useTranslation","editor","useEditor","extensions","StarterKit","Mathematics","content","editable","useEffect","commands","setContent","enter","handleChange","event","newFormulaEditor","target","value","replaceAll","handleOnCancel","jsxs","Modal","jsx","EditorContent","Button","document","getElementById"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAaA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,WAAAA;AAAAA,EAAWC,UAAAA;AAAqB,MAAM;AAClE,QAAMC,IAAsB,sCACtB,CAACC,GAAeC,CAAgB,IAAIC,EACxC,IAAIH,CAAmB,GACzB,GAEM;AAAA,IAAEI,GAAAA;AAAAA,MAAMC,EAAe,GAEvBC,IAAwBC,EAAU;AAAA,IACtCC,YAAY,CAACC,GAAYC,CAAW;AAAA,IACpCC,SAAS;AAAA,IACTC,UAAU;AAAA,EAAA,CACX;AAEDC,EAAAA,EAAU,MAAM;AACNC,IAAAA,KAAAA,QAAAA,EAAAA,SAASC,WAAWd,IAC5BK,KAAAA,QAAAA,EAAQQ,SAASE;AAAAA,EACjB,GACC,CAACV,GAAQL,CAAa,CAAC;AAEpBgB,QAAAA,IAAeA,CAACC,MAAkD;AAEtE,UAAMC,IAD6BD,EAAME,OAAOC,MACJC,WAAW;AAAA,GAAM,SAAS;AAEtE,IAAIH,KACFb,KAAAA,QAAAA,EAAQQ,SAASC,WAAW,IAAII,CAAgB,MAC/BjB,EAAA,IAAIiB,CAAgB,GAAG,MAEhCL,KAAAA,QAAAA,EAAAA,SAASC,WAAW,KAC5Bb,EAAiB,EAAE,IAErBI,KAAAA,QAAAA,EAAQQ,SAASE;AAAAA,EAAM,GAGnBO,IAAiBA,MAAM;AAChB,IAAAxB,KAAA,QAAAA;AAAA,EAAA;AAGb,2BACG,gBAAAyB,EAAAC,GAAA,EAAM,IAAG,cAAa,QAAA5B,GAAgB,cAAc0B,GACnD,UAAA;AAAA,IAAA,gBAAAG,EAACD,EAAM,QAAN,EAAa,cAAcF,GACzBnB,UAAAA,EAAE,oBAAoB,GACzB;AAAA,IACA,gBAAAoB,EAACC,EAAM,UAAN,EACErB,UAAAA;AAAAA,MAAAA,EAAE,yBAAyB;AAAA,MAC3B,gBAAAsB,EAAA,KAAA,EACC,MAAMtB,EACJ,wEACF,GACA,QAAO,UACP,KAAI,cAEHA,UAAEA,EAAA,yBAAyB,EAC9B,CAAA;AAAA,IAAA,GACF;AAAA,IACA,gBAAAoB,EAACC,EAAM,MAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAAC,cACC,IAAG,mBACH,MAAK,WACL,MAAM,GACN,MAAM,IACN,UAAUT,GACV,aAAa,aAAajB,CAAmB,IAC7C,WAAU,sCACX;AAAA,MACA,gBAAA0B,EAAAC,GAAA,EACC,QAAArB,GACA,WAAU,8BAA6B,CAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAkB,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAC,gBAAAC,EAAAE,GAAA,EACC,OAAM,YACN,SAAS7B,GACT,MAAK,UACL,SAAQ,SAEPK,UAAEA,EAAA,qBAAqB,EAC1B,CAAA;AAAA,MACC,gBAAAsB,EAAAE,GAAA,EACC,OAAM,WACN,SAAS,MAAM9B,KAAAA,gBAAAA,EAAYG,IAC3B,MAAK,UACL,SAAQ,UAEPG,UAAAA,EAAE,kBAAkB,GACvB;AAAA,IAAA,GACF;AAAA,EAAA,EAAA,CACF,GACAyB,SAASC,eAAe,QAAQ,CAClC;AACF;"}

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

@@ -1,17 +1,18 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
-import { Tooltip } from "../../../../components/Tooltip/Tooltip.js";
-import { IconButton } from "../../../../components/Button/IconButton.js";
-import { Dropdown } from "../../../../components/Dropdown/Dropdown.js";
-const EditorToolbarDropdownMenu = ({
-  triggerProps,
-  icon,
-  ariaLabel,
-  options
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Tooltip, { message: ariaLabel, placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon, "aria-label": ariaLabel }) }),
-  /* @__PURE__ */ jsx(Dropdown.Menu, { children: options.map((option, index) => /* @__PURE__ */ jsx(Fragment$1, { children: option.type === "divider" ? /* @__PURE__ */ jsx(Dropdown.Separator, {}) : /* @__PURE__ */ jsx(Dropdown.Item, { icon: option.icon, onClick: () => option.action(null), children: option.label }) }, index)) })
+import { jsxs as l, Fragment as c, jsx as r } from "react/jsx-runtime";
+import { Fragment as p } from "react";
+import { Tooltip as d } from "../../../../components/Tooltip/Tooltip.js";
+import { IconButton as s } from "../../../../components/Button/IconButton.js";
+import { Dropdown as t } from "../../../../components/Dropdown/Dropdown.js";
+const x = ({
+  triggerProps: n,
+  icon: i,
+  ariaLabel: e,
+  options: m
+}) => /* @__PURE__ */ l(c, { children: [
+  /* @__PURE__ */ r(d, { message: e, placement: "top", children: /* @__PURE__ */ r(s, { ...n, type: "button", variant: "ghost", color: "tertiary", icon: i, "aria-label": e }) }),
+  /* @__PURE__ */ r(t.Menu, { children: m.map((o, a) => /* @__PURE__ */ r(p, { children: o.type === "divider" ? /* @__PURE__ */ r(t.Separator, {}) : /* @__PURE__ */ r(t.Item, { icon: o.icon, onClick: () => o.action(null), children: o.label }) }, a)) })
 ] });
 export {
-  EditorToolbarDropdownMenu
+  x as EditorToolbarDropdownMenu
 };
+//# sourceMappingURL=EditorToolbar.DropdownMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.DropdownMenu.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.DropdownMenu.tsx"],"sourcesContent":["import { Fragment, ReactNode, RefAttributes } from 'react';\nimport {\n  Dropdown,\n  DropdownMenuOptions,\n  IconButton,\n  IconButtonProps,\n  Tooltip,\n} from '../../../..';\n\ninterface Props {\n  /**\n   * Props for the trigger\n   */\n  triggerProps: JSX.IntrinsicAttributes &\n    Omit<IconButtonProps, 'ref'> &\n    RefAttributes<HTMLButtonElement>;\n  /**\n   * Menu icon\n   */\n  icon: ReactNode;\n  /**\n   * Menu label (for accessibility)\n   */\n  ariaLabel: string;\n  /**\n   * Options to display\n   */\n  options: DropdownMenuOptions[];\n}\n\nexport const EditorToolbarDropdownMenu = ({\n  triggerProps,\n  icon,\n  ariaLabel,\n  options,\n}: Props) => {\n  return (\n    <>\n      <Tooltip message={ariaLabel} placement=\"top\">\n        <IconButton\n          {...triggerProps}\n          type=\"button\"\n          variant=\"ghost\"\n          color=\"tertiary\"\n          icon={icon}\n          aria-label={ariaLabel}\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        {options.map((option, index) => {\n          return (\n            <Fragment key={index}>\n              {option.type === 'divider' ? (\n                <Dropdown.Separator />\n              ) : (\n                <Dropdown.Item\n                  icon={option.icon}\n                  onClick={() => option.action(null)}\n                >\n                  {option.label}\n                </Dropdown.Item>\n              )}\n            </Fragment>\n          );\n        })}\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarDropdownMenu","triggerProps","icon","ariaLabel","options","jsxs","Fragment","jsx","Tooltip","IconButton","Dropdown","map","option","index","type","action","label"],"mappings":";;;;;AA8BO,MAAMA,IAA4BA,CAAC;AAAA,EACxCC,cAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA;AACK,MAGD,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,KAAQ,SAASL,GAAW,WAAU,OACrC,UAAA,gBAAAI,EAACE,KACC,GAAIR,GACJ,MAAK,UACL,SAAQ,SACR,OAAM,YACN,MAAAC,GACA,cAAYC,EAAU,CAAA,GAE1B;AAAA,EACA,gBAAAI,EAACG,EAAS,MAAT,EACEN,YAAQO,IAAI,CAACC,GAAQC,MAElB,gBAAAN,EAACD,GAAA,EACEM,UAAOE,EAAAA,SAAS,YACf,gBAAAP,EAACG,EAAS,WAAT,CAAqB,CAAA,IAErB,gBAAAH,EAAAG,EAAS,MAAT,EACC,MAAME,EAAOV,MACb,SAAS,MAAMU,EAAOG,OAAO,IAAI,GAEhCH,UAAAA,EAAOI,MACV,CAAA,EAAA,GATWH,CAWf,CAEH,GACH;AACF,EAAA,CAAA;"}

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

@@ -1,54 +1,55 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import EmojiPicker, { Categories } from "emoji-picker-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 EditorToolbarEmoji = ({
-  triggerProps,
-  itemRefs
+import { jsxs as n, Fragment as s, jsx as e } from "react/jsx-runtime";
+import p, { Categories as t } from "emoji-picker-react";
+import { useTranslation as c } from "react-i18next";
+import { useEditorContext as l } from "../../hooks/useEditorContext.js";
+import { Tooltip as j } from "../../../../components/Tooltip/Tooltip.js";
+import { IconButton as b } from "../../../../components/Button/IconButton.js";
+import { Icon as g } from "../../../../components/Icon/Icon.js";
+import { Dropdown as E } from "../../../../components/Dropdown/Dropdown.js";
+const A = ({
+  triggerProps: a,
+  itemRefs: m
 }) => {
   const {
-    t
-  } = useTranslation(), {
-    editor
-  } = useEditorContext();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.emojisPicker"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "smiley" }), "aria-label": t("tiptap.toolbar.emojisPicker") }) }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx("div", { ref: (el) => itemRefs.current["emoji-picker"] = el, children: /* @__PURE__ */ jsx(EmojiPicker, { height: 400, width: 316, onEmojiClick: (emoji) => editor == null ? void 0 : editor.commands.insertContentAt(editor.view.state.selection, emoji.emoji), previewConfig: {
+    t: o
+  } = c(), {
+    editor: r
+  } = l();
+  return /* @__PURE__ */ n(s, { children: [
+    /* @__PURE__ */ e(j, { message: o("tiptap.toolbar.emojisPicker"), placement: "top", children: /* @__PURE__ */ e(b, { ...a, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ e(g, { name: "smiley" }), "aria-label": o("tiptap.toolbar.emojisPicker") }) }),
+    /* @__PURE__ */ e(E.Menu, { children: /* @__PURE__ */ e("div", { ref: (i) => m.current["emoji-picker"] = i, children: /* @__PURE__ */ e(p, { height: 400, width: 316, onEmojiClick: (i) => r == null ? void 0 : r.commands.insertContentAt(r.view.state.selection, i.emoji), previewConfig: {
       showPreview: !1
     }, searchDisabled: !0, categories: [{
-      category: Categories.SUGGESTED,
-      name: `${t("tiptap.toolbar.emojis.recentlyUsed")}`
+      category: t.SUGGESTED,
+      name: `${o("tiptap.toolbar.emojis.recentlyUsed")}`
     }, {
-      category: Categories.SMILEYS_PEOPLE,
-      name: `${t("tiptap.toolbar.emojis.people")}`
+      category: t.SMILEYS_PEOPLE,
+      name: `${o("tiptap.toolbar.emojis.people")}`
     }, {
-      category: Categories.ANIMALS_NATURE,
-      name: `${t("tiptap.toolbar.emojis.animalsNature")}`
+      category: t.ANIMALS_NATURE,
+      name: `${o("tiptap.toolbar.emojis.animalsNature")}`
     }, {
-      category: Categories.FOOD_DRINK,
-      name: `${t("tiptap.toolbar.emojis.foodDrink")}`
+      category: t.FOOD_DRINK,
+      name: `${o("tiptap.toolbar.emojis.foodDrink")}`
     }, {
-      category: Categories.TRAVEL_PLACES,
-      name: `${t("tiptap.toolbar.emojis.travelPlaces")}`
+      category: t.TRAVEL_PLACES,
+      name: `${o("tiptap.toolbar.emojis.travelPlaces")}`
     }, {
-      category: Categories.ACTIVITIES,
-      name: `${t("tiptap.toolbar.emojis.activities")}`
+      category: t.ACTIVITIES,
+      name: `${o("tiptap.toolbar.emojis.activities")}`
     }, {
-      category: Categories.OBJECTS,
-      name: `${t("tiptap.toolbar.emojis.objects")}`
+      category: t.OBJECTS,
+      name: `${o("tiptap.toolbar.emojis.objects")}`
     }, {
-      category: Categories.SYMBOLS,
-      name: `${t("tiptap.toolbar.emojis.symbols")}`
+      category: t.SYMBOLS,
+      name: `${o("tiptap.toolbar.emojis.symbols")}`
     }, {
-      category: Categories.FLAGS,
-      name: `${t("tiptap.toolbar.emojis.flags")}`
+      category: t.FLAGS,
+      name: `${o("tiptap.toolbar.emojis.flags")}`
     }] }) }) })
   ] });
 };
 export {
-  EditorToolbarEmoji
+  A as EditorToolbarEmoji
 };
+//# sourceMappingURL=EditorToolbar.Emoji.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.Emoji.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.Emoji.tsx"],"sourcesContent":["import { RefAttributes } from 'react';\n\nimport EmojiPicker, { Categories } from 'emoji-picker-react';\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   * Tracks refs on ColorPickers.\n   */\n  itemRefs: any;\n}\n\nexport const EditorToolbarEmoji = ({ triggerProps, itemRefs }: Props) => {\n  const { t } = useTranslation();\n  const { editor } = useEditorContext();\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.toolbar.emojisPicker')} placement=\"top\">\n        <IconButton\n          {...triggerProps}\n          type=\"button\"\n          variant=\"ghost\"\n          color=\"tertiary\"\n          icon={<Icon name=\"smiley\" />}\n          aria-label={t('tiptap.toolbar.emojisPicker')}\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        <div ref={(el) => (itemRefs.current['emoji-picker'] = el)}>\n          <EmojiPicker\n            height={400}\n            width={316}\n            onEmojiClick={(emoji) =>\n              editor?.commands.insertContentAt(\n                editor.view.state.selection,\n                emoji.emoji,\n              )\n            }\n            previewConfig={{ showPreview: false }}\n            searchDisabled={true}\n            categories={[\n              {\n                category: Categories.SUGGESTED,\n                name: `${t('tiptap.toolbar.emojis.recentlyUsed')}`,\n              },\n              {\n                category: Categories.SMILEYS_PEOPLE,\n                name: `${t('tiptap.toolbar.emojis.people')}`,\n              },\n              {\n                category: Categories.ANIMALS_NATURE,\n                name: `${t('tiptap.toolbar.emojis.animalsNature')}`,\n              },\n              {\n                category: Categories.FOOD_DRINK,\n                name: `${t('tiptap.toolbar.emojis.foodDrink')}`,\n              },\n              {\n                category: Categories.TRAVEL_PLACES,\n                name: `${t('tiptap.toolbar.emojis.travelPlaces')}`,\n              },\n              {\n                category: Categories.ACTIVITIES,\n                name: `${t('tiptap.toolbar.emojis.activities')}`,\n              },\n              {\n                category: Categories.OBJECTS,\n                name: `${t('tiptap.toolbar.emojis.objects')}`,\n              },\n              {\n                category: Categories.SYMBOLS,\n                name: `${t('tiptap.toolbar.emojis.symbols')}`,\n              },\n              {\n                category: Categories.FLAGS,\n                name: `${t('tiptap.toolbar.emojis.flags')}`,\n              },\n            ]}\n          />\n        </div>\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarEmoji","triggerProps","itemRefs","t","useTranslation","editor","useEditorContext","jsxs","Fragment","jsx","Tooltip","IconButton","Icon","Dropdown","el","current","EmojiPicker","emoji","commands","insertContentAt","view","state","selection","showPreview","category","Categories","SUGGESTED","name","SMILEYS_PEOPLE","ANIMALS_NATURE","FOOD_DRINK","TRAVEL_PLACES","ACTIVITIES","OBJECTS","SYMBOLS","FLAGS"],"mappings":";;;;;;;;AA2BO,MAAMA,IAAqBA,CAAC;AAAA,EAAEC,cAAAA;AAAAA,EAAcC,UAAAA;AAAgB,MAAM;AACjE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAiB;AAEpC,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAQ,SAASP,EAAE,6BAA6B,GAAG,WAAU,OAC5D,UAAC,gBAAAM,EAAAE,GAAA,EACKV,GAAAA,GACJ,MAAK,UACL,SAAQ,SACR,OAAM,YACN,MAAM,gBAAAQ,EAACG,GAAK,EAAA,MAAK,SAAQ,CAAA,GACzB,cAAYT,EAAE,6BAA6B,EAAA,CAAE,EAEjD,CAAA;AAAA,IACC,gBAAAM,EAAAI,EAAS,MAAT,EACC,UAAC,gBAAAJ,EAAA,OAAA,EAAI,KAAMK,CAAAA,MAAQZ,EAASa,QAAQ,cAAc,IAAID,GACpD,UAAC,gBAAAL,EAAAO,GAAA,EACC,QAAQ,KACR,OAAO,KACP,cAAeC,CAAAA,MACbZ,KAAAA,gBAAAA,EAAQa,SAASC,gBACfd,EAAOe,KAAKC,MAAMC,WAClBL,EAAMA,QAGV,eAAe;AAAA,MAAEM,aAAa;AAAA,IAAA,GAC9B,gBAAgB,IAChB,YAAY,CACV;AAAA,MACEC,UAAUC,EAAWC;AAAAA,MACrBC,MAAM,GAAGxB,EAAE,oCAAoC,CAAC;AAAA,IAAA,GAElD;AAAA,MACEqB,UAAUC,EAAWG;AAAAA,MACrBD,MAAM,GAAGxB,EAAE,8BAA8B,CAAC;AAAA,IAAA,GAE5C;AAAA,MACEqB,UAAUC,EAAWI;AAAAA,MACrBF,MAAM,GAAGxB,EAAE,qCAAqC,CAAC;AAAA,IAAA,GAEnD;AAAA,MACEqB,UAAUC,EAAWK;AAAAA,MACrBH,MAAM,GAAGxB,EAAE,iCAAiC,CAAC;AAAA,IAAA,GAE/C;AAAA,MACEqB,UAAUC,EAAWM;AAAAA,MACrBJ,MAAM,GAAGxB,EAAE,oCAAoC,CAAC;AAAA,IAAA,GAElD;AAAA,MACEqB,UAAUC,EAAWO;AAAAA,MACrBL,MAAM,GAAGxB,EAAE,kCAAkC,CAAC;AAAA,IAAA,GAEhD;AAAA,MACEqB,UAAUC,EAAWQ;AAAAA,MACrBN,MAAM,GAAGxB,EAAE,+BAA+B,CAAC;AAAA,IAAA,GAE7C;AAAA,MACEqB,UAAUC,EAAWS;AAAAA,MACrBP,MAAM,GAAGxB,EAAE,+BAA+B,CAAC;AAAA,IAAA,GAE7C;AAAA,MACEqB,UAAUC,EAAWU;AAAAA,MACrBR,MAAM,GAAGxB,EAAE,6BAA6B,CAAC;AAAA,IAAA,CAC1C,EACD,CAAA,EAEN,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1,47 +1,48 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useMemo, useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { useEditorContext } from "../../hooks/useEditorContext.js";
-import { DefaultPalette } from "../../../../components/ColorPicker/ColorPalette.js";
-import { ColorPicker } from "../../../../components/ColorPicker/ColorPicker.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 EditorToolbarHighlightColor = ({
-  triggerProps,
-  itemRefs
+import { jsxs as h, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { useState as g, useMemo as u, useCallback as f, useEffect as b } from "react";
+import { useTranslation as A } from "react-i18next";
+import { useEditorContext as C } from "../../hooks/useEditorContext.js";
+import { DefaultPalette as k } from "../../../../components/ColorPicker/ColorPalette.js";
+import { ColorPicker as x } from "../../../../components/ColorPicker/ColorPicker.js";
+import { Tooltip as H } from "../../../../components/Tooltip/Tooltip.js";
+import { IconButton as y } from "../../../../components/Button/IconButton.js";
+import { Icon as E } from "../../../../components/Icon/Icon.js";
+import { Dropdown as T } from "../../../../components/Dropdown/Dropdown.js";
+const N = ({
+  triggerProps: c,
+  itemRefs: l
 }) => {
   const {
-    t
-  } = useTranslation(), {
-    editor
-  } = useEditorContext(), [color, setColor] = useState("#4A4A4A"), isActive = useMemo(
-    () => editor == null ? void 0 : editor.isActive("customHighlight", {
+    t: e
+  } = A(), {
+    editor: t
+  } = C(), [i, s] = g("#4A4A4A"), n = u(
+    () => t == null ? void 0 : t.isActive("customHighlight", {
       color: /^#([0-9a-f]{3}){1,2}$/i
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [editor, editor == null ? void 0 : editor.state]
-  ), applyColor = useCallback((value) => {
-    value === color || value === "" ? (setColor(""), editor == null || editor.chain().focus().unsetHighlight().run()) : (setColor(value), editor == null || editor.chain().focus().setHighlight({
-      color: value
+    [t, t == null ? void 0 : t.state]
+  ), a = f((o) => {
+    o === i || o === "" ? (s(""), t == null || t.chain().focus().unsetHighlight().run()) : (s(o), t == null || t.chain().focus().setHighlight({
+      color: o
     }).run());
-  }, [color, editor]);
-  useEffect(() => {
-    setColor((editor == null ? void 0 : editor.getAttributes("customHighlight").color) ?? "");
-  }, [editor, editor == null ? void 0 : editor.state]);
-  const palettes = [{
-    ...DefaultPalette,
+  }, [i, t]);
+  b(() => {
+    s((t == null ? void 0 : t.getAttributes("customHighlight").color) ?? "");
+  }, [t, t == null ? void 0 : t.state]);
+  const m = [{
+    ...k,
     reset: {
       value: "transparent",
-      description: t("tiptap.toolbar.highlight.none")
+      description: e("tiptap.toolbar.highlight.none")
     }
   }];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.highlight.back"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "text-highlight" }), "aria-label": t("tiptap.toolbar.highlight.back"), className: isActive ? "selected" : "" }) }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx(ColorPicker, { ref: (el) => itemRefs.current["color-picker"] = el, palettes, model: color, onSuccess: (item) => applyColor(item.value) }) })
+  return /* @__PURE__ */ h(p, { children: [
+    /* @__PURE__ */ r(H, { message: e("tiptap.toolbar.highlight.back"), placement: "top", children: /* @__PURE__ */ r(y, { ...c, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ r(E, { name: "text-highlight" }), "aria-label": e("tiptap.toolbar.highlight.back"), className: n ? "selected" : "" }) }),
+    /* @__PURE__ */ r(T.Menu, { children: /* @__PURE__ */ r(x, { ref: (o) => l.current["color-picker"] = o, palettes: m, model: i, onSuccess: (o) => a(o.value) }) })
   ] });
 };
 export {
-  EditorToolbarHighlightColor
+  N as EditorToolbarHighlightColor
 };
+//# sourceMappingURL=EditorToolbar.HighlightColor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.HighlightColor.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.HighlightColor.tsx"],"sourcesContent":["import {\n  RefAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  ColorPalette,\n  ColorPicker,\n  DefaultPalette,\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   * Tracks refs on ColorPickers.\n   */\n  itemRefs: any;\n}\n\nexport const EditorToolbarHighlightColor = ({\n  triggerProps,\n  itemRefs,\n}: Props) => {\n  const { t } = useTranslation();\n  const { editor } = useEditorContext();\n\n  // Manage text and background colors.\n  const [color, setColor] = useState<string>('#4A4A4A');\n\n  const isActive = useMemo(\n    () =>\n      editor?.isActive('customHighlight', {\n        color: /^#([0-9a-f]{3}){1,2}$/i,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [editor, editor?.state],\n  );\n\n  // Triggered when the user chooses a highlighting color.\n  const applyColor = useCallback(\n    (value: string) => {\n      // If the same color is picked, remove it (=toggle mode).\n      if (value === color || value === '') {\n        setColor('');\n        editor?.chain().focus().unsetHighlight().run();\n      } else {\n        setColor(value);\n        editor?.chain().focus().setHighlight({ color: value }).run();\n      }\n    },\n    [color, editor],\n  );\n\n  // When cursor moves in table, update the current highlight color.\n  useEffect(() => {\n    setColor(editor?.getAttributes('customHighlight').color ?? '');\n  }, [editor, editor?.state]);\n\n  // Palettes of available colors to choose from.\n  const palettes: ColorPalette[] = [\n    {\n      ...DefaultPalette,\n      reset: {\n        value: 'transparent',\n        description: t('tiptap.toolbar.highlight.none'),\n      },\n    },\n  ];\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.toolbar.highlight.back')} placement=\"top\">\n        <IconButton\n          {...triggerProps}\n          type=\"button\"\n          variant=\"ghost\"\n          color=\"tertiary\"\n          icon={<Icon name=\"text-highlight\" />}\n          aria-label={t('tiptap.toolbar.highlight.back')}\n          className={isActive ? 'selected' : ''}\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        <ColorPicker\n          ref={(el: any) => (itemRefs.current['color-picker'] = el)}\n          palettes={palettes}\n          model={color}\n          onSuccess={(item) => applyColor(item.value)}\n        />\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarHighlightColor","triggerProps","itemRefs","t","useTranslation","editor","useEditorContext","color","setColor","useState","isActive","useMemo","state","applyColor","useCallback","value","chain","focus","unsetHighlight","run","setHighlight","useEffect","getAttributes","palettes","DefaultPalette","reset","description","jsxs","Fragment","jsx","Tooltip","IconButton","Icon","Dropdown","ColorPicker","el","current","item"],"mappings":";;;;;;;;;;AAmCO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,cAAAA;AAAAA,EACAC,UAAAA;AACK,MAAM;AACL,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAiB,GAG9B,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,SAAS,GAE9CC,IAAWC;AAAAA,IACf,MACEN,KAAAA,gBAAAA,EAAQK,SAAS,mBAAmB;AAAA,MAClCH,OAAO;AAAA,IAAA;AAAA;AAAA,IAGX,CAACF,GAAQA,KAAAA,gBAAAA,EAAQO,KAAK;AAAA,EAAA,GAIlBC,IAAaC,EACjB,CAACC,MAAkB;AAEbA,IAAAA,MAAUR,KAASQ,MAAU,MAC/BP,EAAS,EAAE,GACXH,KAAAA,QAAAA,EAAQW,QAAQC,QAAQC,iBAAiBC,UAEzCX,EAASO,CAAK,GACdV,KAAAA,QAAAA,EAAQW,QAAQC,QAAQG,aAAa;AAAA,MAAEb,OAAOQ;AAAAA,IAAAA,GAASI;AAAAA,EACzD,GAEF,CAACZ,GAAOF,CAAM,CAChB;AAGAgB,EAAAA,EAAU,MAAM;AACdb,IAAAA,GAASH,KAAAA,gBAAAA,EAAQiB,cAAc,mBAAmBf,UAAS,EAAE;AAAA,EAC5D,GAAA,CAACF,GAAQA,KAAAA,gBAAAA,EAAQO,KAAK,CAAC;AAG1B,QAAMW,IAA2B,CAC/B;AAAA,IACE,GAAGC;AAAAA,IACHC,OAAO;AAAA,MACLV,OAAO;AAAA,MACPW,aAAavB,EAAE,+BAA+B;AAAA,IAChD;AAAA,EAAA,CACD;AAGH,SAEI,gBAAAwB,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAQ,EAAA,SAAS3B,EAAE,+BAA+B,GAAG,WAAU,OAC9D,UAAA,gBAAA0B,EAACE,GACC,EAAA,GAAI9B,GACJ,MAAK,UACL,SAAQ,SACR,OAAM,YACN,MAAM,gBAAA4B,EAACG,GAAK,EAAA,MAAK,kBAAmB,GACpC,cAAY7B,EAAE,+BAA+B,GAC7C,WAAWO,IAAW,aAAa,GAAG,CAAA,GAE1C;AAAA,IACA,gBAAAmB,EAACI,EAAS,MAAT,EACC,4BAACC,GACC,EAAA,KAAK,CAACC,MAAajC,EAASkC,QAAQ,cAAc,IAAID,GACtD,UAAAZ,GACA,OAAOhB,GACP,WAAY8B,OAASxB,EAAWwB,EAAKtB,KAAK,EAAA,CAAE,EAEhD,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1,18 +1,19 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
-import { useTranslation } from "react-i18next";
-import { Dropdown } from "../../../../components/Dropdown/Dropdown.js";
-const EditorToolbarPlusMenu = ({
-  options
+import { jsxs as i, Fragment as l, jsx as r } from "react/jsx-runtime";
+import { Fragment as m } from "react";
+import { useTranslation as s } from "react-i18next";
+import { Dropdown as t } from "../../../../components/Dropdown/Dropdown.js";
+const g = ({
+  options: n
 }) => {
   const {
-    t
-  } = useTranslation();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", label: t("tiptap.toolbar.plus"), size: "md", tabIndex: -1 }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: options.map((option, index) => /* @__PURE__ */ jsx(Fragment$1, { children: option.type === "divider" ? /* @__PURE__ */ jsx(Dropdown.Separator, {}) : /* @__PURE__ */ jsx(Dropdown.Item, { icon: option.icon, onClick: () => option.action(null), children: option.label }) }, index)) })
+    t: o
+  } = s();
+  return /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ r(t.Trigger, { variant: "ghost", label: o("tiptap.toolbar.plus"), size: "md", tabIndex: -1 }),
+    /* @__PURE__ */ r(t.Menu, { children: n.map((e, a) => /* @__PURE__ */ r(m, { children: e.type === "divider" ? /* @__PURE__ */ r(t.Separator, {}) : /* @__PURE__ */ r(t.Item, { icon: e.icon, onClick: () => e.action(null), children: e.label }) }, a)) })
   ] });
 };
 export {
-  EditorToolbarPlusMenu
+  g as EditorToolbarPlusMenu
 };
+//# sourceMappingURL=EditorToolbar.PlusMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.PlusMenu.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.PlusMenu.tsx"],"sourcesContent":["import { Fragment } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown, DropdownMenuOptions } from '../../../..';\n\ninterface Props {\n  /**\n   * Options to display\n   */\n  options: DropdownMenuOptions[];\n}\n\nexport const EditorToolbarPlusMenu = ({ options }: Props) => {\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <Dropdown.Trigger\n        variant=\"ghost\"\n        label={t('tiptap.toolbar.plus')}\n        size=\"md\"\n        tabIndex={-1}\n      />\n      <Dropdown.Menu>\n        {options.map((option, index) => {\n          return (\n            <Fragment key={index}>\n              {option.type === 'divider' ? (\n                <Dropdown.Separator />\n              ) : (\n                <Dropdown.Item\n                  icon={option.icon}\n                  onClick={() => option.action(null)}\n                >\n                  {option.label}\n                </Dropdown.Item>\n              )}\n            </Fragment>\n          );\n        })}\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarPlusMenu","options","t","useTranslation","jsxs","Fragment","jsx","Dropdown","map","option","index","type","icon","action","label"],"mappings":";;;;AAYO,MAAMA,IAAwBA,CAAC;AAAA,EAAEC,SAAAA;AAAe,MAAM;AACrD,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe;AAE7B,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,EAAS,SAAT,EACC,SAAQ,SACR,OAAOL,EAAE,qBAAqB,GAC9B,MAAK,MACL,UAAU,GAAG,CAAA;AAAA,IAEf,gBAAAI,EAACC,EAAS,MAAT,EACEN,YAAQO,IAAI,CAACC,GAAQC,MAElB,gBAAAJ,EAACD,GAAA,EACEI,UAAOE,EAAAA,SAAS,YACf,gBAAAL,EAACC,EAAS,WAAT,CAAqB,CAAA,IAErB,gBAAAD,EAAAC,EAAS,MAAT,EACC,MAAME,EAAOG,MACb,SAAS,MAAMH,EAAOI,OAAO,IAAI,GAEhCJ,UAAAA,EAAOK,MACV,CAAA,EAAA,GATWJ,CAWf,CAEH,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1,50 +1,51 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useMemo, useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { useEditorContext } from "../../hooks/useEditorContext.js";
-import { DefaultPalette, AccessiblePalette } from "../../../../components/ColorPicker/ColorPalette.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";
-import { ColorPicker } from "../../../../components/ColorPicker/ColorPicker.js";
-const EditorToolbarTextColor = ({
-  triggerProps,
-  itemRefs
+import { jsxs as m, Fragment as f, jsx as r } from "react/jsx-runtime";
+import { useState as u, useMemo as b, useCallback as x, useEffect as A } from "react";
+import { useTranslation as h } from "react-i18next";
+import { useEditorContext as C } from "../../hooks/useEditorContext.js";
+import { DefaultPalette as g, AccessiblePalette as y } from "../../../../components/ColorPicker/ColorPalette.js";
+import { Tooltip as T } from "../../../../components/Tooltip/Tooltip.js";
+import { IconButton as k } from "../../../../components/Button/IconButton.js";
+import { Icon as E } from "../../../../components/Icon/Icon.js";
+import { Dropdown as P } from "../../../../components/Dropdown/Dropdown.js";
+import { ColorPicker as S } from "../../../../components/ColorPicker/ColorPicker.js";
+const q = ({
+  triggerProps: a,
+  itemRefs: s
 }) => {
   const {
-    t
-  } = useTranslation(), {
-    editor
-  } = useEditorContext(), [color, setColor] = useState("#4A4A4A"), isActive = useMemo(
-    () => editor == null ? void 0 : editor.isActive("textStyle", {
+    t: e
+  } = h(), {
+    editor: o
+  } = C(), [l, c] = u("#4A4A4A"), n = b(
+    () => o == null ? void 0 : o.isActive("textStyle", {
       color: /^#([0-9a-f]{3}){1,2}$/i
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [editor, editor == null ? void 0 : editor.state]
-  ), applyColor = useCallback((value) => {
-    value === color ? (setColor(""), editor == null || editor.chain().focus().unsetColor().run()) : (setColor(value), editor == null || editor.chain().focus().setColor(value).run());
-  }, [color, editor]);
-  useEffect(() => {
-    const textStyle = editor == null ? void 0 : editor.getAttributes("textStyle");
-    setColor((textStyle == null ? void 0 : textStyle.color) ?? "#4A4A4A");
-  }, [editor, editor == null ? void 0 : editor.state]);
-  const palettes = [{
-    ...DefaultPalette,
-    label: t("tiptap.toolbar.color.text")
+    [o, o == null ? void 0 : o.state]
+  ), p = x((t) => {
+    t === l ? (c(""), o == null || o.chain().focus().unsetColor().run()) : (c(t), o == null || o.chain().focus().setColor(t).run());
+  }, [l, o]);
+  A(() => {
+    const t = o == null ? void 0 : o.getAttributes("textStyle");
+    c((t == null ? void 0 : t.color) ?? "#4A4A4A");
+  }, [o, o == null ? void 0 : o.state]);
+  const i = [{
+    ...g,
+    label: e("tiptap.toolbar.color.text")
   }, {
-    ...AccessiblePalette,
-    label: t("tiptap.toolbar.color.a13y"),
+    ...y,
+    label: e("tiptap.toolbar.color.a13y"),
     tooltip: {
-      message: t("tiptap.toolbar.color.a13y.hint"),
+      message: e("tiptap.toolbar.color.a13y.hint"),
       placement: "right"
     }
   }];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.color.text"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "text-color" }), "aria-label": t("tiptap.toolbar.color.text"), className: isActive ? "selected" : "" }) }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx(ColorPicker, { ref: (el) => itemRefs.current["color-picker"] = el, model: color, palettes, onSuccess: (item) => applyColor(item.value) }) })
+  return /* @__PURE__ */ m(f, { children: [
+    /* @__PURE__ */ r(T, { message: e("tiptap.toolbar.color.text"), placement: "top", children: /* @__PURE__ */ r(k, { ...a, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ r(E, { name: "text-color" }), "aria-label": e("tiptap.toolbar.color.text"), className: n ? "selected" : "" }) }),
+    /* @__PURE__ */ r(P.Menu, { children: /* @__PURE__ */ r(S, { ref: (t) => s.current["color-picker"] = t, model: l, palettes: i, onSuccess: (t) => p(t.value) }) })
   ] });
 };
 export {
-  EditorToolbarTextColor
+  q as EditorToolbarTextColor
 };
+//# sourceMappingURL=EditorToolbar.TextColor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.TextColor.js","sources":["../../../../../src/modules/editor/components/EditorToolbar/EditorToolbar.TextColor.tsx"],"sourcesContent":["import {\n  RefAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  AccessiblePalette,\n  ColorPalette,\n  ColorPicker,\n  DefaultPalette,\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   * Tracks refs on ColorPickers.\n   */\n  itemRefs: any;\n}\n\nexport const EditorToolbarTextColor = ({ triggerProps, itemRefs }: Props) => {\n  const { t } = useTranslation();\n  const { editor } = useEditorContext();\n\n  // Manage text and background colors.\n  const [color, setColor] = useState<string>('#4A4A4A');\n\n  const isActive = useMemo(\n    () =>\n      editor?.isActive('textStyle', {\n        color: /^#([0-9a-f]{3}){1,2}$/i,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [editor, editor?.state],\n  );\n\n  // Triggered when the user chooses a color for cells background.\n  const applyColor = useCallback(\n    (value: string) => {\n      // If the same color is picked, remove it (=toggle mode).\n      if (value === color) {\n        setColor('');\n        editor?.chain().focus().unsetColor().run();\n      } else {\n        setColor(value);\n        editor?.chain().focus().setColor(value).run();\n      }\n    },\n    [color, editor],\n  );\n\n  // When cursor moves in table, update the current text color.\n  useEffect(() => {\n    const textStyle = editor?.getAttributes('textStyle');\n    setColor(textStyle?.color ?? '#4A4A4A');\n  }, [editor, editor?.state]);\n\n  // Palettes of available colors to choose from.\n  const palettes: ColorPalette[] = [\n    { ...DefaultPalette, label: t('tiptap.toolbar.color.text') },\n    {\n      ...AccessiblePalette,\n      label: t('tiptap.toolbar.color.a13y'),\n      tooltip: {\n        message: t('tiptap.toolbar.color.a13y.hint'),\n        placement: 'right',\n      },\n    },\n  ];\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.toolbar.color.text')} placement=\"top\">\n        <IconButton\n          {...triggerProps}\n          type=\"button\"\n          variant=\"ghost\"\n          color=\"tertiary\"\n          icon={<Icon name=\"text-color\" />}\n          aria-label={t('tiptap.toolbar.color.text')}\n          className={isActive ? 'selected' : ''}\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        <ColorPicker\n          ref={(el: any) => (itemRefs.current['color-picker'] = el)}\n          model={color}\n          palettes={palettes}\n          onSuccess={(item) => applyColor(item.value)}\n        />\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["EditorToolbarTextColor","triggerProps","itemRefs","t","useTranslation","editor","useEditorContext","color","setColor","useState","isActive","useMemo","state","applyColor","useCallback","value","chain","focus","unsetColor","run","useEffect","textStyle","getAttributes","palettes","DefaultPalette","label","AccessiblePalette","tooltip","message","placement","jsxs","Fragment","jsx","Tooltip","IconButton","Icon","Dropdown","ColorPicker","el","current","item"],"mappings":";;;;;;;;;;AAoCO,MAAMA,IAAyBA,CAAC;AAAA,EAAEC,cAAAA;AAAAA,EAAcC,UAAAA;AAAgB,MAAM;AACrE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAiB,GAG9B,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,SAAS,GAE9CC,IAAWC;AAAAA,IACf,MACEN,KAAAA,gBAAAA,EAAQK,SAAS,aAAa;AAAA,MAC5BH,OAAO;AAAA,IAAA;AAAA;AAAA,IAGX,CAACF,GAAQA,KAAAA,gBAAAA,EAAQO,KAAK;AAAA,EAAA,GAIlBC,IAAaC,EACjB,CAACC,MAAkB;AAEjB,IAAIA,MAAUR,KACZC,EAAS,EAAE,GACXH,KAAAA,QAAAA,EAAQW,QAAQC,QAAQC,aAAaC,UAErCX,EAASO,CAAK,GACdV,KAAAA,QAAAA,EAAQW,QAAQC,QAAQT,SAASO,GAAOI;AAAAA,EAC1C,GAEF,CAACZ,GAAOF,CAAM,CAChB;AAGAe,EAAAA,EAAU,MAAM;AACRC,UAAAA,IAAYhB,KAAAA,gBAAAA,EAAQiB,cAAc;AAC/BD,IAAAA,GAAAA,KAAAA,gBAAAA,EAAWd,UAAS,SAAS;AAAA,EACrC,GAAA,CAACF,GAAQA,KAAAA,gBAAAA,EAAQO,KAAK,CAAC;AAG1B,QAAMW,IAA2B,CAC/B;AAAA,IAAE,GAAGC;AAAAA,IAAgBC,OAAOtB,EAAE,2BAA2B;AAAA,EAAA,GACzD;AAAA,IACE,GAAGuB;AAAAA,IACHD,OAAOtB,EAAE,2BAA2B;AAAA,IACpCwB,SAAS;AAAA,MACPC,SAASzB,EAAE,gCAAgC;AAAA,MAC3C0B,WAAW;AAAA,IACb;AAAA,EAAA,CACD;AAGH,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAQ,EAAA,SAAS9B,EAAE,2BAA2B,GAAG,WAAU,OAC1D,UAAA,gBAAA6B,EAACE,GACC,EAAA,GAAIjC,GACJ,MAAK,UACL,SAAQ,SACR,OAAM,YACN,MAAM,gBAAA+B,EAACG,GAAK,EAAA,MAAK,cAAe,GAChC,cAAYhC,EAAE,2BAA2B,GACzC,WAAWO,IAAW,aAAa,GAAG,CAAA,GAE1C;AAAA,IACA,gBAAAsB,EAACI,EAAS,MAAT,EACC,4BAACC,GACC,EAAA,KAAK,CAACC,MAAapC,EAASqC,QAAQ,cAAc,IAAID,GACtD,OAAO/B,GACP,UAAAgB,GACA,WAAYiB,OAAS3B,EAAW2B,EAAKzB,KAAK,EAAA,CAAE,EAEhD,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}