@uva-glass/component-library 1.62.8 → 1.62.9

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

@@ -1,53 +1,66 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { u as h } from "../../../../LexicalComposerContext.prod-Dyvim1tK.js";
-import { M as d, v as b } from "../../../../Lexical.prod-B6kL_nwF.js";
-import { useState as P, useRef as T, useCallback as y, useEffect as x } from "react";
-import { g as B } from "../../../../helpers-pUTvcL4e.js";
-import { BlockFormatPlugin as C } from "../BlockFormatPlugin/BlockFormatPlugin.js";
-import { L as v } from "../../../../ListPlugin-CpLcVKRP.js";
-import { LinkPlugin as L } from "../LinkPlugin/LinkPlugin.js";
-import { HistoryPlugin as N } from "../HistoryPlugin/HistoryPlugin.js";
-import { T as k } from "../../../../TablePlugin-B-yAWpsC.js";
-import { TableCellContextMenu as A } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
-import { s as M } from "../../../../RteEditor.module-CHbWzGpE.js";
-const D = ({ editorScrollPosition: u }) => {
-  const [e] = h(), [r, s] = P(null), l = T(null), a = y(() => {
-    const o = d();
-    if (b(o)) {
-      const g = o.anchor.getNode(), m = B(g);
-      if (m) {
-        const c = e.getElementByKey(m.getKey()), n = c ? c.getBoundingClientRect() : { right: 0, bottom: 0, height: 0 };
-        s({ xPos: n.right, yPos: n.bottom, height: n.height });
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { u as P } from "../../../../LexicalComposerContext.prod-Dyvim1tK.js";
+import { M as u, v as f, E as w } from "../../../../Lexical.prod-B6kL_nwF.js";
+import { useState as E, useRef as L, useCallback as C, useEffect as g } from "react";
+import { g as h } from "../../../../helpers-CVB_4CnL.js";
+import { BlockFormatPlugin as T } from "../BlockFormatPlugin/BlockFormatPlugin.js";
+import { L as y } from "../../../../ListPlugin-CpLcVKRP.js";
+import { LinkPlugin as N } from "../LinkPlugin/LinkPlugin.js";
+import { HistoryPlugin as x } from "../HistoryPlugin/HistoryPlugin.js";
+import { T as B } from "../../../../TablePlugin-DQR5VWGq.js";
+import { TableCellContextMenu as k } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
+import { s as z } from "../../../../RteEditor.module-CHbWzGpE.js";
+const G = ({ editorScrollPosition: p }) => {
+  const [e] = P(), [i, s] = E(null), c = L(null), m = C(() => {
+    const o = u();
+    if (f(o)) {
+      const d = o.anchor.getNode(), r = h(d);
+      if (r) {
+        const l = e.getElementByKey(r.getKey()), a = l ? l.getBoundingClientRect() : { right: 0, bottom: 0, height: 0 };
+        s({ xPos: a.right, yPos: a.bottom, height: a.height });
       } else
         s(null);
     }
-  }, [e]), f = (o) => {
-    var i;
-    (i = l.current) == null || i.mutateTable(o);
+  }, [e]), b = (o) => {
+    var t;
+    (t = c.current) == null || t.mutateTable(o);
   };
-  return x(() => {
+  return g(() => {
     e.registerUpdateListener(({ editorState: o }) => {
       o.read(() => {
-        a();
+        m();
       });
     });
-  }, [e, a]), /* @__PURE__ */ p("div", { className: M.editor__toolbar, children: [
-    /* @__PURE__ */ t(C, {}),
-    /* @__PURE__ */ t(v, {}),
-    /* @__PURE__ */ t(k, { isActive: !!r, ref: l }),
-    r && /* @__PURE__ */ t(
-      A,
+  }, [e, m]), g(() => {
+    const o = () => {
+      e.update(() => {
+        const t = u();
+        if (f(t)) {
+          const r = t.anchor.getNode();
+          h(r) && (w(null), s(null));
+        }
+      });
+    };
+    return window.addEventListener("scroll", o), window.addEventListener("resize", o), () => {
+      window.removeEventListener("scroll", o), window.removeEventListener("resize", o);
+    };
+  }, [e]), /* @__PURE__ */ v("div", { className: z.editor__toolbar, children: [
+    /* @__PURE__ */ n(T, {}),
+    /* @__PURE__ */ n(y, {}),
+    /* @__PURE__ */ n(B, { isActive: !!i, ref: c }),
+    i && /* @__PURE__ */ n(
+      k,
       {
-        position: r,
-        parentScrollPosition: u,
-        onAction: f
+        position: i,
+        parentScrollPosition: p,
+        onAction: b
       }
     ),
-    /* @__PURE__ */ t(L, {}),
-    /* @__PURE__ */ t(N, {})
+    /* @__PURE__ */ n(N, {}),
+    /* @__PURE__ */ n(x, {})
   ] });
 };
 export {
-  D as ToolBarPlugin
+  G 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 } from 'lexical';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $getTableCellNodeFromLexicalNode } from '@lexical/table';\n\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\n\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}\n\nexport const ToolBarPlugin = ({ editorScrollPosition }: 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  useEffect(() => {\n    editor.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        updateToolbar();\n      });\n    });\n  }, [editor, updateToolbar]);\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 />\n      <HistoryPlugin />\n    </div>\n  );\n};\n"],"names":["ToolBarPlugin","editorScrollPosition","editor","useLexicalComposerContext","position","setPosition","useState","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","tableCell","$getTableCellNodeFromLexicalNode","domNode","handleTableAction","action","_a","useEffect","editorState","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;AA4BO,MAAMA,IAAgB,CAAC,EAAE,sBAAAC,QAAsD;AAC9E,QAAA,CAACC,CAAM,IAAIC,KACX,CAACC,GAAUC,CAAW,IAAIC,EAA0B,IAAI,GACxDC,IAAWC,EAAsB,IAAI,GAErCC,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC;AACd,QAAAC,EAAkBF,CAAS,GAAG;AAE1B,YAAAG,IADSH,EAAU,OACC,WAEpBI,IAAYC,EAAiCF,CAAU;AAC7D,UAAIC,GAAW;AACb,cAAME,IAAUf,EAAO,gBAAgBa,EAAU,OAAQ,CAAA,GACnDX,IAAWa,IAAUA,EAAQ,sBAAsB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,EAAE;AAClF,QAAAZ,EAAA,EAAE,MAAMD,EAAS,OAAO,MAAMA,EAAS,QAAQ,QAAQA,EAAS,OAAQ,CAAA;AAAA,MAAA;AAEpF,QAAAC,EAAY,IAAI;AAAA,IAEpB;AAAA,EAAA,GACC,CAACH,CAAM,CAAC,GAELgB,IAAoB,CAACC,MAAoB;;AACpC,KAAAC,IAAAb,EAAA,YAAA,QAAAa,EAAS,YAAYD;AAAA,EAAM;AAGtC,SAAAE,EAAU,MAAM;AACd,IAAAnB,EAAO,uBAAuB,CAAC,EAAE,aAAAoB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACP,QAAAb;MAAA,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACP,GAAQO,CAAa,CAAC,GAGvB,gBAAAc,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAkB,EAAA;AAAA,sBAClBC,GAAW,EAAA;AAAA,sBACXC,GAAY,EAAA,UAAU,EAAQxB,GAAW,KAAKG,GAAU;AAAA,IACxDH,KACC,gBAAAqB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAAzB;AAAA,QACA,sBAAsBH;AAAA,QACtB,UAAUiB;AAAA,MAAA;AAAA,IACZ;AAAA,sBAEDY,GAAW,EAAA;AAAA,sBACXC,GAAc,EAAA;AAAA,EACjB,EAAA,CAAA;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 } from 'lexical';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $getTableCellNodeFromLexicalNode } from '@lexical/table';\n\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\n\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}\n\nexport const ToolBarPlugin = ({ editorScrollPosition }: 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  useEffect(() => {\n    editor.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        updateToolbar();\n      });\n    });\n  }, [editor, updateToolbar]);\n\n  useEffect(() => {\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    window.addEventListener('scroll', handleResizeScroll);\n    window.addEventListener('resize', handleResizeScroll);\n\n    return () => {\n      window.removeEventListener('scroll', handleResizeScroll);\n      window.removeEventListener('resize', handleResizeScroll);\n    };\n  }, [editor]);\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 />\n      <HistoryPlugin />\n    </div>\n  );\n};\n"],"names":["ToolBarPlugin","editorScrollPosition","editor","useLexicalComposerContext","position","setPosition","useState","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","tableCell","$getTableCellNodeFromLexicalNode","domNode","handleTableAction","action","_a","useEffect","editorState","handleResizeScroll","$setSelection","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;AA4BO,MAAMA,IAAgB,CAAC,EAAE,sBAAAC,QAAsD;AAC9E,QAAA,CAACC,CAAM,IAAIC,KACX,CAACC,GAAUC,CAAW,IAAIC,EAA0B,IAAI,GACxDC,IAAWC,EAAsB,IAAI,GAErCC,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC;AACd,QAAAC,EAAkBF,CAAS,GAAG;AAE1B,YAAAG,IADSH,EAAU,OACC,WAEpBI,IAAYC,EAAiCF,CAAU;AAC7D,UAAIC,GAAW;AACb,cAAME,IAAUf,EAAO,gBAAgBa,EAAU,OAAQ,CAAA,GACnDX,IAAWa,IAAUA,EAAQ,sBAAsB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,EAAE;AAClF,QAAAZ,EAAA,EAAE,MAAMD,EAAS,OAAO,MAAMA,EAAS,QAAQ,QAAQA,EAAS,OAAQ,CAAA;AAAA,MAAA;AAEpF,QAAAC,EAAY,IAAI;AAAA,IAEpB;AAAA,EAAA,GACC,CAACH,CAAM,CAAC,GAELgB,IAAoB,CAACC,MAAoB;;AACpC,KAAAC,IAAAb,EAAA,YAAA,QAAAa,EAAS,YAAYD;AAAA,EAAM;AAGtC,SAAAE,EAAU,MAAM;AACd,IAAAnB,EAAO,uBAAuB,CAAC,EAAE,aAAAoB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACP,QAAAb;MAAA,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACP,GAAQO,CAAa,CAAC,GAE1BY,EAAU,MAAM;AACd,UAAME,IAAqB,MAAM;AAC/B,MAAArB,EAAO,OAAO,MAAM;AAClB,cAAMS,IAAYC;AAEd,YAAAC,EAAkBF,CAAS,GAAG;AAE1B,gBAAAG,IADSH,EAAU,OACC;AAG1B,UADkBK,EAAiCF,CAAU,MAE3DU,EAAc,IAAI,GAClBnB,EAAY,IAAI;AAAA,QAEpB;AAAA,MAAA,CACD;AAAA,IAAA;AAGI,kBAAA,iBAAiB,UAAUkB,CAAkB,GAC7C,OAAA,iBAAiB,UAAUA,CAAkB,GAE7C,MAAM;AACJ,aAAA,oBAAoB,UAAUA,CAAkB,GAChD,OAAA,oBAAoB,UAAUA,CAAkB;AAAA,IAAA;AAAA,EACzD,GACC,CAACrB,CAAM,CAAC,GAGR,gBAAAuB,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAkB,EAAA;AAAA,sBAClBC,GAAW,EAAA;AAAA,sBACXC,GAAY,EAAA,UAAU,EAAQ1B,GAAW,KAAKG,GAAU;AAAA,IACxDH,KACC,gBAAAuB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAA3B;AAAA,QACA,sBAAsBH;AAAA,QACtB,UAAUiB;AAAA,MAAA;AAAA,IACZ;AAAA,sBAEDc,GAAW,EAAA;AAAA,sBACXC,GAAc,EAAA;AAAA,EACjB,EAAA,CAAA;AAEJ;"}

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

@@ -3,7 +3,7 @@ import { BlockFormatPlugin as l } from "./BlockFormatPlugin/BlockFormatPlugin.js
 import { L as n } from "../../../ListPlugin-CpLcVKRP.js";
 import { LinkPlugin as m, getLinkNodeTag as x } from "./LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as f } from "./HistoryPlugin/HistoryPlugin.js";
-import { T as u } from "../../../TablePlugin-B-yAWpsC.js";
+import { T as u } from "../../../TablePlugin-DQR5VWGq.js";
 import { TableCellContextMenu as T } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 export {
   l as BlockFormatPlugin,

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

@@ -1,5 +1,5 @@
 export interface RteEditorProps {
-    /** current language setting for the editor labels NOT title ans label*/
+    /** current language setting for the editor labels NOT title ans label */
     currentLanguage?: 'NL' | 'EN';
     /** imported content to edit */
     initialValue?: string;