@uva-glass/component-library 3.54.3 → 3.55.1

package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js

@@ -1,25 +1,25 @@
 import { jsx as f } from "react/jsx-runtime";
 import { o as I } from "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
-import { b, k as _, x as v, a as K, m as N, p as P, u as y } from "../../../../LexicalList.prod-D3TdO_Pq.js";
+import { b, k as _, x as v, a as K, m as N, p as P, u as y } from "../../../../LexicalList.prod-C6cknPBV.js";
 import { useState as p, useEffect as k } from "react";
-import { c as O } from "../../../../clsx-OuTLNxxd.js";
-import { aO as $, ap as w, ab as U, $ as D, w as S, H as B } from "../../../../Lexical.prod-A4JuKqM3.js";
-import { v as E } from "../../../../LexicalUtils.prod-CAsHFX57.js";
+import { c as $ } from "../../../../clsx-OuTLNxxd.js";
+import { ap as w, aq as O, ab as U, $ as D, w as S, H as B } from "../../../../Lexical.prod-o6Eq_uLx.js";
+import { v as E } from "../../../../LexicalUtils.prod-CF7x-KWm.js";
 import { Icon as H } from "../../../Icon/Icon.js";
-import { s as n } from "../../../../RteEditor.module-DaBh86FK.js";
+import { s as n } from "../../../../RteEditor.module-CoTOIw5i.js";
 import { useTranslation as j } from "../../hooks/useTranslation.js";
-const z = {
+const q = {
   bullet: "BulletList",
   number: "NumberedList"
-}, Q = ["bullet", "number"], W = () => {
+}, z = ["bullet", "number"], W = () => {
   const m = j(), [e] = I(), [h, s] = p(null), [u, g] = p(!1), [c, L] = p(!1), x = (t) => {
     t === "number" && h !== "number" ? (e.dispatchCommand(_, void 0), s("number")) : t === "bullet" && h !== "bullet" ? (e.dispatchCommand(v, void 0), s("bullet")) : (e.dispatchCommand(b, void 0), s(null));
   };
   return k(() => {
     const t = e.registerCommand(
-      $,
+      w,
       (o) => o.ctrlKey && o.shiftKey && o.code === "Digit7" ? (o.preventDefault(), c ? e.dispatchCommand(b, void 0) : e.dispatchCommand(_, void 0), !0) : o.ctrlKey && o.shiftKey && o.code === "Digit8" ? (o.preventDefault(), u ? e.dispatchCommand(b, void 0) : e.dispatchCommand(v, void 0), !0) : !1,
-      w
+      O
     );
     return () => {
       t();
@@ -59,12 +59,12 @@ const z = {
     return () => {
       o(), t();
     };
-  }, [e]), /* @__PURE__ */ f("div", { className: n["editor__toolbar-button-group"], children: Q.map((t) => /* @__PURE__ */ f(
+  }, [e]), /* @__PURE__ */ f("div", { className: n["editor__toolbar-button-group"], children: z.map((t) => /* @__PURE__ */ f(
     "button",
     {
       onClick: () => x(t),
       title: m.format[`${t}Tooltip`],
-      className: O(
+      className: $(
         n["editor__toolbar-button"],
         n[`editor__toolbar-button--${t}`],
         t === "bullet" && u && n["editor__toolbar-button--active"],
@@ -73,7 +73,7 @@ const z = {
       "aria-label": m.aria.labels[t],
       "aria-keyshortcuts": m.aria.keyshortcuts[t],
       type: "button",
-      children: /* @__PURE__ */ f(H, { name: z[t], size: 24 })
+      children: /* @__PURE__ */ f(H, { name: q[t], size: 24 })
     },
     t
   )) });

package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js

@@ -1,8 +1,8 @@
 import { o as m } from "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
 import { useEffect as c } from "react";
-import { o as p, ap as f, $ as u } from "../../../../Lexical.prod-A4JuKqM3.js";
-import { A as i } from "../../../../LexicalUtils.prod-CAsHFX57.js";
-import { R as d } from "../../../../LexicalClipboard.prod-CoyZP29w.js";
+import { o as f, aq as p, $ as u } from "../../../../Lexical.prod-o6Eq_uLx.js";
+import { A as i } from "../../../../LexicalUtils.prod-CF7x-KWm.js";
+import { R as d } from "../../../../LexicalClipboard.prod-CnUrf2_p.js";
 import { d as D } from "../../../../index-yEhaxKq-.js";
 const P = () => {
   const [e] = m(), l = (t) => {
@@ -16,9 +16,9 @@ const P = () => {
   };
   return c(() => {
     const t = e.registerCommand(
-      p,
+      f,
       (r) => r instanceof ClipboardEvent ? (l(r), !0) : !1,
-      f
+      p
     );
     return () => {
       t();

package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.js

@@ -1,10 +1,10 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
-import { T as b } from "../../../../TableCellResizerPlugin-ffA1s2mD.js";
-import "../../../../LexicalTable.prod-bzYpvqMi.js";
-import "../../../../LexicalUtils.prod-CAsHFX57.js";
-import "../../../../Lexical.prod-A4JuKqM3.js";
+import { T as b } from "../../../../TableCellResizerPlugin-qMtSAoKT.js";
+import "../../../../LexicalTable.prod-upbwOtcE.js";
+import "../../../../LexicalUtils.prod-CF7x-KWm.js";
+import "../../../../Lexical.prod-o6Eq_uLx.js";
 import "react-dom";
 import "../TablePlugin/helpers.js";
 import "../../nodes/TableWrapperNode/TableWrapperNode.js";

package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/index.js

@@ -1,4 +1,4 @@
-import { T as r } from "../../../../TableCellResizerPlugin-ffA1s2mD.js";
+import { T as r } from "../../../../TableCellResizerPlugin-qMtSAoKT.js";
 export {
   r as TableCellResizerPlugin
 };

package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { b as G } from "../../../../TablePlugin-CzmrXpxk.js";
+import { b as G } from "../../../../TablePlugin-BRZcXq73.js";
 import "../../../Accordion/Accordion.js";
 import "../../../Buttons/Button.js";
 import "../../../Buttons/LinkButton.js";

package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js

@@ -1,11 +1,11 @@
 import "react/jsx-runtime";
 import "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
 import "../../../../clsx-OuTLNxxd.js";
-import "../../../../LexicalTable.prod-bzYpvqMi.js";
-import "../../../../Lexical.prod-A4JuKqM3.js";
-import "../../../../LexicalUtils.prod-CAsHFX57.js";
+import "../../../../LexicalTable.prod-upbwOtcE.js";
+import "../../../../Lexical.prod-o6Eq_uLx.js";
+import "../../../../LexicalUtils.prod-CF7x-KWm.js";
 import "react";
-import { T as L } from "../../../../TablePlugin-CzmrXpxk.js";
+import { T as L } from "../../../../TablePlugin-BRZcXq73.js";
 import "./helpers.js";
 import "../../nodes/TableWrapperNode/TableWrapperNode.js";
 import "../../hooks/useFlyout.js";
@@ -24,7 +24,7 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../RteEditor.module-DaBh86FK.js";
+import "../../../../RteEditor.module-CoTOIw5i.js";
 import "../../hooks/useTranslation.js";
 import "../../Providers/LanguageProvider.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";

package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js

@@ -1,5 +1,5 @@
-import { l as p, M as i, X as w, u as T, V as u, q as b, r as E, Y as D, L as g, e as I, U as R, E as x } from "../../../../LexicalTable.prod-bzYpvqMi.js";
-import { V as S } from "../../../../Lexical.prod-A4JuKqM3.js";
+import { l as p, M as i, X as w, u as T, V as u, q as b, r as E, Y as D, L as g, e as I, U as R, E as x } from "../../../../LexicalTable.prod-upbwOtcE.js";
+import { V as S } from "../../../../Lexical.prod-o6Eq_uLx.js";
 import { TableWrapperNode as N } from "../../nodes/TableWrapperNode/TableWrapperNode.js";
 import "react";
 const F = 32, a = 48, W = 1, M = 200, P = 320, H = (t, e) => {

package/dist/components/RteEditor/Plugins/TablePlugin/index.js

@@ -1,4 +1,4 @@
-import { T as o } from "../../../../TablePlugin-CzmrXpxk.js";
+import { T as o } from "../../../../TablePlugin-BRZcXq73.js";
 import { TableCellContextMenu as t } from "./TableCellContextMenu/TableCellContextMenu.js";
 export {
   t as TableCellContextMenu,

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js

@@ -1,85 +1,90 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { o as E } from "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
-import { $ as g, w, m as L } from "../../../../Lexical.prod-A4JuKqM3.js";
-import { useState as T, useRef as N, useCallback as x, useEffect as m } from "react";
-import { J as b } from "../../../../LexicalTable.prod-bzYpvqMi.js";
-import { CourseCataloguePlugin as B } from "../CourseCataloguePlugin/CourseCataloguePlugin.js";
-import { BlockFormatPlugin as k } from "../BlockFormatPlugin/BlockFormatPlugin.js";
-import { ListPlugin as z } from "../ListPlugin/ListPlugin.js";
-import { LinkPlugin as S } from "../LinkPlugin/LinkPlugin.js";
-import { HistoryPlugin as A } from "../HistoryPlugin/HistoryPlugin.js";
-import { T as K } from "../../../../TablePlugin-CzmrXpxk.js";
-import { TableCellContextMenu as R } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
+import { jsxs as T, jsx as t } from "react/jsx-runtime";
+import { o as y } from "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
+import { $ as g, w as h, m as N, e as x, ap as B, H as L } from "../../../../Lexical.prod-o6Eq_uLx.js";
+import { useState as v, useRef as A, useCallback as b, useEffect as H } from "react";
+import { J as P } from "../../../../LexicalTable.prod-upbwOtcE.js";
+import { CourseCataloguePlugin as R } from "../CourseCataloguePlugin/CourseCataloguePlugin.js";
+import { BlockFormatPlugin as S } from "../BlockFormatPlugin/BlockFormatPlugin.js";
+import { ListPlugin as j } from "../ListPlugin/ListPlugin.js";
+import { LinkPlugin as k } from "../LinkPlugin/LinkPlugin.js";
+import { HistoryPlugin as w } from "../HistoryPlugin/HistoryPlugin.js";
+import { T as z } from "../../../../TablePlugin-BRZcXq73.js";
+import { TableCellContextMenu as E } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 import "react-dom";
 import "../../../../index-yEhaxKq-.js";
-import { s as j } from "../../../../RteEditor.module-DaBh86FK.js";
-import { setScrollableContainers as v, removeScrollableContainers as J } from "../../helpers.js";
-const Z = ({
-  editorScrollPosition: r,
-  onCatalogueLinkSearch: d,
-  catalogueSearchResponse: u
+import { s as J } from "../../../../RteEditor.module-CoTOIw5i.js";
+const Y = ({
+  editorScrollPosition: l,
+  onCatalogueLinkSearch: u,
+  catalogueSearchResponse: f
 }) => {
-  const [n] = E(), [i, s] = T(null), p = N(null), f = x(() => {
+  const [e] = y(), [a, n] = v(null), p = A(null), d = b(() => {
     const o = g();
-    if (w(o)) {
-      const l = o.anchor.getNode(), a = b(l);
-      if (a) {
-        const h = n.getElementByKey(a.getKey()), c = h ? h.getBoundingClientRect() : { right: 0, bottom: 0, height: 0 };
-        s({ xPos: c.right, yPos: c.bottom, height: c.height });
-      } else
-        s(null);
+    if (!h(o)) {
+      n(null);
+      return;
     }
-  }, [n]), P = (o) => {
+    const r = o.anchor.getNode(), i = P(r);
+    if (!i) {
+      n(null);
+      return;
+    }
+    const c = e.getElementByKey(i.getKey());
+    if (!c) return;
+    const m = c.getBoundingClientRect();
+    n({
+      xPos: m.right,
+      yPos: m.bottom,
+      height: m.height
+    });
+  }, [e]), C = (o) => {
     p.current?.mutateTable(o);
-  }, e = () => {
-    n.update(() => {
+  }, s = b(() => {
+    e.update(() => {
       const o = g();
-      if (w(o)) {
-        const l = o.anchor.getNode();
-        b(l) && (L(null), s(null));
+      if (h(o)) {
+        const i = o.anchor.getNode();
+        P(i) && (N(null), n(null));
       }
     });
-  };
-  return m(() => {
-    n.registerUpdateListener(({ editorState: o }) => {
-      o.read(() => {
-        f();
-      });
-    });
-  }, [n, f]), m(() => (v(e), window.addEventListener("scroll", e), window.addEventListener("resize", e), () => {
-    window.removeEventListener("scroll", e), window.removeEventListener("resize", e), J(e);
-  }), [n]), m(() => {
-    const o = () => {
-      v(e);
-    };
-    return window.addEventListener("keydown", o, { capture: !0 }), () => {
-      window.removeEventListener("keydown", o);
-    };
-  }, []), /* @__PURE__ */ y("div", { className: j.editor__toolbar, children: [
-    /* @__PURE__ */ t(k, {}),
-    /* @__PURE__ */ t(z, {}),
-    /* @__PURE__ */ t(K, { isActive: !!i, ref: p }),
-    i && /* @__PURE__ */ t(
-      R,
+  }, [e]);
+  return H(() => x(
+    e.registerUpdateListener(({ editorState: o }) => {
+      o.read(d);
+    }),
+    e.registerCommand(
+      B,
+      () => (s(), !1),
+      L
+    ),
+    e.registerRootListener((o, r) => {
+      r && r.removeEventListener("scroll", s), o && o.addEventListener("scroll", s);
+    })
+  ), [e, d, s]), /* @__PURE__ */ T("div", { className: J.editor__toolbar, children: [
+    /* @__PURE__ */ t(S, {}),
+    /* @__PURE__ */ t(j, {}),
+    /* @__PURE__ */ t(z, { isActive: !!a, ref: p }),
+    a && /* @__PURE__ */ t(
+      E,
       {
-        position: i,
-        parentScrollPosition: r,
-        onAction: P
+        position: a,
+        parentScrollPosition: l,
+        onAction: C
       }
     ),
-    /* @__PURE__ */ t(S, { parentScrollPosition: r }),
-    d && u && /* @__PURE__ */ t(
-      B,
+    /* @__PURE__ */ t(k, { parentScrollPosition: l }),
+    u && f && /* @__PURE__ */ t(
+      R,
       {
-        parentScrollPosition: r,
-        onSearch: d,
-        searchResponse: u
+        parentScrollPosition: l,
+        onSearch: u,
+        searchResponse: f
       }
     ),
-    /* @__PURE__ */ t(A, {})
+    /* @__PURE__ */ t(w, {})
   ] });
 };
 export {
-  Z as ToolBarPlugin
+  Y as ToolBarPlugin
 };
 //# sourceMappingURL=ToolbarPlugin.js.map

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection, $setSelection } from 'lexical';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $getTableCellNodeFromLexicalNode } from '@lexical/table';\n\nimport type { JSX } from 'react';\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\nimport type { SearchResponse } from 'components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm';\n\nimport { CourseCataloguePlugin } from 'components/RteEditor/Plugins/CourseCataloguePlugin';\nimport {\n  LinkPlugin,\n  BlockFormatPlugin,\n  ListPlugin,\n  HistoryPlugin,\n  TablePlugin,\n  TableCellContextMenu,\n} from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nexport type Position = {\n  xPos: number;\n  yPos: number;\n  height: number;\n};\n\ninterface ToolBarProps {\n  editorScrollPosition: number;\n  onCatalogueLinkSearch?: (query: string, linkType: 'course' | 'programme') => void;\n  catalogueSearchResponse?: SearchResponse;\n}\n\nexport const ToolBarPlugin = ({\n  editorScrollPosition,\n  onCatalogueLinkSearch,\n  catalogueSearchResponse,\n}: ToolBarProps): JSX.Element => {\n  const [editor] = useLexicalComposerContext();\n  const [position, setPosition] = useState<Position | null>(null);\n  const tableref = useRef<TableMutation>(null);\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection();\n    if ($isRangeSelection(selection)) {\n      const anchor = selection.anchor;\n      const anchorNode = anchor.getNode();\n\n      const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n      if (tableCell) {\n        const domNode = editor.getElementByKey(tableCell.getKey());\n        const position = domNode ? domNode.getBoundingClientRect() : { right: 0, bottom: 0, height: 0 };\n        setPosition({ xPos: position.right, yPos: position.bottom, height: position.height });\n      } else {\n        setPosition(null);\n      }\n    }\n  }, [editor]);\n\n  const handleTableAction = (action: Actions) => {\n    tableref.current?.mutateTable(action);\n  };\n\n  const handleResizeScroll = () => {\n    editor.update(() => {\n      const selection = $getSelection();\n\n      if ($isRangeSelection(selection)) {\n        const anchor = selection.anchor;\n        const anchorNode = anchor.getNode();\n\n        const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n        if (tableCell) {\n          $setSelection(null);\n          setPosition(null);\n        }\n      }\n    });\n  };\n\n  useEffect(() => {\n    editor.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        updateToolbar();\n      });\n    });\n  }, [editor, updateToolbar]);\n\n  useEffect(() => {\n    setScrollableContainers(handleResizeScroll);\n\n    window.addEventListener('scroll', handleResizeScroll);\n    window.addEventListener('resize', handleResizeScroll);\n\n    return () => {\n      window.removeEventListener('scroll', handleResizeScroll);\n      window.removeEventListener('resize', handleResizeScroll);\n      removeScrollableContainers(handleResizeScroll);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editor]);\n\n  useEffect(() => {\n    const removeKeydown = () => {\n      setScrollableContainers(handleResizeScroll);\n    };\n\n    window.addEventListener('keydown', removeKeydown, { capture: true });\n\n    return () => {\n      window.removeEventListener('keydown', removeKeydown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div className={styles['editor__toolbar']}>\n      <BlockFormatPlugin />\n      <ListPlugin />\n      <TablePlugin isActive={Boolean(position)} ref={tableref} />\n      {position && (\n        <TableCellContextMenu\n          position={position}\n          parentScrollPosition={editorScrollPosition}\n          onAction={handleTableAction}\n        />\n      )}\n      <LinkPlugin parentScrollPosition={editorScrollPosition} />\n      {onCatalogueLinkSearch && catalogueSearchResponse && (\n        <CourseCataloguePlugin\n          parentScrollPosition={editorScrollPosition}\n          onSearch={onCatalogueLinkSearch}\n          searchResponse={catalogueSearchResponse}\n        />\n      )}\n      <HistoryPlugin />\n    </div>\n  );\n};\n"],"names":["ToolBarPlugin","editorScrollPosition","onCatalogueLinkSearch","catalogueSearchResponse","editor","useLexicalComposerContext","position","setPosition","useState","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","tableCell","$getTableCellNodeFromLexicalNode","domNode","handleTableAction","action","handleResizeScroll","$setSelection","useEffect","editorState","setScrollableContainers","removeScrollableContainers","removeKeydown","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","CourseCataloguePlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;;;;;AAkCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,yBAAAC;AACF,MAAiC;AAC/B,QAAM,CAACC,CAAM,IAAIC,EAAA,GACX,CAACC,GAAUC,CAAW,IAAIC,EAA0B,IAAI,GACxDC,IAAWC,EAAsB,IAAI,GAErCC,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC,EAAA;AAClB,QAAIC,EAAkBF,CAAS,GAAG;AAEhC,YAAMG,IADSH,EAAU,OACC,QAAA,GAEpBI,IAAYC,EAAiCF,CAAU;AAC7D,UAAIC,GAAW;AACb,cAAME,IAAUf,EAAO,gBAAgBa,EAAU,QAAQ,GACnDX,IAAWa,IAAUA,EAAQ,sBAAA,IAA0B,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,EAAA;AAC5F,QAAAZ,EAAY,EAAE,MAAMD,EAAS,OAAO,MAAMA,EAAS,QAAQ,QAAQA,EAAS,OAAA,CAAQ;AAAA,MACtF;AACE,QAAAC,EAAY,IAAI;AAAA,IAEpB;AAAA,EACF,GAAG,CAACH,CAAM,CAAC,GAELgB,IAAoB,CAACC,MAAoB;AAC7C,IAAAZ,EAAS,SAAS,YAAYY,CAAM;AAAA,EACtC,GAEMC,IAAqB,MAAM;AAC/B,IAAAlB,EAAO,OAAO,MAAM;AAClB,YAAMS,IAAYC,EAAA;AAElB,UAAIC,EAAkBF,CAAS,GAAG;AAEhC,cAAMG,IADSH,EAAU,OACC,QAAA;AAG1B,QADkBK,EAAiCF,CAAU,MAE3DO,EAAc,IAAI,GAClBhB,EAAY,IAAI;AAAA,MAEpB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAAiB,EAAU,MAAM;AACd,IAAApB,EAAO,uBAAuB,CAAC,EAAE,aAAAqB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACrB,QAAAd,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAACP,GAAQO,CAAa,CAAC,GAE1Ba,EAAU,OACRE,EAAwBJ,CAAkB,GAE1C,OAAO,iBAAiB,UAAUA,CAAkB,GACpD,OAAO,iBAAiB,UAAUA,CAAkB,GAE7C,MAAM;AACX,WAAO,oBAAoB,UAAUA,CAAkB,GACvD,OAAO,oBAAoB,UAAUA,CAAkB,GACvDK,EAA2BL,CAAkB;AAAA,EAC/C,IAEC,CAAClB,CAAM,CAAC,GAEXoB,EAAU,MAAM;AACd,UAAMI,IAAgB,MAAM;AAC1B,MAAAF,EAAwBJ,CAAkB;AAAA,IAC5C;AAEA,kBAAO,iBAAiB,WAAWM,GAAe,EAAE,SAAS,IAAM,GAE5D,MAAM;AACX,aAAO,oBAAoB,WAAWA,CAAa;AAAA,IACrD;AAAA,EAEF,GAAG,CAAA,CAAE,GAGH,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAkB;AAAA,sBAClBC,GAAA,EAAW;AAAA,sBACXC,GAAA,EAAY,UAAU,EAAQ5B,GAAW,KAAKG,GAAU;AAAA,IACxDH,KACC,gBAAAyB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAA7B;AAAA,QACA,sBAAsBL;AAAA,QACtB,UAAUmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGd,gBAAAW,EAACK,GAAA,EAAW,sBAAsBnC,EAAA,CAAsB;AAAA,IACvDC,KAAyBC,KACxB,gBAAA4B;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,sBAAsBpC;AAAA,QACtB,UAAUC;AAAA,QACV,gBAAgBC;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGnBmC,GAAA,CAAA,CAAc;AAAA,EAAA,GACjB;AAEJ;"}
+{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection, $setSelection, KEY_DOWN_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';\nimport { mergeRegister } from '@lexical/utils';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $getTableCellNodeFromLexicalNode } from '@lexical/table';\n\nimport type { JSX } from 'react';\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\nimport type { SearchResponse } from 'components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm';\n\nimport { CourseCataloguePlugin } from 'components/RteEditor/Plugins/CourseCataloguePlugin';\nimport {\n  LinkPlugin,\n  BlockFormatPlugin,\n  ListPlugin,\n  HistoryPlugin,\n  TablePlugin,\n  TableCellContextMenu,\n} from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\nexport type Position = {\n  xPos: number;\n  yPos: number;\n  height: number;\n};\n\ninterface ToolBarProps {\n  editorScrollPosition: number;\n  onCatalogueLinkSearch?: (query: string, linkType: 'course' | 'programme') => void;\n  catalogueSearchResponse?: SearchResponse;\n}\n\nexport const ToolBarPlugin = ({\n  editorScrollPosition,\n  onCatalogueLinkSearch,\n  catalogueSearchResponse,\n}: ToolBarProps): JSX.Element => {\n  const [editor] = useLexicalComposerContext();\n  const [position, setPosition] = useState<Position | null>(null);\n  const tableref = useRef<TableMutation>(null);\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection();\n    if (!$isRangeSelection(selection)) {\n      setPosition(null);\n      return;\n    }\n\n    const anchorNode = selection.anchor.getNode();\n    const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n    if (!tableCell) {\n      setPosition(null);\n      return;\n    }\n\n    const domNode = editor.getElementByKey(tableCell.getKey());\n    if (!domNode) return;\n\n    const rect = domNode.getBoundingClientRect();\n    setPosition({\n      xPos: rect.right,\n      yPos: rect.bottom,\n      height: rect.height,\n    });\n  }, [editor]);\n\n  const handleTableAction = (action: Actions) => {\n    tableref.current?.mutateTable(action);\n  };\n\n  const handleResizeScroll = useCallback(() => {\n    editor.update(() => {\n      const selection = $getSelection();\n\n      if ($isRangeSelection(selection)) {\n        const anchor = selection.anchor;\n        const anchorNode = anchor.getNode();\n\n        const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n        if (tableCell) {\n          $setSelection(null);\n          setPosition(null);\n        }\n      }\n    });\n  }, [editor]);\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(updateToolbar);\n      }),\n\n      editor.registerCommand(\n        KEY_DOWN_COMMAND,\n        () => {\n          handleResizeScroll();\n          return false;\n        },\n        COMMAND_PRIORITY_LOW\n      ),\n\n      editor.registerRootListener((rootElement, prevRootElement) => {\n        if (prevRootElement) {\n          prevRootElement.removeEventListener('scroll', handleResizeScroll);\n        }\n\n        if (rootElement) {\n          rootElement.addEventListener('scroll', handleResizeScroll);\n        }\n      })\n    );\n  }, [editor, updateToolbar, handleResizeScroll]);\n\n  return (\n    <div className={styles['editor__toolbar']}>\n      <BlockFormatPlugin />\n      <ListPlugin />\n      <TablePlugin isActive={Boolean(position)} ref={tableref} />\n      {position && (\n        <TableCellContextMenu\n          position={position}\n          parentScrollPosition={editorScrollPosition}\n          onAction={handleTableAction}\n        />\n      )}\n      <LinkPlugin parentScrollPosition={editorScrollPosition} />\n      {onCatalogueLinkSearch && catalogueSearchResponse && (\n        <CourseCataloguePlugin\n          parentScrollPosition={editorScrollPosition}\n          onSearch={onCatalogueLinkSearch}\n          searchResponse={catalogueSearchResponse}\n        />\n      )}\n      <HistoryPlugin />\n    </div>\n  );\n};\n"],"names":["ToolBarPlugin","editorScrollPosition","onCatalogueLinkSearch","catalogueSearchResponse","editor","useLexicalComposerContext","position","setPosition","useState","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","tableCell","$getTableCellNodeFromLexicalNode","domNode","rect","handleTableAction","action","handleResizeScroll","$setSelection","useEffect","mergeRegister","editorState","KEY_DOWN_COMMAND","COMMAND_PRIORITY_LOW","rootElement","prevRootElement","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","CourseCataloguePlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;;;;AAkCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,yBAAAC;AACF,MAAiC;AAC/B,QAAM,CAACC,CAAM,IAAIC,EAAA,GACX,CAACC,GAAUC,CAAW,IAAIC,EAA0B,IAAI,GACxDC,IAAWC,EAAsB,IAAI,GAErCC,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC,EAAA;AAClB,QAAI,CAACC,EAAkBF,CAAS,GAAG;AACjC,MAAAN,EAAY,IAAI;AAChB;AAAA,IACF;AAEA,UAAMS,IAAaH,EAAU,OAAO,QAAA,GAC9BI,IAAYC,EAAiCF,CAAU;AAC7D,QAAI,CAACC,GAAW;AACd,MAAAV,EAAY,IAAI;AAChB;AAAA,IACF;AAEA,UAAMY,IAAUf,EAAO,gBAAgBa,EAAU,QAAQ;AACzD,QAAI,CAACE,EAAS;AAEd,UAAMC,IAAOD,EAAQ,sBAAA;AACrB,IAAAZ,EAAY;AAAA,MACV,MAAMa,EAAK;AAAA,MACX,MAAMA,EAAK;AAAA,MACX,QAAQA,EAAK;AAAA,IAAA,CACd;AAAA,EACH,GAAG,CAAChB,CAAM,CAAC,GAELiB,IAAoB,CAACC,MAAoB;AAC7C,IAAAb,EAAS,SAAS,YAAYa,CAAM;AAAA,EACtC,GAEMC,IAAqBX,EAAY,MAAM;AAC3C,IAAAR,EAAO,OAAO,MAAM;AAClB,YAAMS,IAAYC,EAAA;AAElB,UAAIC,EAAkBF,CAAS,GAAG;AAEhC,cAAMG,IADSH,EAAU,OACC,QAAA;AAG1B,QADkBK,EAAiCF,CAAU,MAE3DQ,EAAc,IAAI,GAClBjB,EAAY,IAAI;AAAA,MAEpB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAACH,CAAM,CAAC;AAEX,SAAAqB,EAAU,MACDC;AAAAA,IACLtB,EAAO,uBAAuB,CAAC,EAAE,aAAAuB,QAAkB;AACjD,MAAAA,EAAY,KAAKhB,CAAa;AAAA,IAChC,CAAC;AAAA,IAEDP,EAAO;AAAA,MACLwB;AAAAA,MACA,OACEL,EAAA,GACO;AAAA,MAETM;AAAAA,IAAA;AAAA,IAGFzB,EAAO,qBAAqB,CAAC0B,GAAaC,MAAoB;AAC5D,MAAIA,KACFA,EAAgB,oBAAoB,UAAUR,CAAkB,GAG9DO,KACFA,EAAY,iBAAiB,UAAUP,CAAkB;AAAA,IAE7D,CAAC;AAAA,EAAA,GAEF,CAACnB,GAAQO,GAAeY,CAAkB,CAAC,GAG5C,gBAAAS,EAAC,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAkB;AAAA,sBAClBC,GAAA,EAAW;AAAA,sBACXC,GAAA,EAAY,UAAU,EAAQ/B,GAAW,KAAKG,GAAU;AAAA,IACxDH,KACC,gBAAA4B;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAAhC;AAAA,QACA,sBAAsBL;AAAA,QACtB,UAAUoB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGd,gBAAAa,EAACK,GAAA,EAAW,sBAAsBtC,EAAA,CAAsB;AAAA,IACvDC,KAAyBC,KACxB,gBAAA+B;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,sBAAsBvC;AAAA,QACtB,UAAUC;AAAA,QACV,gBAAgBC;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGnBsC,GAAA,CAAA,CAAc;AAAA,EAAA,GACjB;AAEJ;"}

package/dist/components/RteEditor/Plugins/index.js

@@ -3,9 +3,9 @@ import { BlockFormatPlugin as t } from "./BlockFormatPlugin/BlockFormatPlugin.js
 import { ListPlugin as n } from "./ListPlugin/ListPlugin.js";
 import { LinkPlugin as x } from "./LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as f } from "./HistoryPlugin/HistoryPlugin.js";
-import { T as u } from "../../../TablePlugin-CzmrXpxk.js";
+import { T as u } from "../../../TablePlugin-BRZcXq73.js";
 import { TableCellContextMenu as g } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
-import { T } from "../../../TableCellResizerPlugin-ffA1s2mD.js";
+import { T } from "../../../TableCellResizerPlugin-qMtSAoKT.js";
 import { PasteHandlerPlugin as C } from "./PasteHandlerPlugin/PasteHandlerPlugin.js";
 export {
   t as BlockFormatPlugin,

package/dist/components/RteEditor/RteEditor.d.ts

@@ -4,6 +4,8 @@ import { SearchResponse } from './Plugins/CourseCataloguePlugin/AddCatalogueLink
 export interface RteEditorProps {
     /** current language setting for the editor labels NOT title ans label */
     currentLanguage?: 'NL' | 'EN' | 'nl' | 'en';
+    /** unique id mandatory for the rte */
+    editorId: string;
     /** imported content to edit */
     initialValue?: string;
     /** placeholder text in current Language */
@@ -31,5 +33,5 @@ export interface RteEditorProps {
     /** updated catalogue search results */
     catalogueSearchResponse?: SearchResponse;
 }
-export declare const Rte: ({ currentLanguage, initialValue, placeholder, label, info, required, notValid, notValidatedText, maxHeightInRem, maxWords, rteRef, onChange, onCatalogueLinkSearch, catalogueSearchResponse, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RteEditor: ({ currentLanguage, initialValue, placeholder, label, info, required, notValid, notValidatedText, maxWords, rteRef, onChange, onCatalogueLinkSearch, catalogueSearchResponse, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Rte: ({ currentLanguage, editorId, initialValue, placeholder, label, info, required, notValid, notValidatedText, maxHeightInRem, maxWords, rteRef, onChange, onCatalogueLinkSearch, catalogueSearchResponse, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RteEditor: ({ currentLanguage, editorId, initialValue, placeholder, label, info, required, notValid, notValidatedText, maxWords, rteRef, onChange, onCatalogueLinkSearch, catalogueSearchResponse, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;