@payloadcms/richtext-lexical 3.70.0 → 3.71.0-internal-debug.80dab4c

package/dist/features/toolbars/inline/client/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","useLexicalEditable","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","getDOMSelection","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","t0","$","group","index","editorConfig","DropdownIcon","setDropdownIcon","t1","items","type","length","undefined","t2","t3","t4","activeItems","onActiveChange","t5","features","toolbarInline","groups","_jsxs","className","children","Icon","maxActiveItems","map","item_0","InlineToolbar","floatingToolbarRef","caretRef","closeFloatingToolbar","current","isOpacityZero","style","opacity","isPointerEventsNone","pointerEvents","mouseMoveListener","e","buttons","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","$updateTextFormatFloatingToolbar","selection","nativeSelection","_window","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","window","registerUpdateListener","editorState","registerCommand","ref","i","useInlineToolbar","isText","setIsText","isEditable","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","updatePopup","registerRootListener","InlineToolbarPlugin"],"sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n  COMMAND_PRIORITY_LOW,\n  getDOMSelection,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getDOMRangeRect } from '../../../../../lexical/utils/getDOMRangeRect.js'\nimport { setFloatingElemPosition } from '../../../../../lexical/utils/setFloatingElemPosition.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport './index.scss'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { editorConfig } = useEditorConfigContext()\n\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>()\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent)\n        } else {\n          setDropdownIcon(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]\n      setDropdownIcon(() => item?.ChildComponent)\n    },\n    [group],\n  )\n\n  return (\n    <div\n      className={`inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`}\n      data-toolbar-group-key={group.key}\n      key={group.key}\n    >\n      {group.type === 'dropdown' && group.items.length ? (\n        DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        )\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            return (\n              <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n            )\n          })\n        : null}\n      {index < editorConfig.features.toolbarInline?.groups.length - 1 && (\n        <div className=\"divider\" />\n      )}\n    </div>\n  )\n}\n\nfunction InlineToolbar({\n  anchorElem,\n  editor,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n}): React.ReactNode {\n  const floatingToolbarRef = useRef<HTMLDivElement | null>(null)\n  const caretRef = useRef<HTMLDivElement | null>(null)\n\n  const { editorConfig } = useEditorConfigContext()\n\n  const closeFloatingToolbar = useCallback(() => {\n    if (floatingToolbarRef?.current) {\n      const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n      const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n\n      if (!isOpacityZero) {\n        floatingToolbarRef.current.style.opacity = '0'\n      }\n      if (!isPointerEventsNone) {\n        floatingToolbarRef.current.style.pointerEvents = 'none'\n      }\n    }\n  }, [floatingToolbarRef])\n\n  const mouseMoveListener = useCallback(\n    (e: MouseEvent) => {\n      if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n        const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n        const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n        if (!isOpacityZero || !isPointerEventsNone) {\n          // Check if the mouse is not over the popup\n          const x = e.clientX\n          const y = e.clientY\n          const elementUnderMouse = document.elementFromPoint(x, y)\n          if (!floatingToolbarRef.current.contains(elementUnderMouse)) {\n            // Mouse is not over the target element => not a normal click, but probably a drag\n            closeFloatingToolbar()\n          }\n        }\n      }\n    },\n    [closeFloatingToolbar],\n  )\n\n  const mouseUpListener = useCallback(() => {\n    if (floatingToolbarRef?.current) {\n      if (floatingToolbarRef.current.style.opacity !== '1') {\n        floatingToolbarRef.current.style.opacity = '1'\n      }\n      if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {\n        floatingToolbarRef.current.style.pointerEvents = 'auto'\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    document.addEventListener('mousemove', mouseMoveListener)\n    document.addEventListener('mouseup', mouseUpListener)\n\n    return () => {\n      document.removeEventListener('mousemove', mouseMoveListener)\n      document.removeEventListener('mouseup', mouseUpListener)\n    }\n  }, [floatingToolbarRef, mouseMoveListener, mouseUpListener])\n\n  const $updateTextFormatFloatingToolbar = useCallback(() => {\n    const selection = $getSelection()\n\n    const nativeSelection = getDOMSelection(editor._window)\n\n    if (floatingToolbarRef.current === null) {\n      return\n    }\n\n    const possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor')\n    const isLinkEditorVisible =\n      possibleLinkEditor !== null &&\n      'style' in possibleLinkEditor &&\n      possibleLinkEditor?.style?.['opacity' as keyof typeof possibleLinkEditor.style] === '1'\n\n    const rootElement = editor.getRootElement()\n    if (\n      selection !== null &&\n      nativeSelection !== null &&\n      !nativeSelection.isCollapsed &&\n      rootElement !== null &&\n      rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      const rangeRect = getDOMRangeRect(nativeSelection, rootElement)\n\n      // Position floating toolbar\n      const offsetIfFlipped = setFloatingElemPosition({\n        alwaysDisplayOnTop: isLinkEditorVisible,\n        anchorElem,\n        floatingElem: floatingToolbarRef.current,\n        horizontalPosition: 'center',\n        targetRect: rangeRect,\n      })\n\n      // Position caret\n      if (caretRef.current) {\n        setFloatingElemPosition({\n          anchorElem: floatingToolbarRef.current,\n          anchorFlippedOffset: offsetIfFlipped,\n          floatingElem: caretRef.current,\n          horizontalOffset: 5,\n          horizontalPosition: 'center',\n          specialHandlingForCaret: true,\n          targetRect: rangeRect,\n          verticalGap: 8,\n        })\n      }\n    } else {\n      closeFloatingToolbar()\n    }\n  }, [editor, closeFloatingToolbar, anchorElem])\n\n  useEffect(() => {\n    const scrollerElem = anchorElem.parentElement\n\n    const update = () => {\n      editor.getEditorState().read(() => {\n        $updateTextFormatFloatingToolbar()\n      })\n    }\n\n    window.addEventListener('resize', update)\n    if (scrollerElem) {\n      scrollerElem.addEventListener('scroll', update)\n    }\n\n    return () => {\n      window.removeEventListener('resize', update)\n      if (scrollerElem) {\n        scrollerElem.removeEventListener('scroll', update)\n      }\n    }\n  }, [editor, $updateTextFormatFloatingToolbar, anchorElem])\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      $updateTextFormatFloatingToolbar()\n    })\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          $updateTextFormatFloatingToolbar()\n        })\n      }),\n\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          $updateTextFormatFloatingToolbar()\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, $updateTextFormatFloatingToolbar])\n\n  return (\n    <div className=\"inline-toolbar-popup\" ref={floatingToolbarRef}>\n      <div className=\"caret\" ref={caretRef} />\n      {editorConfig?.features &&\n        editorConfig.features?.toolbarInline?.groups.map((group, i) => {\n          return (\n            <ToolbarGroupComponent\n              anchorElem={anchorElem}\n              editor={editor}\n              group={group}\n              index={i}\n              key={group.key}\n            />\n          )\n        })}\n    </div>\n  )\n}\n\nfunction useInlineToolbar(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n): null | React.ReactElement {\n  const [isText, setIsText] = useState(false)\n  const isEditable = useLexicalEditable()\n\n  const updatePopup = useCallback(() => {\n    editor.getEditorState().read(() => {\n      // Should not to pop up the floating toolbar when using IME input\n      if (editor.isComposing()) {\n        return\n      }\n      const selection = $getSelection()\n      const nativeSelection = getDOMSelection(editor._window)\n      const rootElement = editor.getRootElement()\n\n      if (\n        nativeSelection !== null &&\n        (!$isRangeSelection(selection) ||\n          rootElement === null ||\n          !rootElement.contains(nativeSelection.anchorNode))\n      ) {\n        setIsText(false)\n        return\n      }\n\n      if (!$isRangeSelection(selection)) {\n        return\n      }\n\n      if (selection.getTextContent() !== '') {\n        const nodes = selection.getNodes()\n        let foundNodeWithText = false\n        for (const node of nodes) {\n          if ($isTextNode(node)) {\n            setIsText(true)\n            foundNodeWithText = true\n            break\n          }\n        }\n        if (!foundNodeWithText) {\n          setIsText(false)\n        }\n      } else {\n        setIsText(false)\n      }\n\n      const rawTextContent = selection.getTextContent().replace(/\\n/g, '')\n      if (!selection.isCollapsed() && rawTextContent === '') {\n        setIsText(false)\n        return\n      }\n    })\n  }, [editor])\n\n  useEffect(() => {\n    document.addEventListener('selectionchange', updatePopup)\n    document.addEventListener('mouseup', updatePopup)\n    return () => {\n      document.removeEventListener('selectionchange', updatePopup)\n      document.removeEventListener('mouseup', updatePopup)\n    }\n  }, [updatePopup])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updatePopup()\n      }),\n      editor.registerRootListener(() => {\n        if (editor.getRootElement() === null) {\n          setIsText(false)\n        }\n      }),\n    )\n  }, [editor, updatePopup])\n\n  if (!isText || !isEditable) {\n    return null\n  }\n\n  return createPortal(<InlineToolbar anchorElem={anchorElem} editor={editor} />, anchorElem)\n}\n\nexport const InlineToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n  const [editor] = useLexicalComposerContext()\n\n  return useInlineToolbar(editor, anchorElem)\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n  COMMAND_PRIORITY_LOW,\n  getDOMSelection,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getDOMRangeRect } from '../../../../../lexical/utils/getDOMRangeRect.js'\nimport { setFloatingElemPosition } from '../../../../../lexical/utils/setFloatingElemPosition.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport './index.scss'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { editorConfig } = useEditorConfigContext()\n\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>()\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent)\n        } else {\n          setDropdownIcon(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]\n      setDropdownIcon(() => item?.ChildComponent)\n    },\n    [group],\n  )\n\n  return (\n    <div\n      className={`inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`}\n      data-toolbar-group-key={group.key}\n      key={group.key}\n    >\n      {group.type === 'dropdown' && group.items.length ? (\n        DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        )\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            return (\n              <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n            )\n          })\n        : null}\n      {index < editorConfig.features.toolbarInline?.groups.length - 1 && (\n        <div className=\"divider\" />\n      )}\n    </div>\n  )\n}\n\nfunction InlineToolbar({\n  anchorElem,\n  editor,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n}): React.ReactNode {\n  const floatingToolbarRef = useRef<HTMLDivElement | null>(null)\n  const caretRef = useRef<HTMLDivElement | null>(null)\n\n  const { editorConfig } = useEditorConfigContext()\n\n  const closeFloatingToolbar = useCallback(() => {\n    if (floatingToolbarRef?.current) {\n      const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n      const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n\n      if (!isOpacityZero) {\n        floatingToolbarRef.current.style.opacity = '0'\n      }\n      if (!isPointerEventsNone) {\n        floatingToolbarRef.current.style.pointerEvents = 'none'\n      }\n    }\n  }, [floatingToolbarRef])\n\n  const mouseMoveListener = useCallback(\n    (e: MouseEvent) => {\n      if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n        const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n        const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n        if (!isOpacityZero || !isPointerEventsNone) {\n          // Check if the mouse is not over the popup\n          const x = e.clientX\n          const y = e.clientY\n          const elementUnderMouse = document.elementFromPoint(x, y)\n          if (!floatingToolbarRef.current.contains(elementUnderMouse)) {\n            // Mouse is not over the target element => not a normal click, but probably a drag\n            closeFloatingToolbar()\n          }\n        }\n      }\n    },\n    [closeFloatingToolbar],\n  )\n\n  const mouseUpListener = useCallback(() => {\n    if (floatingToolbarRef?.current) {\n      if (floatingToolbarRef.current.style.opacity !== '1') {\n        floatingToolbarRef.current.style.opacity = '1'\n      }\n      if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {\n        floatingToolbarRef.current.style.pointerEvents = 'auto'\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    document.addEventListener('mousemove', mouseMoveListener)\n    document.addEventListener('mouseup', mouseUpListener)\n\n    return () => {\n      document.removeEventListener('mousemove', mouseMoveListener)\n      document.removeEventListener('mouseup', mouseUpListener)\n    }\n  }, [floatingToolbarRef, mouseMoveListener, mouseUpListener])\n\n  const $updateTextFormatFloatingToolbar = useCallback(() => {\n    const selection = $getSelection()\n\n    const nativeSelection = getDOMSelection(editor._window)\n\n    if (floatingToolbarRef.current === null) {\n      return\n    }\n\n    const possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor')\n    const isLinkEditorVisible =\n      possibleLinkEditor !== null &&\n      'style' in possibleLinkEditor &&\n      possibleLinkEditor?.style?.['opacity' as keyof typeof possibleLinkEditor.style] === '1'\n\n    const rootElement = editor.getRootElement()\n    if (\n      selection !== null &&\n      nativeSelection !== null &&\n      !nativeSelection.isCollapsed &&\n      rootElement !== null &&\n      rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      const rangeRect = getDOMRangeRect(nativeSelection, rootElement)\n\n      // Position floating toolbar\n      const offsetIfFlipped = setFloatingElemPosition({\n        alwaysDisplayOnTop: isLinkEditorVisible,\n        anchorElem,\n        floatingElem: floatingToolbarRef.current,\n        horizontalPosition: 'center',\n        targetRect: rangeRect,\n      })\n\n      // Position caret\n      if (caretRef.current) {\n        setFloatingElemPosition({\n          anchorElem: floatingToolbarRef.current,\n          anchorFlippedOffset: offsetIfFlipped,\n          floatingElem: caretRef.current,\n          horizontalOffset: 5,\n          horizontalPosition: 'center',\n          specialHandlingForCaret: true,\n          targetRect: rangeRect,\n          verticalGap: 8,\n        })\n      }\n    } else {\n      closeFloatingToolbar()\n    }\n  }, [editor, closeFloatingToolbar, anchorElem])\n\n  useEffect(() => {\n    const scrollerElem = anchorElem.parentElement\n\n    const update = () => {\n      editor.getEditorState().read(() => {\n        $updateTextFormatFloatingToolbar()\n      })\n    }\n\n    window.addEventListener('resize', update)\n    if (scrollerElem) {\n      scrollerElem.addEventListener('scroll', update)\n    }\n\n    return () => {\n      window.removeEventListener('resize', update)\n      if (scrollerElem) {\n        scrollerElem.removeEventListener('scroll', update)\n      }\n    }\n  }, [editor, $updateTextFormatFloatingToolbar, anchorElem])\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      $updateTextFormatFloatingToolbar()\n    })\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          $updateTextFormatFloatingToolbar()\n        })\n      }),\n\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          $updateTextFormatFloatingToolbar()\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, $updateTextFormatFloatingToolbar])\n\n  return (\n    <div className=\"inline-toolbar-popup\" ref={floatingToolbarRef}>\n      <div className=\"caret\" ref={caretRef} />\n      {editorConfig?.features &&\n        editorConfig.features?.toolbarInline?.groups.map((group, i) => {\n          return (\n            <ToolbarGroupComponent\n              anchorElem={anchorElem}\n              editor={editor}\n              group={group}\n              index={i}\n              key={group.key}\n            />\n          )\n        })}\n    </div>\n  )\n}\n\nfunction useInlineToolbar(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n): null | React.ReactElement {\n  const [isText, setIsText] = useState(false)\n  const isEditable = useLexicalEditable()\n\n  const updatePopup = useCallback(() => {\n    editor.getEditorState().read(() => {\n      // Should not to pop up the floating toolbar when using IME input\n      if (editor.isComposing()) {\n        return\n      }\n      const selection = $getSelection()\n      const nativeSelection = getDOMSelection(editor._window)\n      const rootElement = editor.getRootElement()\n\n      if (\n        nativeSelection !== null &&\n        (!$isRangeSelection(selection) ||\n          rootElement === null ||\n          !rootElement.contains(nativeSelection.anchorNode))\n      ) {\n        setIsText(false)\n        return\n      }\n\n      if (!$isRangeSelection(selection)) {\n        return\n      }\n\n      if (selection.getTextContent() !== '') {\n        const nodes = selection.getNodes()\n        let foundNodeWithText = false\n        for (const node of nodes) {\n          if ($isTextNode(node)) {\n            setIsText(true)\n            foundNodeWithText = true\n            break\n          }\n        }\n        if (!foundNodeWithText) {\n          setIsText(false)\n        }\n      } else {\n        setIsText(false)\n      }\n\n      const rawTextContent = selection.getTextContent().replace(/\\n/g, '')\n      if (!selection.isCollapsed() && rawTextContent === '') {\n        setIsText(false)\n        return\n      }\n    })\n  }, [editor])\n\n  useEffect(() => {\n    document.addEventListener('selectionchange', updatePopup)\n    document.addEventListener('mouseup', updatePopup)\n    return () => {\n      document.removeEventListener('selectionchange', updatePopup)\n      document.removeEventListener('mouseup', updatePopup)\n    }\n  }, [updatePopup])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updatePopup()\n      }),\n      editor.registerRootListener(() => {\n        if (editor.getRootElement() === null) {\n          setIsText(false)\n        }\n      }),\n    )\n  }, [editor, updatePopup])\n\n  if (!isText || !isEditable) {\n    return null\n  }\n\n  return createPortal(<InlineToolbar anchorElem={anchorElem} editor={editor} />, anchorElem)\n}\n\nexport const InlineToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n  const [editor] = useLexicalComposerContext()\n\n  return useInlineToolbar(editor, anchorElem)\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","getDOMSelection","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","group","index","editorConfig","DropdownIcon","setDropdownIcon","type","items","length","undefined","onActiveChange","activeItems","div","className","data-toolbar-group-key","Icon","maxActiveItems","map","features","toolbarInline","groups","InlineToolbar","floatingToolbarRef","caretRef","closeFloatingToolbar","current","isOpacityZero","style","opacity","isPointerEventsNone","pointerEvents","mouseMoveListener","e","buttons","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","$updateTextFormatFloatingToolbar","selection","nativeSelection","_window","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","window","registerUpdateListener","editorState","registerCommand","ref","i","useInlineToolbar","isText","setIsText","isEditable","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","InlineToolbarPlugin"],"mappings":"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"}

package/dist/features/toolbars/inline/client/Toolbar/index.scss

@@ -0,0 +1,58 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .inline-toolbar-popup {
+    display: flex;
+    align-items: center;
+    background: var(--theme-input-bg);
+    padding: base(0.2);
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    opacity: 0;
+    border-radius: $style-radius-m;
+    transition: opacity 0.2s;
+    will-change: transform;
+    box-shadow:
+      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+      0px 4px 16px 0px rgba(0, 0, 0, 0.2),
+      0px -4px 8px 0px rgba(0, 0, 0, 0.1);
+
+    .caret {
+      z-index: 93;
+      position: absolute;
+      top: calc(100% - 24px);
+      border: base(0.4) solid transparent;
+      pointer-events: none;
+      border-top-color: var(--theme-input-bg);
+    }
+
+    &__group {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+
+      .icon {
+        min-width: 20px;
+        height: 20px;
+        color: var(--theme-elevation-600);
+      }
+
+      .divider {
+        width: 1px;
+        height: 15px;
+        background-color: var(--theme-border-color);
+        margin: 0 6.25px;
+      }
+    }
+  }
+  html[data-theme='light'] {
+    .inline-toolbar-popup {
+      box-shadow:
+        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    }
+  }
+}

package/dist/features/toolbars/inline/client/index.js

@@ -1,11 +1,13 @@
 'use client';
-
 import { createClientFeature } from '../../../../utilities/createClientFeature.js';
 import { InlineToolbarPlugin } from './Toolbar/index.js';
 export const InlineToolbarFeatureClient = createClientFeature({
-  plugins: [{
-    Component: InlineToolbarPlugin,
-    position: 'floatingAnchorElem'
-  }]
+    plugins: [
+        {
+            Component: InlineToolbarPlugin,
+            position: 'floatingAnchorElem'
+        }
+    ]
 });
+
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/inline/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createClientFeature","InlineToolbarPlugin","InlineToolbarFeatureClient","plugins","Component","position"],"sources":["../../../../../src/features/toolbars/inline/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { createClientFeature } from '../../../../utilities/createClientFeature.js'\nimport { InlineToolbarPlugin } from './Toolbar/index.js'\n\nexport const InlineToolbarFeatureClient = createClientFeature({\n  plugins: [\n    {\n      Component: InlineToolbarPlugin,\n      position: 'floatingAnchorElem',\n    },\n  ],\n})\n"],"mappings":"AAAA;;AAEA,SAASA,mBAAmB,QAAQ;AACpC,SAASC,mBAAmB,QAAQ;AAEpC,OAAO,MAAMC,0BAAA,GAA6BF,mBAAA,CAAoB;EAC5DG,OAAA,EAAS,CACP;IACEC,SAAA,EAAWH,mBAAA;IACXI,QAAA,EAAU;EACZ;AAEJ","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/inline/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { createClientFeature } from '../../../../utilities/createClientFeature.js'\nimport { InlineToolbarPlugin } from './Toolbar/index.js'\n\nexport const InlineToolbarFeatureClient = createClientFeature({\n  plugins: [\n    {\n      Component: InlineToolbarPlugin,\n      position: 'floatingAnchorElem',\n    },\n  ],\n})\n"],"names":["createClientFeature","InlineToolbarPlugin","InlineToolbarFeatureClient","plugins","Component","position"],"mappings":"AAAA;AAEA,SAASA,mBAAmB,QAAQ,+CAA8C;AAClF,SAASC,mBAAmB,QAAQ,qBAAoB;AAExD,OAAO,MAAMC,6BAA6BF,oBAAoB;IAC5DG,SAAS;QACP;YACEC,WAAWH;YACXI,UAAU;QACZ;KACD;AACH,GAAE"}

package/dist/features/toolbars/inline/server/index.js

@@ -1,8 +1,9 @@
 import { createServerFeature } from '../../../../utilities/createServerFeature.js';
 export const InlineToolbarFeature = createServerFeature({
-  feature: {
-    ClientFeature: '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient'
-  },
-  key: 'toolbarInline'
+    feature: {
+        ClientFeature: '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient'
+    },
+    key: 'toolbarInline'
 });
+
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/inline/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createServerFeature","InlineToolbarFeature","feature","ClientFeature","key"],"sources":["../../../../../src/features/toolbars/inline/server/index.ts"],"sourcesContent":["import { createServerFeature } from '../../../../utilities/createServerFeature.js'\n\nexport const InlineToolbarFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient',\n  },\n  key: 'toolbarInline',\n})\n"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ;AAEpC,OAAO,MAAMC,oBAAA,GAAuBD,mBAAA,CAAoB;EACtDE,OAAA,EAAS;IACPC,aAAA,EAAe;EACjB;EACAC,GAAA,EAAK;AACP","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/inline/server/index.ts"],"sourcesContent":["import { createServerFeature } from '../../../../utilities/createServerFeature.js'\n\nexport const InlineToolbarFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient',\n  },\n  key: 'toolbarInline',\n})\n"],"names":["createServerFeature","InlineToolbarFeature","feature","ClientFeature","key"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,+CAA8C;AAElF,OAAO,MAAMC,uBAAuBD,oBAAoB;IACtDE,SAAS;QACPC,eAAe;IACjB;IACAC,KAAK;AACP,GAAE"}

package/dist/features/toolbars/shared/ToolbarButton/index.js

@@ -1,156 +1,114 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { mergeRegister } from '@lexical/utils';
 import { $addUpdateTag, $getSelection } from 'lexical';
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import './index.scss';
 import { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js';
 const baseClass = 'toolbar-popup__button';
-export const ToolbarButton = t0 => {
-  const $ = _c(23);
-  const {
-    children,
-    editor,
-    item
-  } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      active: false,
-      enabled: true
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const [_state, setState] = useState(t1);
-  const deferredState = useDeferredValue(_state);
-  const editorConfigContext = useEditorConfigContext();
-  const t2 = !deferredState.enabled ? "disabled" : "";
-  const t3 = deferredState.active ? "active" : "";
-  const t4 = item.key ? `${baseClass}-${item.key}` : "";
-  let t5;
-  if ($[1] !== t2 || $[2] !== t3 || $[3] !== t4) {
-    t5 = [baseClass, t2, t3, t4].filter(Boolean);
-    $[1] = t2;
-    $[2] = t3;
-    $[3] = t4;
-    $[4] = t5;
-  } else {
-    t5 = $[4];
-  }
-  const className = t5.join(" ");
-  let t6;
-  if ($[5] !== editor || $[6] !== editorConfigContext || $[7] !== item) {
-    t6 = () => {
-      editor.getEditorState().read(() => {
-        const selection = $getSelection();
-        if (!selection) {
-          return;
-        }
-        const newActive = item.isActive ? item.isActive({
-          editor,
-          editorConfigContext,
-          selection
-        }) : false;
-        const newEnabled = item.isEnabled ? item.isEnabled({
-          editor,
-          editorConfigContext,
-          selection
-        }) : true;
-        setState(prev => {
-          if (prev.active === newActive && prev.enabled === newEnabled) {
-            return prev;
-          }
-          return {
-            active: newActive,
-            enabled: newEnabled
-          };
+export const ToolbarButton = ({ children, editor, item })=>{
+    const [_state, setState] = useState({
+        active: false,
+        enabled: true
+    });
+    const deferredState = useDeferredValue(_state);
+    const editorConfigContext = useEditorConfigContext();
+    const className = useMemo(()=>{
+        return [
+            baseClass,
+            !deferredState.enabled ? 'disabled' : '',
+            deferredState.active ? 'active' : '',
+            item.key ? `${baseClass}-${item.key}` : ''
+        ].filter(Boolean).join(' ');
+    }, [
+        deferredState,
+        item.key
+    ]);
+    const updateStates = useCallback(()=>{
+        editor.getEditorState().read(()=>{
+            const selection = $getSelection();
+            if (!selection) {
+                return;
+            }
+            const newActive = item.isActive ? item.isActive({
+                editor,
+                editorConfigContext,
+                selection
+            }) : false;
+            const newEnabled = item.isEnabled ? item.isEnabled({
+                editor,
+                editorConfigContext,
+                selection
+            }) : true;
+            setState((prev)=>{
+                if (prev.active === newActive && prev.enabled === newEnabled) {
+                    return prev;
+                }
+                return {
+                    active: newActive,
+                    enabled: newEnabled
+                };
+            });
         });
-      });
-    };
-    $[5] = editor;
-    $[6] = editorConfigContext;
-    $[7] = item;
-    $[8] = t6;
-  } else {
-    t6 = $[8];
-  }
-  const updateStates = t6;
-  const runDeprioritized = useRunDeprioritized();
-  let t7;
-  let t8;
-  if ($[9] !== editor || $[10] !== runDeprioritized || $[11] !== updateStates) {
-    t7 = () => {
-      runDeprioritized(updateStates);
-      const listener = () => runDeprioritized(updateStates);
-      const cleanup = mergeRegister(editor.registerUpdateListener(listener));
-      document.addEventListener("mouseup", listener);
-      return () => {
-        cleanup();
-        document.removeEventListener("mouseup", listener);
-      };
-    };
-    t8 = [editor, runDeprioritized, updateStates];
-    $[9] = editor;
-    $[10] = runDeprioritized;
-    $[11] = updateStates;
-    $[12] = t7;
-    $[13] = t8;
-  } else {
-    t7 = $[12];
-    t8 = $[13];
-  }
-  useEffect(t7, t8);
-  let t9;
-  if ($[14] !== _state || $[15] !== editor || $[16] !== item) {
-    t9 = () => {
-      if (!_state.enabled) {
-        return;
-      }
-      editor.focus(() => {
-        editor.update(_temp);
-        item.onSelect?.({
-          editor,
-          isActive: _state.active
+    }, [
+        editor,
+        editorConfigContext,
+        item
+    ]);
+    const runDeprioritized = useRunDeprioritized();
+    useEffect(()=>{
+        // Run on mount
+        void runDeprioritized(updateStates);
+        const listener = ()=>runDeprioritized(updateStates);
+        const cleanup = mergeRegister(editor.registerUpdateListener(listener));
+        document.addEventListener('mouseup', listener);
+        return ()=>{
+            cleanup();
+            document.removeEventListener('mouseup', listener);
+        };
+    }, [
+        editor,
+        runDeprioritized,
+        updateStates
+    ]);
+    const handleClick = useCallback(()=>{
+        if (!_state.enabled) {
+            return;
+        }
+        editor.focus(()=>{
+            editor.update(()=>{
+                $addUpdateTag('toolbar');
+            });
+            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
+            item.onSelect?.({
+                editor,
+                isActive: _state.active
+            });
         });
-      });
-    };
-    $[14] = _state;
-    $[15] = editor;
-    $[16] = item;
-    $[17] = t9;
-  } else {
-    t9 = $[17];
-  }
-  const handleClick = t9;
-  const handleMouseDown = _temp2;
-  let t10;
-  if ($[18] !== children || $[19] !== className || $[20] !== handleClick || $[21] !== item.key) {
-    t10 = _jsx("button", {
-      className,
-      "data-button-key": item.key,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      type: "button",
-      children
-    });
-    $[18] = children;
-    $[19] = className;
-    $[20] = handleClick;
-    $[21] = item.key;
-    $[22] = t10;
-  } else {
-    t10 = $[22];
-  }
-  return t10;
+    }, [
+        editor,
+        item,
+        _state
+    ]);
+    const handleMouseDown = useCallback((e)=>{
+        // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).
+        // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025
+        // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.
+        e.preventDefault();
+    }, []);
+    return /*#__PURE__*/ _jsxDEV("button", {
+        className: className,
+        "data-button-key": item.key,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        type: "button",
+        children: children
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarButton/index.tsx",
+        lineNumber: 105,
+        columnNumber: 5
+    }, this);
 };
-function _temp() {
-  $addUpdateTag("toolbar");
-}
-function _temp2(e) {
-  e.preventDefault();
-}
+
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/shared/ToolbarButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","mergeRegister","$addUpdateTag","$getSelection","React","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","t0","$","children","editor","item","t1","Symbol","for","active","enabled","_state","setState","deferredState","editorConfigContext","t2","t3","t4","key","t5","filter","Boolean","className","join","t6","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","updateStates","runDeprioritized","t7","t8","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","t9","focus","update","_temp","onSelect","handleClick","handleMouseDown","_temp2","t10","_jsx","onClick","onMouseDown","type","e","preventDefault"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\n      // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n      item.onSelect?.({\n        editor,\n        isActive: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n    // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n    // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n    e.preventDefault()\n  }, [])\n\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\n      // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n      item.onSelect?.({\n        editor,\n        isActive: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n    // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n    // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n    e.preventDefault()\n  }, [])\n\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["mergeRegister","$addUpdateTag","$getSelection","React","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","children","editor","item","_state","setState","active","enabled","deferredState","editorConfigContext","className","key","filter","Boolean","join","updateStates","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","runDeprioritized","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","handleClick","focus","update","onSelect","handleMouseDown","e","preventDefault","button","data-button-key","onClick","onMouseDown","type"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,EAAEC,aAAa,QAAQ,UAAS;AACtD,OAAOC,SAASC,WAAW,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI1F,SAASC,sBAAsB,QAAQ,4DAA2D;AAClG,OAAO,eAAc;AACrB,SAASC,mBAAmB,QAAQ,+CAA8C;AAElF,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EAKL;IACC,MAAM,CAACC,QAAQC,SAAS,GAAGT,SAAS;QAAEU,QAAQ;QAAOC,SAAS;IAAK;IACnE,MAAMC,gBAAgBf,iBAAiBW;IAEvC,MAAMK,sBAAsBZ;IAE5B,MAAMa,YAAYf,QAAQ;QACxB,OAAO;YACLI;YACA,CAACS,cAAcD,OAAO,GAAG,aAAa;YACtCC,cAAcF,MAAM,GAAG,WAAW;YAClCH,KAAKQ,GAAG,GAAG,GAAGZ,UAAU,CAAC,EAAEI,KAAKQ,GAAG,EAAE,GAAG;SACzC,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV,GAAG;QAACN;QAAeL,KAAKQ,GAAG;KAAC;IAC5B,MAAMI,eAAevB,YAAY;QAC/BU,OAAOc,cAAc,GAAGC,IAAI,CAAC;YAC3B,MAAMC,YAAY5B;YAClB,IAAI,CAAC4B,WAAW;gBACd;YACF;YACA,MAAMC,YAAYhB,KAAKiB,QAAQ,GAC3BjB,KAAKiB,QAAQ,CAAC;gBAAElB;gBAAQO;gBAAqBS;YAAU,KACvD;YAEJ,MAAMG,aAAalB,KAAKmB,SAAS,GAC7BnB,KAAKmB,SAAS,CAAC;gBAAEpB;gBAAQO;gBAAqBS;YAAU,KACxD;YAEJb,SAAS,CAACkB;gBACR,IAAIA,KAAKjB,MAAM,KAAKa,aAAaI,KAAKhB,OAAO,KAAKc,YAAY;oBAC5D,OAAOE;gBACT;gBACA,OAAO;oBAAEjB,QAAQa;oBAAWZ,SAASc;gBAAW;YAClD;QACF;IACF,GAAG;QAACnB;QAAQO;QAAqBN;KAAK;IAEtC,MAAMqB,mBAAmB1B;IAEzBJ,UAAU;QACR,eAAe;QACf,KAAK8B,iBAAiBT;QAEtB,MAAMU,WAAW,IAAMD,iBAAiBT;QAExC,MAAMW,UAAUtC,cAAcc,OAAOyB,sBAAsB,CAACF;QAC5DG,SAASC,gBAAgB,CAAC,WAAWJ;QAErC,OAAO;YACLC;YACAE,SAASE,mBAAmB,CAAC,WAAWL;QAC1C;IACF,GAAG;QAACvB;QAAQsB;QAAkBT;KAAa;IAE3C,MAAMgB,cAAcvC,YAAY;QAC9B,IAAI,CAACY,OAAOG,OAAO,EAAE;YACnB;QACF;QAEAL,OAAO8B,KAAK,CAAC;YACX9B,OAAO+B,MAAM,CAAC;gBACZ5C,cAAc;YAChB;YACA,iHAAiH;YACjHc,KAAK+B,QAAQ,GAAG;gBACdhC;gBACAkB,UAAUhB,OAAOE,MAAM;YACzB;QACF;IACF,GAAG;QAACJ;QAAQC;QAAMC;KAAO;IAEzB,MAAM+B,kBAAkB3C,YAAY,CAAC4C;QACnC,8HAA8H;QAC9H,2JAA2J;QAC3J,sKAAsK;QACtKA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,QAACC;QACC5B,WAAWA;QACX6B,mBAAiBpC,KAAKQ,GAAG;QACzB6B,SAAST;QACTU,aAAaN;QACbO,MAAK;kBAEJzC;;;;;;AAGP,EAAC"}

package/dist/features/toolbars/shared/ToolbarButton/index.scss

@@ -0,0 +1,46 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .toolbar-popup__button {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    height: 30px;
+    width: 30px;
+    border: 0;
+    background: none;
+    border-radius: $style-radius-m;
+    cursor: pointer;
+    padding: 0;
+    transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+
+    &.spaced {
+      margin-right: 2px;
+    }
+
+    &:hover:not(.disabled) {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &.active {
+      background-color: var(--theme-elevation-150);
+      color: var(--theme-text);
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+
+      .icon {
+        opacity: 1;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      .icon {
+        opacity: 0.2;
+      }
+    }
+  }
+}