@uva-glass/component-library 3.54.3 → 3.55.0

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

@@ -1 +1 @@
-{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $toggleLink, TOGGLE_LINK_COMMAND, LinkNode } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  $createTextNode,\n  $getSelection,\n  $isRangeSelection,\n  $setSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_CRITICAL,\n  KEY_DOWN_COMMAND,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\n\nimport type { ElementNode, BaseSelection } from 'lexical';\nimport type { addLinkFormMethods } from './AddLinkForm/AddLinkFrom';\nimport type { linkFormMethods } from './LinkContextMenu/LinkContextMenu';\n\nimport { AddLinkForm } from './AddLinkForm/AddLinkFrom';\nimport { ensureHttps } from './helpers';\nimport { LinkContextMenu } from './LinkContextMenu/LinkContextMenu';\n\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nconst PREVENT_OPEN_DELAY = 200;\n\nexport interface LinkType {\n  active: boolean;\n  url: string;\n  linktext: string;\n}\n\ntype Position = {\n  top: number;\n  left: number;\n};\n\ninterface LinkPluginProps {\n  parentScrollPosition: number;\n}\n\nexport const LinkPlugin = ({ parentScrollPosition }: LinkPluginProps) => {\n  const t = useTranslation();\n  const [editor] = useLexicalComposerContext();\n  const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n  const addLinkForm = useRef<addLinkFormMethods>(undefined);\n  const preventOpen = useRef(false);\n  const previousLinkText = useRef('');\n  const selectedText = useRef('');\n  const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', linktext: '' });\n  const isVisibleRef = useRef(isVisible);\n  const storedSelection = useRef<BaseSelection | null>(null);\n  const linkButtonRef = useRef<HTMLButtonElement>(null);\n  const editLinkForm = useRef<linkFormMethods>(undefined);\n\n  const storeCursorPosition = () => {\n    editor.update(() => {\n      const selection = $getSelection();\n      storedSelection.current = selection;\n    });\n  };\n\n  const rePositionCursor = () => {\n    editor.update(() => {\n      if (storedSelection.current) {\n        $setSelection(storedSelection.current);\n      }\n    });\n  };\n\n  const openContextMenu = (url: string, position: Position) => {\n    showFlyout({\n      position,\n      children: (\n        <LinkContextMenu\n          url={url}\n          onSave={(url) => insertLink(url, '')}\n          onDelete={() => removeLink()}\n          onClose={closeContextMenu}\n          ref={editLinkForm}\n        />\n      ),\n    });\n  };\n\n  const closeContextMenu = () => {\n    editLinkForm.current?.clearForm();\n    hideFlyout();\n    rePositionCursor();\n  };\n\n  const openFlyout = () => {\n    const rect = linkButtonRef.current?.getBoundingClientRect();\n    if (!preventOpen.current && rect) {\n      storeCursorPosition();\n      showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n      setTimeout(() => addLinkForm.current?.setDefaults('', selectedText.current), 0);\n    }\n  };\n\n  const closeFlyout = () => {\n    hideFlyout();\n    rePositionCursor();\n  };\n\n  const insertLink = (url: string, linktext: string) => {\n    editor.update(() => {\n      const selection = $getSelection();\n\n      if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        const linkNode = $getNearestNodeOfType(anchorNode, LinkNode);\n\n        if (linktext && linktext !== '') {\n          if (linkNode) {\n            const newTextNode = $createTextNode(linktext);\n            linkNode.replace(newTextNode);\n            newTextNode.select();\n          }\n          if (linktext !== previousLinkText.current && previousLinkText.current === '') {\n            const { anchor, focus } = selection;\n            selection.insertText(linktext);\n            anchor.offset -= linktext.length;\n            focus.offset = anchor.offset + linktext.length;\n          }\n        }\n        $toggleLink(ensureHttps(url), { target: '_blank' });\n      }\n\n      closeFlyout();\n    });\n  };\n\n  const removeLink = (): void => {\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n    closeContextMenu();\n  };\n\n  const flyoutOptions = {\n    children: (\n      <AddLinkForm\n        isLink={isLink}\n        onCloseHandler={closeFlyout}\n        onSaveHandler={(url, linktext) => insertLink(url, linktext)}\n        ref={addLinkForm}\n      />\n    ),\n  };\n\n  useEffect(() => {\n    if (!isVisible) {\n      addLinkForm.current?.clearForm();\n      previousLinkText.current = selectedText.current = '';\n      setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n    } else {\n      preventOpen.current = true;\n      addLinkForm.current?.focusFirstField();\n    }\n  }, [addLinkForm, isVisible]);\n\n  useEffect(() => {\n    const handleSelectionClickOrChange = (selection: BaseSelection | null) => {\n      if ($isRangeSelection(selection) && selection.isCollapsed()) {\n        const anchorNode = selection.anchor.getNode() as ElementNode;\n        const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n        if (node) {\n          const domNode = editor.getElementByKey(selection.anchor.getNode().getKey());\n          const position = domNode\n            ? { top: domNode.getBoundingClientRect().bottom, left: domNode.getBoundingClientRect().left }\n            : { top: 0, left: 0 };\n          openContextMenu(node.getURL(), position);\n          return true;\n        }\n      }\n      return false;\n    };\n\n    const unregisterSelect = editor.registerCommand(\n      SELECTION_CHANGE_COMMAND,\n      () => {\n        const selection = $getSelection();\n        selectedText.current = selection?.getTextContent() ?? '';\n        handleSelectionClickOrChange(selection);\n        return false;\n      },\n      0\n    );\n\n    const unregisterClick = editor.registerCommand(\n      CLICK_COMMAND,\n      (event) => {\n        const selection = $getSelection();\n        storeCursorPosition();\n        event.preventDefault();\n        event.stopPropagation();\n        event.stopImmediatePropagation();\n        handleSelectionClickOrChange(selection);\n        return false;\n      },\n      0\n    );\n\n    return () => {\n      unregisterClick();\n      unregisterSelect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editor]);\n\n  useEffect(() => {\n    const removeKeyboardShortcut = editor.registerCommand(\n      KEY_DOWN_COMMAND,\n      (event: KeyboardEvent) => {\n        if (event.ctrlKey && event.shiftKey && event.key === 'U') {\n          const selection = $getSelection();\n          storeCursorPosition();\n\n          if (!$isRangeSelection(selection)) {\n            return false;\n          }\n\n          const anchorNode = selection.anchor.getNode() as ElementNode;\n          const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n          const openFlyoutWithDefaults = (url = '', linkText = '') => {\n            openFlyout();\n            setTimeout(() => addLinkForm.current?.setDefaults(url, linkText), 0);\n          };\n\n          if (node) {\n            event.preventDefault();\n            event.stopPropagation();\n            event.stopImmediatePropagation();\n\n            previousLinkText.current = node.getTextContent();\n            openFlyoutWithDefaults(node.getURL(), node.getTextContent());\n\n            return true;\n          }\n\n          const selectedTextContent = selection.getTextContent();\n          if (selectedTextContent !== '') {\n            selectedText.current = selectedTextContent;\n            openFlyoutWithDefaults('', selectedText.current);\n\n            return true;\n          }\n\n          openFlyout();\n          return true;\n        }\n\n        return false;\n      },\n      COMMAND_PRIORITY_CRITICAL\n    );\n\n    const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n      setIsLink(\n        editorState.read(() => {\n          const selection = $getSelection();\n          storeCursorPosition();\n\n          if ($isRangeSelection(selection)) {\n            const anchorNode = selection.anchor.getNode() as ElementNode;\n            const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n            if (node) {\n              return {\n                active: true,\n                url: node.getURL(),\n                linktext: node.getTextContent(),\n              };\n            }\n          }\n\n          return {\n            active: false,\n            url: '',\n            linktext: '',\n          };\n        })\n      );\n    });\n\n    return () => {\n      removeKeyboardShortcut();\n      removeStatusListener();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editor]);\n\n  useEffect(() => {\n    isVisibleRef.current = isVisible;\n    if (!isVisible) editLinkForm.current?.clearForm();\n  }, [isVisible]);\n\n  useEffect(() => {\n    if (isVisible) {\n      closeFlyout();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentScrollPosition]);\n\n  useEffect(() => {\n    if (!isLink.active) {\n      hideFlyout();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLink]);\n\n  useEffect(() => {\n    const removeKeydown = (event: KeyboardEvent): boolean => {\n      setScrollableContainers(handleResizeScroll);\n\n      if (event.key === 'Escape' && isVisibleRef.current) {\n        event.preventDefault();\n        event.stopPropagation();\n        closeFlyout();\n      }\n      return true;\n    };\n\n    window.addEventListener('keydown', removeKeydown, { capture: true });\n\n    const handleResizeScroll = () => {\n      hideFlyout();\n    };\n\n    setScrollableContainers(handleResizeScroll);\n\n    window.addEventListener('scroll', handleResizeScroll);\n    window.addEventListener('resize', handleResizeScroll);\n\n    return () => {\n      window.removeEventListener('keydown', removeKeydown);\n      window.removeEventListener('scroll', handleResizeScroll);\n      window.removeEventListener('resize', handleResizeScroll);\n      removeScrollableContainers(handleResizeScroll);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div className={styles['editor__toolbar-button-group']}>\n      <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n        <button\n          onClick={openFlyout}\n          title={t.links.linkTooltip}\n          className={clsx(\n            styles['editor__toolbar-button'],\n            styles[`editor__toolbar-button--link`],\n            isLink.active && styles['editor__toolbar-button--active']\n          )}\n          aria-label={t.aria.labels.link}\n          aria-keyshortcuts={t.aria.keyshortcuts.link}\n          type=\"button\"\n          ref={linkButtonRef}\n        >\n          <Icon name=\"Link\" size={20} />\n        </button>\n        {flyout}\n      </div>\n    </div>\n  );\n};\n"],"names":["PREVENT_OPEN_DELAY","LinkPlugin","parentScrollPosition","t","useTranslation","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addLinkForm","useRef","preventOpen","previousLinkText","selectedText","isLink","setIsLink","useState","isVisibleRef","storedSelection","linkButtonRef","editLinkForm","storeCursorPosition","selection","$getSelection","rePositionCursor","$setSelection","openContextMenu","url","position","jsx","LinkContextMenu","insertLink","removeLink","closeContextMenu","openFlyout","rect","flyoutOptions","closeFlyout","linktext","$isRangeSelection","anchorNode","linkNode","$getNearestNodeOfType","LinkNode","newTextNode","$createTextNode","anchor","focus","$toggleLink","ensureHttps","TOGGLE_LINK_COMMAND","AddLinkForm","useEffect","handleSelectionClickOrChange","node","domNode","unregisterSelect","SELECTION_CHANGE_COMMAND","unregisterClick","CLICK_COMMAND","event","removeKeyboardShortcut","KEY_DOWN_COMMAND","openFlyoutWithDefaults","linkText","selectedTextContent","COMMAND_PRIORITY_CRITICAL","removeStatusListener","editorState","removeKeydown","setScrollableContainers","handleResizeScroll","removeScrollableContainers","styles","jsxs","clsx","Icon"],"mappings":"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"}
+{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $toggleLink, TOGGLE_LINK_COMMAND, LinkNode } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  $createTextNode,\n  $getSelection,\n  $isRangeSelection,\n  $setSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_CRITICAL,\n  COMMAND_PRIORITY_LOW,\n  KEY_DOWN_COMMAND,\n  mergeRegister,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\n\nimport type { ElementNode, BaseSelection } from 'lexical';\nimport type { addLinkFormMethods } from './AddLinkForm/AddLinkFrom';\nimport type { linkFormMethods } from './LinkContextMenu/LinkContextMenu';\n\nimport { AddLinkForm } from './AddLinkForm/AddLinkFrom';\nimport { ensureHttps } from './helpers';\nimport { LinkContextMenu } from './LinkContextMenu/LinkContextMenu';\n\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nconst PREVENT_OPEN_DELAY = 200;\n\nexport interface LinkType {\n  active: boolean;\n  url: string;\n  linktext: string;\n}\n\ntype Position = {\n  top: number;\n  left: number;\n};\n\ninterface LinkPluginProps {\n  parentScrollPosition: number;\n}\n\nexport const LinkPlugin = ({ parentScrollPosition }: LinkPluginProps) => {\n  const t = useTranslation();\n  const [editor] = useLexicalComposerContext();\n  const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n  const addLinkForm = useRef<addLinkFormMethods>(undefined);\n  const preventOpen = useRef(false);\n  const previousLinkText = useRef('');\n  const selectedText = useRef('');\n  const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', linktext: '' });\n  const isVisibleRef = useRef(isVisible);\n  const storedSelection = useRef<BaseSelection | null>(null);\n  const linkButtonRef = useRef<HTMLButtonElement>(null);\n  const editLinkForm = useRef<linkFormMethods>(undefined);\n\n  const storeCursorPosition = () => {\n    editor.update(() => {\n      const selection = $getSelection();\n      storedSelection.current = selection;\n    });\n  };\n\n  const rePositionCursor = () => {\n    editor.update(() => {\n      if (storedSelection.current) {\n        $setSelection(storedSelection.current);\n      }\n    });\n  };\n\n  const openContextMenu = (url: string, position: Position) => {\n    showFlyout({\n      position,\n      children: (\n        <LinkContextMenu\n          url={url}\n          onSave={(url) => insertLink(url, '')}\n          onDelete={() => removeLink()}\n          onClose={closeContextMenu}\n          ref={editLinkForm}\n        />\n      ),\n    });\n  };\n\n  const closeContextMenu = () => {\n    editLinkForm.current?.clearForm();\n    hideFlyout();\n    rePositionCursor();\n  };\n\n  const openFlyout = () => {\n    const rect = linkButtonRef.current?.getBoundingClientRect();\n    if (!preventOpen.current && rect) {\n      storeCursorPosition();\n      showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n      setTimeout(() => addLinkForm.current?.setDefaults('', selectedText.current), 0);\n    }\n  };\n\n  const closeFlyout = () => {\n    hideFlyout();\n    rePositionCursor();\n  };\n\n  const insertLink = (url: string, linktext: string) => {\n    editor.update(() => {\n      const selection = $getSelection();\n\n      if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        const linkNode = $getNearestNodeOfType(anchorNode, LinkNode);\n\n        if (linktext && linktext !== '') {\n          if (linkNode) {\n            const newTextNode = $createTextNode(linktext);\n            linkNode.replace(newTextNode);\n            newTextNode.select();\n          }\n          if (linktext !== previousLinkText.current && previousLinkText.current === '') {\n            const { anchor, focus } = selection;\n            selection.insertText(linktext);\n            anchor.offset -= linktext.length;\n            focus.offset = anchor.offset + linktext.length;\n          }\n        }\n        $toggleLink(ensureHttps(url), { target: '_blank' });\n      }\n\n      closeFlyout();\n    });\n  };\n\n  const removeLink = (): void => {\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n    closeContextMenu();\n  };\n\n  const flyoutOptions = {\n    children: (\n      <AddLinkForm\n        isLink={isLink}\n        onCloseHandler={closeFlyout}\n        onSaveHandler={(url, linktext) => insertLink(url, linktext)}\n        ref={addLinkForm}\n      />\n    ),\n  };\n\n  useEffect(() => {\n    if (!isVisible) {\n      addLinkForm.current?.clearForm();\n      previousLinkText.current = selectedText.current = '';\n      setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n    } else {\n      preventOpen.current = true;\n      addLinkForm.current?.focusFirstField();\n    }\n  }, [addLinkForm, isVisible]);\n\n  useEffect(() => {\n    const handleSelectionClickOrChange = (selection: BaseSelection | null) => {\n      if ($isRangeSelection(selection) && selection.isCollapsed()) {\n        const anchorNode = selection.anchor.getNode() as ElementNode;\n        const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n        if (node) {\n          const domNode = editor.getElementByKey(selection.anchor.getNode().getKey());\n          const position = domNode\n            ? { top: domNode.getBoundingClientRect().bottom, left: domNode.getBoundingClientRect().left }\n            : { top: 0, left: 0 };\n          openContextMenu(node.getURL(), position);\n          return true;\n        }\n      }\n      return false;\n    };\n\n    const unregisterSelect = editor.registerCommand(\n      SELECTION_CHANGE_COMMAND,\n      () => {\n        const selection = $getSelection();\n        selectedText.current = selection?.getTextContent() ?? '';\n        handleSelectionClickOrChange(selection);\n        return false;\n      },\n      0\n    );\n\n    const unregisterClick = editor.registerCommand(\n      CLICK_COMMAND,\n      (event) => {\n        const selection = $getSelection();\n        storeCursorPosition();\n        event.preventDefault();\n        event.stopPropagation();\n        event.stopImmediatePropagation();\n        handleSelectionClickOrChange(selection);\n        return false;\n      },\n      0\n    );\n\n    return () => {\n      unregisterClick();\n      unregisterSelect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editor]);\n\n  useEffect(() => {\n    const removeKeyboardShortcut = editor.registerCommand(\n      KEY_DOWN_COMMAND,\n      (event: KeyboardEvent) => {\n        if (event.ctrlKey && event.shiftKey && event.key === 'U') {\n          const selection = $getSelection();\n          storeCursorPosition();\n\n          if (!$isRangeSelection(selection)) {\n            return false;\n          }\n\n          const anchorNode = selection.anchor.getNode() as ElementNode;\n          const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n          const openFlyoutWithDefaults = (url = '', linkText = '') => {\n            openFlyout();\n            setTimeout(() => addLinkForm.current?.setDefaults(url, linkText), 0);\n          };\n\n          if (node) {\n            event.preventDefault();\n            event.stopPropagation();\n            event.stopImmediatePropagation();\n\n            previousLinkText.current = node.getTextContent();\n            openFlyoutWithDefaults(node.getURL(), node.getTextContent());\n\n            return true;\n          }\n\n          const selectedTextContent = selection.getTextContent();\n          if (selectedTextContent !== '') {\n            selectedText.current = selectedTextContent;\n            openFlyoutWithDefaults('', selectedText.current);\n\n            return true;\n          }\n\n          openFlyout();\n          return true;\n        }\n\n        return false;\n      },\n      COMMAND_PRIORITY_CRITICAL\n    );\n\n    const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n      setIsLink(\n        editorState.read(() => {\n          const selection = $getSelection();\n          storeCursorPosition();\n\n          if ($isRangeSelection(selection)) {\n            const anchorNode = selection.anchor.getNode() as ElementNode;\n            const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n            if (node) {\n              return {\n                active: true,\n                url: node.getURL(),\n                linktext: node.getTextContent(),\n              };\n            }\n          }\n\n          return {\n            active: false,\n            url: '',\n            linktext: '',\n          };\n        })\n      );\n    });\n\n    return () => {\n      removeKeyboardShortcut();\n      removeStatusListener();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editor]);\n\n  useEffect(() => {\n    isVisibleRef.current = isVisible;\n    if (!isVisible) editLinkForm.current?.clearForm();\n  }, [isVisible]);\n\n  useEffect(() => {\n    if (isVisible) {\n      closeFlyout();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentScrollPosition]);\n\n  useEffect(() => {\n    if (!isLink.active) {\n      hideFlyout();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLink]);\n\n  const handleOnScroll = () => {\n    hideFlyout();\n  };\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        KEY_DOWN_COMMAND,\n        (event: KeyboardEvent) => {\n          if (event.key === 'Escape' && isVisibleRef.current) {\n            event.preventDefault();\n            closeFlyout();\n            return true;\n          }\n          return false;\n        },\n        COMMAND_PRIORITY_LOW\n      ),\n\n      editor.registerRootListener((rootElement, prevRootElement) => {\n        if (prevRootElement) {\n          prevRootElement.removeEventListener('scroll', handleOnScroll);\n        }\n\n        if (rootElement) {\n          rootElement.addEventListener('scroll', handleOnScroll);\n        }\n      })\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editor]);\n\n  return (\n    <div className={styles['editor__toolbar-button-group']}>\n      <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n        <button\n          onClick={openFlyout}\n          title={t.links.linkTooltip}\n          className={clsx(\n            styles['editor__toolbar-button'],\n            styles[`editor__toolbar-button--link`],\n            isLink.active && styles['editor__toolbar-button--active']\n          )}\n          aria-label={t.aria.labels.link}\n          aria-keyshortcuts={t.aria.keyshortcuts.link}\n          type=\"button\"\n          ref={linkButtonRef}\n        >\n          <Icon name=\"Link\" size={20} />\n        </button>\n        {flyout}\n      </div>\n    </div>\n  );\n};\n"],"names":["PREVENT_OPEN_DELAY","LinkPlugin","parentScrollPosition","t","useTranslation","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addLinkForm","useRef","preventOpen","previousLinkText","selectedText","isLink","setIsLink","useState","isVisibleRef","storedSelection","linkButtonRef","editLinkForm","storeCursorPosition","selection","$getSelection","rePositionCursor","$setSelection","openContextMenu","url","position","jsx","LinkContextMenu","insertLink","removeLink","closeContextMenu","openFlyout","rect","flyoutOptions","closeFlyout","linktext","$isRangeSelection","anchorNode","linkNode","$getNearestNodeOfType","LinkNode","newTextNode","$createTextNode","anchor","focus","$toggleLink","ensureHttps","TOGGLE_LINK_COMMAND","AddLinkForm","useEffect","handleSelectionClickOrChange","node","domNode","unregisterSelect","SELECTION_CHANGE_COMMAND","unregisterClick","CLICK_COMMAND","event","removeKeyboardShortcut","KEY_DOWN_COMMAND","openFlyoutWithDefaults","linkText","selectedTextContent","COMMAND_PRIORITY_CRITICAL","removeStatusListener","editorState","handleOnScroll","mergeRegister","COMMAND_PRIORITY_LOW","rootElement","prevRootElement","styles","jsxs","clsx","Icon"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { e as w } from "../../../../LexicalLink.prod-Dp06n3Hn.js";
+import { e as w } from "../../../../LexicalLink.prod-DAVbKER8.js";
 const a = /^(http|https):\/\//, s = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/, A = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/, z = /^(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})?$/, e = (t) => t === "https://" || s.test(t), n = (t) => t === "https://" || z.test(t), o = [
   w(s, (t) => a.test(t) ? t : `//${t}`),
   w(A, (t) => `mailto:${t}`)

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;