@payloadcms/richtext-lexical 3.80.0-canary.3 → 3.80.0-internal-debug.daef79f

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","useMemo","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","useToolbarStates","ButtonGroupItem","active","anchorElem","editor","enabled","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","group","index","toolbarStates","editorConfig","groupState","groupStates","get","DropdownIcon","type","undefined","activeItem","activeItems","_jsxs","className","items","length","Icon","map","itemState","itemStates","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","t0","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","updatePopup","t1","t2","t3","t4","registerRootListener","t5","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, useMemo, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../../typesClient.js'\nimport type { ToolbarStates } from '../../../shared/useToolbarStates.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 { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport { useToolbarStates } from '../../../shared/useToolbarStates.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled: boolean\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 active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  group,\n  index,\n  toolbarStates,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  group: ToolbarGroup\n  index: number\n  toolbarStates: ToolbarStates\n}): React.ReactNode {\n  const { editorConfig } = useEditorConfigContext()\n\n  const groupState = toolbarStates.groupStates.get(group.key)\n\n  const DropdownIcon = useMemo(() => {\n    if (group.type !== 'dropdown') {\n      return undefined\n    }\n    const activeItem = groupState?.activeItems?.[0]\n    return activeItem?.ChildComponent ?? group.ChildComponent\n  }, [group, groupState?.activeItems])\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 && groupState ? (\n        <ToolbarDropdown\n          anchorElem={anchorElem}\n          editor={editor}\n          group={group}\n          groupState={groupState}\n          Icon={DropdownIcon}\n        />\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            const itemState = toolbarStates.itemStates.get(item.key)\n            return (\n              <ButtonGroupItem\n                active={itemState?.active ?? false}\n                anchorElem={anchorElem}\n                editor={editor}\n                enabled={itemState?.enabled ?? true}\n                item={item}\n                key={item.key}\n              />\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 toolbarStates = useToolbarStates(editor, editorConfig?.features?.toolbarInline?.groups)\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              toolbarStates={toolbarStates}\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, useMemo, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../../typesClient.js'\nimport type { ToolbarStates } from '../../../shared/useToolbarStates.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 { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport { useToolbarStates } from '../../../shared/useToolbarStates.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled: boolean\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 active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  group,\n  index,\n  toolbarStates,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  group: ToolbarGroup\n  index: number\n  toolbarStates: ToolbarStates\n}): React.ReactNode {\n  const { editorConfig } = useEditorConfigContext()\n\n  const groupState = toolbarStates.groupStates.get(group.key)\n\n  const DropdownIcon = useMemo(() => {\n    if (group.type !== 'dropdown') {\n      return undefined\n    }\n    const activeItem = groupState?.activeItems?.[0]\n    return activeItem?.ChildComponent ?? group.ChildComponent\n  }, [group, groupState?.activeItems])\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 && groupState ? (\n        <ToolbarDropdown\n          anchorElem={anchorElem}\n          editor={editor}\n          group={group}\n          groupState={groupState}\n          Icon={DropdownIcon}\n        />\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            const itemState = toolbarStates.itemStates.get(item.key)\n            return (\n              <ButtonGroupItem\n                active={itemState?.active ?? false}\n                anchorElem={anchorElem}\n                editor={editor}\n                enabled={itemState?.enabled ?? true}\n                item={item}\n                key={item.key}\n              />\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 toolbarStates = useToolbarStates(editor, editorConfig?.features?.toolbarInline?.groups)\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              toolbarStates={toolbarStates}\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","useMemo","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","useToolbarStates","ButtonGroupItem","active","anchorElem","editor","enabled","item","Component","key","ChildComponent","ToolbarGroupComponent","group","index","toolbarStates","editorConfig","groupState","groupStates","get","DropdownIcon","type","undefined","activeItem","activeItems","div","className","data-toolbar-group-key","items","length","Icon","map","itemState","itemStates","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,83 +1,60 @@
 '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 { $addUpdateTag } from 'lexical';
 import React, { useCallback, useMemo } from 'react';
+import './index.scss';
 const baseClass = 'toolbar-popup__button';
-export const ToolbarButton = t0 => {
-  const $ = _c(14);
-  const {
-    active: t1,
-    children,
-    editor,
-    enabled: t2,
-    item
-  } = t0;
-  const active = t1 === undefined ? false : t1;
-  const enabled = t2 === undefined ? true : t2;
-  const t3 = !enabled ? "disabled" : "";
-  const t4 = active ? "active" : "";
-  const t5 = item.key ? `${baseClass}-${item.key}` : "";
-  let t6;
-  if ($[0] !== t3 || $[1] !== t4 || $[2] !== t5) {
-    t6 = [baseClass, t3, t4, t5].filter(Boolean);
-    $[0] = t3;
-    $[1] = t4;
-    $[2] = t5;
-    $[3] = t6;
-  } else {
-    t6 = $[3];
-  }
-  const className = t6.join(" ");
-  let t7;
-  if ($[4] !== active || $[5] !== editor || $[6] !== enabled || $[7] !== item) {
-    t7 = () => {
-      if (!enabled) {
-        return;
-      }
-      editor.focus(() => {
-        editor.update(_temp);
-        item.onSelect?.({
-          editor,
-          isActive: active
+export const ToolbarButton = ({ active = false, children, editor, enabled = true, item })=>{
+    const className = useMemo(()=>{
+        return [
+            baseClass,
+            !enabled ? 'disabled' : '',
+            active ? 'active' : '',
+            item.key ? `${baseClass}-${item.key}` : ''
+        ].filter(Boolean).join(' ');
+    }, [
+        active,
+        enabled,
+        item.key
+    ]);
+    const handleClick = useCallback(()=>{
+        if (!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: active
+            });
         });
-      });
-    };
-    $[4] = active;
-    $[5] = editor;
-    $[6] = enabled;
-    $[7] = item;
-    $[8] = t7;
-  } else {
-    t7 = $[8];
-  }
-  const handleClick = t7;
-  const handleMouseDown = _temp2;
-  let t8;
-  if ($[9] !== children || $[10] !== className || $[11] !== handleClick || $[12] !== item.key) {
-    t8 = _jsx("button", {
-      className,
-      "data-button-key": item.key,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      type: "button",
-      children
-    });
-    $[9] = children;
-    $[10] = className;
-    $[11] = handleClick;
-    $[12] = item.key;
-    $[13] = t8;
-  } else {
-    t8 = $[13];
-  }
-  return t8;
+    }, [
+        editor,
+        item,
+        active,
+        enabled
+    ]);
+    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: 62,
+        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","$addUpdateTag","React","useCallback","useMemo","baseClass","ToolbarButton","t0","$","active","t1","children","editor","enabled","t2","item","undefined","t3","t4","t5","key","t6","filter","Boolean","className","join","t7","focus","update","_temp","onSelect","isActive","handleClick","handleMouseDown","_temp2","t8","_jsx","onClick","onMouseDown","type","e","preventDefault"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { $addUpdateTag } from 'lexical'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  active = false,\n  children,\n  editor,\n  enabled = true,\n  item,\n}: {\n  active?: boolean\n  children: React.JSX.Element\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !enabled ? 'disabled' : '',\n      active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [active, enabled, item.key])\n\n  const handleClick = useCallback(() => {\n    if (!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: active,\n      })\n    })\n  }, [editor, item, active, enabled])\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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,IAASC,WAAW,EAAEC,OAAO,QAAQ;AAM5C,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAAgBC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,MAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC,MAAA;IAAAC,OAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAR,EAY7B;EAXC,MAAAE,MAAA,GAAAC,EAAc,KAAAM,SAAA,WAAdN,EAAc;EAGd,MAAAG,OAAA,GAAAC,EAAc,KAAAE,SAAA,UAAdF,EAAc;EAYV,MAAAG,EAAA,IAACJ,OAAA,GAAU,aAAa;EACxB,MAAAK,EAAA,GAAAT,MAAA,GAAS,WAAW;EACpB,MAAAU,EAAA,GAAAJ,IAAA,CAAAK,GAAA,GAAW,GAAAf,SAAA,IAAgBU,IAAA,CAAAK,GAAA,EAAU,GAAG;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAS,EAAA,IAAAT,CAAA,QAAAU,EAAA,IAAAV,CAAA,QAAAW,EAAA;IAJnCE,EAAA,IAAAhB,SAAA,EAELY,EAAwB,EACxBC,EAAoB,EACpBC,EAAwC,EAAAG,MAAA,CAAAC,OAEhC;IAAAf,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAPZ,MAAAgB,SAAA,GACSH,EAMG,CAAAI,IAAA,CACF;EACoB,IAAAC,EAAA;EAAA,IAAAlB,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,IAAA;IAEEW,EAAA,GAAAA,CAAA;MAAA,KACzBb,OAAA;QAAA;MAAA;MAILD,MAAA,CAAAe,KAAA;QACEf,MAAA,CAAAgB,MAAA,CAAAC,KAEA;QAEAd,IAAA,CAAAe,QAAA;UAAAlB,MAAA;UAAAmB,QAAA,EAEYtB;QAAA;MAAA,CAEd;IAAA;IACFD,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAI,MAAA;IAAAJ,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,IAAA;IAAAP,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAfA,MAAAwB,WAAA,GAAoBN,EAec;EAElC,MAAAO,eAAA,GAAAC,MAAA;EAKK,IAAAC,EAAA;EAAA,IAAA3B,CAAA,QAAAG,QAAA,IAAAH,CAAA,SAAAgB,SAAA,IAAAhB,CAAA,SAAAwB,WAAA,IAAAxB,CAAA,SAAAO,IAAA,CAAAK,GAAA;IAGHe,EAAA,GAAAC,IAAA,CAAC;MAAAZ,SAAA;MAAA,mBAEkBT,IAAA,CAAAK,GAAA;MAAAiB,OAAA,EACRL,WAAA;MAAAM,WAAA,EACIL,eAAA;MAAAM,IAAA,EACR;MAAA5B;IAAA,C;;;;;;;;;SALPwB,E;CAUJ;AA3D6B,SAAAN,MAAA;EA+BrB5B,aAAA,CAAc;AAAA;AA/BO,SAAAiC,OAAAM,CAAA;EA6CzBA,CAAA,CAAAC,cAAA,CAAgB;AAAA","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { $addUpdateTag } from 'lexical'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  active = false,\n  children,\n  editor,\n  enabled = true,\n  item,\n}: {\n  active?: boolean\n  children: React.JSX.Element\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !enabled ? 'disabled' : '',\n      active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [active, enabled, item.key])\n\n  const handleClick = useCallback(() => {\n    if (!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: active,\n      })\n    })\n  }, [editor, item, active, enabled])\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":["$addUpdateTag","React","useCallback","useMemo","baseClass","ToolbarButton","active","children","editor","enabled","item","className","key","filter","Boolean","join","handleClick","focus","update","onSelect","isActive","handleMouseDown","e","preventDefault","button","data-button-key","onClick","onMouseDown","type"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,UAAS;AACvC,OAAOC,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAO;AAInD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,KAAK,EACdC,QAAQ,EACRC,MAAM,EACNC,UAAU,IAAI,EACdC,IAAI,EAOL;IACC,MAAMC,YAAYR,QAAQ;QACxB,OAAO;YACLC;YACA,CAACK,UAAU,aAAa;YACxBH,SAAS,WAAW;YACpBI,KAAKE,GAAG,GAAG,GAAGR,UAAU,CAAC,EAAEM,KAAKE,GAAG,EAAE,GAAG;SACzC,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV,GAAG;QAACT;QAAQG;QAASC,KAAKE,GAAG;KAAC;IAE9B,MAAMI,cAAcd,YAAY;QAC9B,IAAI,CAACO,SAAS;YACZ;QACF;QAEAD,OAAOS,KAAK,CAAC;YACXT,OAAOU,MAAM,CAAC;gBACZlB,cAAc;YAChB;YACA,iHAAiH;YACjHU,KAAKS,QAAQ,GAAG;gBACdX;gBACAY,UAAUd;YACZ;QACF;IACF,GAAG;QAACE;QAAQE;QAAMJ;QAAQG;KAAQ;IAElC,MAAMY,kBAAkBnB,YAAY,CAACoB;QACnC,8HAA8H;QAC9H,2JAA2J;QAC3J,sKAAsK;QACtKA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,QAACC;QACCb,WAAWA;QACXc,mBAAiBf,KAAKE,GAAG;QACzBc,SAASV;QACTW,aAAaN;QACbO,MAAK;kBAEJrB;;;;;;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;
+      }
+    }
+  }
+}