@uva-glass/component-library 1.55.1 → 1.57.0

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, useState } from 'react';\nimport { $isListNode } from '@lexical/list';\nimport { $isLinkNode } from '@lexical/link';\n\nimport type { ElementNode, TextNode } from 'lexical';\n\nimport { LinkPlugin, BlockFormatPlugin, ListPlugin, HistoryPlugin, TablePlugin } from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\nexport type TargetType = '_blank' | '_self';\nexport interface LinkType {\n  active: boolean;\n  url: string;\n  target: TargetType | string;\n}\n\nconst getNodeTag = (anchorNode: ElementNode | TextNode, tagToMatch: string): boolean | LinkType => {\n  let currentNode: TextNode | ElementNode | null = anchorNode;\n  let tag: string | null;\n\n  while (currentNode !== null) {\n    if (tagToMatch === 'a') {\n      if ($isLinkNode(currentNode)) {\n        return { active: true, url: currentNode.__url, target: !currentNode.__target ? '_self' : currentNode.__target };\n      }\n    }\n\n    if (tagToMatch === 'ul' || tagToMatch === 'ol') {\n      if ($isListNode(currentNode)) {\n        tag = currentNode.getTag();\n        return tag === tagToMatch;\n      }\n    }\n\n    currentNode = currentNode.getParent();\n  }\n\n  return false;\n};\n\nexport const ToolBarPlugin = (): JSX.Element => {\n  const [editor] = useLexicalComposerContext();\n  const [isBold, setIsBold] = useState(false);\n  const [isItalic, setIsItalic] = useState(false);\n  const [isUList, setIsUList] = useState<boolean>(false);\n  const [isOList, setIsOList] = useState<boolean>(false);\n  const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', target: '_self' });\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection();\n    if ($isRangeSelection(selection)) {\n      setIsBold(selection.hasFormat('bold'));\n      setIsItalic(selection.hasFormat('italic'));\n\n      const anchorNode = selection.anchor.getNode();\n      setIsUList(getNodeTag(anchorNode, 'ul') as boolean);\n      setIsOList(getNodeTag(anchorNode, 'ol') as boolean);\n      setIsLink(getNodeTag(anchorNode, 'a') as LinkType);\n    }\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 isBold={isBold} isItalic={isItalic} />\n      <ListPlugin isUList={isUList} isOList={isOList} />\n      <LinkPlugin isLink={isLink} />\n      <TablePlugin />\n      <HistoryPlugin />\n    </div>\n  );\n};\n"],"names":["getNodeTag","anchorNode","tagToMatch","currentNode","tag","$isLinkNode","$isListNode","ToolBarPlugin","editor","useLexicalComposerContext","isBold","setIsBold","useState","isItalic","setIsItalic","isUList","setIsUList","isOList","setIsOList","isLink","setIsLink","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","useEffect","editorState","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","LinkPlugin","TablePlugin","HistoryPlugin"],"mappings":";;;;;;;;;;AAkBA,MAAMA,IAAa,CAACC,GAAoCC,MAA2C;AACjG,MAAIC,IAA6CF,GAC7CG;AAEJ,SAAOD,MAAgB,QAAM;AAC3B,QAAID,MAAe,OACbG,EAAYF,CAAW;AACzB,aAAO,EAAE,QAAQ,IAAM,KAAKA,EAAY,OAAO,QAASA,EAAY,WAAqBA,EAAY,WAAtB,QAA+B;AAI9G,SAAAD,MAAe,QAAQA,MAAe,SACpCI,EAAYH,CAAW;AACzB,aAAAC,IAAMD,EAAY,UACXC,MAAQF;AAInB,IAAAC,IAAcA,EAAY;EAC5B;AAEO,SAAA;AACT,GAEaI,IAAgB,MAAmB;AACxC,QAAA,CAACC,CAAM,IAAIC,KACX,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxC,CAACG,GAASC,CAAU,IAAIJ,EAAkB,EAAK,GAC/C,CAACK,GAASC,CAAU,IAAIN,EAAkB,EAAK,GAC/C,CAACO,GAAQC,CAAS,IAAIR,EAAmB,EAAE,QAAQ,IAAO,KAAK,IAAI,QAAQ,QAAS,CAAA,GAEpFS,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC;AACd,QAAAC,EAAkBF,CAAS,GAAG;AACtB,MAAAZ,EAAAY,EAAU,UAAU,MAAM,CAAC,GACzBT,EAAAS,EAAU,UAAU,QAAQ,CAAC;AAEnC,YAAAtB,IAAasB,EAAU,OAAO,QAAQ;AACjC,MAAAP,EAAAhB,EAAWC,GAAY,IAAI,CAAY,GACvCiB,EAAAlB,EAAWC,GAAY,IAAI,CAAY,GACxCmB,EAAApB,EAAWC,GAAY,GAAG,CAAa;AAAA,IACnD;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,SAAAyB,EAAU,MAAM;AACd,IAAAlB,EAAO,uBAAuB,CAAC,EAAE,aAAAmB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACP,QAAAN;MAAA,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACb,GAAQa,CAAa,CAAC,GAGvB,gBAAAO,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAkB,QAAArB,GAAgB,UAAAG,EAAoB,CAAA;AAAA,IACvD,gBAAAiB,EAACE,GAAW,EAAA,SAAAjB,GAAkB,SAAAE,EAAkB,CAAA;AAAA,IAChD,gBAAAa,EAACG,KAAW,QAAAd,GAAgB;AAAA,sBAC3Be,GAAY,EAAA;AAAA,sBACZC,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 } from 'lexical';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $isTableCellNode } from '@lexical/table';\n\nimport type { ElementNode, TextNode } from 'lexical';\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\n\nimport { getNodeTag } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\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 TargetType = '_blank' | '_self';\nexport interface LinkType {\n  active: boolean;\n  url: string;\n  target: TargetType | string;\n}\n\nexport type Position = {\n  xPos: number;\n  yPos: number;\n};\n\nconst getTableCell = (\n  anchorNode: ElementNode | TextNode,\n  editor: ReturnType<typeof useLexicalComposerContext>[0]\n): Position | null => {\n  let currentNode: TextNode | ElementNode | null = anchorNode;\n\n  while (currentNode !== null) {\n    if ($isTableCellNode(currentNode) && editor) {\n      const domNode = editor.getElementByKey(currentNode.getKey());\n      if (domNode) {\n        const rect = domNode.getBoundingClientRect();\n        return { xPos: rect.right, yPos: rect.bottom };\n      } else {\n        return null;\n      }\n    }\n    currentNode = currentNode.getParent();\n  }\n\n  return null;\n};\n\nexport const ToolBarPlugin = (): JSX.Element => {\n  const [editor] = useLexicalComposerContext();\n  const [isBold, setIsBold] = useState(false);\n  const [isItalic, setIsItalic] = useState(false);\n  const [isUList, setIsUList] = useState<boolean>(false);\n  const [isOList, setIsOList] = useState<boolean>(false);\n  const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', target: '_self' });\n  const [isSelectedRange, setIsSelectedRange] = useState(false);\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      const focus = selection.focus;\n\n      setIsBold(selection.hasFormat('bold'));\n      setIsItalic(selection.hasFormat('italic'));\n      setIsUList(getNodeTag(anchorNode, 'ul') as boolean);\n      setIsOList(getNodeTag(anchorNode, 'ol') as boolean);\n\n      setIsSelectedRange(Math.abs(anchor.offset - focus.offset) !== 0);\n      setIsLink(getNodeTag(anchorNode, 'a') as LinkType);\n\n      setPosition(getTableCell(anchorNode, editor));\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 isBold={isBold} isItalic={isItalic} />\n      <ListPlugin isUList={isUList} isOList={isOList} />\n      <TablePlugin isActive={Boolean(position)} ref={tableref} />\n      {position && <TableCellContextMenu position={position} onAction={handleTableAction} />}\n      <LinkPlugin isLink={isLink} isLinkable={isSelectedRange} />\n      <HistoryPlugin />\n    </div>\n  );\n};\n"],"names":["getTableCell","anchorNode","editor","currentNode","$isTableCellNode","domNode","rect","ToolBarPlugin","useLexicalComposerContext","isBold","setIsBold","useState","isItalic","setIsItalic","isUList","setIsUList","isOList","setIsOList","isLink","setIsLink","isSelectedRange","setIsSelectedRange","position","setPosition","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchor","focus","getNodeTag","handleTableAction","action","_a","useEffect","editorState","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;;AAgCA,MAAMA,IAAe,CACnBC,GACAC,MACoB;AACpB,MAAIC,IAA6CF;AAEjD,SAAOE,MAAgB,QAAM;AACvB,QAAAC,EAAiBD,CAAW,KAAKD,GAAQ;AAC3C,YAAMG,IAAUH,EAAO,gBAAgBC,EAAY,OAAQ,CAAA;AAC3D,UAAIE,GAAS;AACL,cAAAC,IAAOD,EAAQ;AACrB,eAAO,EAAE,MAAMC,EAAK,OAAO,MAAMA,EAAK;MAAO;AAEtC,eAAA;AAAA,IAEX;AACA,IAAAH,IAAcA,EAAY;EAC5B;AAEO,SAAA;AACT,GAEaI,KAAgB,MAAmB;AACxC,QAAA,CAACL,CAAM,IAAIM,KACX,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxC,CAACG,GAASC,CAAU,IAAIJ,EAAkB,EAAK,GAC/C,CAACK,GAASC,CAAU,IAAIN,EAAkB,EAAK,GAC/C,CAACO,GAAQC,CAAS,IAAIR,EAAmB,EAAE,QAAQ,IAAO,KAAK,IAAI,QAAQ,QAAS,CAAA,GACpF,CAACS,GAAiBC,CAAkB,IAAIV,EAAS,EAAK,GACtD,CAACW,GAAUC,CAAW,IAAIZ,EAA0B,IAAI,GACxDa,IAAWC,EAAsB,IAAI,GAErCC,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC;AACd,QAAAC,EAAkBF,CAAS,GAAG;AAChC,YAAMG,IAASH,EAAU,QACnB3B,IAAa8B,EAAO,WACpBC,IAAQJ,EAAU;AAEd,MAAAlB,EAAAkB,EAAU,UAAU,MAAM,CAAC,GACzBf,EAAAe,EAAU,UAAU,QAAQ,CAAC,GAC9Bb,EAAAkB,EAAWhC,GAAY,IAAI,CAAY,GACvCgB,EAAAgB,EAAWhC,GAAY,IAAI,CAAY,GAElDoB,EAAmB,KAAK,IAAIU,EAAO,SAASC,EAAM,MAAM,MAAM,CAAC,GACrDb,EAAAc,EAAWhC,GAAY,GAAG,CAAa,GAErCsB,EAAAvB,EAAaC,GAAYC,CAAM,CAAC;AAAA,IAC9C;AAAA,EAAA,GACC,CAACA,CAAM,CAAC,GAELgC,IAAoB,CAACC,MAAoB;;AACpC,KAAAC,IAAAZ,EAAA,YAAA,QAAAY,EAAS,YAAYD;AAAA,EAAM;AAGtC,SAAAE,EAAU,MAAM;AACd,IAAAnC,EAAO,uBAAuB,CAAC,EAAE,aAAAoC,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACP,QAAAZ;MAAA,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACxB,GAAQwB,CAAa,CAAC,GAGvB,gBAAAa,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAkB,QAAAjC,GAAgB,UAAAG,EAAoB,CAAA;AAAA,IACvD,gBAAA6B,EAACE,GAAW,EAAA,SAAA7B,GAAkB,SAAAE,EAAkB,CAAA;AAAA,sBAC/C4B,GAAY,EAAA,UAAU,EAAQtB,GAAW,KAAKE,GAAU;AAAA,IACxDF,KAAY,gBAAAmB,EAACI,GAAqB,EAAA,UAAAvB,GAAoB,UAAUY,GAAmB;AAAA,IACnF,gBAAAO,EAAAK,GAAA,EAAW,QAAA5B,GAAgB,YAAYE,EAAiB,CAAA;AAAA,sBACxD2B,GAAc,EAAA;AAAA,EACjB,EAAA,CAAA;AAEJ;"}

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

@@ -1,15 +1,17 @@
-import { ToolBarPlugin as i } from "./ToolbarPlugin/ToolbarPlugin.js";
+import { ToolBarPlugin as e } from "./ToolbarPlugin/ToolbarPlugin.js";
 import { BlockFormatPlugin as t } from "./BlockFormatPlugin/BlockFormatPlugin.js";
-import { L as m } from "../../../ListPlugin-DFFbKLaN.js";
-import { LinkPlugin as f } from "./LinkPlugin/LinkPlugin.js";
+import { ListPlugin as n } from "./ListPlugin/ListPlugin.js";
+import { LinkPlugin as x } from "./LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as p } from "./HistoryPlugin/HistoryPlugin.js";
-import { T as x } from "../../../TablePlugin-acQeRCt0.js";
+import { T as g } from "../../../TablePlugin-1L5UZfDH.js";
+import { TableCellContextMenu as a } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 export {
   t as BlockFormatPlugin,
   p as HistoryPlugin,
-  f as LinkPlugin,
-  m as ListPlugin,
-  x as TablePlugin,
-  i as ToolBarPlugin
+  x as LinkPlugin,
+  n as ListPlugin,
+  a as TableCellContextMenu,
+  g as TablePlugin,
+  e as ToolBarPlugin
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface LanguageContextProps {
+    language: string;
+    switchLanguage: (language: string) => void;
+}
+export declare const LanguageProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useLanguage: () => LanguageContextProps;
+export {};

package/dist/components/RteEditor/Providers/LanguageProvider.js

@@ -0,0 +1,18 @@
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as g, useState as s, useContext as i } from "react";
+const t = g(void 0), x = ({ children: e }) => {
+  const [n, o] = s("en"), a = (r) => {
+    o(r);
+  };
+  return /* @__PURE__ */ u(t.Provider, { value: { language: n, switchLanguage: a }, children: e });
+}, d = () => {
+  const e = i(t);
+  if (!e)
+    throw new Error("useLanguage must be used within a LanguageProvider");
+  return e;
+};
+export {
+  x as LanguageProvider,
+  d as useLanguage
+};
+//# sourceMappingURL=LanguageProvider.js.map

package/dist/components/RteEditor/Providers/LanguageProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageProvider.js","sources":["../../../../src/components/RteEditor/Providers/LanguageProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\ninterface LanguageContextProps {\n  language: string;\n  switchLanguage: (language: string) => void;\n}\n\nconst LanguageContext = createContext<LanguageContextProps | undefined>(undefined);\n\nexport const LanguageProvider = ({ children }: { children: ReactNode }) => {\n  const [language, setLanguage] = useState<string>('en');\n\n  const switchLanguage = (language: string) => {\n    setLanguage(language);\n  };\n\n  return <LanguageContext.Provider value={{ language, switchLanguage }}>{children}</LanguageContext.Provider>;\n};\n\nexport const useLanguage = (): LanguageContextProps => {\n  const context = useContext(LanguageContext);\n  if (!context) {\n    throw new Error('useLanguage must be used within a LanguageProvider');\n  }\n  return context;\n};\n"],"names":["LanguageContext","createContext","LanguageProvider","children","language","setLanguage","useState","switchLanguage","jsx","useLanguage","context","useContext"],"mappings":";;AASA,MAAMA,IAAkBC,EAAgD,MAAS,GAEpEC,IAAmB,CAAC,EAAE,UAAAC,QAAwC;AACzE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAiB,IAAI,GAE/CC,IAAiB,CAACH,MAAqB;AAC3C,IAAAC,EAAYD,CAAQ;AAAA,EAAA;AAGf,SAAA,gBAAAI,EAACR,EAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAAI,GAAU,gBAAAG,EAAe,GAAI,UAAAJ,EAAS,CAAA;AAClF,GAEaM,IAAc,MAA4B;AAC/C,QAAAC,IAAUC,EAAWX,CAAe;AAC1C,MAAI,CAACU;AACG,UAAA,IAAI,MAAM,oDAAoD;AAE/D,SAAAA;AACT;"}

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

@@ -1,7 +1,15 @@
 export interface RteEditorProps {
     namespace?: string;
+    currentLanguage?: 'NL' | 'EN';
     initialValue?: string;
     placeholder?: string;
+    label?: string;
+    info?: string;
+    required?: boolean;
+    maxWords?: number;
+    /** error text to display if set */
+    notValidatedText?: string;
     onChange: (content: string) => void;
 }
-export declare const RteEditor: ({ namespace, initialValue, placeholder, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Rte: ({ namespace, currentLanguage, initialValue, placeholder, label, info, required, notValidatedText, maxWords, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RteEditor: ({ namespace, currentLanguage, initialValue, placeholder, label, info, required, notValidatedText, maxWords, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;