@uva-glass/component-library 1.52.1 → 1.54.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 } from 'components/RteEditor/Plugins/LinkPlugin';\nimport { BlockFormatPlugin, ListPlugin } 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    </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"],"mappings":";;;;;;;;AAmBA,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,EAC9B,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, 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 } 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      <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","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,GAAc,EAAA;AAAA,EACjB,EAAA,CAAA;AAEJ;"}

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

@@ -1,3 +1,5 @@
 export * from './ToolbarPlugin';
 export * from './BlockFormatPlugin';
 export * from './ListPlugin';
+export * from './LinkPlugin';
+export * from './HistoryPlugin';

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

@@ -1,9 +1,13 @@
-import { ToolBarPlugin as l } from "./ToolbarPlugin/ToolbarPlugin.js";
-import { BlockFormatPlugin as i } from "./BlockFormatPlugin/BlockFormatPlugin.js";
-import { L as a } from "../../../ListPlugin-CxyYg2bv.js";
+import { ToolBarPlugin as i } from "./ToolbarPlugin/ToolbarPlugin.js";
+import { BlockFormatPlugin as l } from "./BlockFormatPlugin/BlockFormatPlugin.js";
+import { L as n } from "../../../ListPlugin-CgNBzfIl.js";
+import { LinkPlugin as f } from "./LinkPlugin/LinkPlugin.js";
+import { HistoryPlugin as p } from "./HistoryPlugin/HistoryPlugin.js";
 export {
-  i as BlockFormatPlugin,
-  a as ListPlugin,
-  l as ToolBarPlugin
+  l as BlockFormatPlugin,
+  p as HistoryPlugin,
+  f as LinkPlugin,
+  n as ListPlugin,
+  i 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":";;;;;"}