@uva-glass/component-library 1.62.8 → 1.62.10

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

@@ -1,10 +1,66 @@
-import { e as s, a as l, b as t, d as o, i as r, c as d } from "../../../../helpers-pUTvcL4e.js";
+import { d as S, a as h, n as d, f as C, p as w, o as m, m as D, C as p, T as E } from "../../../../LexicalTable.prod-BKz2StgB.js";
+import { D as u } from "../../../../Lexical.prod-DOTdxgeo.js";
+const b = 100, O = (e, n) => {
+  const t = S(0, 0, !1);
+  for (let o = 0; o < e; o++) {
+    const r = h();
+    for (let l = 0; l < n; l++) {
+      const s = d(0, void 0, b / n);
+      s.append(u()), r.append(s);
+    }
+    t.append(r);
+  }
+  return t;
+}, z = (e) => {
+  const n = C(e), t = n.getNextSibling() || n.getPreviousSibling(), o = n.getParentOrThrow();
+  if (o.getChildrenSize() > 1 ? n.remove() : o.remove(), t !== null) {
+    const r = t.getFirstDescendant();
+    r && r.select();
+  }
+}, I = (e) => {
+  w(e).remove();
+}, F = (e, n) => {
+  const t = h(), o = C(e), r = o.getChildrenSize();
+  for (let s = 0; s < r; s++) {
+    const c = d(0);
+    c.append(u()), t.append(c);
+  }
+  n === "insertRowAbove" ? o.insertBefore(t) : o.insertAfter(t);
+  const l = t.getFirstDescendant();
+  l && l.select();
+}, P = (e, n) => {
+  const t = C(e);
+  if (!m(e))
+    throw new Error("Selected node is not a TableCellNode");
+  const o = D(e), r = t.getChildren().length, l = w(e);
+  let s = p(e);
+  const c = l.getChildren(), T = c.length;
+  for (let i = 0; i < T; i++) {
+    const a = d(0);
+    a.append(u());
+    const f = c[i].getChildren()[s];
+    f && (n === "insertColumnLeft" ? f.insertBefore(a) : f.insertAfter(a)), c.forEach((R) => {
+      R.getChildren().forEach((x) => {
+        x.setWidth(b / r);
+      });
+    });
+  }
+  s = n === "insertColumnLeft" ? s : s + 1;
+  const g = c[o].getChildren()[s];
+  g && g.select();
+}, B = (e) => {
+  var r;
+  if (!m(e))
+    throw new Error("Selected node is not a TableCellNode");
+  const n = w(e), t = ((r = n.getFirstChild()) == null ? void 0 : r.getChildrenSize()) || 0, o = p(e);
+  t === 1 ? I(e) : E(n, o);
+};
 export {
-  s as createTable,
-  l as deleteColumn,
-  t as deleteRow,
-  o as deleteTable,
-  r as insertColumn,
-  d as insertRow
+  O as createTable,
+  B as deleteColumn,
+  z as deleteRow,
+  I as deleteTable,
+  P as insertColumn,
+  F as insertRow
 };
 //# sourceMappingURL=helpers.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"helpers.js","sources":["../../../../../src/components/RteEditor/Plugins/TablePlugin/helpers.ts"],"sourcesContent":["import {\n  $createTableNodeWithDimensions,\n  $createTableRowNode,\n  $createTableCellNode,\n  $deleteTableColumn,\n  $isTableCellNode,\n  $getTableNodeFromLexicalNodeOrThrow,\n  $getTableRowNodeFromTableCellNodeOrThrow,\n  $getTableRowIndexFromTableCellNode,\n  $getTableColumnIndexFromTableCellNode,\n} from '@lexical/table';\nimport { type TextNode, type ElementNode, $createParagraphNode } from 'lexical';\n\nimport type { TableCellNode } from '@lexical/table';\n\nconst PERCENTAGE = 100;\n\nexport const createTable = (nrOfRows: number, nrOfColumns: number): ElementNode => {\n  const tableNode = $createTableNodeWithDimensions(0, 0, false);\n  for (let rowIndex = 0; rowIndex < nrOfRows; rowIndex++) {\n    const rowNode = $createTableRowNode();\n    for (let colIndex = 0; colIndex < nrOfColumns; colIndex++) {\n      const cellNode = $createTableCellNode(0, undefined, PERCENTAGE / nrOfColumns);\n      cellNode.append($createParagraphNode());\n      rowNode.append(cellNode);\n    }\n    tableNode.append(rowNode);\n  }\n  return tableNode;\n};\n\nexport const deleteRow = (selectedNode: ElementNode) => {\n  const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n  const nextRow = currentRow.getNextSibling() || currentRow.getPreviousSibling();\n  const currentTable = currentRow.getParentOrThrow();\n  currentTable.getChildrenSize() > 1 ? currentRow.remove() : currentTable.remove();\n\n  if (nextRow !== null) {\n    const firstDescendant = (nextRow as ElementNode).getFirstDescendant();\n    if (firstDescendant) {\n      (firstDescendant as TextNode).select();\n    }\n  }\n};\n\nexport const deleteTable = (selectedNode: ElementNode) => {\n  $getTableNodeFromLexicalNodeOrThrow(selectedNode).remove();\n};\n\nexport const insertRow = (selectedNode: ElementNode, position: 'insertRowAbove' | 'insertRowBelow') => {\n  const newRow = $createTableRowNode();\n  const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n  const nrOfCols = currentRow.getChildrenSize();\n  for (let rowCount = 0; rowCount < nrOfCols; rowCount++) {\n    const newCell = $createTableCellNode(0);\n    newCell.append($createParagraphNode());\n    newRow.append(newCell);\n  }\n  position === 'insertRowAbove' ? currentRow.insertBefore(newRow) : currentRow.insertAfter(newRow);\n  const firstDescendant = newRow.getFirstDescendant();\n  if (firstDescendant) {\n    (firstDescendant as TextNode).select();\n  }\n};\n\nexport const insertColumn = (selectedNode: ElementNode, position: 'insertColumnLeft' | 'insertColumnRight') => {\n  const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const rowIndex = $getTableRowIndexFromTableCellNode(selectedNode);\n  const nrOfCols = currentRow.getChildren().length;\n  const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n  let columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n  const rowsInTable: TableCellNode[] = currentTable.getChildren();\n  const nrOfRows = rowsInTable.length;\n\n  for (let rowCount = 0; rowCount < nrOfRows; rowCount++) {\n    const newCell = $createTableCellNode(0);\n    newCell.append($createParagraphNode());\n    const cellInSelectedColumn = rowsInTable[rowCount].getChildren()[columnIndex];\n    if (cellInSelectedColumn) {\n      if (position === 'insertColumnLeft') {\n        cellInSelectedColumn.insertBefore(newCell);\n      } else {\n        cellInSelectedColumn.insertAfter(newCell);\n      }\n    }\n\n    rowsInTable.forEach((row) => {\n      row.getChildren().forEach((cell) => {\n        (cell as TableCellNode).setWidth(PERCENTAGE / nrOfCols);\n      });\n    });\n  }\n\n  columnIndex = position === 'insertColumnLeft' ? columnIndex : columnIndex + 1;\n  const firstDescendant = rowsInTable[rowIndex].getChildren()[columnIndex];\n  if (firstDescendant) {\n    (firstDescendant as TextNode).select();\n  }\n};\n\nexport const deleteColumn = (selectedNode: ElementNode) => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n  const numberOfColumns = (currentTable.getFirstChild() as ElementNode)?.getChildrenSize() || 0;\n  const columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n\n  if (numberOfColumns === 1) {\n    deleteTable(selectedNode);\n  } else {\n    $deleteTableColumn(currentTable, columnIndex);\n  }\n};\n"],"names":["PERCENTAGE","createTable","nrOfRows","nrOfColumns","tableNode","$createTableNodeWithDimensions","rowIndex","rowNode","$createTableRowNode","colIndex","cellNode","$createTableCellNode","$createParagraphNode","deleteRow","selectedNode","currentRow","$getTableRowNodeFromTableCellNodeOrThrow","nextRow","currentTable","firstDescendant","deleteTable","$getTableNodeFromLexicalNodeOrThrow","insertRow","position","newRow","nrOfCols","rowCount","newCell","insertColumn","$isTableCellNode","$getTableRowIndexFromTableCellNode","columnIndex","$getTableColumnIndexFromTableCellNode","rowsInTable","cellInSelectedColumn","row","cell","deleteColumn","numberOfColumns","_a","$deleteTableColumn"],"mappings":"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"}

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

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

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 f, v as g, E as w } from "../../../../Lexical.prod-DOTdxgeo.js";
+import { useState as E, useRef as C, useCallback as L, useEffect as p } from "react";
+import { g as h } from "../../../../LexicalTable.prod-BKz2StgB.js";
+import { BlockFormatPlugin as T } from "../BlockFormatPlugin/BlockFormatPlugin.js";
+import { ListPlugin as y } from "../ListPlugin/ListPlugin.js";
+import { LinkPlugin as N } from "../LinkPlugin/LinkPlugin.js";
+import { HistoryPlugin as x } from "../HistoryPlugin/HistoryPlugin.js";
+import { T as B } from "../../../../TablePlugin-BkczRiUz.js";
+import { TableCellContextMenu as k } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
+import { s as z } from "../../../../RteEditor.module-DcvGRx3a.js";
+const G = ({ editorScrollPosition: c }) => {
+  const [e] = P(), [i, s] = E(null), m = C(null), d = L(() => {
+    const o = f();
+    if (g(o)) {
+      const u = o.anchor.getNode(), r = h(u);
+      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 = m.current) == null || t.mutateTable(o);
   };
-  return x(() => {
+  return p(() => {
     e.registerUpdateListener(({ editorState: o }) => {
       o.read(() => {
-        a();
+        d();
       });
     });
-  }, [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, d]), p(() => {
+    const o = () => {
+      e.update(() => {
+        const t = f();
+        if (g(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: m }),
+    i && /* @__PURE__ */ n(
+      k,
       {
-        position: r,
-        parentScrollPosition: u,
-        onAction: f
+        position: i,
+        parentScrollPosition: c,
+        onAction: b
       }
     ),
-    /* @__PURE__ */ t(L, {}),
-    /* @__PURE__ */ t(N, {})
+    /* @__PURE__ */ n(N, { parentScrollPosition: c }),
+    /* @__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 parentScrollPosition={editorScrollPosition} />\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,IAEF,gBAAAS,EAACK,GAAW,EAAA,sBAAsB/B,EAAsB,CAAA;AAAA,sBACvDgC,GAAc,EAAA;AAAA,EACjB,EAAA,CAAA;AAEJ;"}

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

@@ -1,17 +1,17 @@
 import { ToolBarPlugin as e } from "./ToolbarPlugin/ToolbarPlugin.js";
 import { BlockFormatPlugin as l } from "./BlockFormatPlugin/BlockFormatPlugin.js";
-import { L as n } from "../../../ListPlugin-CpLcVKRP.js";
+import { ListPlugin as n } from "./ListPlugin/ListPlugin.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 { HistoryPlugin as p } from "./HistoryPlugin/HistoryPlugin.js";
+import { T as a } from "../../../TablePlugin-BkczRiUz.js";
 import { TableCellContextMenu as T } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 export {
   l as BlockFormatPlugin,
-  f as HistoryPlugin,
+  p as HistoryPlugin,
   m as LinkPlugin,
   n as ListPlugin,
   T as TableCellContextMenu,
-  u as TablePlugin,
+  a as TablePlugin,
   e as ToolBarPlugin,
   x as getLinkNodeTag
 };

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;
@@ -9,13 +9,13 @@ export interface RteEditorProps {
     label?: string;
     /** explanation of the text to be filled in, in current Language */
     info?: string;
-    /** 'true' the rte field mandetory */
+    /** 'true' the rte field mandatory */
     required?: boolean;
     /** max number of words 'allowed' but not enforced */
     maxWords?: number;
     /** max height in rem default = 20rem*/
     maxHeightInRem?: `${number}rem`;
-    /** error text to display if required and field is empthy */
+    /** error text to display if required and field is empty */
     notValidatedText?: string;
     /** updated output */
     onChange: (content: string) => void;