@payloadcms/richtext-lexical 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/field/{lexical/plugins/FloatingSelectToolbar → features/toolbars/inline/Toolbar}/index.js

@@ -1,89 +1,112 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
-import lexicalUtilsImport from '@lexical/utils';
-const { mergeRegister } = lexicalUtilsImport;
-import lexicalImport from 'lexical';
-const { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } = lexicalImport;
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from 'lexical';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js';
-import { getDOMRangeRect } from '../../utils/getDOMRangeRect.js';
-import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition.js';
-import { ToolbarButton } from './ToolbarButton/index.js';
-import { ToolbarDropdown } from './ToolbarDropdown/index.js';
+import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import { getDOMRangeRect } from '../../../../lexical/utils/getDOMRangeRect.js';
+import { setFloatingElemPosition } from '../../../../lexical/utils/setFloatingElemPosition.js';
+import { ToolbarButton } from '../../shared/ToolbarButton/index.js';
+import { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js';
 import './index.scss';
-function ButtonSectionEntry({ anchorElem, editor, entry }) {
-    if (entry.Component) {
-        return entry?.Component && /*#__PURE__*/ React.createElement(entry.Component, {
+function ButtonGroupItem({ anchorElem, editor, item }) {
+    if (item.Component) {
+        return item?.Component && /*#__PURE__*/ React.createElement(item.Component, {
             anchorElem: anchorElem,
             editor: editor,
-            entry: entry,
-            key: entry.key
+            item: item,
+            key: item.key
         });
     }
     return /*#__PURE__*/ React.createElement(ToolbarButton, {
-        entry: entry,
-        key: entry.key
-    }, entry?.ChildComponent && /*#__PURE__*/ React.createElement(entry.ChildComponent, null));
+        editor: editor,
+        item: item,
+        key: item.key
+    }, item?.ChildComponent && /*#__PURE__*/ React.createElement(item.ChildComponent, null));
 }
-function ToolbarSection({ anchorElem, editor, index, section }) {
+function ToolbarGroupComponent({ anchorElem, editor, group, index }) {
     const { editorConfig } = useEditorConfigContext();
-    const Icon = section?.type === 'dropdown' && section.entries.length && section.ChildComponent ? section.ChildComponent : null;
+    const [DropdownIcon, setDropdownIcon] = React.useState(null);
+    React.useEffect(()=>{
+        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
+            setDropdownIcon(()=>group.ChildComponent);
+        } else {
+            setDropdownIcon(null);
+        }
+    }, [
+        group
+    ]);
+    const onActiveChange = ({ activeItems })=>{
+        if (!activeItems.length) {
+            if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
+                setDropdownIcon(()=>group.ChildComponent);
+            } else {
+                setDropdownIcon(null);
+            }
+            return;
+        }
+        const item = activeItems[0];
+        setDropdownIcon(()=>item.ChildComponent);
+    };
     return /*#__PURE__*/ React.createElement("div", {
-        className: `floating-select-toolbar-popup__section floating-select-toolbar-popup__section-${section.key}`,
-        key: section.key
-    }, section.type === 'dropdown' && section.entries.length && (Icon ? /*#__PURE__*/ React.createElement(ToolbarDropdown, {
-        Icon: Icon,
+        className: `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`,
+        key: group.key
+    }, group.type === 'dropdown' && group.items.length && (DropdownIcon ? /*#__PURE__*/ React.createElement(ToolbarDropdown, {
+        Icon: DropdownIcon,
         anchorElem: anchorElem,
         editor: editor,
-        entries: section.entries,
-        sectionKey: section.key
+        groupKey: group.key,
+        items: group.items,
+        maxActiveItems: 1,
+        onActiveChange: onActiveChange
     }) : /*#__PURE__*/ React.createElement(ToolbarDropdown, {
         anchorElem: anchorElem,
         editor: editor,
-        entries: section.entries,
-        sectionKey: section.key
-    })), section.type === 'buttons' && section.entries.length && section.entries.map((entry)=>{
-        return /*#__PURE__*/ React.createElement(ButtonSectionEntry, {
+        groupKey: group.key,
+        items: group.items,
+        maxActiveItems: 1,
+        onActiveChange: onActiveChange
+    })), group.type === 'buttons' && group.items.length && group.items.map((item)=>{
+        return /*#__PURE__*/ React.createElement(ButtonGroupItem, {
             anchorElem: anchorElem,
             editor: editor,
-            entry: entry,
-            key: entry.key
+            item: item,
+            key: item.key
         });
-    }), index < editorConfig.features.floatingSelectToolbar?.sections.length - 1 && /*#__PURE__*/ React.createElement("div", {
+    }), index < editorConfig.features.toolbarInline?.groups.length - 1 && /*#__PURE__*/ React.createElement("div", {
         className: "divider"
     }));
 }
-function FloatingSelectToolbar({ anchorElem, editor }) {
-    const popupCharStylesEditorRef = useRef(null);
+function InlineToolbar({ anchorElem, editor }) {
+    const floatingToolbarRef = useRef(null);
     const caretRef = useRef(null);
     const { editorConfig } = useEditorConfigContext();
     const closeFloatingToolbar = useCallback(()=>{
-        if (popupCharStylesEditorRef?.current) {
-            const isOpacityZero = popupCharStylesEditorRef.current.style.opacity === '0';
-            const isPointerEventsNone = popupCharStylesEditorRef.current.style.pointerEvents === 'none';
+        if (floatingToolbarRef?.current) {
+            const isOpacityZero = floatingToolbarRef.current.style.opacity === '0';
+            const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none';
             if (!isOpacityZero) {
-                popupCharStylesEditorRef.current.style.opacity = '0';
+                floatingToolbarRef.current.style.opacity = '0';
             }
             if (!isPointerEventsNone) {
-                popupCharStylesEditorRef.current.style.pointerEvents = 'none';
+                floatingToolbarRef.current.style.pointerEvents = 'none';
             }
         }
     }, [
-        popupCharStylesEditorRef
+        floatingToolbarRef
     ]);
     const mouseMoveListener = useCallback((e)=>{
-        if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {
-            const isOpacityZero = popupCharStylesEditorRef.current.style.opacity === '0';
-            const isPointerEventsNone = popupCharStylesEditorRef.current.style.pointerEvents === 'none';
+        if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {
+            const isOpacityZero = floatingToolbarRef.current.style.opacity === '0';
+            const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none';
             if (!isOpacityZero || !isPointerEventsNone) {
                 // Check if the mouse is not over the popup
                 const x = e.clientX;
                 const y = e.clientY;
                 const elementUnderMouse = document.elementFromPoint(x, y);
-                if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+                if (!floatingToolbarRef.current.contains(elementUnderMouse)) {
                     // Mouse is not over the target element => not a normal click, but probably a drag
                     closeFloatingToolbar();
                 }
@@ -93,17 +116,15 @@ function FloatingSelectToolbar({ anchorElem, editor }) {
         closeFloatingToolbar
     ]);
     const mouseUpListener = useCallback(()=>{
-        if (popupCharStylesEditorRef?.current) {
-            if (popupCharStylesEditorRef.current.style.opacity !== '1') {
-                popupCharStylesEditorRef.current.style.opacity = '1';
+        if (floatingToolbarRef?.current) {
+            if (floatingToolbarRef.current.style.opacity !== '1') {
+                floatingToolbarRef.current.style.opacity = '1';
             }
-            if (popupCharStylesEditorRef.current.style.pointerEvents !== 'auto') {
-                popupCharStylesEditorRef.current.style.pointerEvents = 'auto';
+            if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {
+                floatingToolbarRef.current.style.pointerEvents = 'auto';
             }
         }
-    }, [
-        popupCharStylesEditorRef
-    ]);
+    }, []);
     useEffect(()=>{
         document.addEventListener('mousemove', mouseMoveListener);
         document.addEventListener('mouseup', mouseUpListener);
@@ -112,27 +133,48 @@ function FloatingSelectToolbar({ anchorElem, editor }) {
             document.removeEventListener('mouseup', mouseUpListener);
         };
     }, [
-        popupCharStylesEditorRef,
+        floatingToolbarRef,
         mouseMoveListener,
         mouseUpListener
     ]);
     const updateTextFormatFloatingToolbar = useCallback(()=>{
         const selection = $getSelection();
-        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
         const nativeSelection = window.getSelection();
-        if (popupCharStylesEditorElem === null) {
+        if (floatingToolbarRef.current === null) {
             return;
         }
+        const possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor');
+        const isLinkEditorVisible = possibleLinkEditor !== null && 'style' in possibleLinkEditor && possibleLinkEditor?.style?.['opacity'] === '1';
         const rootElement = editor.getRootElement();
         if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
             const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
-            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem, 'center');
+            // Position floating toolbar
+            const offsetIfFlipped = setFloatingElemPosition({
+                alwaysDisplayOnTop: isLinkEditorVisible,
+                anchorElem,
+                floatingElem: floatingToolbarRef.current,
+                horizontalPosition: 'center',
+                targetRect: rangeRect
+            });
+            // Position caret
             if (caretRef.current) {
-                setFloatingElemPosition(rangeRect, caretRef.current, popupCharStylesEditorElem, 'center', 10, 5, true);
+                setFloatingElemPosition({
+                    anchorElem: floatingToolbarRef.current,
+                    anchorFlippedOffset: offsetIfFlipped,
+                    floatingElem: caretRef.current,
+                    horizontalOffset: 5,
+                    horizontalPosition: 'center',
+                    specialHandlingForCaret: true,
+                    targetRect: rangeRect,
+                    verticalGap: 10
+                });
             }
+        } else {
+            closeFloatingToolbar();
         }
     }, [
         editor,
+        closeFloatingToolbar,
         anchorElem
     ]);
     useEffect(()=>{
@@ -174,22 +216,22 @@ function FloatingSelectToolbar({ anchorElem, editor }) {
         updateTextFormatFloatingToolbar
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: "floating-select-toolbar-popup",
-        ref: popupCharStylesEditorRef
+        className: "inline-toolbar-popup",
+        ref: floatingToolbarRef
     }, /*#__PURE__*/ React.createElement("div", {
         className: "caret",
         ref: caretRef
-    }), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, editorConfig?.features && editorConfig.features?.floatingSelectToolbar?.sections.map((section, i)=>{
-        return /*#__PURE__*/ React.createElement(ToolbarSection, {
+    }), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, editorConfig?.features && editorConfig.features?.toolbarInline?.groups.map((group, i)=>{
+        return /*#__PURE__*/ React.createElement(ToolbarGroupComponent, {
             anchorElem: anchorElem,
             editor: editor,
+            group: group,
             index: i,
-            key: section.key,
-            section: section
+            key: group.key
         });
     })));
 }
-function useFloatingTextFormatToolbar(editor, anchorElem) {
+function useInlineToolbar(editor, anchorElem) {
     const [isText, setIsText] = useState(false);
     const updatePopup = useCallback(()=>{
         editor.getEditorState().read(()=>{
@@ -257,14 +299,14 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
     if (!isText) {
         return null;
     }
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(FloatingSelectToolbar, {
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(InlineToolbar, {
         anchorElem: anchorElem,
         editor: editor
     }), anchorElem);
 }
-export function FloatingSelectToolbarPlugin({ anchorElem = document.body }) {
+export const InlineToolbarPlugin = ({ anchorElem })=>{
     const [editor] = useLexicalComposerContext();
-    return useFloatingTextFormatToolbar(editor, anchorElem);
-}
+    return useInlineToolbar(editor, anchorElem);
+};
 
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/features/toolbars/inline/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 '../../../types.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<React.FC | null>(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 = ({ 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\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            Icon={DropdownIcon}\n            anchorElem={anchorElem}\n            editor={editor}\n            groupKey={group.key}\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: 10,\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): React.ReactElement | null {\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"],"names":["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","key","ChildComponent","ToolbarGroupComponent","group","index","editorConfig","DropdownIcon","setDropdownIcon","type","items","length","onActiveChange","activeItems","div","className","Icon","groupKey","maxActiveItems","map","features","toolbarInline","groups","InlineToolbar","floatingToolbarRef","caretRef","closeFloatingToolbar","current","isOpacityZero","style","opacity","isPointerEventsNone","pointerEvents","mouseMoveListener","e","buttons","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","nativeSelection","window","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/{lexical/plugins/FloatingSelectToolbar → features/toolbars/inline/Toolbar}/index.scss

@@ -1,21 +1,21 @@
-@import '../../../../scss/styles.scss';
+@import '../../../../../scss/styles';
 
 html[data-theme='light'] {
-  .floating-select-toolbar-popup {
+  .inline-toolbar-popup {
     @include shadow-m;
   }
 }
 
-.floating-select-toolbar-popup {
+.inline-toolbar-popup {
   display: flex;
   align-items: center;
   background: var(--color-base-0);
-  padding: 0px 3.72px 0px 6.25px;
+  padding: 0 3.72px 0 6.25px;
   vertical-align: middle;
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
+  z-index: 2;
   opacity: 0;
   border-radius: 6.25px;
   transition: opacity 0.2s;
@@ -31,9 +31,10 @@ html[data-theme='light'] {
     border-top-color: var(--color-base-0);
   }
 
-  &__section {
+  &__group {
     display: flex;
     align-items: center;
+    gap: 2px;
 
     .icon {
       min-width: 20px;
@@ -49,9 +50,4 @@ html[data-theme='light'] {
     }
   }
 
-  @media (max-width: 1024px) {
-    button.insert-comment {
-      display: none;
-    }
-  }
 }

package/dist/field/features/toolbars/inline/feature.client.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+export declare const InlineToolbarFeatureClientComponent: import("react").FC<undefined>;
+//# sourceMappingURL=feature.client.d.ts.map

package/dist/field/features/toolbars/inline/feature.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/toolbars/inline/feature.client.tsx"],"names":[],"mappings":";AAsBA,eAAO,MAAM,mCAAmC,+BAAoD,CAAA"}

package/dist/field/features/toolbars/inline/feature.client.js

@@ -0,0 +1,20 @@
+'use client';
+import { createClientComponent } from '../../createClientComponent.js';
+import { InlineToolbarPlugin } from './Toolbar/index.js';
+const InlineToolbarFeatureClient = (props)=>{
+    return {
+        clientFeatureProps: props,
+        feature: ()=>({
+                clientFeatureProps: props,
+                plugins: [
+                    {
+                        Component: InlineToolbarPlugin,
+                        position: 'floatingAnchorElem'
+                    }
+                ]
+            })
+    };
+};
+export const InlineToolbarFeatureClientComponent = createClientComponent(InlineToolbarFeatureClient);
+
+//# sourceMappingURL=feature.client.js.map

package/dist/field/features/toolbars/inline/feature.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/field/features/toolbars/inline/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport type { FeatureProviderProviderClient } from '../../types.js'\n\nimport { createClientComponent } from '../../createClientComponent.js'\nimport { InlineToolbarPlugin } from './Toolbar/index.js'\n\nconst InlineToolbarFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {\n  return {\n    clientFeatureProps: props,\n    feature: () => ({\n      clientFeatureProps: props,\n      plugins: [\n        {\n          Component: InlineToolbarPlugin,\n          position: 'floatingAnchorElem',\n        },\n      ],\n    }),\n  }\n}\n\nexport const InlineToolbarFeatureClientComponent = createClientComponent(InlineToolbarFeatureClient)\n"],"names":["createClientComponent","InlineToolbarPlugin","InlineToolbarFeatureClient","props","clientFeatureProps","feature","plugins","Component","position","InlineToolbarFeatureClientComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,qBAAqB,QAAQ,iCAAgC;AACtE,SAASC,mBAAmB,QAAQ,qBAAoB;AAExD,MAAMC,6BAAuE,CAACC;IAC5E,OAAO;QACLC,oBAAoBD;QACpBE,SAAS,IAAO,CAAA;gBACdD,oBAAoBD;gBACpBG,SAAS;oBACP;wBACEC,WAAWN;wBACXO,UAAU;oBACZ;iBACD;YACH,CAAA;IACF;AACF;AAEA,OAAO,MAAMC,sCAAsCT,sBAAsBE,4BAA2B"}

package/dist/field/features/toolbars/inline/feature.server.d.ts

@@ -0,0 +1,3 @@
+import type { FeatureProviderProviderServer } from '../../types.js';
+export declare const InlineToolbarFeature: FeatureProviderProviderServer<undefined, undefined>;
+//# sourceMappingURL=feature.server.d.ts.map

package/dist/field/features/toolbars/inline/feature.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.server.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/toolbars/inline/feature.server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAA;AAInE,eAAO,MAAM,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,EAAE,SAAS,CAcpF,CAAA"}

package/dist/field/features/toolbars/inline/feature.server.js

@@ -0,0 +1,16 @@
+import { InlineToolbarFeatureClientComponent } from './feature.client.js';
+export const InlineToolbarFeature = (props)=>{
+    return {
+        feature: ()=>{
+            return {
+                ClientComponent: InlineToolbarFeatureClientComponent,
+                clientFeatureProps: null,
+                serverFeatureProps: props
+            };
+        },
+        key: 'toolbarInline',
+        serverFeatureProps: props
+    };
+};
+
+//# sourceMappingURL=feature.server.js.map

package/dist/field/features/toolbars/inline/feature.server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/field/features/toolbars/inline/feature.server.ts"],"sourcesContent":["import type { FeatureProviderProviderServer } from '../../types.js'\n\nimport { InlineToolbarFeatureClientComponent } from './feature.client.js'\n\nexport const InlineToolbarFeature: FeatureProviderProviderServer<undefined, undefined> = (\n  props,\n) => {\n  return {\n    feature: () => {\n      return {\n        ClientComponent: InlineToolbarFeatureClientComponent,\n        clientFeatureProps: null,\n        serverFeatureProps: props,\n      }\n    },\n    key: 'toolbarInline',\n    serverFeatureProps: props,\n  }\n}\n"],"names":["InlineToolbarFeatureClientComponent","InlineToolbarFeature","props","feature","ClientComponent","clientFeatureProps","serverFeatureProps","key"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAEA,SAASA,mCAAmC,QAAQ,sBAAqB;AAEzE,OAAO,MAAMC,uBAA4E,CACvFC;IAEA,OAAO;QACLC,SAAS;YACP,OAAO;gBACLC,iBAAiBJ;gBACjBK,oBAAoB;gBACpBC,oBAAoBJ;YACtB;QACF;QACAK,KAAK;QACLD,oBAAoBJ;IACtB;AACF,EAAC"}

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

@@ -0,0 +1,10 @@
+import type { LexicalEditor } from 'lexical';
+import React from 'react';
+import type { ToolbarGroupItem } from '../../types.js';
+import './index.scss';
+export declare const ToolbarButton: ({ children, editor, item, }: {
+    children: React.JSX.Element;
+    editor: LexicalEditor;
+    item: ToolbarGroupItem;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/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,MAAM,GAAG,QAAQ,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;CACvB,sBAqFA,CAAA"}

package/dist/field/{lexical/plugins/FloatingSelectToolbar → features/toolbars/shared}/ToolbarButton/index.js

@@ -1,33 +1,32 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
-import lexicalUtilsImport from '@lexical/utils';
-const { mergeRegister } = lexicalUtilsImport;
-import lexicalImport from 'lexical';
-const { $getSelection } = lexicalImport;
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection } from 'lexical';
 import React, { useCallback, useEffect, useState } from 'react';
+import { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js';
 import './index.scss';
-const baseClass = 'floating-select-toolbar-popup__button';
-export const ToolbarButton = ({ children, entry })=>{
-    const [editor] = useLexicalComposerContext();
+const baseClass = 'toolbar-popup__button';
+export const ToolbarButton = ({ children, editor, item })=>{
     const [enabled, setEnabled] = useState(true);
     const [active, setActive] = useState(false);
     const [className, setClassName] = useState(baseClass);
+    const editorFocusContext = useEditorFocus();
     const updateStates = useCallback(()=>{
         editor.getEditorState().read(()=>{
             const selection = $getSelection();
-            if (entry.isActive) {
-                const isActive = entry.isActive({
+            if (item.isActive) {
+                const isActive = item.isActive({
                     editor,
+                    editorFocusContext,
                     selection
                 });
                 if (active !== isActive) {
                     setActive(isActive);
                 }
             }
-            if (entry.isEnabled) {
-                const isEnabled = entry.isEnabled({
+            if (item.isEnabled) {
+                const isEnabled = item.isEnabled({
                     editor,
+                    editorFocusContext,
                     selection
                 });
                 if (enabled !== isEnabled) {
@@ -38,8 +37,9 @@ export const ToolbarButton = ({ children, entry })=>{
     }, [
         active,
         editor,
+        editorFocusContext,
         enabled,
-        entry
+        item
     ]);
     useEffect(()=>{
         updateStates();
@@ -67,21 +67,31 @@ export const ToolbarButton = ({ children, entry })=>{
             baseClass,
             enabled === false ? 'disabled' : '',
             active ? 'active' : '',
-            entry?.key ? `${baseClass}-` + entry.key : ''
+            item?.key ? `${baseClass}-` + item.key : ''
         ].filter(Boolean).join(' '));
     }, [
         enabled,
         active,
-        className
+        className,
+        item.key
     ]);
     return /*#__PURE__*/ React.createElement("button", {
         className: className,
         onClick: ()=>{
             if (enabled !== false) {
-                entry.onClick({
-                    editor,
-                    isActive: active
+                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.
+                ;
+                editor.focus(()=>{
+                    // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
+                    item.onSelect({
+                        editor,
+                        isActive: active
+                    });
                 });
+                return true;
             }
         },
         onMouseDown: (e)=>{

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/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 { useEditorFocus } from '../../../../lexical/EditorFocusProvider.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 editorFocusContext = useEditorFocus()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (item.isActive) {\n        const isActive = item.isActive({ editor, editorFocusContext, selection })\n        if (active !== isActive) {\n          setActive(isActive)\n        }\n      }\n      if (item.isEnabled) {\n        const isEnabled = item.isEnabled({ editor, editorFocusContext, selection })\n        if (enabled !== isEnabled) {\n          setEnabled(isEnabled)\n        }\n      }\n    })\n  }, [active, editor, editorFocusContext, 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"],"names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorFocus","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorFocusContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","button","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,QAAQ,UAAS;AACvC,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,cAAc,QAAQ,6CAA4C;AAC3E,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EAKL;IACC,MAAM,CAACC,SAASC,WAAW,GAAGR,SAAkB;IAChD,MAAM,CAACS,QAAQC,UAAU,GAAGV,SAAkB;IAC9C,MAAM,CAACW,WAAWC,aAAa,GAAGZ,SAAiBE;IACnD,MAAMW,qBAAqBZ;IAE3B,MAAMa,eAAehB,YAAY;QAC/BO,OAAOU,cAAc,GAAGC,IAAI,CAAC;YAC3B,MAAMC,YAAYrB;YAClB,IAAIU,KAAKY,QAAQ,EAAE;gBACjB,MAAMA,WAAWZ,KAAKY,QAAQ,CAAC;oBAAEb;oBAAQQ;oBAAoBI;gBAAU;gBACvE,IAAIR,WAAWS,UAAU;oBACvBR,UAAUQ;gBACZ;YACF;YACA,IAAIZ,KAAKa,SAAS,EAAE;gBAClB,MAAMA,YAAYb,KAAKa,SAAS,CAAC;oBAAEd;oBAAQQ;oBAAoBI;gBAAU;gBACzE,IAAIV,YAAYY,WAAW;oBACzBX,WAAWW;gBACb;YACF;QACF;IACF,GAAG;QAACV;QAAQJ;QAAQQ;QAAoBN;QAASD;KAAK;IAEtDP,UAAU;QACRe;IACF,GAAG;QAACA;KAAa;IAEjBf,UAAU;QACRqB,SAASC,gBAAgB,CAAC,WAAWP;QACrC,OAAO;YACLM,SAASE,mBAAmB,CAAC,WAAWR;QAC1C;IACF,GAAG;QAACA;KAAa;IAEjBf,UAAU;QACR,OAAOJ,cACLU,OAAOkB,sBAAsB,CAAC;YAC5BT;QACF;IAEJ,GAAG;QAACT;QAAQS;KAAa;IAEzBf,UAAU;QACRa,aACE;YACEV;YACAK,YAAY,QAAQ,aAAa;YACjCE,SAAS,WAAW;YACpBH,MAAMkB,MAAM,CAAC,EAAEtB,UAAU,CAAC,CAAC,GAAGI,KAAKkB,GAAG,GAAG;SAC1C,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAEZ,GAAG;QAACpB;QAASE;QAAQE;QAAWL,KAAKkB,GAAG;KAAC;IAEzC,qBACE,oBAACI;QACCjB,WAAWA;QACXkB,SAAS;YACP,IAAItB,YAAY,OAAO;gBACrBF,OAAOyB,WAAW,GAAG,IAAIC,IAAI;uBAAI1B,OAAOyB,WAAW;oBAAE;iBAAU,EAAE,kHAAkH;;gBAEnLzB,OAAO2B,KAAK,CAAC;oBACX,iHAAiH;oBACjH1B,KAAK2B,QAAQ,CAAC;wBACZ5B;wBACAa,UAAUT;oBACZ;gBACF;gBAEA,OAAO;YACT;QACF;QACAyB,aAAa,CAACC;YACZ,8HAA8H;YAC9H,2JAA2J;YAC3J,sKAAsK;YACtKA,EAAEC,cAAc;QAClB;QACAC,MAAK;OAEJjC;AAGP,EAAC"}

package/dist/field/{lexical/plugins/FloatingSelectToolbar → features/toolbars/shared}/ToolbarButton/index.scss

@@ -1,4 +1,6 @@
-.floating-select-toolbar-popup__button {
+@import '../../../../../scss/styles';
+
+.toolbar-popup__button {
   display: flex;
   align-items: center;
   vertical-align: middle;

package/dist/field/features/toolbars/shared/ToolbarDropdown/DropDown.d.ts

@@ -0,0 +1,23 @@
+import type { LexicalEditor } from 'lexical';
+import { type ReactNode } from 'react';
+import React from 'react';
+import type { ToolbarGroupItem } from '../../types.js';
+export declare function DropDownItem({ active, children, editor, enabled, item, title, }: {
+    active?: boolean;
+    children: React.ReactNode;
+    editor: LexicalEditor;
+    enabled?: boolean;
+    item: ToolbarGroupItem;
+    title?: string;
+}): React.ReactNode;
+export declare function DropDown({ Icon, buttonAriaLabel, buttonClassName, children, disabled, itemsContainerClassNames, label, stopCloseOnClickSelf, }: {
+    Icon?: React.FC;
+    buttonAriaLabel?: string;
+    buttonClassName: string;
+    children: ReactNode;
+    disabled?: boolean;
+    itemsContainerClassNames?: string[];
+    label?: string;
+    stopCloseOnClickSelf?: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=DropDown.d.ts.map

package/dist/field/features/toolbars/shared/ToolbarDropdown/DropDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAA;AACzF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAUtD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,GACN,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CA4DlB;AA8ED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,eAAe,EACf,eAAe,EACf,QAAQ,EACR,QAAgB,EAChB,wBAAwB,EACxB,KAAK,EACL,oBAAoB,GACrB,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,SAAS,CAqFlB"}