@payloadcms/richtext-lexical 4.0.0-beta.3 → 4.0.0-beta.4

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

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

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,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,aAAa,iDAMvB;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,gBAAgB,CAAA;CACvB,sBAoFA,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,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,aAAa,iDAMvB;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,gBAAgB,CAAA;CACvB,sBAkHA,CAAA"}

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

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip, useTranslation } from '@payloadcms/ui';
-import { $addUpdateTag } from 'lexical';
+import { $addUpdateTag, $getRoot, $getSelection, SKIP_SELECTION_FOCUS_TAG } from 'lexical';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import './index.css';
@@ -43,10 +43,34 @@ export const ToolbarButton = ({
   const className = useMemo(() => {
     return [baseClass, !enabled ? 'disabled' : '', active ? 'active' : '', item.key ? `${baseClass}-${item.key}` : ''].filter(Boolean).join(' ');
   }, [active, enabled, item.key]);
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback(event => {
     if (!enabled) {
       return;
     }
+    if (event.detail === 0 && item.isActive) {
+      const button = event.currentTarget;
+      editor.update(() => {
+        $addUpdateTag('toolbar');
+        $addUpdateTag(SKIP_SELECTION_FOCUS_TAG);
+        if (!$getSelection()) {
+          $getRoot().selectEnd();
+        }
+        item.onSelect?.({
+          editor,
+          isActive: active
+        });
+      }, {
+        onUpdate: () => {
+          // Native selection repair can focus contenteditable in Chromium despite the tag.
+          if (button.isConnected && button.ownerDocument.activeElement === editor.getRootElement()) {
+            button.focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+      return;
+    }
     editor.focus(() => {
       editor.update(() => {
         $addUpdateTag('toolbar');

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Tooltip","useTranslation","$addUpdateTag","React","useCallback","useEffect","useMemo","useRef","useState","useEditorConfigContext","baseClass","ToolbarButton","active","children","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","showTooltip","setShowTooltip","buttonRef","current","removeAttribute","tooltipLabel","label","key","replace","c","toUpperCase","className","filter","Boolean","join","handleClick","focus","update","onSelect","isActive","handleMouseDown","e","preventDefault","currentTarget","setAttribute","_jsxs","undefined","disabled","onClick","onMouseDown","onPointerEnter","onPointerLeave","ref","type","_jsx","show"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { Tooltip, useTranslation } from '@payloadcms/ui'\nimport { $addUpdateTag } from 'lexical'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  active = false,\n  children,\n  editor,\n  enabled = true,\n  item,\n}: {\n  active?: boolean\n  children: React.JSX.Element\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const [showTooltip, setShowTooltip] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  // Clear pressing state when active prop changes (React has re-rendered)\n  useEffect(() => {\n    buttonRef.current?.removeAttribute('data-pressing')\n  }, [active])\n\n  const tooltipLabel = useMemo(() => {\n    if (item.label) {\n      return typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n    }\n    // Convert camelCase key to Title Case (e.g. \"inlineCode\" -> \"Inline Code\")\n    return item.key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase())\n  }, [featureClientSchemaMap, i18n, schemaPath, item])\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !enabled ? 'disabled' : '',\n      active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [active, enabled, item.key])\n\n  const handleClick = useCallback(() => {\n    if (!enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\n      // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n      item.onSelect?.({\n        editor,\n        isActive: active,\n      })\n    })\n  }, [editor, item, active, enabled])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n    // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n    // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n    e.preventDefault()\n    // Suppress hover flash between mouseup and React adding .active class\n    ;(e.currentTarget as HTMLElement).setAttribute('data-pressing', '')\n  }, [])\n\n  return (\n    <button\n      aria-label={tooltipLabel}\n      aria-pressed={item.isActive ? active : undefined}\n      className={className}\n      data-button-key={item.key}\n      disabled={!enabled}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      onPointerEnter={() => setShowTooltip(true)}\n      onPointerLeave={() => {\n        setShowTooltip(false)\n        buttonRef.current?.removeAttribute('data-pressing')\n      }}\n      ref={buttonRef}\n      type=\"button\"\n    >\n      <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n        {tooltipLabel}\n      </Tooltip>\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Tooltip","useTranslation","$addUpdateTag","$getRoot","$getSelection","SKIP_SELECTION_FOCUS_TAG","React","useCallback","useEffect","useMemo","useRef","useState","useEditorConfigContext","baseClass","ToolbarButton","active","children","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","showTooltip","setShowTooltip","buttonRef","current","removeAttribute","tooltipLabel","label","key","replace","c","toUpperCase","className","filter","Boolean","join","handleClick","event","detail","isActive","button","currentTarget","update","selectEnd","onSelect","onUpdate","isConnected","ownerDocument","activeElement","getRootElement","focus","preventScroll","handleMouseDown","e","preventDefault","setAttribute","_jsxs","undefined","disabled","onClick","onMouseDown","onPointerEnter","onPointerLeave","ref","type","_jsx","show"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { Tooltip, useTranslation } from '@payloadcms/ui'\nimport { $addUpdateTag, $getRoot, $getSelection, SKIP_SELECTION_FOCUS_TAG } from 'lexical'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  active = false,\n  children,\n  editor,\n  enabled = true,\n  item,\n}: {\n  active?: boolean\n  children: React.JSX.Element\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const [showTooltip, setShowTooltip] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  // Clear pressing state when active prop changes (React has re-rendered)\n  useEffect(() => {\n    buttonRef.current?.removeAttribute('data-pressing')\n  }, [active])\n\n  const tooltipLabel = useMemo(() => {\n    if (item.label) {\n      return typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n    }\n    // Convert camelCase key to Title Case (e.g. \"inlineCode\" -> \"Inline Code\")\n    return item.key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase())\n  }, [featureClientSchemaMap, i18n, schemaPath, item])\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !enabled ? 'disabled' : '',\n      active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [active, enabled, item.key])\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (!enabled) {\n        return\n      }\n\n      if (event.detail === 0 && item.isActive) {\n        const button = event.currentTarget\n\n        editor.update(\n          () => {\n            $addUpdateTag('toolbar')\n            $addUpdateTag(SKIP_SELECTION_FOCUS_TAG)\n            if (!$getSelection()) {\n              $getRoot().selectEnd()\n            }\n            item.onSelect?.({ editor, isActive: active })\n          },\n          {\n            onUpdate: () => {\n              // Native selection repair can focus contenteditable in Chromium despite the tag.\n              if (\n                button.isConnected &&\n                button.ownerDocument.activeElement === editor.getRootElement()\n              ) {\n                button.focus({ preventScroll: true })\n              }\n            },\n          },\n        )\n        return\n      }\n\n      editor.focus(() => {\n        editor.update(() => {\n          $addUpdateTag('toolbar')\n        })\n        // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n        item.onSelect?.({\n          editor,\n          isActive: active,\n        })\n      })\n    },\n    [editor, item, active, enabled],\n  )\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    // Suppress hover flash between mouseup and React adding .active class\n    ;(e.currentTarget as HTMLElement).setAttribute('data-pressing', '')\n  }, [])\n\n  return (\n    <button\n      aria-label={tooltipLabel}\n      aria-pressed={item.isActive ? active : undefined}\n      className={className}\n      data-button-key={item.key}\n      disabled={!enabled}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      onPointerEnter={() => setShowTooltip(true)}\n      onPointerLeave={() => {\n        setShowTooltip(false)\n        buttonRef.current?.removeAttribute('data-pressing')\n      }}\n      ref={buttonRef}\n      type=\"button\"\n    >\n      <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n        {tooltipLabel}\n      </Tooltip>\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@payloadcms/ui';
 import { $addUpdateTag, isDOMNode } from 'lexical';
@@ -70,81 +71,145 @@ export function DropDownItem({
     children: children
   });
 }
-function DropDownItems({
-  id,
-  children,
-  dropdownKey,
-  dropDownRef,
-  itemsContainerClassNames,
-  onClose,
-  shouldAutoFocus
-}) {
+function DropDownItems(t0) {
+  const $ = _c(17);
+  const {
+    id,
+    children,
+    dropdownKey,
+    dropDownRef,
+    itemsContainerClassNames,
+    onClose,
+    shouldAutoFocus
+  } = t0;
   const [items, setItems] = useState();
   const [highlightedItem, setHighlightedItem] = useState();
-  const registerItem = useCallback(itemRef => {
-    setItems(prev => prev != null ? [...prev, itemRef] : [itemRef]);
-  }, [setItems]);
-  const handleKeyDown = event => {
-    if (items == null) {
-      return;
-    }
-    const {
-      key
-    } = event;
-    const enabledItems = items.filter(item => !item.current?.disabled);
-    if (['ArrowDown', 'ArrowUp', 'Escape'].includes(key)) {
-      event.preventDefault();
-    }
-    if (key === 'Escape') {
-      onClose();
-    } else if (key === 'Tab') {
-      setTimeout(() => onClose({
-        restoreFocus: false
-      }));
-    } else if (key === 'ArrowUp') {
-      setHighlightedItem(prev_0 => {
-        if (prev_0 == null) {
-          return enabledItems[0];
-        }
-        const index = enabledItems.indexOf(prev_0) - 1;
-        return enabledItems[index === -1 ? enabledItems.length - 1 : index];
-      });
-    } else if (key === 'ArrowDown') {
-      setHighlightedItem(prev_1 => {
-        if (prev_1 == null) {
-          return enabledItems[0];
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = itemRef => {
+      setItems(prev => prev != null ? [...prev, itemRef] : [itemRef]);
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const registerItem = t1;
+  let t2;
+  if ($[1] !== items || $[2] !== onClose) {
+    t2 = event => {
+      if (items == null) {
+        return;
+      }
+      const {
+        key
+      } = event;
+      const enabledItems = items.filter(_temp);
+      if (["ArrowDown", "ArrowUp", "Escape"].includes(key)) {
+        event.preventDefault();
+      }
+      if (key === "Escape") {
+        onClose();
+      } else {
+        if (key === "Tab") {
+          setTimeout(() => onClose({
+            restoreFocus: false
+          }));
+        } else {
+          if (key === "ArrowUp") {
+            setHighlightedItem(prev_0 => {
+              if (prev_0 == null) {
+                return enabledItems[0];
+              }
+              const index = enabledItems.indexOf(prev_0) - 1;
+              return enabledItems[index === -1 ? enabledItems.length - 1 : index];
+            });
+          } else {
+            if (key === "ArrowDown") {
+              setHighlightedItem(prev_1 => {
+                if (prev_1 == null) {
+                  return enabledItems[0];
+                }
+                const index_0 = enabledItems.indexOf(prev_1);
+                return enabledItems[index_0 === enabledItems.length - 1 ? 0 : index_0 + 1];
+              });
+            }
+          }
         }
-        const index_0 = enabledItems.indexOf(prev_1);
-        return enabledItems[index_0 === enabledItems.length - 1 ? 0 : index_0 + 1];
-      });
-    }
-  };
-  const contextValue = useMemo(() => ({
-    registerItem
-  }), [registerItem]);
-  useEffect(() => {
-    if (shouldAutoFocus && items != null && highlightedItem == null) {
-      setHighlightedItem(items.find(item_0 => !item_0.current?.disabled));
-    }
-    if (highlightedItem != null && highlightedItem?.current != null) {
-      highlightedItem.current.focus();
-    }
-  }, [items, highlightedItem, shouldAutoFocus]);
-  return /*#__PURE__*/_jsx(DropDownContext, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
-      className: (itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' '),
-      "data-dropdown-key": dropdownKey,
-      "data-theme": "dark",
-      id: id,
-      onKeyDown: handleKeyDown,
-      popover: "manual",
-      ref: dropDownRef,
-      role: "menu",
-      tabIndex: -1,
-      children: children
-    })
-  });
+      }
+    };
+    $[1] = items;
+    $[2] = onClose;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const handleKeyDown = t2;
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      registerItem
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const contextValue = t3;
+  let t4;
+  let t5;
+  if ($[5] !== highlightedItem || $[6] !== items || $[7] !== shouldAutoFocus) {
+    t4 = () => {
+      if (shouldAutoFocus && items != null && highlightedItem == null) {
+        setHighlightedItem(items.find(_temp2));
+      }
+      if (highlightedItem != null && highlightedItem?.current != null) {
+        highlightedItem.current.focus();
+      }
+    };
+    t5 = [items, highlightedItem, shouldAutoFocus];
+    $[5] = highlightedItem;
+    $[6] = items;
+    $[7] = shouldAutoFocus;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[10] !== children || $[11] !== dropDownRef || $[12] !== dropdownKey || $[13] !== handleKeyDown || $[14] !== id || $[15] !== itemsContainerClassNames) {
+    t6 = _jsx(DropDownContext, {
+      value: contextValue,
+      children: _jsx("div", {
+        className: (itemsContainerClassNames ?? ["toolbar-popup__dropdown-items"]).join(" "),
+        "data-dropdown-key": dropdownKey,
+        "data-theme": "dark",
+        id,
+        onKeyDown: handleKeyDown,
+        popover: "manual",
+        ref: dropDownRef,
+        role: "menu",
+        tabIndex: -1,
+        children
+      })
+    });
+    $[10] = children;
+    $[11] = dropDownRef;
+    $[12] = dropdownKey;
+    $[13] = handleKeyDown;
+    $[14] = id;
+    $[15] = itemsContainerClassNames;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}
+function _temp2(item_0) {
+  return !item_0.current?.disabled;
+}
+function _temp(item) {
+  return !item.current?.disabled;
 }
 export function DropDown({
   buttonAriaLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.js","names":["Button","$addUpdateTag","isDOMNode","React","useCallback","useEffect","useId","useMemo","useRef","useState","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","Icon","item","itemKey","tooltip","className","key","filter","Boolean","join","ref","dropDownContext","use","Error","registerItem","current","_jsx","buttonStyle","disabled","extraButtonProps","isActive","undefined","role","tabIndex","icon","iconPosition","onClick","focus","update","onSelect","onMouseDown","e","preventDefault","type","DropDownItems","id","dropdownKey","dropDownRef","itemsContainerClassNames","onClose","shouldAutoFocus","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","enabledItems","includes","setTimeout","restoreFocus","index","indexOf","length","contextValue","find","value","onKeyDown","popover","DropDown","buttonAriaLabel","buttonClassName","label","stopCloseOnClickSelf","buttonRef","openedViaKeyboardRef","generatedId","menuId","showDropDown","setShowDropDown","handleClose","button","dropDown","matches","showPopover","updatePosition","bottom","left","top","getBoundingClientRect","offset","gap","below","above","offsetHeight","maxTop","Math","max","window","innerHeight","preferredTop","style","position","min","innerWidth","offsetWidth","addEventListener","capture","passive","removeEventListener","handle","target","contains","document","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport { Button } from '@payloadcms/ui'\nimport { $addUpdateTag, isDOMNode, type LexicalEditor } from 'lexical'\nimport React, {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\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  Icon,\n  item,\n  itemKey,\n  tooltip,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  Icon: React.ReactNode\n  item: ToolbarGroupItem\n  itemKey: string\n  tooltip?: string\n}): React.ReactNode {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      enabled === false ? 'disabled' : '',\n      active ? 'active' : '',\n      item?.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [enabled, active, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.use(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      aria-label={tooltip}\n      buttonStyle=\"ghost\"\n      className={className}\n      disabled={enabled === false}\n      extraButtonProps={{\n        'aria-checked': item.isActive ? Boolean(active) : undefined,\n        'data-item-key': itemKey,\n        role: item.isActive ? 'menuitemcheckbox' : 'menuitem',\n        tabIndex: -1,\n      }}\n      icon={Icon}\n      iconPosition=\"left\"\n      onClick={() => {\n        if (enabled !== false) {\n          editor.focus(() => {\n            editor.update(() => {\n              $addUpdateTag('toolbar')\n            })\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect?.({\n              editor,\n              isActive: active!,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e: React.MouseEvent) => {\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      tooltip={tooltip}\n      type=\"button\"\n    >\n      {children}\n    </Button>\n  )\n}\n\nfunction DropDownItems({\n  id,\n  children,\n  dropdownKey,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n  shouldAutoFocus,\n}: {\n  children: React.ReactNode\n  dropdownKey?: string\n  dropDownRef: React.Ref<HTMLDivElement>\n  id: string\n  itemsContainerClassNames?: string[]\n  onClose: (options?: { restoreFocus?: boolean }) => void\n  shouldAutoFocus: boolean\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    const enabledItems = items.filter((item) => !item.current?.disabled)\n\n    if (['ArrowDown', 'ArrowUp', 'Escape'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape') {\n      onClose()\n    } else if (key === 'Tab') {\n      setTimeout(() => onClose({ restoreFocus: false }))\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return enabledItems[0]\n        }\n        const index = enabledItems.indexOf(prev) - 1\n        return enabledItems[index === -1 ? enabledItems.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return enabledItems[0]\n        }\n        const index = enabledItems.indexOf(prev)\n        return enabledItems[index === enabledItems.length - 1 ? 0 : index + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (shouldAutoFocus && items != null && highlightedItem == null) {\n      setHighlightedItem(items.find((item) => !item.current?.disabled))\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem, shouldAutoFocus])\n\n  return (\n    <DropDownContext value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        data-dropdown-key={dropdownKey}\n        data-theme=\"dark\"\n        id={id}\n        onKeyDown={handleKeyDown}\n        popover=\"manual\"\n        ref={dropDownRef}\n        role=\"menu\"\n        tabIndex={-1}\n      >\n        {children}\n      </div>\n    </DropDownContext>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  dropdownKey,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  dropdownKey: string\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 openedViaKeyboardRef = useRef(false)\n  const generatedId = useId()\n  const menuId = `toolbar-dropdown-${dropdownKey}-${generatedId}`\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = ({ restoreFocus = true }: { restoreFocus?: boolean } = {}): void => {\n    setShowDropDown(false)\n    if (restoreFocus && 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      if (!dropDown.matches(':popover-open')) {\n        dropDown.showPopover()\n      }\n\n      const updatePosition = (): void => {\n        const { bottom, left, top } = button.getBoundingClientRect()\n        const offset = 8\n        const gap = 5\n        const below = bottom + gap\n        const above = top - dropDown.offsetHeight - gap\n        const maxTop = Math.max(offset, window.innerHeight - dropDown.offsetHeight - offset)\n        const preferredTop =\n          below + dropDown.offsetHeight + offset <= window.innerHeight\n            ? below\n            : above >= offset\n              ? above\n              : below\n\n        dropDown.style.position = 'fixed'\n        dropDown.style.top = `${Math.max(offset, Math.min(preferredTop, maxTop))}px`\n        dropDown.style.left = `${Math.max(8, Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20))}px`\n      }\n\n      updatePosition()\n      window.addEventListener('resize', updatePosition)\n      window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n\n      return () => {\n        window.removeEventListener('resize', updatePosition)\n        window.removeEventListener('scroll', updatePosition, { capture: true })\n      }\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.target\n        if (!isDOMNode(target)) {\n          return\n        }\n        if (stopCloseOnClickSelf) {\n          if (dropDownRef.current && dropDownRef.current.contains(target)) {\n            return\n          }\n        }\n        if (!button.contains(target)) {\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  return (\n    <React.Fragment>\n      <button\n        aria-controls={menuId}\n        aria-expanded={showDropDown}\n        aria-haspopup=\"menu\"\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        data-dropdown-key={dropdownKey}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          openedViaKeyboardRef.current = false\n          setShowDropDown(!showDropDown)\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault()\n            openedViaKeyboardRef.current = true\n            setShowDropDown(!showDropDown)\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        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 && (\n        <DropDownItems\n          dropdownKey={dropdownKey}\n          dropDownRef={dropDownRef}\n          id={menuId}\n          itemsContainerClassNames={itemsContainerClassNames}\n          onClose={handleClose}\n          shouldAutoFocus={openedViaKeyboardRef.current}\n        >\n          {children}\n        </DropDownItems>\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropDown.js","names":["c","_c","Button","$addUpdateTag","isDOMNode","React","useCallback","useEffect","useId","useMemo","useRef","useState","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","Icon","item","itemKey","tooltip","className","key","filter","Boolean","join","ref","dropDownContext","use","Error","registerItem","current","_jsx","buttonStyle","disabled","extraButtonProps","isActive","undefined","role","tabIndex","icon","iconPosition","onClick","focus","update","onSelect","onMouseDown","e","preventDefault","type","DropDownItems","t0","$","id","dropdownKey","dropDownRef","itemsContainerClassNames","onClose","shouldAutoFocus","items","setItems","highlightedItem","setHighlightedItem","t1","Symbol","for","itemRef","prev","t2","event","enabledItems","_temp","includes","setTimeout","restoreFocus","prev_0","index","indexOf","length","prev_1","index_0","handleKeyDown","t3","contextValue","t4","t5","find","_temp2","t6","value","onKeyDown","popover","item_0","DropDown","buttonAriaLabel","buttonClassName","label","stopCloseOnClickSelf","buttonRef","openedViaKeyboardRef","generatedId","menuId","showDropDown","setShowDropDown","handleClose","button","dropDown","matches","showPopover","updatePosition","bottom","left","top","getBoundingClientRect","offset","gap","below","above","offsetHeight","maxTop","Math","max","window","innerHeight","preferredTop","style","position","min","innerWidth","offsetWidth","addEventListener","capture","passive","removeEventListener","handle","target","contains","document","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport { Button } from '@payloadcms/ui'\nimport { $addUpdateTag, isDOMNode, type LexicalEditor } from 'lexical'\nimport React, {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\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  Icon,\n  item,\n  itemKey,\n  tooltip,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  Icon: React.ReactNode\n  item: ToolbarGroupItem\n  itemKey: string\n  tooltip?: string\n}): React.ReactNode {\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      enabled === false ? 'disabled' : '',\n      active ? 'active' : '',\n      item?.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [enabled, active, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.use(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      aria-label={tooltip}\n      buttonStyle=\"ghost\"\n      className={className}\n      disabled={enabled === false}\n      extraButtonProps={{\n        'aria-checked': item.isActive ? Boolean(active) : undefined,\n        'data-item-key': itemKey,\n        role: item.isActive ? 'menuitemcheckbox' : 'menuitem',\n        tabIndex: -1,\n      }}\n      icon={Icon}\n      iconPosition=\"left\"\n      onClick={() => {\n        if (enabled !== false) {\n          editor.focus(() => {\n            editor.update(() => {\n              $addUpdateTag('toolbar')\n            })\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect?.({\n              editor,\n              isActive: active!,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e: React.MouseEvent) => {\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      tooltip={tooltip}\n      type=\"button\"\n    >\n      {children}\n    </Button>\n  )\n}\n\nfunction DropDownItems({\n  id,\n  children,\n  dropdownKey,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n  shouldAutoFocus,\n}: {\n  children: React.ReactNode\n  dropdownKey?: string\n  dropDownRef: React.Ref<HTMLDivElement>\n  id: string\n  itemsContainerClassNames?: string[]\n  onClose: (options?: { restoreFocus?: boolean }) => void\n  shouldAutoFocus: boolean\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    const enabledItems = items.filter((item) => !item.current?.disabled)\n\n    if (['ArrowDown', 'ArrowUp', 'Escape'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape') {\n      onClose()\n    } else if (key === 'Tab') {\n      setTimeout(() => onClose({ restoreFocus: false }))\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return enabledItems[0]\n        }\n        const index = enabledItems.indexOf(prev) - 1\n        return enabledItems[index === -1 ? enabledItems.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) {\n          return enabledItems[0]\n        }\n        const index = enabledItems.indexOf(prev)\n        return enabledItems[index === enabledItems.length - 1 ? 0 : index + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (shouldAutoFocus && items != null && highlightedItem == null) {\n      setHighlightedItem(items.find((item) => !item.current?.disabled))\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem, shouldAutoFocus])\n\n  return (\n    <DropDownContext value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        data-dropdown-key={dropdownKey}\n        data-theme=\"dark\"\n        id={id}\n        onKeyDown={handleKeyDown}\n        popover=\"manual\"\n        ref={dropDownRef}\n        role=\"menu\"\n        tabIndex={-1}\n      >\n        {children}\n      </div>\n    </DropDownContext>\n  )\n}\n\nexport function DropDown({\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  dropdownKey,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  dropdownKey: string\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 openedViaKeyboardRef = useRef(false)\n  const generatedId = useId()\n  const menuId = `toolbar-dropdown-${dropdownKey}-${generatedId}`\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = ({ restoreFocus = true }: { restoreFocus?: boolean } = {}): void => {\n    setShowDropDown(false)\n    if (restoreFocus && 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      if (!dropDown.matches(':popover-open')) {\n        dropDown.showPopover()\n      }\n\n      const updatePosition = (): void => {\n        const { bottom, left, top } = button.getBoundingClientRect()\n        const offset = 8\n        const gap = 5\n        const below = bottom + gap\n        const above = top - dropDown.offsetHeight - gap\n        const maxTop = Math.max(offset, window.innerHeight - dropDown.offsetHeight - offset)\n        const preferredTop =\n          below + dropDown.offsetHeight + offset <= window.innerHeight\n            ? below\n            : above >= offset\n              ? above\n              : below\n\n        dropDown.style.position = 'fixed'\n        dropDown.style.top = `${Math.max(offset, Math.min(preferredTop, maxTop))}px`\n        dropDown.style.left = `${Math.max(8, Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20))}px`\n      }\n\n      updatePosition()\n      window.addEventListener('resize', updatePosition)\n      window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n\n      return () => {\n        window.removeEventListener('resize', updatePosition)\n        window.removeEventListener('scroll', updatePosition, { capture: true })\n      }\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.target\n        if (!isDOMNode(target)) {\n          return\n        }\n        if (stopCloseOnClickSelf) {\n          if (dropDownRef.current && dropDownRef.current.contains(target)) {\n            return\n          }\n        }\n        if (!button.contains(target)) {\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  return (\n    <React.Fragment>\n      <button\n        aria-controls={menuId}\n        aria-expanded={showDropDown}\n        aria-haspopup=\"menu\"\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        data-dropdown-key={dropdownKey}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          openedViaKeyboardRef.current = false\n          setShowDropDown(!showDropDown)\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault()\n            openedViaKeyboardRef.current = true\n            setShowDropDown(!showDropDown)\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        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 && (\n        <DropDownItems\n          dropdownKey={dropdownKey}\n          dropDownRef={dropDownRef}\n          id={menuId}\n          itemsContainerClassNames={itemsContainerClassNames}\n          onClose={handleClose}\n          shouldAutoFocus={openedViaKeyboardRef.current}\n        >\n          {children}\n        </DropDownItems>\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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,KAAkB,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,gBAAgB,CAAA;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,aAAa,CAAA;AAsEpB,eAAO,MAAM,eAAe,kGASzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,oBAAoB,CAAA;IAC3B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,sBAmCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,gBAAgB,CAAA;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,aAAa,CAAA;AAsEpB,eAAO,MAAM,eAAe,kGASzB;IACD,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,oBAAoB,CAAA;IAC3B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,sBA+CA,CAAA"}

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

@@ -107,18 +107,34 @@ export const ToolbarDropdown = ({
     items,
     key: groupKey
   } = group;
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    fieldProps: {
+      featureClientSchemaMap,
+      schemaPath
+    }
+  } = useEditorConfigContext();
+  const activeItemLabels = groupState.activeItems.map(item => typeof item.label === 'function' ? item.label({
+    featureClientSchemaMap,
+    i18n,
+    schemaPath
+  }) : item.label || item.key);
+  const dropdownLabel = groupKey === 'text' ? i18n.t('lexical:general:textStyle') : undefined;
+  const buttonAriaLabel = [...new Set([label, ...activeItemLabels, dropdownLabel].filter(Boolean))].join(', ') || groupKey;
   const renderedItems = useMemo(() => {
-    return items?.length ? items.map(item => /*#__PURE__*/_jsx(MemoToolbarItem, {
-      active: groupState.activeItemKeys.includes(item.key),
+    return items?.length ? items.map(item_0 => /*#__PURE__*/_jsx(MemoToolbarItem, {
+      active: groupState.activeItemKeys.includes(item_0.key),
       anchorElem: anchorElem,
       editor: editor,
-      enabled: groupState.enabledItemKeys.includes(item.key),
+      enabled: groupState.enabledItemKeys.includes(item_0.key),
       iconOnly: group.iconOnly,
-      item: item
-    }, item.key)) : null;
+      item: item_0
+    }, item_0.key)) : null;
   }, [items, groupState.activeItemKeys, groupState.enabledItemKeys, anchorElem, editor]);
   return /*#__PURE__*/_jsx(DropDown, {
-    buttonAriaLabel: `${groupKey} dropdown`,
+    buttonAriaLabel: buttonAriaLabel,
     buttonClassName: [baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])].filter(Boolean).join(' '),
     disabled: !groupState.enabledGroup,
     dropdownKey: groupKey,