@payloadcms/richtext-lexical 3.0.0-beta.24 → 3.0.0-beta.26

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/toolbars/inline → features/toolbars/shared}/ToolbarButton/index.js

@@ -1,21 +1,22 @@
 'use client';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 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 = 'inline-toolbar-popup__button';
-export const ToolbarButton = ({ children, item })=>{
-    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 (item.isActive) {
                 const isActive = item.isActive({
                     editor,
+                    editorFocusContext,
                     selection
                 });
                 if (active !== isActive) {
@@ -25,6 +26,7 @@ export const ToolbarButton = ({ children, item })=>{
             if (item.isEnabled) {
                 const isEnabled = item.isEnabled({
                     editor,
+                    editorFocusContext,
                     selection
                 });
                 if (enabled !== isEnabled) {
@@ -35,6 +37,7 @@ export const ToolbarButton = ({ children, item })=>{
     }, [
         active,
         editor,
+        editorFocusContext,
         enabled,
         item
     ]);
@@ -69,16 +72,26 @@ export const ToolbarButton = ({ children, item })=>{
     }, [
         enabled,
         active,
-        className
+        className,
+        item.key
     ]);
     return /*#__PURE__*/ React.createElement("button", {
         className: className,
         onClick: ()=>{
             if (enabled !== false) {
-                item.onSelect({
-                    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/toolbars/inline → features/toolbars/shared}/ToolbarButton/index.scss

@@ -1,4 +1,6 @@
-.inline-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"}

package/dist/field/{lexical/plugins/toolbars/inline → features/toolbars/shared}/ToolbarDropdown/DropDown.js

@@ -1,66 +1,11 @@
 'use client';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
-import { mergeRegister } from '@lexical/utils';
-import { $getSelection } from 'lexical';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import React from 'react';
 import { createPortal } from 'react-dom';
-const baseClass = 'inline-toolbar-popup__dropdown-item';
+const baseClass = 'toolbar-popup__dropdown-item';
 const DropDownContext = /*#__PURE__*/ React.createContext(null);
-export function DropDownItem({ children, item, title }) {
-    const [editor] = useLexicalComposerContext();
-    const [enabled, setEnabled] = useState(true);
-    const [active, setActive] = useState(false);
+export function DropDownItem({ active, children, editor, enabled, item, title }) {
     const [className, setClassName] = useState(baseClass);
-    const updateStates = useCallback(()=>{
-        editor.getEditorState().read(()=>{
-            const selection = $getSelection();
-            if (item.isActive) {
-                const isActive = item.isActive({
-                    editor,
-                    selection
-                });
-                if (active !== isActive) {
-                    setActive(isActive);
-                }
-            }
-            if (item.isEnabled) {
-                const isEnabled = item.isEnabled({
-                    editor,
-                    selection
-                });
-                if (enabled !== isEnabled) {
-                    setEnabled(isEnabled);
-                }
-            }
-        });
-    }, [
-        active,
-        editor,
-        enabled,
-        item
-    ]);
-    useEffect(()=>{
-        updateStates();
-    }, [
-        updateStates
-    ]);
-    useEffect(()=>{
-        document.addEventListener('mouseup', updateStates);
-        return ()=>{
-            document.removeEventListener('mouseup', updateStates);
-        };
-    }, [
-        updateStates
-    ]);
-    useEffect(()=>{
-        return mergeRegister(editor.registerUpdateListener(()=>{
-            updateStates();
-        }));
-    }, [
-        editor,
-        updateStates
-    ]);
     useEffect(()=>{
         setClassName([
             baseClass,
@@ -92,9 +37,17 @@ export function DropDownItem({ children, item, title }) {
         className: className,
         onClick: ()=>{
             if (enabled !== false) {
-                item.onSelect({
-                    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
+                    });
                 });
             }
         },
@@ -108,7 +61,7 @@ export function DropDownItem({ children, item, title }) {
         type: "button"
     }, children);
 }
-function DropDownItems({ children, dropDownRef, onClose }) {
+function DropDownItems({ children, dropDownRef, itemsContainerClassNames, onClose }) {
     const [items, setItems] = useState();
     const [highlightedItem, setHighlightedItem] = useState();
     const registerItem = useCallback((itemRef)=>{
@@ -156,7 +109,7 @@ function DropDownItems({ children, dropDownRef, onClose }) {
         if (items != null && highlightedItem == null) {
             setHighlightedItem(items[0]);
         }
-        if (highlightedItem?.current != null) {
+        if (highlightedItem != null && highlightedItem?.current != null) {
             highlightedItem.current.focus();
         }
     }, [
@@ -166,12 +119,14 @@ function DropDownItems({ children, dropDownRef, onClose }) {
     return /*#__PURE__*/ React.createElement(DropDownContext.Provider, {
         value: contextValue
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "inline-toolbar-popup__dropdown-items",
+        className: (itemsContainerClassNames ?? [
+            'toolbar-popup__dropdown-items'
+        ]).join(' '),
         onKeyDown: handleKeyDown,
         ref: dropDownRef
     }, children));
 }
-export function DropDown({ Icon, buttonAriaLabel, buttonClassName, children, disabled = false, stopCloseOnClickSelf }) {
+export function DropDown({ Icon, buttonAriaLabel, buttonClassName, children, disabled = false, itemsContainerClassNames, label, stopCloseOnClickSelf }) {
     const dropDownRef = useRef(null);
     const buttonRef = useRef(null);
     const [showDropDown, setShowDropDown] = useState(false);
@@ -186,7 +141,7 @@ export function DropDown({ Icon, buttonAriaLabel, buttonClassName, children, dis
         const dropDown = dropDownRef.current;
         if (showDropDown && button !== null && dropDown !== null) {
             const { left, top } = button.getBoundingClientRect();
-            const scrollTopOffset = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollTopOffset = window.scrollY || document.documentElement.scrollTop;
             dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`;
             dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`;
         }
@@ -237,10 +192,13 @@ export function DropDown({ Icon, buttonAriaLabel, buttonClassName, children, dis
         },
         ref: buttonRef,
         type: "button"
-    }, /*#__PURE__*/ React.createElement(Icon, null), /*#__PURE__*/ React.createElement("i", {
-        className: "inline-toolbar-popup__dropdown-caret"
+    }, Icon && /*#__PURE__*/ React.createElement(Icon, null), label && /*#__PURE__*/ React.createElement("span", {
+        className: "toolbar-popup__dropdown-label"
+    }, label), /*#__PURE__*/ React.createElement("i", {
+        className: "toolbar-popup__dropdown-caret"
     })), showDropDown && /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(DropDownItems, {
         dropDownRef: dropDownRef,
+        itemsContainerClassNames: itemsContainerClassNames,
         onClose: handleClose
     }, children), document.body));
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  item,\n  title,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n  title?: string\n}): React.ReactNode {\n  const [className, setClassName] = useState<string>(baseClass)\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-${item.key}` : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.useContext(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect({\n              editor,\n              isActive: active,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      title={title}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement>>>()\n  const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement>) => {\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) return\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) return items[0]\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) return items[0]\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext.Provider value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext.Provider>\n  )\n}\n\nexport function DropDown({\n  Icon,\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  Icon?: React.FC\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const { target } = event\n        if (stopCloseOnClickSelf != null) {\n          // eslint-disable-next-line @typescript-eslint/prefer-optional-chain\n          if (dropDownRef.current != null && dropDownRef.current.contains(target as Node)) {\n            return\n          }\n        }\n        if (!button.contains(target as Node)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\n          // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n          // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n          // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n          e.preventDefault()\n        }}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown &&\n        createPortal(\n          <DropDownItems\n            dropDownRef={dropDownRef}\n            itemsContainerClassNames={itemsContainerClassNames}\n            onClose={handleClose}\n          >\n            {children}\n          </DropDownItems>,\n          document.body,\n        )}\n    </React.Fragment>\n  )\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","React","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","item","title","className","setClassName","key","filter","Boolean","join","ref","dropDownContext","useContext","Error","registerItem","current","button","onClick","_updateTags","Set","focus","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","Provider","value","div","onKeyDown","DropDown","Icon","buttonAriaLabel","buttonClassName","disabled","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","Fragment","aria-label","span","i","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { LexicalEditor } from 'lexical';
+import type { ToolbarGroupItem } from '../../types.js';
+import './index.scss';
+export declare const ToolbarDropdown: ({ Icon, anchorElem, classNames, editor, groupKey, items, itemsContainerClassNames, label, maxActiveItems, onActiveChange, }: {
+    Icon?: React.FC;
+    anchorElem: HTMLElement;
+    classNames?: string[];
+    editor: LexicalEditor;
+    groupKey: string;
+    items: ToolbarGroupItem[];
+    itemsContainerClassNames?: string[];
+    label?: string;
+    /**
+     * Maximum number of active items allowed. This is a performance optimization to prevent
+     * unnecessary item active checks when the maximum number of active items is reached.
+     */
+    maxActiveItems?: number;
+    onActiveChange?: ({ activeItems }: {
+        activeItems: ToolbarGroupItem[];
+    }) => void;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,139 @@
+'use client';
+import React, { useCallback, useEffect } from 'react';
+const baseClass = 'toolbar-popup__dropdown';
+import { mergeRegister } from '@lexical/utils';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
+import { $getSelection } from 'lexical';
+import { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js';
+import { DropDown, DropDownItem } from './DropDown.js';
+import './index.scss';
+const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
+    const { i18n } = useTranslation();
+    if (item.Component) {
+        return item?.Component && /*#__PURE__*/ React.createElement(item.Component, {
+            active: active,
+            anchorElem: anchorElem,
+            editor: editor,
+            enabled: enabled,
+            item: item,
+            key: item.key
+        });
+    }
+    let title = item.key;
+    if (item.label) {
+        title = typeof item.label === 'function' ? item.label({
+            i18n
+        }) : item.label;
+    }
+    // Crop title to max. 25 characters
+    if (title.length > 25) {
+        title = title.substring(0, 25) + '...';
+    }
+    return /*#__PURE__*/ React.createElement(DropDownItem, {
+        active: active,
+        editor: editor,
+        enabled: enabled,
+        item: item,
+        key: item.key
+    }, item?.ChildComponent && /*#__PURE__*/ React.createElement(item.ChildComponent, null), /*#__PURE__*/ React.createElement("span", {
+        className: "text"
+    }, title));
+};
+export const ToolbarDropdown = ({ Icon, anchorElem, classNames, editor, groupKey, items, itemsContainerClassNames, label, maxActiveItems, onActiveChange })=>{
+    const [activeItemKeys, setActiveItemKeys] = React.useState([]);
+    const [enabledItemKeys, setEnabledItemKeys] = React.useState([]);
+    const editorFocusContext = useEditorFocus();
+    const updateStates = useCallback(()=>{
+        editor.getEditorState().read(()=>{
+            const selection = $getSelection();
+            const _activeItemKeys = [];
+            const _activeItems = [];
+            const _enabledItemKeys = [];
+            for (const item of items){
+                if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
+                    const isActive = item.isActive({
+                        editor,
+                        editorFocusContext,
+                        selection
+                    });
+                    if (isActive) {
+                        _activeItemKeys.push(item.key);
+                        _activeItems.push(item);
+                    }
+                }
+                if (item.isEnabled) {
+                    const isEnabled = item.isEnabled({
+                        editor,
+                        editorFocusContext,
+                        selection
+                    });
+                    if (isEnabled) {
+                        _enabledItemKeys.push(item.key);
+                    }
+                } else {
+                    _enabledItemKeys.push(item.key);
+                }
+            }
+            setActiveItemKeys(_activeItemKeys);
+            setEnabledItemKeys(_enabledItemKeys);
+            if (onActiveChange) {
+                onActiveChange({
+                    activeItems: _activeItems
+                });
+            }
+        });
+    }, [
+        editor,
+        editorFocusContext,
+        items,
+        maxActiveItems,
+        onActiveChange
+    ]);
+    useEffect(()=>{
+        updateStates();
+    }, [
+        updateStates
+    ]);
+    useEffect(()=>{
+        document.addEventListener('mouseup', updateStates);
+        return ()=>{
+            document.removeEventListener('mouseup', updateStates);
+        };
+    }, [
+        updateStates
+    ]);
+    useEffect(()=>{
+        return mergeRegister(editor.registerUpdateListener(()=>{
+            updateStates();
+        }));
+    }, [
+        editor,
+        updateStates
+    ]);
+    return /*#__PURE__*/ React.createElement(DropDown, {
+        Icon: Icon,
+        buttonAriaLabel: `${groupKey} dropdown`,
+        buttonClassName: [
+            baseClass,
+            `${baseClass}-${groupKey}`,
+            ...classNames || []
+        ].filter(Boolean).join(' '),
+        itemsContainerClassNames: [
+            `${baseClass}-items`,
+            ...itemsContainerClassNames || []
+        ],
+        key: groupKey,
+        label: label
+    }, items.length && items.map((item)=>{
+        return /*#__PURE__*/ React.createElement(ToolbarItem, {
+            active: activeItemKeys.includes(item.key),
+            anchorElem: anchorElem,
+            editor: editor,
+            enabled: enabledItemKeys.includes(item.key),
+            item: item,
+            key: item.key
+        });
+    }));
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js'\nimport { DropDown, DropDownItem } from './DropDown.js'\nimport './index.scss'\n\nconst ToolbarItem = ({\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}) => {\n  const { i18n } = useTranslation()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  if (item.label) {\n    title = typeof item.label === 'function' ? item.label({ i18n }) : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    title = title.substring(0, 25) + '...'\n  }\n\n  return (\n    <DropDownItem active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      {item?.ChildComponent && <item.ChildComponent />}\n      <span className=\"text\">{title}</span>\n    </DropDownItem>\n  )\n}\n\nexport const ToolbarDropdown = ({\n  Icon,\n  anchorElem,\n  classNames,\n  editor,\n  groupKey,\n  items,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  Icon?: React.FC\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  groupKey: string\n  items: ToolbarGroupItem[]\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [activeItemKeys, setActiveItemKeys] = React.useState<string[]>([])\n  const [enabledItemKeys, setEnabledItemKeys] = React.useState<string[]>([])\n  const editorFocusContext = useEditorFocus()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorFocusContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorFocusContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n      setActiveItemKeys(_activeItemKeys)\n      setEnabledItemKeys(_enabledItemKeys)\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorFocusContext, items, maxActiveItems, onActiveChange])\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  return (\n    <DropDown\n      Icon={Icon}\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {items.length &&\n        items.map((item) => {\n          return (\n            <ToolbarItem\n              active={activeItemKeys.includes(item.key)}\n              anchorElem={anchorElem}\n              editor={editor}\n              enabled={enabledItemKeys.includes(item.key)}\n              item={item}\n              key={item.key}\n            />\n          )\n        })}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useEffect","baseClass","mergeRegister","useTranslation","$getSelection","useEditorFocus","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","Component","key","title","label","length","substring","ChildComponent","span","className","ToolbarDropdown","Icon","classNames","groupKey","items","itemsContainerClassNames","maxActiveItems","onActiveChange","activeItemKeys","setActiveItemKeys","useState","enabledItemKeys","setEnabledItemKeys","editorFocusContext","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","document","addEventListener","removeEventListener","registerUpdateListener","buttonAriaLabel","buttonClassName","filter","Boolean","join","map","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/{lexical/plugins/toolbars/inline → features/toolbars/shared}/ToolbarDropdown/index.scss

@@ -1,18 +1,22 @@
-@import '../../../../../../scss/styles';
+@import '../../../../../scss/styles';
 
-.inline-toolbar-popup__dropdown {
+.toolbar-popup__dropdown {
   display: flex;
   align-items: center;
   vertical-align: middle;
   justify-content: center;
   height: 30px;
-  width: 40px;
   border: 0;
   background: none;
   border-radius: 4px;
   cursor: pointer;
   position: relative;
-  padding: 0;
+  padding: 0 10px;
+
+  &-label {
+    color: var(--color-base-600);
+    padding: 0 10px;
+  }
 
   &:disabled {
     cursor: not-allowed;
@@ -26,10 +30,10 @@
     background-color: var(--color-base-100);
   }
 
-  &.active {
+  .active {
     background-color: var(--color-base-100);
 
-    .inline-toolbar-popup__dropdown-caret {
+    .toolbar-popup__dropdown-caret {
       &:after {
         transform: rotate(0deg);
       }
@@ -50,9 +54,9 @@
       height: 4px;
 
       opacity: 0.3;
-      background-image: url(../../../../ui/icons/Caret/index.svg);
-      background-position-y: 0px;
-      background-position-x: 0px;
+      background-image: url(../../../../lexical/ui/icons/Caret/index.svg);
+      background-position-y: 0;
+      background-position-x: 0;
     }
   }
 
@@ -60,17 +64,25 @@
     position: absolute;
     background: var(--color-base-0);
     border-radius: 4px;
-    width: 132.5px;
+    min-width: 132.5px;
+    max-width: 200px;
     z-index: 100;
 
-    .inline-toolbar-popup__dropdown-item {
+    .toolbar-popup__dropdown-item {
       all: unset; // reset all default button styles
       cursor: pointer;
       color: var(--color-base-900);
 
-      &:hover:not([disabled]) {
+      .text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &:hover:not([disabled]), &.active {
         background-color: var(--color-base-100);
       }
+
       padding-left: 6.25px;
       padding-right: 6.25px;
       width: 100%;
@@ -91,7 +103,7 @@
 }
 
 html[data-theme='light'] {
-  .inline-toolbar-popup__dropdown {
+  .toolbar-popup__dropdown {
     &-items {
       position: absolute;
       @include shadow-m;