@payloadcms/richtext-lexical 3.0.0-beta.107 → 3.0.0-beta.108

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

@@ -25,14 +25,17 @@ function ButtonGroupItem({
       item: item
     }, item.key);
   }
+  if (!item.ChildComponent) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(ToolbarButton, {
     editor: editor,
     item: item,
-    children: item?.ChildComponent && /*#__PURE__*/_jsx(item.ChildComponent, {})
+    children: /*#__PURE__*/_jsx(item.ChildComponent, {})
   }, item.key);
 }
 function ToolbarGroupComponent(t0) {
-  const $ = _c(24);
+  const $ = _c(22);
   const {
     anchorElem,
     editor,
@@ -42,7 +45,7 @@ function ToolbarGroupComponent(t0) {
   const {
     editorConfig
   } = useEditorConfigContext();
-  const [DropdownIcon, setDropdownIcon] = React.useState(null);
+  const [DropdownIcon, setDropdownIcon] = React.useState();
   let t1;
   let t2;
   if ($[0] !== group) {
@@ -50,7 +53,7 @@ function ToolbarGroupComponent(t0) {
       if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
         setDropdownIcon(() => group.ChildComponent);
       } else {
-        setDropdownIcon(null);
+        setDropdownIcon(undefined);
       }
     };
     t2 = [group];
@@ -72,7 +75,7 @@ function ToolbarGroupComponent(t0) {
         if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
           setDropdownIcon(() => group.ChildComponent);
         } else {
-          setDropdownIcon(null);
+          setDropdownIcon(undefined);
         }
         return;
       }
@@ -87,65 +90,61 @@ function ToolbarGroupComponent(t0) {
   const onActiveChange = t3;
   const t4 = `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`;
   let t5;
-  if ($[5] !== group.type || $[6] !== group.items || $[7] !== group.key || $[8] !== DropdownIcon || $[9] !== anchorElem || $[10] !== editor || $[11] !== onActiveChange) {
+  if ($[5] !== group || $[6] !== DropdownIcon || $[7] !== anchorElem || $[8] !== editor || $[9] !== onActiveChange) {
     t5 = group.type === "dropdown" && group.items.length && (DropdownIcon ? _jsx(ToolbarDropdown, {
       anchorElem,
       editor,
-      groupKey: group.key,
+      group,
       Icon: DropdownIcon,
-      items: group.items,
       maxActiveItems: 1,
       onActiveChange
     }) : _jsx(ToolbarDropdown, {
       anchorElem,
       editor,
-      groupKey: group.key,
-      items: group.items,
+      group,
       maxActiveItems: 1,
       onActiveChange
     }));
-    $[5] = group.type;
-    $[6] = group.items;
-    $[7] = group.key;
-    $[8] = DropdownIcon;
-    $[9] = anchorElem;
-    $[10] = editor;
-    $[11] = onActiveChange;
-    $[12] = t5;
+    $[5] = group;
+    $[6] = DropdownIcon;
+    $[7] = anchorElem;
+    $[8] = editor;
+    $[9] = onActiveChange;
+    $[10] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[10];
   }
   let t6;
-  if ($[13] !== group || $[14] !== anchorElem || $[15] !== editor) {
+  if ($[11] !== group || $[12] !== anchorElem || $[13] !== editor) {
     t6 = group.type === "buttons" && group.items.length && group.items.map(item_0 => _jsx(ButtonGroupItem, {
       anchorElem,
       editor,
       item: item_0
     }, item_0.key));
-    $[13] = group;
-    $[14] = anchorElem;
-    $[15] = editor;
-    $[16] = t6;
+    $[11] = group;
+    $[12] = anchorElem;
+    $[13] = editor;
+    $[14] = t6;
   } else {
-    t6 = $[16];
+    t6 = $[14];
   }
   let t7;
-  if ($[17] !== editorConfig.features.toolbarInline || $[18] !== index || $[19] !== t5 || $[20] !== t6 || $[21] !== t4 || $[22] !== group.key) {
+  if ($[15] !== editorConfig.features.toolbarInline || $[16] !== index || $[17] !== t5 || $[18] !== t6 || $[19] !== t4 || $[20] !== group.key) {
     t7 = _jsxs("div", {
       className: t4,
       children: [t5, t6, index < editorConfig.features.toolbarInline?.groups.length - 1 && _jsx("div", {
         className: "divider"
       })]
     }, group.key);
-    $[17] = editorConfig.features.toolbarInline;
-    $[18] = index;
-    $[19] = t5;
-    $[20] = t6;
-    $[21] = t4;
-    $[22] = group.key;
-    $[23] = t7;
+    $[15] = editorConfig.features.toolbarInline;
+    $[16] = index;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t4;
+    $[20] = group.key;
+    $[21] = t7;
   } else {
-    t7 = $[23];
+    t7 = $[21];
   }
   return t7;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","t0","$","group","index","editorConfig","DropdownIcon","setDropdownIcon","t1","t2","type","items","length","t3","t4","activeItems","onActiveChange","t5","groupKey","Icon","maxActiveItems","t6","map","item_0","t7","features","toolbarInline","_jsxs","className","children","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","getSelection","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","ref","isEditable","Fragment","i","useInlineToolbar","isText","setIsText","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","InlineToolbarPlugin"],"sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n  COMMAND_PRIORITY_LOW,\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 { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\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\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      {item?.ChildComponent && <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<null | React.FC>(null)\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent)\n    } else {\n      setDropdownIcon(null)\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(null)\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      key={group.key}\n    >\n      {group.type === 'dropdown' &&\n        group.items.length &&\n        (DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            groupKey={group.key}\n            Icon={DropdownIcon}\n            items={group.items}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            groupKey={group.key}\n            items={group.items}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\n          />\n        ))}\n      {group.type === 'buttons' &&\n        group.items.length &&\n        group.items.map((item) => {\n          return (\n            <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n          )\n        })}\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 = window.getSelection()\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'] === '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      {editor.isEditable() && (\n        <React.Fragment>\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        </React.Fragment>\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\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 = window.getSelection()\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) {\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,"file":"index.js","names":["c","_c","useLexicalComposerContext","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","t0","$","group","index","editorConfig","DropdownIcon","setDropdownIcon","t1","t2","type","items","length","undefined","t3","t4","activeItems","onActiveChange","t5","Icon","maxActiveItems","t6","map","item_0","t7","features","toolbarInline","_jsxs","className","children","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","getSelection","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","ref","isEditable","Fragment","i","useInlineToolbar","isText","setIsText","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","InlineToolbarPlugin"],"sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n  COMMAND_PRIORITY_LOW,\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 { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\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      key={group.key}\n    >\n      {group.type === 'dropdown' &&\n        group.items.length &&\n        (DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\n          />\n        ))}\n      {group.type === 'buttons' &&\n        group.items.length &&\n        group.items.map((item) => {\n          return (\n            <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n          )\n        })}\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 = window.getSelection()\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'] === '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      {editor.isEditable() && (\n        <React.Fragment>\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        </React.Fragment>\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\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 = window.getSelection()\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) {\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":[]}

package/dist/features/toolbars/shared/ToolbarButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,gCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;CACvB,sBAqFA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,gCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;CACvB,sBAwFA,CAAA"}

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

@@ -18,6 +18,9 @@ export const ToolbarButton = ({
   const updateStates = useCallback(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection();
+      if (!selection) {
+        return;
+      }
       if (item.isActive) {
         const isActive = item.isActive({
           editor,
@@ -65,7 +68,7 @@ export const ToolbarButton = ({
         ;
         editor.focus(() => {
           // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
-          item.onSelect({
+          item.onSelect?.({
             editor,
             isActive: active
           });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorConfigContext","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorConfigContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","_jsx","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $getSelection } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\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 [enabled, setEnabled] = useState<boolean>(true)\n  const [active, setActive] = useState<boolean>(false)\n  const [className, setClassName] = useState<string>(baseClass)\n  const editorConfigContext = useEditorConfigContext()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (item.isActive) {\n        const isActive = item.isActive({ editor, editorConfigContext, selection })\n        if (active !== isActive) {\n          setActive(isActive)\n        }\n      }\n      if (item.isEnabled) {\n        const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n        if (enabled !== isEnabled) {\n          setEnabled(isEnabled)\n        }\n      }\n    })\n  }, [active, editor, editorConfigContext, enabled, item])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    document.addEventListener('mouseup', updateStates)\n    return () => {\n      document.removeEventListener('mouseup', updateStates)\n    }\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-` + item.key : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\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\n          return true\n        }\n      }}\n      onMouseDown={(e) => {\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      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,aAAa,QAAQ;AAC9B,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAIxD,SAASC,sBAAsB,QAAQ;AAGvC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAAgBA,CAAC;EAC5BC,QAAQ;EACRC,MAAM;EACNC;AAAI,CAKL;EACC,MAAM,CAACC,OAAA,EAASC,UAAA,CAAW,GAAGR,QAAA,CAAkB;EAChD,MAAM,CAACS,MAAA,EAAQC,SAAA,CAAU,GAAGV,QAAA,CAAkB;EAC9C,MAAM,CAACW,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAiBE,SAAA;EACnD,MAAMW,mBAAA,GAAsBZ,sBAAA;EAE5B,MAAMa,YAAA,GAAehB,WAAA,CAAY;IAC/BO,MAAA,CAAOU,cAAc,GAAGC,IAAI,CAAC;MAC3B,MAAMC,SAAA,GAAYrB,aAAA;MAClB,IAAIU,IAAA,CAAKY,QAAQ,EAAE;QACjB,MAAMA,QAAA,GAAWZ,IAAA,CAAKY,QAAQ,CAAC;UAAEb,MAAA;UAAQQ,mBAAA;UAAqBI;QAAU;QACxE,IAAIR,MAAA,KAAWS,QAAA,EAAU;UACvBR,SAAA,CAAUQ,QAAA;QACZ;MACF;MACA,IAAIZ,IAAA,CAAKa,SAAS,EAAE;QAClB,MAAMA,SAAA,GAAYb,IAAA,CAAKa,SAAS,CAAC;UAAEd,MAAA;UAAQQ,mBAAA;UAAqBI;QAAU;QAC1E,IAAIV,OAAA,KAAYY,SAAA,EAAW;UACzBX,UAAA,CAAWW,SAAA;QACb;MACF;IACF;EACF,GAAG,CAACV,MAAA,EAAQJ,MAAA,EAAQQ,mBAAA,EAAqBN,OAAA,EAASD,IAAA,CAAK;EAEvDP,SAAA,CAAU;IACRe,YAAA;EACF,GAAG,CAACA,YAAA,CAAa;EAEjBf,SAAA,CAAU;IACRqB,QAAA,CAASC,gBAAgB,CAAC,WAAWP,YAAA;IACrC,OAAO;MACLM,QAAA,CAASE,mBAAmB,CAAC,WAAWR,YAAA;IAC1C;EACF,GAAG,CAACA,YAAA,CAAa;EAEjBf,SAAA,CAAU;IACR,OAAOJ,aAAA,CACLU,MAAA,CAAOkB,sBAAsB,CAAC;MAC5BT,YAAA;IACF;EAEJ,GAAG,CAACT,MAAA,EAAQS,YAAA,CAAa;EAEzBf,SAAA,CAAU;IACRa,YAAA,CACE,CACEV,SAAA,EACAK,OAAA,KAAY,QAAQ,aAAa,IACjCE,MAAA,GAAS,WAAW,IACpBH,IAAA,EAAMkB,GAAA,GAAM,GAAGtB,SAAA,GAAY,GAAGI,IAAA,CAAKkB,GAAG,GAAG,GAC1C,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAEZ,GAAG,CAACpB,OAAA,EAASE,MAAA,EAAQE,SAAA,EAAWL,IAAA,CAAKkB,GAAG,CAAC;EAEzC,oBACEI,IAAA,CAAC;IACCjB,SAAA,EAAWA,SAAA;IACXkB,OAAA,EAASA,CAAA;MACP,IAAItB,OAAA,KAAY,OAAO;QACrBF,MAAA,CAAOyB,WAAW,GAAG,IAAIC,GAAA,CAAI,C,GAAI1B,MAAA,CAAOyB,WAAW,EAAE,UAAU,EAAE;QAAA;QAEjEzB,MAAA,CAAO2B,KAAK,CAAC;UACX;UACA1B,IAAA,CAAK2B,QAAQ,CAAC;YACZ5B,MAAA;YACAa,QAAA,EAAUT;UACZ;QACF;QAEA,OAAO;MACT;IACF;IACAyB,WAAA,EAAcC,CAAA;MACZ;MACA;MACA;MACAA,CAAA,CAAEC,cAAc;IAClB;IACAC,IAAA,EAAK;cAEJjC;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorConfigContext","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorConfigContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","_jsx","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $getSelection } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\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 [enabled, setEnabled] = useState<boolean>(true)\n  const [active, setActive] = useState<boolean>(false)\n  const [className, setClassName] = useState<string>(baseClass)\n  const editorConfigContext = useEditorConfigContext()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      if (item.isActive) {\n        const isActive = item.isActive({ editor, editorConfigContext, selection })\n        if (active !== isActive) {\n          setActive(isActive)\n        }\n      }\n      if (item.isEnabled) {\n        const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n        if (enabled !== isEnabled) {\n          setEnabled(isEnabled)\n        }\n      }\n    })\n  }, [active, editor, editorConfigContext, enabled, item])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    document.addEventListener('mouseup', updateStates)\n    return () => {\n      document.removeEventListener('mouseup', updateStates)\n    }\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-` + item.key : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\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\n          return true\n        }\n      }}\n      onMouseDown={(e) => {\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      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,aAAa,QAAQ;AAC9B,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAIxD,SAASC,sBAAsB,QAAQ;AAGvC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAAgBA,CAAC;EAC5BC,QAAQ;EACRC,MAAM;EACNC;AAAI,CAKL;EACC,MAAM,CAACC,OAAA,EAASC,UAAA,CAAW,GAAGR,QAAA,CAAkB;EAChD,MAAM,CAACS,MAAA,EAAQC,SAAA,CAAU,GAAGV,QAAA,CAAkB;EAC9C,MAAM,CAACW,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAiBE,SAAA;EACnD,MAAMW,mBAAA,GAAsBZ,sBAAA;EAE5B,MAAMa,YAAA,GAAehB,WAAA,CAAY;IAC/BO,MAAA,CAAOU,cAAc,GAAGC,IAAI,CAAC;MAC3B,MAAMC,SAAA,GAAYrB,aAAA;MAClB,IAAI,CAACqB,SAAA,EAAW;QACd;MACF;MACA,IAAIX,IAAA,CAAKY,QAAQ,EAAE;QACjB,MAAMA,QAAA,GAAWZ,IAAA,CAAKY,QAAQ,CAAC;UAAEb,MAAA;UAAQQ,mBAAA;UAAqBI;QAAU;QACxE,IAAIR,MAAA,KAAWS,QAAA,EAAU;UACvBR,SAAA,CAAUQ,QAAA;QACZ;MACF;MACA,IAAIZ,IAAA,CAAKa,SAAS,EAAE;QAClB,MAAMA,SAAA,GAAYb,IAAA,CAAKa,SAAS,CAAC;UAAEd,MAAA;UAAQQ,mBAAA;UAAqBI;QAAU;QAC1E,IAAIV,OAAA,KAAYY,SAAA,EAAW;UACzBX,UAAA,CAAWW,SAAA;QACb;MACF;IACF;EACF,GAAG,CAACV,MAAA,EAAQJ,MAAA,EAAQQ,mBAAA,EAAqBN,OAAA,EAASD,IAAA,CAAK;EAEvDP,SAAA,CAAU;IACRe,YAAA;EACF,GAAG,CAACA,YAAA,CAAa;EAEjBf,SAAA,CAAU;IACRqB,QAAA,CAASC,gBAAgB,CAAC,WAAWP,YAAA;IACrC,OAAO;MACLM,QAAA,CAASE,mBAAmB,CAAC,WAAWR,YAAA;IAC1C;EACF,GAAG,CAACA,YAAA,CAAa;EAEjBf,SAAA,CAAU;IACR,OAAOJ,aAAA,CACLU,MAAA,CAAOkB,sBAAsB,CAAC;MAC5BT,YAAA;IACF;EAEJ,GAAG,CAACT,MAAA,EAAQS,YAAA,CAAa;EAEzBf,SAAA,CAAU;IACRa,YAAA,CACE,CACEV,SAAA,EACAK,OAAA,KAAY,QAAQ,aAAa,IACjCE,MAAA,GAAS,WAAW,IACpBH,IAAA,EAAMkB,GAAA,GAAM,GAAGtB,SAAA,GAAY,GAAGI,IAAA,CAAKkB,GAAG,GAAG,GAC1C,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAEZ,GAAG,CAACpB,OAAA,EAASE,MAAA,EAAQE,SAAA,EAAWL,IAAA,CAAKkB,GAAG,CAAC;EAEzC,oBACEI,IAAA,CAAC;IACCjB,SAAA,EAAWA,SAAA;IACXkB,OAAA,EAASA,CAAA;MACP,IAAItB,OAAA,KAAY,OAAO;QACrBF,MAAA,CAAOyB,WAAW,GAAG,IAAIC,GAAA,CAAI,C,GAAI1B,MAAA,CAAOyB,WAAW,EAAE,UAAU,EAAE;QAAA;QAEjEzB,MAAA,CAAO2B,KAAK,CAAC;UACX;UACA1B,IAAA,CAAK2B,QAAQ,GAAG;YACd5B,MAAA;YACAa,QAAA,EAAUT;UACZ;QACF;QAEA,OAAO;MACT;IACF;IACAyB,WAAA,EAAcC,CAAA;MACZ;MACA;MACA;MACAA,CAAA,CAAEC,cAAc;IAClB;IACAC,IAAA,EAAK;cAEJjC;;AAGP","ignoreList":[]}

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

@@ -38,7 +38,7 @@ export function DropDownItem({
         ;
         editor.focus(() => {
           // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
-          item.onSelect({
+          item.onSelect?.({
             editor,
             isActive: active
           });

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","item","title","className","setClassName","key","filter","Boolean","join","ref","dropDownContext","useContext","Error","registerItem","current","_jsx","onClick","_updateTags","Set","focus","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","Provider","value","onKeyDown","DropDown","buttonAriaLabel","buttonClassName","disabled","Icon","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  item,\n  title,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n  title?: string\n}): React.ReactNode {\n  const [className, setClassName] = useState<string>(baseClass)\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-${item.key}` : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.useContext(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\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        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      title={title}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) {\n      return\n    }\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext.Provider value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext.Provider>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const { target } = event\n        if (stopCloseOnClickSelf != null) {\n          if (dropDownRef.current != null && dropDownRef.current.contains(target as Node)) {\n            return\n          }\n        }\n        if (!button.contains(target as Node)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\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        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropDown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","item","title","className","setClassName","key","filter","Boolean","join","ref","dropDownContext","useContext","Error","registerItem","current","_jsx","onClick","_updateTags","Set","focus","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","Provider","value","onKeyDown","DropDown","buttonAriaLabel","buttonClassName","disabled","Icon","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  item,\n  title,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n  title?: string\n}): React.ReactNode {\n  const [className, setClassName] = useState<string>(baseClass)\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-${item.key}` : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.useContext(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\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        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      title={title}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) {\n      return\n    }\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return items[0]\n        }\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext.Provider value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext.Provider>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const { target } = event\n        if (stopCloseOnClickSelf != null) {\n          if (dropDownRef.current != null && dropDownRef.current.contains(target as Node)) {\n            return\n          }\n        }\n        if (!button.contains(target as Node)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\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        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/toolbars/shared/ToolbarDropdown/index.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
 import type { LexicalEditor } from 'lexical';
-import type { ToolbarGroupItem } from '../../types.js';
+import type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js';
 import './index.scss';
-export declare const ToolbarDropdown: ({ anchorElem, classNames, editor, groupKey, Icon, items, itemsContainerClassNames, label, maxActiveItems, onActiveChange, }: {
+export declare const ToolbarDropdown: ({ anchorElem, classNames, editor, group, Icon, itemsContainerClassNames, label, maxActiveItems, onActiveChange, }: {
     anchorElem: HTMLElement;
     classNames?: string[];
     editor: LexicalEditor;
-    groupKey: string;
+    group: ToolbarDropdownGroup;
     Icon?: React.FC;
-    items: ToolbarGroupItem[];
     itemsContainerClassNames?: string[];
     label?: string;
     /**

package/dist/features/toolbars/shared/ToolbarDropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAItD,OAAO,cAAc,CAAA;AAqDrB,eAAO,MAAM,eAAe,gIAWzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAChF,sBA6EA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAI5E,OAAO,cAAc,CAAA;AAqDrB,eAAO,MAAM,eAAe,sHAUzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,oBAAoB,CAAA;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAChF,sBAsFA,CAAA"}