@payloadcms/richtext-lexical 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { mergeRegister } from '@lexical/utils';
@@ -11,23 +11,36 @@ import { useEditorConfigContext } from '../../../../../lexical/config/client/Edi
 import { getDOMRangeRect } from '../../../../../lexical/utils/getDOMRangeRect.js';
 import { setFloatingElemPosition } from '../../../../../lexical/utils/setFloatingElemPosition.js';
 import { ToolbarButton } from '../../../shared/ToolbarButton/index.js';
+import './index.scss';
 import { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js';
 function ButtonGroupItem({ anchorElem, editor, item }) {
     if (item.Component) {
-        return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
+        return item?.Component && /*#__PURE__*/ _jsxDEV(item.Component, {
             anchorElem: anchorElem,
             editor: editor,
             item: item
-        }, item.key);
+        }, item.key, false, {
+            fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+            lineNumber: 41,
+            columnNumber: 9
+        }, this);
     }
     if (!item.ChildComponent) {
         return null;
     }
-    return /*#__PURE__*/ _jsx(ToolbarButton, {
+    return /*#__PURE__*/ _jsxDEV(ToolbarButton, {
         editor: editor,
         item: item,
-        children: /*#__PURE__*/ _jsx(item.ChildComponent, {})
-    }, item.key);
+        children: /*#__PURE__*/ _jsxDEV(item.ChildComponent, {}, void 0, false, {
+            fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+            lineNumber: 51,
+            columnNumber: 7
+        }, this)
+    }, item.key, false, {
+        fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+        lineNumber: 50,
+        columnNumber: 5
+    }, this);
 }
 function ToolbarGroupComponent({ anchorElem, editor, group, index }) {
     const { editorConfig } = useEditorConfigContext();
@@ -55,36 +68,56 @@ function ToolbarGroupComponent({ anchorElem, editor, group, index }) {
     }, [
         group
     ]);
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`,
         "data-toolbar-group-key": group.key,
         children: [
-            group.type === 'dropdown' && group.items.length ? DropdownIcon ? /*#__PURE__*/ _jsx(ToolbarDropdown, {
+            group.type === 'dropdown' && group.items.length ? DropdownIcon ? /*#__PURE__*/ _jsxDEV(ToolbarDropdown, {
                 anchorElem: anchorElem,
                 editor: editor,
                 group: group,
                 Icon: DropdownIcon,
                 maxActiveItems: group.maxActiveItems ?? 1,
                 onActiveChange: onActiveChange
-            }) : /*#__PURE__*/ _jsx(ToolbarDropdown, {
+            }, void 0, false, {
+                fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+                lineNumber: 103,
+                columnNumber: 11
+            }, this) : /*#__PURE__*/ _jsxDEV(ToolbarDropdown, {
                 anchorElem: anchorElem,
                 editor: editor,
                 group: group,
                 maxActiveItems: group.maxActiveItems ?? 1,
                 onActiveChange: onActiveChange
-            }) : null,
+            }, void 0, false, {
+                fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+                lineNumber: 112,
+                columnNumber: 11
+            }, this) : null,
             group.type === 'buttons' && group.items.length ? group.items.map((item)=>{
-                return /*#__PURE__*/ _jsx(ButtonGroupItem, {
+                return /*#__PURE__*/ _jsxDEV(ButtonGroupItem, {
                     anchorElem: anchorElem,
                     editor: editor,
                     item: item
-                }, item.key);
+                }, item.key, false, {
+                    fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+                    lineNumber: 124,
+                    columnNumber: 15
+                }, this);
             }) : null,
-            index < editorConfig.features.toolbarInline?.groups.length - 1 && /*#__PURE__*/ _jsx("div", {
+            index < editorConfig.features.toolbarInline?.groups.length - 1 && /*#__PURE__*/ _jsxDEV("div", {
                 className: "divider"
-            })
+            }, void 0, false, {
+                fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+                lineNumber: 129,
+                columnNumber: 9
+            }, this)
         ]
-    }, group.key);
+    }, group.key, true, {
+        fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+        lineNumber: 96,
+        columnNumber: 5
+    }, this);
 }
 function InlineToolbar({ anchorElem, editor }) {
     const floatingToolbarRef = useRef(null);
@@ -222,24 +255,36 @@ function InlineToolbar({ anchorElem, editor }) {
         editor,
         $updateTextFormatFloatingToolbar
     ]);
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: "inline-toolbar-popup",
         ref: floatingToolbarRef,
         children: [
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxDEV("div", {
                 className: "caret",
                 ref: caretRef
-            }),
+            }, void 0, false, {
+                fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+                lineNumber: 300,
+                columnNumber: 7
+            }, this),
             editorConfig?.features && editorConfig.features?.toolbarInline?.groups.map((group, i)=>{
-                return /*#__PURE__*/ _jsx(ToolbarGroupComponent, {
+                return /*#__PURE__*/ _jsxDEV(ToolbarGroupComponent, {
                     anchorElem: anchorElem,
                     editor: editor,
                     group: group,
                     index: i
-                }, group.key);
+                }, group.key, false, {
+                    fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+                    lineNumber: 304,
+                    columnNumber: 13
+                }, this);
             })
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+        lineNumber: 299,
+        columnNumber: 5
+    }, this);
 }
 function useInlineToolbar(editor, anchorElem) {
     const [isText, setIsText] = useState(false);
@@ -310,10 +355,14 @@ function useInlineToolbar(editor, anchorElem) {
     if (!isText || !isEditable) {
         return null;
     }
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(InlineToolbar, {
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxDEV(InlineToolbar, {
         anchorElem: anchorElem,
         editor: editor
-    }), anchorElem);
+    }, void 0, false, {
+        fileName: "src/features/toolbars/inline/client/Toolbar/index.tsx",
+        lineNumber: 399,
+        columnNumber: 23
+    }, this), anchorElem);
 }
 export const InlineToolbarPlugin = ({ anchorElem })=>{
     const [editor] = useLexicalComposerContext();

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

@@ -1 +1 @@
-{"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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"}
+{"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/shared/ToolbarButton/index.js

@@ -1,9 +1,10 @@
 'use client';
-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 = ({ children, editor, item })=>{
@@ -96,14 +97,18 @@ export const ToolbarButton = ({ children, editor, item })=>{
         // 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__*/ _jsx("button", {
+    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);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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;AAElG,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,KAACC;QACC5B,WAAWA;QACX6B,mBAAiBpC,KAAKQ,GAAG;QACzB6B,SAAST;QACTU,aAAaN;QACbO,MAAK;kBAEJzC;;AAGP,EAAC"}
+{"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;
+      }
+    }
+  }
+}

package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { Button } from '@payloadcms/ui';
 import { $addUpdateTag, isDOMNode } from 'lexical';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -33,7 +33,7 @@ export function DropDownItem({ active, children, editor, enabled, Icon, item, it
         ref,
         registerItem
     ]);
-    return /*#__PURE__*/ _jsx(Button, {
+    return /*#__PURE__*/ _jsxDEV(Button, {
         "aria-label": tooltip,
         buttonStyle: "none",
         className: className,
@@ -67,7 +67,11 @@ export function DropDownItem({ active, children, editor, enabled, Icon, item, it
         tooltip: tooltip,
         type: "button",
         children: children
-    });
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 64,
+        columnNumber: 5
+    }, this);
 }
 function DropDownItems({ children, dropDownRef, itemsContainerClassNames, onClose }) {
     const [items, setItems] = useState();
@@ -130,17 +134,25 @@ function DropDownItems({ children, dropDownRef, itemsContainerClassNames, onClos
         items,
         highlightedItem
     ]);
-    return /*#__PURE__*/ _jsx(DropDownContext, {
+    return /*#__PURE__*/ _jsxDEV(DropDownContext, {
         value: contextValue,
-        children: /*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsxDEV("div", {
             className: (itemsContainerClassNames ?? [
                 'toolbar-popup__dropdown-items'
             ]).join(' '),
             onKeyDown: handleKeyDown,
             ref: dropDownRef,
             children: children
-        })
-    });
+        }, void 0, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+            lineNumber: 175,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 174,
+        columnNumber: 5
+    }, this);
 }
 export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled = false, dropdownKey, Icon, itemsContainerClassNames, label, stopCloseOnClickSelf }) {
     const dropDownRef = useRef(null);
@@ -194,15 +206,19 @@ export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled
         showDropDown,
         stopCloseOnClickSelf
     ]);
-    const portal = /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(DropDownItems, {
+    const portal = /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxDEV(DropDownItems, {
         dropDownRef: dropDownRef,
         itemsContainerClassNames: itemsContainerClassNames,
         onClose: handleClose,
         children: children
-    }), document.body);
-    return /*#__PURE__*/ _jsxs(React.Fragment, {
+    }, void 0, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 257,
+        columnNumber: 5
+    }, this), document.body);
+    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
         children: [
-            /*#__PURE__*/ _jsxs("button", {
+            /*#__PURE__*/ _jsxDEV("button", {
                 "aria-label": buttonAriaLabel,
                 className: buttonClassName + (showDropDown ? ' active' : ''),
                 "data-dropdown-key": dropdownKey,
@@ -220,21 +236,45 @@ export function DropDown({ buttonAriaLabel, buttonClassName, children, disabled
                 ref: buttonRef,
                 type: "button",
                 children: [
-                    Icon && /*#__PURE__*/ _jsx(Icon, {}),
-                    label && /*#__PURE__*/ _jsx("span", {
+                    Icon && /*#__PURE__*/ _jsxDEV(Icon, {}, void 0, false, {
+                        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                        lineNumber: 287,
+                        columnNumber: 18
+                    }, this),
+                    label && /*#__PURE__*/ _jsxDEV("span", {
                         className: "toolbar-popup__dropdown-label",
                         children: label
-                    }),
-                    /*#__PURE__*/ _jsx("i", {
+                    }, void 0, false, {
+                        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                        lineNumber: 288,
+                        columnNumber: 19
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("i", {
                         className: "toolbar-popup__dropdown-caret"
-                    })
+                    }, void 0, false, {
+                        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                        lineNumber: 289,
+                        columnNumber: 9
+                    }, this)
                 ]
-            }),
-            showDropDown && /*#__PURE__*/ _jsx(React.Fragment, {
+            }, void 0, true, {
+                fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                lineNumber: 269,
+                columnNumber: 7
+            }, this),
+            showDropDown && /*#__PURE__*/ _jsxDEV(React.Fragment, {
                 children: portal
-            })
+            }, void 0, false, {
+                fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+                lineNumber: 292,
+                columnNumber: 24
+            }, this)
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx",
+        lineNumber: 268,
+        columnNumber: 5
+    }, this);
 }
 
 //# sourceMappingURL=DropDown.js.map