@payloadcms/richtext-lexical 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

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

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui';
@@ -11,32 +10,14 @@ import './index.scss';
 import { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js';
 function ButtonGroupItem({ anchorElem, editor, item }) {
     if (item.Component) {
-        return item?.Component && /*#__PURE__*/ _jsxDEV(item.Component, {
-            anchorElem: anchorElem,
-            editor: editor,
-            item: item
-        }, item.key, false, {
-            fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-            lineNumber: 33,
-            columnNumber: 9
-        }, this);
+        return item?.Component && <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key}/>;
     }
     if (!item.ChildComponent) {
         return null;
     }
-    return /*#__PURE__*/ _jsxDEV(ToolbarButton, {
-        editor: editor,
-        item: item,
-        children: /*#__PURE__*/ _jsxDEV(item.ChildComponent, {}, void 0, false, {
-            fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-            lineNumber: 44,
-            columnNumber: 7
-        }, this)
-    }, item.key, false, {
-        fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-        lineNumber: 43,
-        columnNumber: 5
-    }, this);
+    return <ToolbarButton editor={editor} item={item} key={item.key}>
+      <item.ChildComponent/>
+    </ToolbarButton>;
 }
 function ToolbarGroupComponent({ anchorElem, editor, editorConfig, group, index }) {
     const { i18n } = useTranslation();
@@ -95,64 +76,17 @@ function ToolbarGroupComponent({ anchorElem, editor, editorConfig, group, index
         featureClientSchemaMap,
         schemaPath
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: `fixed-toolbar__group fixed-toolbar__group-${group.key}`,
-        "data-toolbar-group-key": group.key,
-        children: [
-            group.type === 'dropdown' && group.items.length ? DropdownIcon ? /*#__PURE__*/ _jsxDEV(ToolbarDropdown, {
-                anchorElem: anchorElem,
-                editor: editor,
-                group: group,
-                Icon: DropdownIcon,
-                itemsContainerClassNames: [
-                    'fixed-toolbar__dropdown-items'
-                ],
-                label: dropdownLabel,
-                maxActiveItems: group.maxActiveItems ?? 1,
-                onActiveChange: onActiveChange
-            }, void 0, false, {
-                fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-                lineNumber: 128,
-                columnNumber: 11
-            }, this) : /*#__PURE__*/ _jsxDEV(ToolbarDropdown, {
-                anchorElem: anchorElem,
-                editor: editor,
-                group: group,
-                itemsContainerClassNames: [
-                    'fixed-toolbar__dropdown-items'
-                ],
-                label: dropdownLabel,
-                maxActiveItems: group.maxActiveItems ?? 1,
-                onActiveChange: onActiveChange
-            }, void 0, false, {
-                fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-                lineNumber: 139,
-                columnNumber: 11
-            }, this) : null,
-            group.type === 'buttons' && group.items.length ? group.items.map((item)=>{
-                return /*#__PURE__*/ _jsxDEV(ButtonGroupItem, {
-                    anchorElem: anchorElem,
-                    editor: editor,
-                    item: item
-                }, item.key, false, {
-                    fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-                    lineNumber: 153,
-                    columnNumber: 15
-                }, this);
-            }) : null,
-            index < editorConfig.features.toolbarFixed?.groups.length - 1 && /*#__PURE__*/ _jsxDEV("div", {
-                className: "divider"
-            }, void 0, false, {
-                fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-                lineNumber: 157,
-                columnNumber: 73
-            }, this)
-        ]
-    }, group.key, true, {
-        fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-        lineNumber: 121,
-        columnNumber: 5
-    }, this);
+    return <div className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`} data-toolbar-group-key={group.key} key={group.key}>
+      {group.type === 'dropdown' && group.items.length ? DropdownIcon ? <ToolbarDropdown anchorElem={anchorElem} editor={editor} group={group} Icon={DropdownIcon} itemsContainerClassNames={[
+        'fixed-toolbar__dropdown-items'
+    ]} label={dropdownLabel} maxActiveItems={group.maxActiveItems ?? 1} onActiveChange={onActiveChange}/> : <ToolbarDropdown anchorElem={anchorElem} editor={editor} group={group} itemsContainerClassNames={[
+        'fixed-toolbar__dropdown-items'
+    ]} label={dropdownLabel} maxActiveItems={group.maxActiveItems ?? 1} onActiveChange={onActiveChange}/> : null}
+      {group.type === 'buttons' && group.items.length ? group.items.map((item)=>{
+        return <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key}/>;
+    }) : null}
+      {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className="divider"/>}
+    </div>;
 }
 function FixedToolbar({ anchorElem, clientProps, editor, editorConfig, parentWithFixedToolbar }) {
     const currentToolbarRef = React.useRef(null);
@@ -208,38 +142,17 @@ function FixedToolbar({ anchorElem, clientProps, editor, editorConfig, parentWit
         parentToolbarElem,
         y
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: "fixed-toolbar",
-        onFocus: (event)=>{
-            // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,
-            // the parent editor will be focused, and the child editor will lose focus.
-            event.stopPropagation();
-        },
-        ref: currentToolbarRef,
-        children: isEditable && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-            children: editorConfig?.features && editorConfig.features?.toolbarFixed?.groups.map((group, i)=>{
-                return /*#__PURE__*/ _jsxDEV(ToolbarGroupComponent, {
-                    anchorElem: anchorElem,
-                    editor: editor,
-                    editorConfig: editorConfig,
-                    group: group,
-                    index: i
-                }, group.key, false, {
-                    fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-                    lineNumber: 250,
-                    columnNumber: 17
-                }, this);
-            })
-        }, void 0, false, {
-            fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-            lineNumber: 246,
-            columnNumber: 9
-        }, this)
-    }, void 0, false, {
-        fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-        lineNumber: 236,
-        columnNumber: 5
-    }, this);
+    return <div className="fixed-toolbar" onFocus={(event)=>{
+        // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,
+        // the parent editor will be focused, and the child editor will lose focus.
+        event.stopPropagation();
+    }} ref={currentToolbarRef}>
+      {isEditable && <React.Fragment>
+          {editorConfig?.features && editorConfig.features?.toolbarFixed?.groups.map((group, i)=>{
+        return <ToolbarGroupComponent anchorElem={anchorElem} editor={editor} editorConfig={editorConfig} group={group} index={i} key={group.key}/>;
+    })}
+        </React.Fragment>}
+    </div>;
 }
 const getParentEditorWithFixedToolbar = (editorConfigContext)=>{
     if (editorConfigContext.parentEditor?.editorConfig) {
@@ -272,16 +185,7 @@ export const FixedToolbarPlugin = ({ clientProps })=>{
     if (!editorConfig?.features?.toolbarFixed?.groups?.length) {
         return null;
     }
-    return /*#__PURE__*/ _jsxDEV(FixedToolbar, {
-        anchorElem: document.body,
-        editor: editor,
-        editorConfig: editorConfig,
-        parentWithFixedToolbar: parentWithFixedToolbar
-    }, void 0, false, {
-        fileName: "src/features/toolbars/fixed/client/Toolbar/index.tsx",
-        lineNumber: 312,
-        columnNumber: 5
-    }, this);
+    return <FixedToolbar anchorElem={document.body} editor={editor} editorConfig={editorConfig} parentWithFixedToolbar={parentWithFixedToolbar}/>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nimport type { EditorConfigContextType } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport type { SanitizedClientEditorConfig } from '../../../../../lexical/config/types.js'\nimport type { PluginComponent } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\nimport type { FixedToolbarFeatureProps } from '../../server/index.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport './index.scss'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  editorConfig,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const [dropdownLabel, setDropdownLabel] = React.useState<string | undefined>(undefined)\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>(undefined)\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent!)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = React.useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n          setDropdownLabel(undefined)\n        } else {\n          setDropdownIcon(undefined)\n          setDropdownLabel(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]!\n\n      let label = item.key\n      if (item.label) {\n        label =\n          typeof item.label === 'function'\n            ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n            : item.label\n      }\n      // Crop title to max. 25 characters\n      if (label.length > 25) {\n        label = label.substring(0, 25) + '...'\n      }\n      if (activeItems.length === 1) {\n        setDropdownLabel(label)\n        setDropdownIcon(() => item.ChildComponent)\n      } else {\n        setDropdownLabel(\n          i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length }),\n        )\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n        } else {\n          setDropdownIcon(undefined)\n        }\n      }\n    },\n    [group, i18n, featureClientSchemaMap, schemaPath],\n  )\n\n  return (\n    <div\n      className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`}\n      data-toolbar-group-key={group.key}\n      key={group.key}\n    >\n      {group.type === 'dropdown' && group.items.length ? (\n        DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        )\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            return (\n              <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n            )\n          })\n        : null}\n      {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className=\"divider\" />}\n    </div>\n  )\n}\n\nfunction FixedToolbar({\n  anchorElem,\n  clientProps,\n  editor,\n  editorConfig,\n  parentWithFixedToolbar,\n}: {\n  anchorElem: HTMLElement\n  clientProps?: FixedToolbarFeatureProps\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  parentWithFixedToolbar: EditorConfigContextType | false\n}): React.ReactNode {\n  const currentToolbarRef = React.useRef<HTMLDivElement>(null)\n  const isEditable = useLexicalEditable()\n\n  const { y } = useScrollInfo()\n\n  // Memoize the parent toolbar element\n  const parentToolbarElem = useMemo(() => {\n    if (!parentWithFixedToolbar || clientProps?.disableIfParentHasFixedToolbar) {\n      return null\n    }\n\n    const parentEditorElem = parentWithFixedToolbar.editorContainerRef.current\n    let sibling = parentEditorElem.previousElementSibling\n    while (sibling) {\n      if (sibling.classList.contains('fixed-toolbar')) {\n        return sibling\n      }\n      sibling = sibling.previousElementSibling\n    }\n    return null\n  }, [clientProps?.disableIfParentHasFixedToolbar, parentWithFixedToolbar])\n\n  useThrottledEffect(\n    () => {\n      if (!parentToolbarElem) {\n        // this also checks for clientProps?.disableIfParentHasFixedToolbar indirectly, see the parentToolbarElem useMemo\n        return\n      }\n      const currentToolbarElem = currentToolbarRef.current\n      if (!currentToolbarElem) {\n        return\n      }\n\n      const currentRect = currentToolbarElem.getBoundingClientRect()\n      const parentRect = parentToolbarElem.getBoundingClientRect()\n\n      // we only need to check for vertical overlap\n      const overlapping = !(\n        currentRect.bottom < parentRect.top || currentRect.top > parentRect.bottom\n      )\n\n      if (overlapping) {\n        currentToolbarElem.classList.remove('fixed-toolbar')\n        currentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--overlapping')\n        parentToolbarElem.classList.remove('fixed-toolbar')\n        parentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--hide')\n      } else {\n        if (!currentToolbarElem.classList.contains('fixed-toolbar--overlapping')) {\n          return\n        }\n        currentToolbarElem.classList.remove('fixed-toolbar--overlapping')\n        currentToolbarElem.classList.add('fixed-toolbar')\n        parentToolbarElem.classList.remove('fixed-toolbar--hide')\n        parentToolbarElem.classList.add('fixed-toolbar')\n      }\n    },\n    50,\n    [currentToolbarRef, parentToolbarElem, y],\n  )\n\n  return (\n    <div\n      className=\"fixed-toolbar\"\n      onFocus={(event) => {\n        // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,\n        // the parent editor will be focused, and the child editor will lose focus.\n        event.stopPropagation()\n      }}\n      ref={currentToolbarRef}\n    >\n      {isEditable && (\n        <React.Fragment>\n          {editorConfig?.features &&\n            editorConfig.features?.toolbarFixed?.groups.map((group, i) => {\n              return (\n                <ToolbarGroupComponent\n                  anchorElem={anchorElem}\n                  editor={editor}\n                  editorConfig={editorConfig}\n                  group={group}\n                  index={i}\n                  key={group.key}\n                />\n              )\n            })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nconst getParentEditorWithFixedToolbar = (\n  editorConfigContext: EditorConfigContextType,\n): EditorConfigContextType | false => {\n  if (editorConfigContext.parentEditor?.editorConfig) {\n    if (editorConfigContext.parentEditor?.editorConfig.resolvedFeatureMap.has('toolbarFixed')) {\n      return editorConfigContext.parentEditor\n    } else {\n      if (editorConfigContext.parentEditor) {\n        return getParentEditorWithFixedToolbar(editorConfigContext.parentEditor)\n      }\n    }\n  }\n  return false\n}\n\nexport const FixedToolbarPlugin: PluginComponent<FixedToolbarFeatureProps> = ({ clientProps }) => {\n  const [currentEditor] = useLexicalComposerContext()\n  const editorConfigContext = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  if (!isEditable) {\n    return null\n  }\n\n  const { editorConfig: currentEditorConfig } = editorConfigContext\n\n  const editor = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editor || currentEditor\n    : currentEditor\n\n  const editorConfig = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editorConfig || currentEditorConfig\n    : currentEditorConfig\n\n  const parentWithFixedToolbar = getParentEditorWithFixedToolbar(editorConfigContext)\n\n  if (clientProps?.disableIfParentHasFixedToolbar) {\n    if (parentWithFixedToolbar) {\n      return null\n    }\n  }\n\n  if (!editorConfig?.features?.toolbarFixed?.groups?.length) {\n    return null\n  }\n\n  return (\n    <FixedToolbar\n      anchorElem={document.body}\n      editor={editor}\n      editorConfig={editorConfig}\n      parentWithFixedToolbar={parentWithFixedToolbar}\n    />\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","useScrollInfo","useThrottledEffect","useTranslation","React","useMemo","useEditorConfigContext","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","editorConfig","group","index","i18n","fieldProps","featureClientSchemaMap","schemaPath","dropdownLabel","setDropdownLabel","useState","undefined","DropdownIcon","setDropdownIcon","useEffect","type","items","length","onActiveChange","useCallback","activeItems","label","substring","t","count","div","className","data-toolbar-group-key","Icon","itemsContainerClassNames","maxActiveItems","map","features","toolbarFixed","groups","FixedToolbar","clientProps","parentWithFixedToolbar","currentToolbarRef","useRef","isEditable","y","parentToolbarElem","disableIfParentHasFixedToolbar","parentEditorElem","editorContainerRef","current","sibling","previousElementSibling","classList","contains","currentToolbarElem","currentRect","getBoundingClientRect","parentRect","overlapping","bottom","top","remove","add","onFocus","event","stopPropagation","ref","Fragment","i","getParentEditorWithFixedToolbar","editorConfigContext","parentEditor","resolvedFeatureMap","has","FixedToolbarPlugin","currentEditor","currentEditorConfig","applyToFocusedEditor","focusedEditor","document","body"],"mappings":"AAAA;;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,kBAAkB,QAAQ,oCAAmC;AACtE,SAASC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,QAAQ,iBAAgB;AAClF,YAAYC,WAAW,QAAO;AAC9B,SAASC,OAAO,QAAQ,QAAO;AAQ/B,SAASC,sBAAsB,QAAQ,+DAA8D;AACrG,SAASC,aAAa,QAAQ,yCAAwC;AACtE,OAAO,eAAc;AACrB,SAASC,eAAe,QAAQ,2CAA0C;AAE1E,SAASC,gBAAgB,EACvBC,UAAU,EACVC,MAAM,EACNC,IAAI,EAKL;IACC,IAAIA,KAAKC,SAAS,EAAE;QAClB,OACED,MAAMC,2BACJ,QAACD,KAAKC,SAAS;YAACH,YAAYA;YAAYC,QAAQA;YAAQC,MAAMA;WAAWA,KAAKE,GAAG;;;;;IAGvF;IAEA,IAAI,CAACF,KAAKG,cAAc,EAAE;QACxB,OAAO;IACT;IAEA,qBACE,QAACR;QAAcI,QAAQA;QAAQC,MAAMA;kBACnC,cAAA,QAACA,KAAKG,cAAc;;;;;OAD0BH,KAAKE,GAAG;;;;;AAI5D;AAEA,SAASE,sBAAsB,EAC7BN,UAAU,EACVC,MAAM,EACNM,YAAY,EACZC,KAAK,EACLC,KAAK,EAON;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGjB;IACjB,MAAM,EACJkB,YAAY,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,EACnD,GAAGjB;IAEJ,MAAM,CAACkB,eAAeC,iBAAiB,GAAGrB,MAAMsB,QAAQ,CAAqBC;IAC7E,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,MAAMsB,QAAQ,CAAuBC;IAE7EvB,MAAM0B,SAAS,CAAC;QACd,IAAIZ,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;YAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;QAC5C,OAAO;YACLc,gBAAgBF;QAClB;IACF,GAAG;QAACT;KAAM;IAEV,MAAMgB,iBAAiB9B,MAAM+B,WAAW,CACtC,CAAC,EAAEC,WAAW,EAAuC;QACnD,IAAI,CAACA,YAAYH,MAAM,EAAE;YACvB,IAAIf,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;gBAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;gBAC1CU,iBAAiBE;YACnB,OAAO;gBACLE,gBAAgBF;gBAChBF,iBAAiBE;YACnB;YACA;QACF;QACA,MAAMf,OAAOwB,WAAW,CAAC,EAAE;QAE3B,IAAIC,QAAQzB,KAAKE,GAAG;QACpB,IAAIF,KAAKyB,KAAK,EAAE;YACdA,QACE,OAAOzB,KAAKyB,KAAK,KAAK,aAClBzB,KAAKyB,KAAK,CAAC;gBAAEf;gBAAwBF;gBAAMG;YAAW,KACtDX,KAAKyB,KAAK;QAClB;QACA,mCAAmC;QACnC,IAAIA,MAAMJ,MAAM,GAAG,IAAI;YACrBI,QAAQA,MAAMC,SAAS,CAAC,GAAG,MAAM;QACnC;QACA,IAAIF,YAAYH,MAAM,KAAK,GAAG;YAC5BR,iBAAiBY;YACjBR,gBAAgB,IAAMjB,KAAKG,cAAc;QAC3C,OAAO;YACLU,iBACEL,KAAKmB,CAAC,CAAC,sCAAsC;gBAAEC,OAAOJ,YAAYH,MAAM;YAAC;YAE3E,IAAIf,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;gBAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;YAC5C,OAAO;gBACLc,gBAAgBF;YAClB;QACF;IACF,GACA;QAACT;QAAOE;QAAME;QAAwBC;KAAW;IAGnD,qBACE,QAACkB;QACCC,WAAW,CAAC,0CAA0C,EAAExB,MAAMJ,GAAG,EAAE;QACnE6B,0BAAwBzB,MAAMJ,GAAG;;YAGhCI,MAAMa,IAAI,KAAK,cAAcb,MAAMc,KAAK,CAACC,MAAM,GAC9CL,6BACE,QAACpB;gBACCE,YAAYA;gBACZC,QAAQA;gBACRO,OAAOA;gBACP0B,MAAMhB;gBACNiB,0BAA0B;oBAAC;iBAAgC;gBAC3DR,OAAOb;gBACPsB,gBAAgB5B,MAAM4B,cAAc,IAAI;gBACxCZ,gBAAgBA;;;;;qCAGlB,QAAC1B;gBACCE,YAAYA;gBACZC,QAAQA;gBACRO,OAAOA;gBACP2B,0BAA0B;oBAAC;iBAAgC;gBAC3DR,OAAOb;gBACPsB,gBAAgB5B,MAAM4B,cAAc,IAAI;gBACxCZ,gBAAgBA;;;;;uBAGlB;YACHhB,MAAMa,IAAI,KAAK,aAAab,MAAMc,KAAK,CAACC,MAAM,GAC3Cf,MAAMc,KAAK,CAACe,GAAG,CAAC,CAACnC;gBACf,qBACE,QAACH;oBAAgBC,YAAYA;oBAAYC,QAAQA;oBAAQC,MAAMA;mBAAWA,KAAKE,GAAG;;;;;YAEtF,KACA;YACHK,QAAQF,aAAa+B,QAAQ,CAACC,YAAY,EAAEC,OAAOjB,SAAS,mBAAK,QAACQ;gBAAIC,WAAU;;;;;;;OAjC5ExB,MAAMJ,GAAG;;;;;AAoCpB;AAEA,SAASqC,aAAa,EACpBzC,UAAU,EACV0C,WAAW,EACXzC,MAAM,EACNM,YAAY,EACZoC,sBAAsB,EAOvB;IACC,MAAMC,oBAAoBlD,MAAMmD,MAAM,CAAiB;IACvD,MAAMC,aAAaxD;IAEnB,MAAM,EAAEyD,CAAC,EAAE,GAAGxD;IAEd,qCAAqC;IACrC,MAAMyD,oBAAoBrD,QAAQ;QAChC,IAAI,CAACgD,0BAA0BD,aAAaO,gCAAgC;YAC1E,OAAO;QACT;QAEA,MAAMC,mBAAmBP,uBAAuBQ,kBAAkB,CAACC,OAAO;QAC1E,IAAIC,UAAUH,iBAAiBI,sBAAsB;QACrD,MAAOD,QAAS;YACd,IAAIA,QAAQE,SAAS,CAACC,QAAQ,CAAC,kBAAkB;gBAC/C,OAAOH;YACT;YACAA,UAAUA,QAAQC,sBAAsB;QAC1C;QACA,OAAO;IACT,GAAG;QAACZ,aAAaO;QAAgCN;KAAuB;IAExEnD,mBACE;QACE,IAAI,CAACwD,mBAAmB;YACtB,iHAAiH;YACjH;QACF;QACA,MAAMS,qBAAqBb,kBAAkBQ,OAAO;QACpD,IAAI,CAACK,oBAAoB;YACvB;QACF;QAEA,MAAMC,cAAcD,mBAAmBE,qBAAqB;QAC5D,MAAMC,aAAaZ,kBAAkBW,qBAAqB;QAE1D,6CAA6C;QAC7C,MAAME,cAAc,CAClBH,CAAAA,YAAYI,MAAM,GAAGF,WAAWG,GAAG,IAAIL,YAAYK,GAAG,GAAGH,WAAWE,MAAM,AAAD;QAG3E,IAAID,aAAa;YACfJ,mBAAmBF,SAAS,CAACS,MAAM,CAAC;YACpCP,mBAAmBF,SAAS,CAACU,GAAG,CAAC,iBAAiB;YAClDjB,kBAAkBO,SAAS,CAACS,MAAM,CAAC;YACnChB,kBAAkBO,SAAS,CAACU,GAAG,CAAC,iBAAiB;QACnD,OAAO;YACL,IAAI,CAACR,mBAAmBF,SAAS,CAACC,QAAQ,CAAC,+BAA+B;gBACxE;YACF;YACAC,mBAAmBF,SAAS,CAACS,MAAM,CAAC;YACpCP,mBAAmBF,SAAS,CAACU,GAAG,CAAC;YACjCjB,kBAAkBO,SAAS,CAACS,MAAM,CAAC;YACnChB,kBAAkBO,SAAS,CAACU,GAAG,CAAC;QAClC;IACF,GACA,IACA;QAACrB;QAAmBI;QAAmBD;KAAE;IAG3C,qBACE,QAAChB;QACCC,WAAU;QACVkC,SAAS,CAACC;YACR,4GAA4G;YAC5G,2EAA2E;YAC3EA,MAAMC,eAAe;QACvB;QACAC,KAAKzB;kBAEJE,4BACC,QAACpD,MAAM4E,QAAQ;sBACZ/D,cAAc+B,YACb/B,aAAa+B,QAAQ,EAAEC,cAAcC,OAAOH,IAAI,CAAC7B,OAAO+D;gBACtD,qBACE,QAACjE;oBACCN,YAAYA;oBACZC,QAAQA;oBACRM,cAAcA;oBACdC,OAAOA;oBACPC,OAAO8D;mBACF/D,MAAMJ,GAAG;;;;;YAGpB;;;;;;;;;;;AAKZ;AAEA,MAAMoE,kCAAkC,CACtCC;IAEA,IAAIA,oBAAoBC,YAAY,EAAEnE,cAAc;QAClD,IAAIkE,oBAAoBC,YAAY,EAAEnE,aAAaoE,mBAAmBC,IAAI,iBAAiB;YACzF,OAAOH,oBAAoBC,YAAY;QACzC,OAAO;YACL,IAAID,oBAAoBC,YAAY,EAAE;gBACpC,OAAOF,gCAAgCC,oBAAoBC,YAAY;YACzE;QACF;IACF;IACA,OAAO;AACT;AAEA,OAAO,MAAMG,qBAAgE,CAAC,EAAEnC,WAAW,EAAE;IAC3F,MAAM,CAACoC,cAAc,GAAGzF;IACxB,MAAMoF,sBAAsB7E;IAC5B,MAAMkD,aAAaxD;IACnB,IAAI,CAACwD,YAAY;QACf,OAAO;IACT;IAEA,MAAM,EAAEvC,cAAcwE,mBAAmB,EAAE,GAAGN;IAE9C,MAAMxE,SAASyC,YAAYsC,oBAAoB,GAC3CP,oBAAoBQ,aAAa,EAAEhF,UAAU6E,gBAC7CA;IAEJ,MAAMvE,eAAemC,YAAYsC,oBAAoB,GACjDP,oBAAoBQ,aAAa,EAAE1E,gBAAgBwE,sBACnDA;IAEJ,MAAMpC,yBAAyB6B,gCAAgCC;IAE/D,IAAI/B,aAAaO,gCAAgC;QAC/C,IAAIN,wBAAwB;YAC1B,OAAO;QACT;IACF;IAEA,IAAI,CAACpC,cAAc+B,UAAUC,cAAcC,QAAQjB,QAAQ;QACzD,OAAO;IACT;IAEA,qBACE,QAACkB;QACCzC,YAAYkF,SAASC,IAAI;QACzBlF,QAAQA;QACRM,cAAcA;QACdoC,wBAAwBA;;;;;;AAG9B,EAAC"}
+{"version":3,"sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nimport type { EditorConfigContextType } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport type { SanitizedClientEditorConfig } from '../../../../../lexical/config/types.js'\nimport type { PluginComponent } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\nimport type { FixedToolbarFeatureProps } from '../../server/index.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport './index.scss'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  editorConfig,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const [dropdownLabel, setDropdownLabel] = React.useState<string | undefined>(undefined)\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>(undefined)\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent!)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = React.useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n          setDropdownLabel(undefined)\n        } else {\n          setDropdownIcon(undefined)\n          setDropdownLabel(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]!\n\n      let label = item.key\n      if (item.label) {\n        label =\n          typeof item.label === 'function'\n            ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n            : item.label\n      }\n      // Crop title to max. 25 characters\n      if (label.length > 25) {\n        label = label.substring(0, 25) + '...'\n      }\n      if (activeItems.length === 1) {\n        setDropdownLabel(label)\n        setDropdownIcon(() => item.ChildComponent)\n      } else {\n        setDropdownLabel(\n          i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length }),\n        )\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n        } else {\n          setDropdownIcon(undefined)\n        }\n      }\n    },\n    [group, i18n, featureClientSchemaMap, schemaPath],\n  )\n\n  return (\n    <div\n      className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`}\n      data-toolbar-group-key={group.key}\n      key={group.key}\n    >\n      {group.type === 'dropdown' && group.items.length ? (\n        DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        )\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            return (\n              <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n            )\n          })\n        : null}\n      {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className=\"divider\" />}\n    </div>\n  )\n}\n\nfunction FixedToolbar({\n  anchorElem,\n  clientProps,\n  editor,\n  editorConfig,\n  parentWithFixedToolbar,\n}: {\n  anchorElem: HTMLElement\n  clientProps?: FixedToolbarFeatureProps\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  parentWithFixedToolbar: EditorConfigContextType | false\n}): React.ReactNode {\n  const currentToolbarRef = React.useRef<HTMLDivElement>(null)\n  const isEditable = useLexicalEditable()\n\n  const { y } = useScrollInfo()\n\n  // Memoize the parent toolbar element\n  const parentToolbarElem = useMemo(() => {\n    if (!parentWithFixedToolbar || clientProps?.disableIfParentHasFixedToolbar) {\n      return null\n    }\n\n    const parentEditorElem = parentWithFixedToolbar.editorContainerRef.current\n    let sibling = parentEditorElem.previousElementSibling\n    while (sibling) {\n      if (sibling.classList.contains('fixed-toolbar')) {\n        return sibling\n      }\n      sibling = sibling.previousElementSibling\n    }\n    return null\n  }, [clientProps?.disableIfParentHasFixedToolbar, parentWithFixedToolbar])\n\n  useThrottledEffect(\n    () => {\n      if (!parentToolbarElem) {\n        // this also checks for clientProps?.disableIfParentHasFixedToolbar indirectly, see the parentToolbarElem useMemo\n        return\n      }\n      const currentToolbarElem = currentToolbarRef.current\n      if (!currentToolbarElem) {\n        return\n      }\n\n      const currentRect = currentToolbarElem.getBoundingClientRect()\n      const parentRect = parentToolbarElem.getBoundingClientRect()\n\n      // we only need to check for vertical overlap\n      const overlapping = !(\n        currentRect.bottom < parentRect.top || currentRect.top > parentRect.bottom\n      )\n\n      if (overlapping) {\n        currentToolbarElem.classList.remove('fixed-toolbar')\n        currentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--overlapping')\n        parentToolbarElem.classList.remove('fixed-toolbar')\n        parentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--hide')\n      } else {\n        if (!currentToolbarElem.classList.contains('fixed-toolbar--overlapping')) {\n          return\n        }\n        currentToolbarElem.classList.remove('fixed-toolbar--overlapping')\n        currentToolbarElem.classList.add('fixed-toolbar')\n        parentToolbarElem.classList.remove('fixed-toolbar--hide')\n        parentToolbarElem.classList.add('fixed-toolbar')\n      }\n    },\n    50,\n    [currentToolbarRef, parentToolbarElem, y],\n  )\n\n  return (\n    <div\n      className=\"fixed-toolbar\"\n      onFocus={(event) => {\n        // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,\n        // the parent editor will be focused, and the child editor will lose focus.\n        event.stopPropagation()\n      }}\n      ref={currentToolbarRef}\n    >\n      {isEditable && (\n        <React.Fragment>\n          {editorConfig?.features &&\n            editorConfig.features?.toolbarFixed?.groups.map((group, i) => {\n              return (\n                <ToolbarGroupComponent\n                  anchorElem={anchorElem}\n                  editor={editor}\n                  editorConfig={editorConfig}\n                  group={group}\n                  index={i}\n                  key={group.key}\n                />\n              )\n            })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nconst getParentEditorWithFixedToolbar = (\n  editorConfigContext: EditorConfigContextType,\n): EditorConfigContextType | false => {\n  if (editorConfigContext.parentEditor?.editorConfig) {\n    if (editorConfigContext.parentEditor?.editorConfig.resolvedFeatureMap.has('toolbarFixed')) {\n      return editorConfigContext.parentEditor\n    } else {\n      if (editorConfigContext.parentEditor) {\n        return getParentEditorWithFixedToolbar(editorConfigContext.parentEditor)\n      }\n    }\n  }\n  return false\n}\n\nexport const FixedToolbarPlugin: PluginComponent<FixedToolbarFeatureProps> = ({ clientProps }) => {\n  const [currentEditor] = useLexicalComposerContext()\n  const editorConfigContext = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  if (!isEditable) {\n    return null\n  }\n\n  const { editorConfig: currentEditorConfig } = editorConfigContext\n\n  const editor = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editor || currentEditor\n    : currentEditor\n\n  const editorConfig = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editorConfig || currentEditorConfig\n    : currentEditorConfig\n\n  const parentWithFixedToolbar = getParentEditorWithFixedToolbar(editorConfigContext)\n\n  if (clientProps?.disableIfParentHasFixedToolbar) {\n    if (parentWithFixedToolbar) {\n      return null\n    }\n  }\n\n  if (!editorConfig?.features?.toolbarFixed?.groups?.length) {\n    return null\n  }\n\n  return (\n    <FixedToolbar\n      anchorElem={document.body}\n      editor={editor}\n      editorConfig={editorConfig}\n      parentWithFixedToolbar={parentWithFixedToolbar}\n    />\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","useScrollInfo","useThrottledEffect","useTranslation","React","useMemo","useEditorConfigContext","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","editorConfig","group","index","i18n","fieldProps","featureClientSchemaMap","schemaPath","dropdownLabel","setDropdownLabel","useState","undefined","DropdownIcon","setDropdownIcon","useEffect","type","items","length","onActiveChange","useCallback","activeItems","label","substring","t","count","div","className","data-toolbar-group-key","Icon","itemsContainerClassNames","maxActiveItems","map","features","toolbarFixed","groups","FixedToolbar","clientProps","parentWithFixedToolbar","currentToolbarRef","useRef","isEditable","y","parentToolbarElem","disableIfParentHasFixedToolbar","parentEditorElem","editorContainerRef","current","sibling","previousElementSibling","classList","contains","currentToolbarElem","currentRect","getBoundingClientRect","parentRect","overlapping","bottom","top","remove","add","onFocus","event","stopPropagation","ref","Fragment","i","getParentEditorWithFixedToolbar","editorConfigContext","parentEditor","resolvedFeatureMap","has","FixedToolbarPlugin","currentEditor","currentEditorConfig","applyToFocusedEditor","focusedEditor","document","body"],"mappings":"AAAA;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,kBAAkB,QAAQ,oCAAmC;AACtE,SAASC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,QAAQ,iBAAgB;AAClF,YAAYC,WAAW,QAAO;AAC9B,SAASC,OAAO,QAAQ,QAAO;AAQ/B,SAASC,sBAAsB,QAAQ,+DAA8D;AACrG,SAASC,aAAa,QAAQ,yCAAwC;AACtE,OAAO,eAAc;AACrB,SAASC,eAAe,QAAQ,2CAA0C;AAE1E,SAASC,gBAAgB,EACvBC,UAAU,EACVC,MAAM,EACNC,IAAI,EAKL;IACC,IAAIA,KAAKC,SAAS,EAAE;QAClB,OACED,MAAMC,cACHD,KAAKC,UAAUH,YAAYA,YAAYC,QAAQA,QAAQC,MAAMA,MAAME,KAAKF,KAAKE,GAAG;IAGvF;IAEA,IAAI,CAACF,KAAKG,cAAc,EAAE;QACxB,OAAO;IACT;IAEA,QACGR,cAAcI,QAAQA,QAAQC,MAAMA,MAAME,KAAKF,KAAKE,GAAG,EAAE;MACxD,CAACF,KAAKG,gBAAiB;IACzB,EAAER;AAEN;AAEA,SAASS,sBAAsB,EAC7BN,UAAU,EACVC,MAAM,EACNM,YAAY,EACZC,KAAK,EACLC,KAAK,EAON;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGjB;IACjB,MAAM,EACJkB,YAAY,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,EACnD,GAAGjB;IAEJ,MAAM,CAACkB,eAAeC,iBAAiB,GAAGrB,MAAMsB,QAAQ,CAAqBC;IAC7E,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,MAAMsB,QAAQ,CAAuBC;IAE7EvB,MAAM0B,SAAS,CAAC;QACd,IAAIZ,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;YAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;QAC5C,OAAO;YACLc,gBAAgBF;QAClB;IACF,GAAG;QAACT;KAAM;IAEV,MAAMgB,iBAAiB9B,MAAM+B,WAAW,CACtC,CAAC,EAAEC,WAAW,EAAuC;QACnD,IAAI,CAACA,YAAYH,MAAM,EAAE;YACvB,IAAIf,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;gBAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;gBAC1CU,iBAAiBE;YACnB,OAAO;gBACLE,gBAAgBF;gBAChBF,iBAAiBE;YACnB;YACA;QACF;QACA,MAAMf,OAAOwB,WAAW,CAAC,EAAE;QAE3B,IAAIC,QAAQzB,KAAKE,GAAG;QACpB,IAAIF,KAAKyB,KAAK,EAAE;YACdA,QACE,OAAOzB,KAAKyB,KAAK,KAAK,aAClBzB,KAAKyB,KAAK,CAAC;gBAAEf;gBAAwBF;gBAAMG;YAAW,KACtDX,KAAKyB,KAAK;QAClB;QACA,mCAAmC;QACnC,IAAIA,MAAMJ,MAAM,GAAG,IAAI;YACrBI,QAAQA,MAAMC,SAAS,CAAC,GAAG,MAAM;QACnC;QACA,IAAIF,YAAYH,MAAM,KAAK,GAAG;YAC5BR,iBAAiBY;YACjBR,gBAAgB,IAAMjB,KAAKG,cAAc;QAC3C,OAAO;YACLU,iBACEL,KAAKmB,CAAC,CAAC,sCAAsC;gBAAEC,OAAOJ,YAAYH,MAAM;YAAC;YAE3E,IAAIf,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;gBAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;YAC5C,OAAO;gBACLc,gBAAgBF;YAClB;QACF;IACF,GACA;QAACT;QAAOE;QAAME;QAAwBC;KAAW;IAGnD,QACGkB,IACCC,WAAW,CAAC,0CAA0C,EAAExB,MAAMJ,GAAG,EAAE,EACnE6B,wBAAwBzB,MAAMJ,GAAG,EACjCA,KAAKI,MAAMJ,GAAG,EACf;MACC,CAACI,MAAMa,IAAI,KAAK,cAAcb,MAAMc,KAAK,CAACC,MAAM,GAC9CL,gBACGpB,gBACCE,YAAYA,YACZC,QAAQA,QACRO,OAAOA,OACP0B,MAAMhB,cACNiB,0BAA0B;QAAC;KAAgC,EAC3DR,OAAOb,eACPsB,gBAAgB5B,MAAM4B,cAAc,IAAI,GACxCZ,gBAAgBA,qBAGjB1B,gBACCE,YAAYA,YACZC,QAAQA,QACRO,OAAOA,OACP2B,0BAA0B;QAAC;KAAgC,EAC3DR,OAAOb,eACPsB,gBAAgB5B,MAAM4B,cAAc,IAAI,GACxCZ,gBAAgBA,oBAGlB,KAAK;MACT,CAAChB,MAAMa,IAAI,KAAK,aAAab,MAAMc,KAAK,CAACC,MAAM,GAC3Cf,MAAMc,KAAK,CAACe,GAAG,CAAC,CAACnC;QACf,QACGH,gBAAgBC,YAAYA,YAAYC,QAAQA,QAAQC,MAAMA,MAAME,KAAKF,KAAKE,GAAG;IAEtF,KACA,KAAK;MACT,CAACK,QAAQF,aAAa+B,QAAQ,CAACC,YAAY,EAAEC,OAAOjB,SAAS,MAAMQ,IAAIC,UAAU,YAAa;IAChG,EAAED;AAEN;AAEA,SAASU,aAAa,EACpBzC,UAAU,EACV0C,WAAW,EACXzC,MAAM,EACNM,YAAY,EACZoC,sBAAsB,EAOvB;IACC,MAAMC,oBAAoBlD,MAAMmD,MAAM,CAAiB;IACvD,MAAMC,aAAaxD;IAEnB,MAAM,EAAEyD,CAAC,EAAE,GAAGxD;IAEd,qCAAqC;IACrC,MAAMyD,oBAAoBrD,QAAQ;QAChC,IAAI,CAACgD,0BAA0BD,aAAaO,gCAAgC;YAC1E,OAAO;QACT;QAEA,MAAMC,mBAAmBP,uBAAuBQ,kBAAkB,CAACC,OAAO;QAC1E,IAAIC,UAAUH,iBAAiBI,sBAAsB;QACrD,MAAOD,QAAS;YACd,IAAIA,QAAQE,SAAS,CAACC,QAAQ,CAAC,kBAAkB;gBAC/C,OAAOH;YACT;YACAA,UAAUA,QAAQC,sBAAsB;QAC1C;QACA,OAAO;IACT,GAAG;QAACZ,aAAaO;QAAgCN;KAAuB;IAExEnD,mBACE;QACE,IAAI,CAACwD,mBAAmB;YACtB,iHAAiH;YACjH;QACF;QACA,MAAMS,qBAAqBb,kBAAkBQ,OAAO;QACpD,IAAI,CAACK,oBAAoB;YACvB;QACF;QAEA,MAAMC,cAAcD,mBAAmBE,qBAAqB;QAC5D,MAAMC,aAAaZ,kBAAkBW,qBAAqB;QAE1D,6CAA6C;QAC7C,MAAME,cAAc,CAClBH,CAAAA,YAAYI,MAAM,GAAGF,WAAWG,GAAG,IAAIL,YAAYK,GAAG,GAAGH,WAAWE,MAAM,AAAD;QAG3E,IAAID,aAAa;YACfJ,mBAAmBF,SAAS,CAACS,MAAM,CAAC;YACpCP,mBAAmBF,SAAS,CAACU,GAAG,CAAC,iBAAiB;YAClDjB,kBAAkBO,SAAS,CAACS,MAAM,CAAC;YACnChB,kBAAkBO,SAAS,CAACU,GAAG,CAAC,iBAAiB;QACnD,OAAO;YACL,IAAI,CAACR,mBAAmBF,SAAS,CAACC,QAAQ,CAAC,+BAA+B;gBACxE;YACF;YACAC,mBAAmBF,SAAS,CAACS,MAAM,CAAC;YACpCP,mBAAmBF,SAAS,CAACU,GAAG,CAAC;YACjCjB,kBAAkBO,SAAS,CAACS,MAAM,CAAC;YACnChB,kBAAkBO,SAAS,CAACU,GAAG,CAAC;QAClC;IACF,GACA,IACA;QAACrB;QAAmBI;QAAmBD;KAAE;IAG3C,QACGhB,IACCC,UAAU,gBACVkC,SAAS,CAACC;QACR,4GAA4G;QAC5G,2EAA2E;QAC3EA,MAAMC,eAAe;IACvB,GACAC,KAAKzB,mBACN;MACC,CAACE,eACEpD,MAAM4E,SAAS;UACd,CAAC/D,cAAc+B,YACb/B,aAAa+B,QAAQ,EAAEC,cAAcC,OAAOH,IAAI,CAAC7B,OAAO+D;QACtD,QACGjE,sBACCN,YAAYA,YACZC,QAAQA,QACRM,cAAcA,cACdC,OAAOA,OACPC,OAAO8D,GACPnE,KAAKI,MAAMJ,GAAG;IAGpB,GAAG;QACP,EAAEV,MAAM4E,UACR;IACJ,EAAEvC;AAEN;AAEA,MAAMyC,kCAAkC,CACtCC;IAEA,IAAIA,oBAAoBC,YAAY,EAAEnE,cAAc;QAClD,IAAIkE,oBAAoBC,YAAY,EAAEnE,aAAaoE,mBAAmBC,IAAI,iBAAiB;YACzF,OAAOH,oBAAoBC,YAAY;QACzC,OAAO;YACL,IAAID,oBAAoBC,YAAY,EAAE;gBACpC,OAAOF,gCAAgCC,oBAAoBC,YAAY;YACzE;QACF;IACF;IACA,OAAO;AACT;AAEA,OAAO,MAAMG,qBAAgE,CAAC,EAAEnC,WAAW,EAAE;IAC3F,MAAM,CAACoC,cAAc,GAAGzF;IACxB,MAAMoF,sBAAsB7E;IAC5B,MAAMkD,aAAaxD;IACnB,IAAI,CAACwD,YAAY;QACf,OAAO;IACT;IAEA,MAAM,EAAEvC,cAAcwE,mBAAmB,EAAE,GAAGN;IAE9C,MAAMxE,SAASyC,YAAYsC,oBAAoB,GAC3CP,oBAAoBQ,aAAa,EAAEhF,UAAU6E,gBAC7CA;IAEJ,MAAMvE,eAAemC,YAAYsC,oBAAoB,GACjDP,oBAAoBQ,aAAa,EAAE1E,gBAAgBwE,sBACnDA;IAEJ,MAAMpC,yBAAyB6B,gCAAgCC;IAE/D,IAAI/B,aAAaO,gCAAgC;QAC/C,IAAIN,wBAAwB;YAC1B,OAAO;QACT;IACF;IAEA,IAAI,CAACpC,cAAc+B,UAAUC,cAAcC,QAAQjB,QAAQ;QACzD,OAAO;IACT;IAEA,QACGkB,aACCzC,YAAYkF,SAASC,IAAI,EACzBlF,QAAQA,QACRM,cAAcA,cACdoC,wBAAwBA;AAG9B,EAAC"}

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

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

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

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

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

@@ -1,8 +1,7 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { mergeRegister } from '@lexical/utils';
 import { $addUpdateTag, $getSelection } from 'lexical';
-import React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import './index.scss';
 import { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js';
@@ -97,18 +96,9 @@ export const ToolbarButton = ({ children, editor, item })=>{
         // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.
         e.preventDefault();
     }, []);
-    return /*#__PURE__*/ _jsxDEV("button", {
-        className: className,
-        "data-button-key": item.key,
-        onClick: handleClick,
-        onMouseDown: handleMouseDown,
-        type: "button",
-        children: children
-    }, void 0, false, {
-        fileName: "src/features/toolbars/shared/ToolbarButton/index.tsx",
-        lineNumber: 105,
-        columnNumber: 5
-    }, this);
+    return <button className={className} data-button-key={item.key} onClick={handleClick} onMouseDown={handleMouseDown} type="button">
+      {children}
+    </button>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\n      // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n      item.onSelect?.({\n        editor,\n        isActive: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n    // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n    // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n    e.preventDefault()\n  }, [])\n\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["mergeRegister","$addUpdateTag","$getSelection","React","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","children","editor","item","_state","setState","active","enabled","deferredState","editorConfigContext","className","key","filter","Boolean","join","updateStates","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","runDeprioritized","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","handleClick","focus","update","onSelect","handleMouseDown","e","preventDefault","button","data-button-key","onClick","onMouseDown","type"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,EAAEC,aAAa,QAAQ,UAAS;AACtD,OAAOC,SAASC,WAAW,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI1F,SAASC,sBAAsB,QAAQ,4DAA2D;AAClG,OAAO,eAAc;AACrB,SAASC,mBAAmB,QAAQ,+CAA8C;AAElF,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EAKL;IACC,MAAM,CAACC,QAAQC,SAAS,GAAGT,SAAS;QAAEU,QAAQ;QAAOC,SAAS;IAAK;IACnE,MAAMC,gBAAgBf,iBAAiBW;IAEvC,MAAMK,sBAAsBZ;IAE5B,MAAMa,YAAYf,QAAQ;QACxB,OAAO;YACLI;YACA,CAACS,cAAcD,OAAO,GAAG,aAAa;YACtCC,cAAcF,MAAM,GAAG,WAAW;YAClCH,KAAKQ,GAAG,GAAG,GAAGZ,UAAU,CAAC,EAAEI,KAAKQ,GAAG,EAAE,GAAG;SACzC,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV,GAAG;QAACN;QAAeL,KAAKQ,GAAG;KAAC;IAC5B,MAAMI,eAAevB,YAAY;QAC/BU,OAAOc,cAAc,GAAGC,IAAI,CAAC;YAC3B,MAAMC,YAAY5B;YAClB,IAAI,CAAC4B,WAAW;gBACd;YACF;YACA,MAAMC,YAAYhB,KAAKiB,QAAQ,GAC3BjB,KAAKiB,QAAQ,CAAC;gBAAElB;gBAAQO;gBAAqBS;YAAU,KACvD;YAEJ,MAAMG,aAAalB,KAAKmB,SAAS,GAC7BnB,KAAKmB,SAAS,CAAC;gBAAEpB;gBAAQO;gBAAqBS;YAAU,KACxD;YAEJb,SAAS,CAACkB;gBACR,IAAIA,KAAKjB,MAAM,KAAKa,aAAaI,KAAKhB,OAAO,KAAKc,YAAY;oBAC5D,OAAOE;gBACT;gBACA,OAAO;oBAAEjB,QAAQa;oBAAWZ,SAASc;gBAAW;YAClD;QACF;IACF,GAAG;QAACnB;QAAQO;QAAqBN;KAAK;IAEtC,MAAMqB,mBAAmB1B;IAEzBJ,UAAU;QACR,eAAe;QACf,KAAK8B,iBAAiBT;QAEtB,MAAMU,WAAW,IAAMD,iBAAiBT;QAExC,MAAMW,UAAUtC,cAAcc,OAAOyB,sBAAsB,CAACF;QAC5DG,SAASC,gBAAgB,CAAC,WAAWJ;QAErC,OAAO;YACLC;YACAE,SAASE,mBAAmB,CAAC,WAAWL;QAC1C;IACF,GAAG;QAACvB;QAAQsB;QAAkBT;KAAa;IAE3C,MAAMgB,cAAcvC,YAAY;QAC9B,IAAI,CAACY,OAAOG,OAAO,EAAE;YACnB;QACF;QAEAL,OAAO8B,KAAK,CAAC;YACX9B,OAAO+B,MAAM,CAAC;gBACZ5C,cAAc;YAChB;YACA,iHAAiH;YACjHc,KAAK+B,QAAQ,GAAG;gBACdhC;gBACAkB,UAAUhB,OAAOE,MAAM;YACzB;QACF;IACF,GAAG;QAACJ;QAAQC;QAAMC;KAAO;IAEzB,MAAM+B,kBAAkB3C,YAAY,CAAC4C;QACnC,8HAA8H;QAC9H,2JAA2J;QAC3J,sKAAsK;QACtKA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,QAACC;QACC5B,WAAWA;QACX6B,mBAAiBpC,KAAKQ,GAAG;QACzB6B,SAAST;QACTU,aAAaN;QACbO,MAAK;kBAEJzC;;;;;;AAGP,EAAC"}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\n      // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n      item.onSelect?.({\n        editor,\n        isActive: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n    // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n    // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n    e.preventDefault()\n  }, [])\n\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["mergeRegister","$addUpdateTag","$getSelection","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","children","editor","item","_state","setState","active","enabled","deferredState","editorConfigContext","className","key","filter","Boolean","join","updateStates","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","runDeprioritized","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","handleClick","focus","update","onSelect","handleMouseDown","e","preventDefault","button","data-button-key","onClick","onMouseDown","type"],"mappings":"AAAA;AAGA,SAASA,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,EAAEC,aAAa,QAAQ,UAAS;AACtD,SAAgBC,WAAW,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI1F,SAASC,sBAAsB,QAAQ,4DAA2D;AAClG,OAAO,eAAc;AACrB,SAASC,mBAAmB,QAAQ,+CAA8C;AAElF,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EAKL;IACC,MAAM,CAACC,QAAQC,SAAS,GAAGT,SAAS;QAAEU,QAAQ;QAAOC,SAAS;IAAK;IACnE,MAAMC,gBAAgBf,iBAAiBW;IAEvC,MAAMK,sBAAsBZ;IAE5B,MAAMa,YAAYf,QAAQ;QACxB,OAAO;YACLI;YACA,CAACS,cAAcD,OAAO,GAAG,aAAa;YACtCC,cAAcF,MAAM,GAAG,WAAW;YAClCH,KAAKQ,GAAG,GAAG,GAAGZ,UAAU,CAAC,EAAEI,KAAKQ,GAAG,EAAE,GAAG;SACzC,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV,GAAG;QAACN;QAAeL,KAAKQ,GAAG;KAAC;IAC5B,MAAMI,eAAevB,YAAY;QAC/BU,OAAOc,cAAc,GAAGC,IAAI,CAAC;YAC3B,MAAMC,YAAY3B;YAClB,IAAI,CAAC2B,WAAW;gBACd;YACF;YACA,MAAMC,YAAYhB,KAAKiB,QAAQ,GAC3BjB,KAAKiB,QAAQ,CAAC;gBAAElB;gBAAQO;gBAAqBS;YAAU,KACvD;YAEJ,MAAMG,aAAalB,KAAKmB,SAAS,GAC7BnB,KAAKmB,SAAS,CAAC;gBAAEpB;gBAAQO;gBAAqBS;YAAU,KACxD;YAEJb,SAAS,CAACkB;gBACR,IAAIA,KAAKjB,MAAM,KAAKa,aAAaI,KAAKhB,OAAO,KAAKc,YAAY;oBAC5D,OAAOE;gBACT;gBACA,OAAO;oBAAEjB,QAAQa;oBAAWZ,SAASc;gBAAW;YAClD;QACF;IACF,GAAG;QAACnB;QAAQO;QAAqBN;KAAK;IAEtC,MAAMqB,mBAAmB1B;IAEzBJ,UAAU;QACR,eAAe;QACf,KAAK8B,iBAAiBT;QAEtB,MAAMU,WAAW,IAAMD,iBAAiBT;QAExC,MAAMW,UAAUrC,cAAca,OAAOyB,sBAAsB,CAACF;QAC5DG,SAASC,gBAAgB,CAAC,WAAWJ;QAErC,OAAO;YACLC;YACAE,SAASE,mBAAmB,CAAC,WAAWL;QAC1C;IACF,GAAG;QAACvB;QAAQsB;QAAkBT;KAAa;IAE3C,MAAMgB,cAAcvC,YAAY;QAC9B,IAAI,CAACY,OAAOG,OAAO,EAAE;YACnB;QACF;QAEAL,OAAO8B,KAAK,CAAC;YACX9B,OAAO+B,MAAM,CAAC;gBACZ3C,cAAc;YAChB;YACA,iHAAiH;YACjHa,KAAK+B,QAAQ,GAAG;gBACdhC;gBACAkB,UAAUhB,OAAOE,MAAM;YACzB;QACF;IACF,GAAG;QAACJ;QAAQC;QAAMC;KAAO;IAEzB,MAAM+B,kBAAkB3C,YAAY,CAAC4C;QACnC,8HAA8H;QAC9H,2JAA2J;QAC3J,sKAAsK;QACtKA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,QACGC,OACC5B,WAAWA,WACX6B,iBAAiBpC,KAAKQ,GAAG,EACzB6B,SAAST,aACTU,aAAaN,iBACbO,KAAK,SACN;MACC,CAACzC,SAAS;IACZ,EAAEqC;AAEN,EAAC"}