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

package/dist/modules/editor/components/Toolbar/TableToolbar.CellColor.js

@@ -1,45 +1,46 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { ColorPickerItem } from "../../../../components/ColorPicker/ColorPickerItem.js";
-import { DefaultPalette } from "../../../../components/ColorPicker/ColorPalette.js";
-import { Tooltip } from "../../../../components/Tooltip/Tooltip.js";
-import { Dropdown } from "../../../../components/Dropdown/Dropdown.js";
-import { ColorPicker } from "../../../../components/ColorPicker/ColorPicker.js";
-const TableToolbarCellColor = ({
-  editor,
-  itemRefs
+import { jsxs as m, Fragment as b, jsx as o } from "react/jsx-runtime";
+import { useState as i, useCallback as u, useEffect as f } from "react";
+import { useTranslation as C } from "react-i18next";
+import { ColorPickerItem as g } from "../../../../components/ColorPicker/ColorPickerItem.js";
+import { DefaultPalette as k } from "../../../../components/ColorPicker/ColorPalette.js";
+import { Tooltip as h } from "../../../../components/Tooltip/Tooltip.js";
+import { Dropdown as n } from "../../../../components/Dropdown/Dropdown.js";
+import { ColorPicker as T } from "../../../../components/ColorPicker/ColorPicker.js";
+const w = ({
+  editor: t,
+  itemRefs: s
 }) => {
   const {
-    t
-  } = useTranslation(), [color, setColor] = useState("transparent"), applyColor = useCallback((value) => {
-    editor == null || editor.chain().focus().setCellAttribute(
+    t: r
+  } = C(), [e, a] = i("transparent"), p = u((l) => {
+    t == null || t.chain().focus().setCellAttribute(
       "backgroundColor",
       // reset color is transparent here => remove bkg color
-      value === "transparent" ? "" : value
-    ).run(), setColor(value);
-  }, [editor, setColor]);
-  useEffect(() => {
-    setColor((editor == null ? void 0 : editor.getAttributes("tableCell").backgroundColor) ?? "transparent");
-  }, [editor, editor == null ? void 0 : editor.state]);
-  const palettes = [{
-    ...DefaultPalette,
-    label: t("tiptap.table.toolbar.cell.color"),
+      l === "transparent" ? "" : l
+    ).run(), a(l);
+  }, [t, a]);
+  f(() => {
+    a((t == null ? void 0 : t.getAttributes("tableCell").backgroundColor) ?? "transparent");
+  }, [t, t == null ? void 0 : t.state]);
+  const c = [{
+    ...k,
+    label: r("tiptap.table.toolbar.cell.color"),
     reset: {
       value: "transparent",
-      description: t("tiptap.table.toolbar.cell.none"),
+      description: r("tiptap.table.toolbar.cell.none"),
       isReset: !0
     }
   }];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.table.toolbar.cell.bk"), placement: "top", children: /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", "aria-label": t("tiptap.table.toolbar.cell.bk"), icon: /* @__PURE__ */ jsx(ColorPickerItem, { model: {
-      value: color,
+  return /* @__PURE__ */ m(b, { children: [
+    /* @__PURE__ */ o(h, { message: r("tiptap.table.toolbar.cell.bk"), placement: "top", children: /* @__PURE__ */ o(n.Trigger, { variant: "ghost", "aria-label": r("tiptap.table.toolbar.cell.bk"), icon: /* @__PURE__ */ o(g, { model: {
+      value: e,
       description: "",
-      isReset: !color || color.length === 0 || color === "transparent"
+      isReset: !e || e.length === 0 || e === "transparent"
     } }) }) }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx(ColorPicker, { ref: (el) => itemRefs.current["color-picker"] = el, model: color, palettes, onSuccess: (item) => applyColor(item.value) }) })
+    /* @__PURE__ */ o(n.Menu, { children: /* @__PURE__ */ o(T, { ref: (l) => s.current["color-picker"] = l, model: e, palettes: c, onSuccess: (l) => p(l.value) }) })
   ] });
 };
 export {
-  TableToolbarCellColor
+  w as TableToolbarCellColor
 };
+//# sourceMappingURL=TableToolbar.CellColor.js.map

package/dist/modules/editor/components/Toolbar/TableToolbar.CellColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.CellColor.js","sources":["../../../../../src/modules/editor/components/Toolbar/TableToolbar.CellColor.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { Editor } from '@tiptap/react';\nimport { useTranslation } from 'react-i18next';\nimport {\n  ColorPalette,\n  ColorPicker,\n  ColorPickerItem,\n  DefaultPalette,\n  Dropdown,\n  Tooltip,\n} from '../../../..';\n\ninterface Props {\n  /**\n   * editor instance\n   */\n  editor: Editor | null;\n  /**\n   * Tracks refs on ColorPickers.\n   */\n  itemRefs: any;\n}\n\nexport const TableToolbarCellColor = ({ editor, itemRefs }: Props) => {\n  const { t } = useTranslation();\n\n  // Cell color, defaults to \"transparent\".\n  const [color, setColor] = useState<string>('transparent');\n\n  // Triggered when the user chooses a color for cells background.\n  const applyColor = useCallback(\n    (value: string) => {\n      editor\n        ?.chain()\n        .focus()\n        .setCellAttribute(\n          'backgroundColor',\n          // reset color is transparent here => remove bkg color\n          value === 'transparent' ? '' : value,\n        )\n        .run();\n      setColor(value);\n    },\n    [editor, setColor],\n  );\n\n  // When cursor moves in table, update the current background color.\n  useEffect(() => {\n    setColor(\n      editor?.getAttributes('tableCell').backgroundColor ?? 'transparent',\n    );\n  }, [editor, editor?.state]);\n\n  // Palettes of available colors to choose from.\n  const palettes: ColorPalette[] = [\n    {\n      ...DefaultPalette,\n      label: t('tiptap.table.toolbar.cell.color'),\n      reset: {\n        value: 'transparent',\n        description: t('tiptap.table.toolbar.cell.none'),\n        isReset: true,\n      },\n    },\n  ];\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.table.toolbar.cell.bk')} placement=\"top\">\n        <Dropdown.Trigger\n          variant=\"ghost\"\n          aria-label={t('tiptap.table.toolbar.cell.bk')}\n          icon={\n            <ColorPickerItem\n              model={{\n                value: color,\n                description: '',\n                isReset:\n                  !color || color.length === 0 || color === 'transparent',\n              }}\n            />\n          }\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        <ColorPicker\n          ref={(el) => (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":["TableToolbarCellColor","editor","itemRefs","t","useTranslation","color","setColor","useState","applyColor","useCallback","value","chain","focus","setCellAttribute","run","useEffect","getAttributes","backgroundColor","state","palettes","DefaultPalette","label","reset","description","isReset","jsxs","Fragment","jsx","Tooltip","Dropdown","ColorPickerItem","length","ColorPicker","el","current","item"],"mappings":";;;;;;;;AAwBO,MAAMA,IAAwBA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,UAAAA;AAAgB,MAAM;AAC9D,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GAGvB,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,aAAa,GAGlDC,IAAaC,EACjB,CAACC,MAAkB;AAEbC,IAAAA,KAAAA,QAAAA,EAAAA,QACDC,QACAC;AAAAA,MACC;AAAA;AAAA,MAEAH,MAAU,gBAAgB,KAAKA;AAAAA,MAEhCI,OACHR,EAASI,CAAK;AAAA,EAAA,GAEhB,CAACT,GAAQK,CAAQ,CACnB;AAGAS,EAAAA,EAAU,MAAM;AACdT,IAAAA,GACEL,KAAAA,gBAAAA,EAAQe,cAAc,aAAaC,oBAAmB,aACxD;AAAA,EACC,GAAA,CAAChB,GAAQA,KAAAA,gBAAAA,EAAQiB,KAAK,CAAC;AAG1B,QAAMC,IAA2B,CAC/B;AAAA,IACE,GAAGC;AAAAA,IACHC,OAAOlB,EAAE,iCAAiC;AAAA,IAC1CmB,OAAO;AAAA,MACLZ,OAAO;AAAA,MACPa,aAAapB,EAAE,gCAAgC;AAAA,MAC/CqB,SAAS;AAAA,IACX;AAAA,EAAA,CACD;AAGH,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAQ,SAASzB,EAAE,8BAA8B,GAAG,WAAU,OAC7D,4BAAC0B,EAAS,SAAT,EACC,SAAQ,SACR,cAAY1B,EAAE,8BAA8B,GAC5C,MACE,gBAAAwB,EAACG,KACC,OAAO;AAAA,MACLpB,OAAOL;AAAAA,MACPkB,aAAa;AAAA,MACbC,SACE,CAACnB,KAASA,EAAM0B,WAAW,KAAK1B,MAAU;AAAA,IAAA,KAGjD,CAAA,GAEL;AAAA,IACA,gBAAAsB,EAACE,EAAS,MAAT,EACC,4BAACG,GACC,EAAA,KAAMC,CAAQ/B,MAAAA,EAASgC,QAAQ,cAAc,IAAID,GACjD,OAAO5B,GACP,UAAAc,GACA,WAAYgB,OAAS3B,EAAW2B,EAAKzB,KAAK,EAAA,CAAE,EAEhD,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/modules/editor/components/Toolbar/TableToolbar.DelMenu.js

@@ -1,27 +1,28 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-import { Tooltip } from "../../../../components/Tooltip/Tooltip.js";
-import { Dropdown } from "../../../../components/Dropdown/Dropdown.js";
-import { Icon } from "../../../../components/Icon/Icon.js";
-const TableToolbarDelMenu = ({
-  editor
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { useTranslation as r } from "react-i18next";
+import { Tooltip as m } from "../../../../components/Tooltip/Tooltip.js";
+import { Dropdown as a } from "../../../../components/Dropdown/Dropdown.js";
+import { Icon as o } from "../../../../components/Icon/Icon.js";
+const s = ({
+  editor: l
 }) => {
   const {
-    t
-  } = useTranslation();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.table.toolbar.tooltip.del"), placement: "top", children: /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", label: t("tiptap.table.toolbar.del") }) }),
-    /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
-      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-row" }), onClick: () => editor == null ? void 0 : editor.chain().focus().deleteRow().run(), children: t("tiptap.table.toolbar.del.line") }, "del-row"),
-      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-column" }), onClick: () => editor == null ? void 0 : editor.chain().focus().deleteColumn().run(), children: t("tiptap.table.toolbar.del.col") }, "del-col"),
-      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
-      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-row-highlight" }), onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeaderRow().run(), children: t("tiptap.table.toolbar.del.line.head") }, "del-header-row"),
-      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-column-highlight" }), onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeaderColumn().run(), children: t("tiptap.table.toolbar.del.col.head") }, "del-header-col"),
-      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
-      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete" }), onClick: () => editor == null ? void 0 : editor.chain().focus().deleteTable().run(), children: t("tiptap.table.toolbar.del.array") }, "del-table")
+    t: n
+  } = r();
+  return /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(m, { message: n("tiptap.table.toolbar.tooltip.del"), placement: "top", children: /* @__PURE__ */ e(a.Trigger, { variant: "ghost", label: n("tiptap.table.toolbar.del") }) }),
+    /* @__PURE__ */ t(a.Menu, { children: [
+      /* @__PURE__ */ e(a.Item, { icon: /* @__PURE__ */ e(o, { name: "delete-row" }), onClick: () => l == null ? void 0 : l.chain().focus().deleteRow().run(), children: n("tiptap.table.toolbar.del.line") }, "del-row"),
+      /* @__PURE__ */ e(a.Item, { icon: /* @__PURE__ */ e(o, { name: "delete-column" }), onClick: () => l == null ? void 0 : l.chain().focus().deleteColumn().run(), children: n("tiptap.table.toolbar.del.col") }, "del-col"),
+      /* @__PURE__ */ e(a.Separator, {}),
+      /* @__PURE__ */ e(a.Item, { icon: /* @__PURE__ */ e(o, { name: "delete-row-highlight" }), onClick: () => l == null ? void 0 : l.chain().focus().toggleHeaderRow().run(), children: n("tiptap.table.toolbar.del.line.head") }, "del-header-row"),
+      /* @__PURE__ */ e(a.Item, { icon: /* @__PURE__ */ e(o, { name: "delete-column-highlight" }), onClick: () => l == null ? void 0 : l.chain().focus().toggleHeaderColumn().run(), children: n("tiptap.table.toolbar.del.col.head") }, "del-header-col"),
+      /* @__PURE__ */ e(a.Separator, {}),
+      /* @__PURE__ */ e(a.Item, { icon: /* @__PURE__ */ e(o, { name: "delete" }), onClick: () => l == null ? void 0 : l.chain().focus().deleteTable().run(), children: n("tiptap.table.toolbar.del.array") }, "del-table")
     ] })
   ] });
 };
 export {
-  TableToolbarDelMenu
+  s as TableToolbarDelMenu
 };
+//# sourceMappingURL=TableToolbar.DelMenu.js.map

package/dist/modules/editor/components/Toolbar/TableToolbar.DelMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.DelMenu.js","sources":["../../../../../src/modules/editor/components/Toolbar/TableToolbar.DelMenu.tsx"],"sourcesContent":["import { Editor } from '@tiptap/react';\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown, Icon, Tooltip } from '../../../..';\n\ninterface Props {\n  /**\n   * editor instance\n   */\n  editor: Editor | null;\n}\n\nexport const TableToolbarDelMenu = ({ editor }: Props) => {\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <Tooltip message={t('tiptap.table.toolbar.tooltip.del')} placement=\"top\">\n        <Dropdown.Trigger\n          variant=\"ghost\"\n          label={t('tiptap.table.toolbar.del')}\n        />\n      </Tooltip>\n      <Dropdown.Menu>\n        <Dropdown.Item\n          key=\"del-row\"\n          icon={<Icon name=\"delete-row\" />}\n          onClick={() => editor?.chain().focus().deleteRow().run()}\n        >\n          {t('tiptap.table.toolbar.del.line')}\n        </Dropdown.Item>\n        <Dropdown.Item\n          key=\"del-col\"\n          icon={<Icon name=\"delete-column\" />}\n          onClick={() => editor?.chain().focus().deleteColumn().run()}\n        >\n          {t('tiptap.table.toolbar.del.col')}\n        </Dropdown.Item>\n        <Dropdown.Separator />\n        <Dropdown.Item\n          key=\"del-header-row\"\n          icon={<Icon name=\"delete-row-highlight\" />}\n          onClick={() => editor?.chain().focus().toggleHeaderRow().run()}\n        >\n          {t('tiptap.table.toolbar.del.line.head')}\n        </Dropdown.Item>\n        <Dropdown.Item\n          key=\"del-header-col\"\n          icon={<Icon name=\"delete-column-highlight\" />}\n          onClick={() => editor?.chain().focus().toggleHeaderColumn().run()}\n        >\n          {t('tiptap.table.toolbar.del.col.head')}\n        </Dropdown.Item>\n        <Dropdown.Separator />\n        <Dropdown.Item\n          key=\"del-table\"\n          icon={<Icon name=\"delete\" />}\n          onClick={() => editor?.chain().focus().deleteTable().run()}\n        >\n          {t('tiptap.table.toolbar.del.array')}\n        </Dropdown.Item>\n      </Dropdown.Menu>\n    </>\n  );\n};\n"],"names":["TableToolbarDelMenu","editor","t","useTranslation","jsxs","Fragment","jsx","Tooltip","Dropdown","Icon","chain","focus","deleteRow","run","deleteColumn","toggleHeaderRow","toggleHeaderColumn","deleteTable"],"mappings":";;;;;AAWO,MAAMA,IAAsBA,CAAC;AAAA,EAAEC,QAAAA;AAAc,MAAM;AAClD,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe;AAE7B,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAQ,SAASL,EAAE,kCAAkC,GAAG,WAAU,OACjE,UAAA,gBAAAI,EAACE,EAAS,SAAT,EACC,SAAQ,SACR,OAAON,EAAE,0BAA0B,EAAE,CAAA,GAEzC;AAAA,IACA,gBAAAE,EAACI,EAAS,MAAT,EACC,UAAA;AAAA,MAAC,gBAAAF,EAAAE,EAAS,MAAT,EAEC,wBAAOC,GAAK,EAAA,MAAK,iBACjB,SAAS,MAAMR,KAAAA,gBAAAA,EAAQS,QAAQC,QAAQC,YAAYC,OAElDX,UAAAA,EAAE,+BAA+B,EAAA,GAJ9B,SAKN;AAAA,MACA,gBAAAI,EAACE,EAAS,MAAT,EAEC,wBAAOC,GAAK,EAAA,MAAK,oBACjB,SAAS,MAAMR,KAAAA,gBAAAA,EAAQS,QAAQC,QAAQG,eAAeD,OAErDX,UAAAA,EAAE,8BAA8B,EAAA,GAJ7B,SAKN;AAAA,MACA,gBAAAI,EAACE,EAAS,WAAT,EAAkB;AAAA,MACnB,gBAAAF,EAACE,EAAS,MAAT,EAEC,wBAAOC,GAAK,EAAA,MAAK,2BACjB,SAAS,MAAMR,KAAAA,gBAAAA,EAAQS,QAAQC,QAAQI,kBAAkBF,OAExDX,UAAAA,EAAE,oCAAoC,EAAA,GAJnC,gBAKN;AAAA,MACA,gBAAAI,EAACE,EAAS,MAAT,EAEC,wBAAOC,GAAK,EAAA,MAAK,8BACjB,SAAS,MAAMR,KAAAA,gBAAAA,EAAQS,QAAQC,QAAQK,qBAAqBH,OAE3DX,UAAAA,EAAE,mCAAmC,EAAA,GAJlC,gBAKN;AAAA,MACA,gBAAAI,EAACE,EAAS,WAAT,EAAkB;AAAA,MACnB,gBAAAF,EAACE,EAAS,MAAT,EAEC,wBAAOC,GAAK,EAAA,MAAK,aACjB,SAAS,MAAMR,KAAAA,gBAAAA,EAAQS,QAAQC,QAAQM,cAAcJ,OAEpDX,UAAAA,EAAE,gCAAgC,EAAA,GAJ/B,WAKN;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/modules/editor/components/Toolbar/TableToolbar.js

@@ -1,25 +1,25 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect } from "react";
-import { findParentNodeClosestToPos, FloatingMenu } from "@tiptap/react";
-import { useTranslation } from "react-i18next";
-import { TableToolbarAddMenu } from "./TableToolbar.AddMenu.js";
-import { TableToolbarCellColor } from "./TableToolbar.CellColor.js";
-import { TableToolbarDelMenu } from "./TableToolbar.DelMenu.js";
-import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
-import { Icon } from "../../../../components/Icon/Icon.js";
-const TableToolbar = ({
-  editor
+import { jsx as t } from "react/jsx-runtime";
+import { useState as i, useMemo as f, useEffect as u } from "react";
+import { findParentNodeClosestToPos as r, FloatingMenu as g } from "@tiptap/react";
+import { useTranslation as h } from "react-i18next";
+import { TableToolbarAddMenu as w } from "./TableToolbar.AddMenu.js";
+import { TableToolbarCellColor as y } from "./TableToolbar.CellColor.js";
+import { TableToolbarDelMenu as S } from "./TableToolbar.DelMenu.js";
+import { Toolbar as T } from "../../../../components/Toolbar/Toolbar.js";
+import { Icon as c } from "../../../../components/Icon/Icon.js";
+const P = ({
+  editor: e
 }) => {
   const {
-    t
-  } = useTranslation(), [isSpan, setSpan] = useState(void 0), tippyOptions = useMemo(() => {
-    function adjustRect(rect) {
-      let yOffset = 0;
+    t: p
+  } = h(), [a, m] = i(void 0), b = f(() => {
+    function l(n) {
+      let o = 0;
       if (window.visualViewport) {
-        const bottomScreen = window.innerHeight || document.documentElement.clientHeight;
-        rect.bottom >= bottomScreen && (yOffset += rect.bottom - bottomScreen - rect.height);
+        const s = window.innerHeight || document.documentElement.clientHeight;
+        n.bottom >= s && (o += n.bottom - s - n.height);
       }
-      return new DOMRect(rect.x, rect.y - yOffset, rect.width, rect.height);
+      return new DOMRect(n.x, n.y - o, n.width, n.height);
     }
     return {
       placement: "bottom",
@@ -28,41 +28,41 @@ const TableToolbar = ({
       // popperOptions: {modifiers: [ /*see popper v2 modifiers*/ ]},
       // Try to get the bounding rect of the table.
       getReferenceClientRect: () => {
-        const parentDiv = editor != null && editor.isActive("table") ? findParentNodeClosestToPos(editor.state.selection.$anchor, (node) => node.type.name === "table") : null;
-        if (parentDiv) {
-          const parentDomNode = editor == null ? void 0 : editor.view.nodeDOM(parentDiv.pos), tableDomNode = (parentDomNode == null ? void 0 : parentDomNode.querySelector("table")) || parentDomNode;
-          if (tableDomNode)
-            return adjustRect(tableDomNode.getBoundingClientRect());
+        const n = e != null && e.isActive("table") ? r(e.state.selection.$anchor, (o) => o.type.name === "table") : null;
+        if (n) {
+          const o = e == null ? void 0 : e.view.nodeDOM(n.pos), s = (o == null ? void 0 : o.querySelector("table")) || o;
+          if (s)
+            return l(s.getBoundingClientRect());
         }
         return new DOMRect(0, 0, 100, 100);
       }
     };
-  }, [editor]);
-  return useEffect(() => {
-    const cellAttr = editor == null ? void 0 : editor.getAttributes("tableCell"), headAttr = editor == null ? void 0 : editor.getAttributes("tableHeader");
-    if (typeof cellAttr < "u" || typeof headAttr < "u") {
-      const newSpan = (cellAttr == null ? void 0 : cellAttr.colspan) > 1 || (cellAttr == null ? void 0 : cellAttr.rowspan) > 1 || (headAttr == null ? void 0 : headAttr.colspan) > 1 || (headAttr == null ? void 0 : headAttr.rowspan) > 1;
-      newSpan !== isSpan && setSpan(newSpan);
+  }, [e]);
+  return u(() => {
+    const l = e == null ? void 0 : e.getAttributes("tableCell"), n = e == null ? void 0 : e.getAttributes("tableHeader");
+    if (typeof l < "u" || typeof n < "u") {
+      const o = (l == null ? void 0 : l.colspan) > 1 || (l == null ? void 0 : l.rowspan) > 1 || (n == null ? void 0 : n.colspan) > 1 || (n == null ? void 0 : n.rowspan) > 1;
+      o !== a && m(o);
     } else
-      isSpan && setSpan(void 0);
-  }, [editor, editor == null ? void 0 : editor.state, isSpan]), editor && /* @__PURE__ */ jsx(FloatingMenu, { editor, tippyOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && editor.isActive("table") || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: [{
+      a && m(void 0);
+  }, [e, e == null ? void 0 : e.state, a]), e && /* @__PURE__ */ t(g, { editor: e, tippyOptions: b, shouldShow: () => (e == null ? void 0 : e.isEditable) && e.isActive("table") || !1, children: /* @__PURE__ */ t(T, { className: "p-4", items: [{
     type: "dropdown",
     name: "bkg-col",
     // isEnable:
     //   typeof editor?.getAttributes("tableCell") !== "undefined",
     props: {
-      children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(TableToolbarCellColor, { editor, itemRefs })
+      children: (l, n) => /* @__PURE__ */ t(y, { editor: e, itemRefs: n })
     }
   }, {
     type: "icon",
     name: "mergeorsplit",
     // isEnable: typeof isSpan !== "undefined",
     props: {
-      icon: isSpan ? /* @__PURE__ */ jsx(Icon, { name: "split-cells" }) : /* @__PURE__ */ jsx(Icon, { name: "merge-cells" }),
-      "aria-label": t(isSpan ? "tiptap.table.toolbar.split" : "tiptap.table.toolbar.merge"),
-      onClick: () => editor == null ? void 0 : editor.chain().focus().mergeOrSplit().run()
+      icon: a ? /* @__PURE__ */ t(c, { name: "split-cells" }) : /* @__PURE__ */ t(c, { name: "merge-cells" }),
+      "aria-label": p(a ? "tiptap.table.toolbar.split" : "tiptap.table.toolbar.merge"),
+      onClick: () => e == null ? void 0 : e.chain().focus().mergeOrSplit().run()
     },
-    tooltip: t(isSpan ? "tiptap.table.toolbar.split" : "tiptap.table.toolbar.merge")
+    tooltip: p(a ? "tiptap.table.toolbar.split" : "tiptap.table.toolbar.merge")
   }, {
     type: "divider",
     name: "add-d0"
@@ -70,7 +70,7 @@ const TableToolbar = ({
     type: "dropdown",
     name: "add",
     props: {
-      children: () => /* @__PURE__ */ jsx(TableToolbarAddMenu, { editor })
+      children: () => /* @__PURE__ */ t(w, { editor: e })
     }
   }, {
     type: "divider",
@@ -79,10 +79,11 @@ const TableToolbar = ({
     type: "dropdown",
     name: "del",
     props: {
-      children: () => /* @__PURE__ */ jsx(TableToolbarDelMenu, { editor })
+      children: () => /* @__PURE__ */ t(S, { editor: e })
     }
   }] }) });
 };
 export {
-  TableToolbar as default
+  P as default
 };
+//# sourceMappingURL=TableToolbar.js.map

package/dist/modules/editor/components/Toolbar/TableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.js","sources":["../../../../../src/modules/editor/components/Toolbar/TableToolbar.tsx"],"sourcesContent":["import { RefAttributes, useEffect, useMemo, useState } from 'react';\n\nimport {\n  Editor,\n  FloatingMenu,\n  FloatingMenuProps,\n  findParentNodeClosestToPos,\n} from '@tiptap/react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Icon, IconButtonProps, Toolbar } from '../../../../components';\nimport { TableToolbarAddMenu } from './TableToolbar.AddMenu';\nimport { TableToolbarCellColor } from './TableToolbar.CellColor';\nimport { TableToolbarDelMenu } from './TableToolbar.DelMenu';\n\ninterface TableToolbarProps {\n  /**\n   * editor instance\n   */\n  editor: Editor | null;\n}\n\nconst TableToolbar = ({ editor }: TableToolbarProps) => {\n  const { t } = useTranslation();\n\n  // Display the Split action when truthy, and Merge action when falsy.\n  const [isSpan, setSpan] = useState<boolean | undefined>(undefined);\n\n  // Options need some computing\n  const tippyOptions: FloatingMenuProps['tippyOptions'] = useMemo(() => {\n    // Adjust a DOMRect to make it visible at a correct place.\n    function adjustRect(rect: DOMRect) {\n      let yOffset = 0;\n      if (window.visualViewport) {\n        const bottomScreen =\n          window.innerHeight || document.documentElement.clientHeight;\n        if (rect.bottom >= bottomScreen) {\n          yOffset += rect.bottom - bottomScreen - rect.height;\n        }\n      }\n      return new DOMRect(rect.x, rect.y - yOffset, rect.width, rect.height);\n    }\n\n    return {\n      placement: 'bottom',\n      offset: [0, 0],\n      zIndex: 999,\n      // popperOptions: {modifiers: [ /*see popper v2 modifiers*/ ]},\n      // Try to get the bounding rect of the table.\n      getReferenceClientRect: () => {\n        const parentDiv = editor?.isActive('table')\n          ? findParentNodeClosestToPos(\n              editor.state.selection.$anchor,\n              (node) => node.type.name === 'table',\n            )\n          : null;\n\n        // Try to retrieve the <div class=\"tableWrapper\"> that wraps the <table>\n        if (parentDiv) {\n          const parentDomNode = editor?.view.nodeDOM(parentDiv.pos) as\n            | HTMLElement\n            | undefined;\n\n          const tableDomNode =\n            parentDomNode?.querySelector('table') || parentDomNode;\n          if (tableDomNode) {\n            return adjustRect(tableDomNode.getBoundingClientRect());\n          }\n        }\n\n        // This should never happen... but it keeps the transpiler happy.\n        return new DOMRect(0, 0, 100, 100);\n      },\n    };\n  }, [editor]);\n\n  useEffect(() => {\n    const cellAttr = editor?.getAttributes('tableCell');\n    const headAttr = editor?.getAttributes('tableHeader');\n    if (typeof cellAttr !== 'undefined' || typeof headAttr !== 'undefined') {\n      const newSpan =\n        cellAttr?.['colspan'] > 1 ||\n        cellAttr?.['rowspan'] > 1 ||\n        headAttr?.['colspan'] > 1 ||\n        headAttr?.['rowspan'] > 1;\n      newSpan !== isSpan && setSpan(newSpan);\n    } else {\n      isSpan && setSpan(undefined);\n    }\n  }, [editor, editor?.state, isSpan]);\n\n  const handleShouldShow = () =>\n    (editor?.isEditable && editor.isActive('table')) || false;\n\n  return (\n    editor && (\n      <FloatingMenu\n        editor={editor}\n        tippyOptions={tippyOptions}\n        shouldShow={handleShouldShow}\n      >\n        <Toolbar\n          className=\"p-4\"\n          items={[\n            {\n              type: 'dropdown',\n              name: 'bkg-col',\n              // isEnable:\n              //   typeof editor?.getAttributes(\"tableCell\") !== \"undefined\",\n              props: {\n                children: (\n                  triggerProps: JSX.IntrinsicAttributes &\n                    Omit<IconButtonProps, 'ref'> &\n                    RefAttributes<HTMLButtonElement>,\n                  itemRefs,\n                ) => (\n                  <TableToolbarCellColor editor={editor} itemRefs={itemRefs} />\n                ),\n              },\n            },\n            {\n              type: 'icon',\n              name: 'mergeorsplit',\n              // isEnable: typeof isSpan !== \"undefined\",\n              props: {\n                icon: isSpan ? (\n                  <Icon name=\"split-cells\" />\n                ) : (\n                  <Icon name=\"merge-cells\" />\n                ),\n                'aria-label': isSpan\n                  ? t('tiptap.table.toolbar.split')\n                  : t('tiptap.table.toolbar.merge'),\n                onClick: () => editor?.chain().focus().mergeOrSplit().run(),\n              },\n              tooltip: isSpan\n                ? t('tiptap.table.toolbar.split')\n                : t('tiptap.table.toolbar.merge'),\n            },\n            {\n              type: 'divider',\n              name: 'add-d0',\n            },\n            {\n              type: 'dropdown',\n              name: 'add',\n              props: {\n                children: () => <TableToolbarAddMenu editor={editor} />,\n              },\n            },\n            {\n              type: 'divider',\n              name: 'add-d1',\n            },\n            {\n              type: 'dropdown',\n              name: 'del',\n              props: {\n                children: () => <TableToolbarDelMenu editor={editor} />,\n              },\n            },\n          ]}\n        />\n      </FloatingMenu>\n    )\n  );\n};\n\nexport default TableToolbar;\n"],"names":["TableToolbar","editor","t","useTranslation","isSpan","setSpan","useState","undefined","tippyOptions","useMemo","adjustRect","rect","yOffset","window","visualViewport","bottomScreen","innerHeight","document","documentElement","clientHeight","bottom","height","DOMRect","x","y","width","placement","offset","zIndex","getReferenceClientRect","parentDiv","isActive","findParentNodeClosestToPos","state","selection","$anchor","node","type","name","parentDomNode","view","nodeDOM","pos","tableDomNode","querySelector","getBoundingClientRect","useEffect","cellAttr","getAttributes","headAttr","newSpan","jsx","FloatingMenu","handleShouldShow","isEditable","Toolbar","props","children","triggerProps","itemRefs","TableToolbarCellColor","icon","Icon","onClick","chain","focus","mergeOrSplit","run","tooltip","TableToolbarAddMenu","TableToolbarDelMenu"],"mappings":"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"}

package/dist/modules/editor/hooks/useActionOptions.js

@@ -1,19 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-import { Icon } from "../../../components/Icon/Icon.js";
-const useActionOptions = (editor, toggleMathsModal, mediaLibraryRef) => {
+import { jsx as t } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
+import { Icon as l } from "../../../components/Icon/Icon.js";
+const f = (a, s, i) => {
   const {
-    t
-  } = useTranslation(), options = [{
-    icon: /* @__PURE__ */ jsx(Icon, { name: "text-vanilla" }),
-    label: t("tiptap.toolbar.removeFormat"),
-    action: () => editor == null ? void 0 : editor.chain().clearNodes().unsetAllMarks().run()
+    t: n
+  } = u(), o = [{
+    icon: /* @__PURE__ */ t(l, { name: "text-vanilla" }),
+    label: n("tiptap.toolbar.removeFormat"),
+    action: () => a == null ? void 0 : a.chain().clearNodes().unsetAllMarks().run()
   }, {
     type: "divider"
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "table" }),
-    label: t("tiptap.toolbar.table"),
-    action: () => editor == null ? void 0 : editor.chain().focus().insertTable({
+    icon: /* @__PURE__ */ t(l, { name: "table" }),
+    label: n("tiptap.toolbar.table"),
+    action: () => a == null ? void 0 : a.chain().focus().insertTable({
       rows: 3,
       cols: 3,
       withHeaderRow: !0
@@ -21,55 +21,56 @@ const useActionOptions = (editor, toggleMathsModal, mediaLibraryRef) => {
   }, {
     type: "divider"
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "superscript" }),
-    label: t("tiptap.toolbar.superscript"),
-    action: () => editor == null ? void 0 : editor.chain().focus().toggleSuperscript().run()
+    icon: /* @__PURE__ */ t(l, { name: "superscript" }),
+    label: n("tiptap.toolbar.superscript"),
+    action: () => a == null ? void 0 : a.chain().focus().toggleSuperscript().run()
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "subscript" }),
-    label: t("tiptap.toolbar.subscript"),
-    action: () => editor == null ? void 0 : editor.chain().focus().toggleSubscript().run()
+    icon: /* @__PURE__ */ t(l, { name: "subscript" }),
+    label: n("tiptap.toolbar.subscript"),
+    action: () => a == null ? void 0 : a.chain().focus().toggleSubscript().run()
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "square-root" }),
-    label: t("tiptap.toolbar.mathjax"),
+    icon: /* @__PURE__ */ t(l, { name: "square-root" }),
+    label: n("tiptap.toolbar.mathjax"),
     action: () => {
-      toggleMathsModal();
+      s();
     }
   }, {
     type: "divider"
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "code" }),
-    label: t("tiptap.toolbar.embed.iframe"),
+    icon: /* @__PURE__ */ t(l, { name: "code" }),
+    label: n("tiptap.toolbar.embed.iframe"),
     action: () => {
-      var _a;
-      return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("embedder");
+      var c;
+      return (c = i.current) == null ? void 0 : c.show("embedder");
     }
-  }], listOptions = [{
-    icon: /* @__PURE__ */ jsx(Icon, { name: "bullet-list" }),
-    label: t("tiptap.toolbar.ulist"),
-    action: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run()
+  }], p = [{
+    icon: /* @__PURE__ */ t(l, { name: "bullet-list" }),
+    label: n("tiptap.toolbar.ulist"),
+    action: () => a == null ? void 0 : a.chain().focus().toggleBulletList().run()
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "ordered-list" }),
-    label: t("tiptap.toolbar.olist"),
-    action: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run()
-  }], alignmentOptions = [{
-    icon: /* @__PURE__ */ jsx(Icon, { name: "align-left" }),
-    label: t("tiptap.toolbar.text.left"),
-    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("left").run()
+    icon: /* @__PURE__ */ t(l, { name: "ordered-list" }),
+    label: n("tiptap.toolbar.olist"),
+    action: () => a == null ? void 0 : a.chain().focus().toggleOrderedList().run()
+  }], e = [{
+    icon: /* @__PURE__ */ t(l, { name: "align-left" }),
+    label: n("tiptap.toolbar.text.left"),
+    action: () => a == null ? void 0 : a.chain().focus().setTextAlign("left").run()
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "align-center" }),
-    label: t("tiptap.toolbar.text.center"),
-    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("center").run()
+    icon: /* @__PURE__ */ t(l, { name: "align-center" }),
+    label: n("tiptap.toolbar.text.center"),
+    action: () => a == null ? void 0 : a.chain().focus().setTextAlign("center").run()
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "align-right" }),
-    label: t("tiptap.toolbar.text.right"),
-    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("right").run()
+    icon: /* @__PURE__ */ t(l, { name: "align-right" }),
+    label: n("tiptap.toolbar.text.right"),
+    action: () => a == null ? void 0 : a.chain().focus().setTextAlign("right").run()
   }, {
-    icon: /* @__PURE__ */ jsx(Icon, { name: "align-justify" }),
-    label: t("tiptap.toolbar.text.justify"),
-    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("justify").run()
+    icon: /* @__PURE__ */ t(l, { name: "align-justify" }),
+    label: n("tiptap.toolbar.text.justify"),
+    action: () => a == null ? void 0 : a.chain().focus().setTextAlign("justify").run()
   }];
-  return [options, listOptions, alignmentOptions];
+  return [o, p, e];
 };
 export {
-  useActionOptions
+  f as useActionOptions
 };
+//# sourceMappingURL=useActionOptions.js.map

package/dist/modules/editor/hooks/useActionOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActionOptions.js","sources":["../../../../src/modules/editor/hooks/useActionOptions.tsx"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { Editor } from '@tiptap/react';\nimport { useTranslation } from 'react-i18next';\nimport { DropdownMenuOptions, Icon } from '../../..';\nimport { MediaLibraryRef } from '../../multimedia';\n\nexport const useActionOptions = (\n  editor: Editor | null,\n  toggleMathsModal: Function,\n  mediaLibraryRef: RefObject<MediaLibraryRef>,\n) => {\n  const { t } = useTranslation();\n  const options: DropdownMenuOptions[] = [\n    {\n      icon: <Icon name=\"text-vanilla\" />,\n      label: t('tiptap.toolbar.removeFormat'),\n      action: () => editor?.chain().clearNodes().unsetAllMarks().run(),\n    },\n    {\n      type: 'divider',\n    },\n    {\n      icon: <Icon name=\"table\" />,\n      label: t('tiptap.toolbar.table'),\n      action: () =>\n        editor\n          ?.chain()\n          .focus()\n          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n          .run(),\n    },\n    {\n      type: 'divider',\n    },\n    {\n      icon: <Icon name=\"superscript\" />,\n      label: t('tiptap.toolbar.superscript'),\n      action: () => editor?.chain().focus().toggleSuperscript().run(),\n    },\n    {\n      icon: <Icon name=\"subscript\" />,\n      label: t('tiptap.toolbar.subscript'),\n      action: () => editor?.chain().focus().toggleSubscript().run(),\n    },\n    {\n      icon: <Icon name=\"square-root\" />,\n      label: t('tiptap.toolbar.mathjax'),\n      action: () => {\n        toggleMathsModal();\n      },\n    },\n    {\n      type: 'divider',\n    },\n    {\n      icon: <Icon name=\"code\" />,\n      label: t('tiptap.toolbar.embed.iframe'),\n      action: () => mediaLibraryRef.current?.show('embedder'),\n    },\n  ];\n  const listOptions: DropdownMenuOptions[] = [\n    {\n      icon: <Icon name=\"bullet-list\" />,\n      label: t('tiptap.toolbar.ulist'),\n      action: () => editor?.chain().focus().toggleBulletList().run(),\n    },\n    {\n      icon: <Icon name=\"ordered-list\" />,\n      label: t('tiptap.toolbar.olist'),\n      action: () => editor?.chain().focus().toggleOrderedList().run(),\n    },\n  ];\n  const alignmentOptions: DropdownMenuOptions[] = [\n    {\n      icon: <Icon name=\"align-left\" />,\n      label: t('tiptap.toolbar.text.left'),\n      action: () => editor?.chain().focus().setTextAlign('left').run(),\n    },\n    {\n      icon: <Icon name=\"align-center\" />,\n      label: t('tiptap.toolbar.text.center'),\n      action: () => editor?.chain().focus().setTextAlign('center').run(),\n    },\n    {\n      icon: <Icon name=\"align-right\" />,\n      label: t('tiptap.toolbar.text.right'),\n      action: () => editor?.chain().focus().setTextAlign('right').run(),\n    },\n    {\n      icon: <Icon name=\"align-justify\" />,\n      label: t('tiptap.toolbar.text.justify'),\n      action: () => editor?.chain().focus().setTextAlign('justify').run(),\n    },\n  ];\n  return [options, listOptions, alignmentOptions];\n};\n"],"names":["useActionOptions","editor","toggleMathsModal","mediaLibraryRef","t","useTranslation","options","icon","jsx","Icon","label","action","chain","clearNodes","unsetAllMarks","run","type","focus","insertTable","rows","cols","withHeaderRow","toggleSuperscript","toggleSubscript","current","show","listOptions","toggleBulletList","toggleOrderedList","alignmentOptions","setTextAlign"],"mappings":";;;AAOO,MAAMA,IAAmBA,CAC9BC,GACAC,GACAC,MACG;AACG,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvBC,IAAiC,CACrC;AAAA,IACEC,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,eAAiB,CAAA;AAAA,IAClCC,OAAON,EAAE,6BAA6B;AAAA,IACtCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQC,aAAaC,gBAAgBC;AAAAA,EAAI,GAEjE;AAAA,IACEC,MAAM;AAAA,EAAA,GAER;AAAA,IACET,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,QAAU,CAAA;AAAA,IAC3BC,OAAON,EAAE,sBAAsB;AAAA,IAC/BO,QAAQA,MACNV,KAAAA,gBAAAA,EACIW,QACDK,QACAC,YAAY;AAAA,MAAEC,MAAM;AAAA,MAAGC,MAAM;AAAA,MAAGC,eAAe;AAAA,IAAM,GACrDN;AAAAA,EAAI,GAEX;AAAA,IACEC,MAAM;AAAA,EAAA,GAER;AAAA,IACET,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,cAAgB,CAAA;AAAA,IACjCC,OAAON,EAAE,4BAA4B;AAAA,IACrCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQK,oBAAoBP;AAAAA,EAAI,GAEhE;AAAA,IACER,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,YAAc,CAAA;AAAA,IAC/BC,OAAON,EAAE,0BAA0B;AAAA,IACnCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQM,kBAAkBR;AAAAA,EAAI,GAE9D;AAAA,IACER,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,cAAgB,CAAA;AAAA,IACjCC,OAAON,EAAE,wBAAwB;AAAA,IACjCO,QAAQA,MAAM;AACK,MAAAT;IACnB;AAAA,EAAA,GAEF;AAAA,IACEc,MAAM;AAAA,EAAA,GAER;AAAA,IACET,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,OAAS,CAAA;AAAA,IAC1BC,OAAON,EAAE,6BAA6B;AAAA,IACtCO,QAAQA,MAAAA;;AAAMR,cAAAA,IAAAA,EAAgBqB,YAAhBrB,gBAAAA,EAAyBsB,KAAK;AAAA;AAAA,EAAU,CACvD,GAEGC,IAAqC,CACzC;AAAA,IACEnB,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,cAAgB,CAAA;AAAA,IACjCC,OAAON,EAAE,sBAAsB;AAAA,IAC/BO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQU,mBAAmBZ;AAAAA,EAAI,GAE/D;AAAA,IACER,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,eAAiB,CAAA;AAAA,IAClCC,OAAON,EAAE,sBAAsB;AAAA,IAC/BO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQW,oBAAoBb;AAAAA,EAAI,CAC/D,GAEGc,IAA0C,CAC9C;AAAA,IACEtB,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,aAAe,CAAA;AAAA,IAChCC,OAAON,EAAE,0BAA0B;AAAA,IACnCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQa,aAAa,QAAQf;AAAAA,EAAI,GAEjE;AAAA,IACER,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,eAAiB,CAAA;AAAA,IAClCC,OAAON,EAAE,4BAA4B;AAAA,IACrCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQa,aAAa,UAAUf;AAAAA,EAAI,GAEnE;AAAA,IACER,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,cAAgB,CAAA;AAAA,IACjCC,OAAON,EAAE,2BAA2B;AAAA,IACpCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQa,aAAa,SAASf;AAAAA,EAAI,GAElE;AAAA,IACER,MAAM,gBAAAC,EAACC,GAAK,EAAA,MAAK,gBAAkB,CAAA;AAAA,IACnCC,OAAON,EAAE,6BAA6B;AAAA,IACtCO,QAAQA,MAAMV,KAAAA,gBAAAA,EAAQW,QAAQK,QAAQa,aAAa,WAAWf;AAAAA,EAAI,CACnE;AAEI,SAAA,CAACT,GAASoB,GAAaG,CAAgB;AAChD;"}

package/dist/modules/editor/hooks/useCommentEditor.js

@@ -1,37 +1,38 @@
-import { useState, useEffect } from "react";
-import { Hyperlink } from "@edifice.io/tiptap-extensions";
-import CharacterCount from "@tiptap/extension-character-count";
-import { useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-const useCommentEditor = (editable, content, maxLength = 800) => {
-  const [commentLength, setCommentLength] = useState(0), editor = useEditor({
-    editable,
-    extensions: [StarterKit, Hyperlink, CharacterCount.configure({
-      limit: maxLength
+import { useState as a, useEffect as e } from "react";
+import { Hyperlink as C } from "@edifice.io/tiptap-extensions";
+import f from "@tiptap/extension-character-count";
+import { useEditor as p } from "@tiptap/react";
+import g from "@tiptap/starter-kit";
+const k = (n, m, r = 800) => {
+  const [c, o] = a(0), t = p({
+    editable: n,
+    extensions: [g, C, f.configure({
+      limit: r
     })],
-    content
+    content: m
   });
-  return useEffect(() => {
-    editor == null || editor.commands.setContent(content);
-  }, [content, editor]), useEffect(() => {
-    editor == null || editor.setEditable(editable);
-  }, [editable, editor]), useEffect(() => {
-    function setCounter() {
-      const length = (editor == null ? void 0 : editor.storage.characterCount.characters()) ?? 0;
-      setCommentLength(length);
+  return e(() => {
+    t == null || t.commands.setContent(m);
+  }, [m, t]), e(() => {
+    t == null || t.setEditable(n);
+  }, [n, t]), e(() => {
+    function s() {
+      const u = (t == null ? void 0 : t.storage.characterCount.characters()) ?? 0;
+      o(u);
     }
-    return editor == null || editor.on("update", setCounter), () => {
-      editor == null || editor.off("update", setCounter);
+    return t == null || t.on("update", s), () => {
+      t == null || t.off("update", s);
     };
-  }, [editor]), {
-    editor,
-    commentLength,
-    getComment: () => editor == null ? void 0 : editor.getHTML(),
+  }, [t]), {
+    editor: t,
+    commentLength: c,
+    getComment: () => t == null ? void 0 : t.getHTML(),
     resetComment: () => {
-      setCommentLength(0), editor == null || editor.commands.setContent(content);
+      o(0), t == null || t.commands.setContent(m);
     }
   };
 };
 export {
-  useCommentEditor
+  k as useCommentEditor
 };
+//# sourceMappingURL=useCommentEditor.js.map

package/dist/modules/editor/hooks/useCommentEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCommentEditor.js","sources":["../../../../src/modules/editor/hooks/useCommentEditor.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { Hyperlink } from '@edifice.io/tiptap-extensions';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Content, HTMLContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\n\n/**\n * Hook that creates a tiptap editor instance with plugins for editing comments.\n *\n * @param editable truthy if the editor content should be editable\n * @param content default rich content\n */\nexport const useCommentEditor = (\n  editable: boolean,\n  content: Content,\n  maxLength = 800,\n) => {\n  const [commentLength, setCommentLength] = useState(0);\n\n  const editor = useEditor({\n    editable,\n    extensions: [\n      StarterKit,\n      Hyperlink,\n      CharacterCount.configure({ limit: maxLength }),\n    ],\n    content,\n  });\n\n  // When content is updated through props, render it.\n  useEffect(() => {\n    editor?.commands.setContent(content);\n  }, [content, editor]);\n\n  // When editable flag is changing, so does the corresponding editor's property.\n  useEffect(() => {\n    editor?.setEditable(editable);\n  }, [editable, editor]);\n\n  // When content is updated manually, update the characters counter.\n  useEffect(() => {\n    function setCounter() {\n      const length = editor?.storage.characterCount.characters() ?? 0;\n      setCommentLength(length);\n    }\n\n    editor?.on('update', setCounter);\n\n    return () => {\n      editor?.off('update', setCounter);\n    };\n  }, [editor]);\n\n  const getComment = () => editor?.getHTML() as HTMLContent;\n  const resetComment = () => {\n    setCommentLength(0);\n    editor?.commands.setContent(content);\n  };\n\n  return { editor, commentLength, getComment, resetComment };\n};\n"],"names":["useCommentEditor","editable","content","maxLength","commentLength","setCommentLength","useState","editor","useEditor","extensions","StarterKit","Hyperlink","CharacterCount","configure","limit","useEffect","commands","setContent","setEditable","setCounter","length","storage","characterCount","characters","on","off","getComment","getHTML","resetComment"],"mappings":";;;;;AAaO,MAAMA,IAAmBA,CAC9BC,GACAC,GACAC,IAAY,QACT;AACH,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAE9CC,IAASC,EAAU;AAAA,IACvBP,UAAAA;AAAAA,IACAQ,YAAY,CACVC,GACAC,GACAC,EAAeC,UAAU;AAAA,MAAEC,OAAOX;AAAAA,IAAAA,CAAW,CAAC;AAAA,IAEhDD,SAAAA;AAAAA,EAAAA,CACD;AAGDa,SAAAA,EAAU,MAAM;AACNC,IAAAA,KAAAA,QAAAA,EAAAA,SAASC,WAAWf;AAAAA,EAAO,GAClC,CAACA,GAASK,CAAM,CAAC,GAGpBQ,EAAU,MAAM;AACdR,IAAAA,KAAAA,QAAAA,EAAQW,YAAYjB;AAAAA,EAAQ,GAC3B,CAACA,GAAUM,CAAM,CAAC,GAGrBQ,EAAU,MAAM;AACd,aAASI,IAAa;AACpB,YAAMC,KAASb,KAAAA,gBAAAA,EAAQc,QAAQC,eAAeC,iBAAgB;AAC9DlB,MAAAA,EAAiBe,CAAM;AAAA,IACzB;AAEQI,WAAAA,KAAAA,QAAAA,EAAAA,GAAG,UAAUL,IAEd,MAAM;AACHM,MAAAA,KAAAA,QAAAA,EAAAA,IAAI,UAAUN;AAAAA,IAAU;AAAA,EAClC,GACC,CAACZ,CAAM,CAAC,GAQJ;AAAA,IAAEA,QAAAA;AAAAA,IAAQH,eAAAA;AAAAA,IAAesB,YANbA,MAAMnB,KAAAA,gBAAAA,EAAQoB;AAAAA,IAMWC,cALvBA,MAAM;AACzBvB,MAAAA,EAAiB,CAAC,GACVW,KAAAA,QAAAA,EAAAA,SAASC,WAAWf;AAAAA,IAAO;AAAA,EAGO0B;AAC9C;"}

package/dist/modules/editor/hooks/useEditorContext.js

@@ -1,12 +1,13 @@
-import { createContext, useContext } from "react";
-const EditorContext = /* @__PURE__ */ createContext(null);
-function useEditorContext() {
-  const context = useContext(EditorContext);
-  if (!context)
+import { createContext as o, useContext as e } from "react";
+const n = /* @__PURE__ */ o(null);
+function c() {
+  const t = e(n);
+  if (!t)
     throw new Error("Editor compound components cannot be rendered outside the Editor component");
-  return context;
+  return t;
 }
 export {
-  EditorContext,
-  useEditorContext
+  n as EditorContext,
+  c as useEditorContext
 };
+//# sourceMappingURL=useEditorContext.js.map

package/dist/modules/editor/hooks/useEditorContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorContext.js","sources":["../../../../src/modules/editor/hooks/useEditorContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { Editor } from '@tiptap/react';\n\nexport const EditorContext = createContext<{\n  /**\n   * Application code (example: \"blog\")\n   */\n  appCode: string;\n\n  /**\n   * TipTap editor instance\n   */\n  editor: Editor | null;\n  /**\n   * To know if TipTap editor is editable\n   */\n  editable: boolean;\n  /**\n   * Id of the editor's HTMLElement\n   */\n  id: string;\n}>(null!);\n\nexport function useEditorContext() {\n  const context = useContext(EditorContext);\n  if (!context) {\n    throw new Error(\n      `Editor compound components cannot be rendered outside the Editor component`,\n    );\n  }\n  return context;\n}\n"],"names":["EditorContext","useEditorContext","context","useContext","Error"],"mappings":";AAIaA,MAAAA,sBAkBV,IAAK;AAED,SAASC,IAAmB;AAC3BC,QAAAA,IAAUC,EAAWH,CAAa;AACxC,MAAI,CAACE;AACG,UAAA,IAAIE,MACR,4EACF;AAEKF,SAAAA;AACT;"}

package/dist/modules/editor/hooks/useImageModal.d.ts

@@ -1,3 +1,4 @@
+import { WorkspaceVisibility } from '@edifice.io/ts-client';
 import { Editor } from '@tiptap/react';
 type EditedImage = {
     src: string;
@@ -15,7 +16,7 @@ type EditedImage = {
  * `handleSave`: Success event handler,
  * }
  */
-export declare const useImageModal: (editor: Editor | null, application?: string, visibility?: any) => {
+export declare const useImageModal: (editor: Editor | null, application?: string, visibility?: WorkspaceVisibility) => {
     isOpen: boolean;
     currentImage: EditedImage;
     toggle: any;