@payloadcms/richtext-lexical 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

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

@@ -4,13 +4,17 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { getTranslation } from '@payloadcms/translations';
 import { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js';
 import { ToolbarButton } from '../../../shared/ToolbarButton/index.js';
 import { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js';
+import { useToolbarKeyboardNavigation } from '../../../shared/useToolbarKeyboardNavigation.js';
 import { useToolbarStates } from '../../../shared/useToolbarStates.js';
+import { useRedirectVerticalWheelToHorizontalScroll } from './horizontalWheelScroll.js';
+import './index.css';
 function ButtonGroupItem({
   active,
   anchorElem,
@@ -36,85 +40,141 @@ function ButtonGroupItem({
     children: /*#__PURE__*/_jsx(item.ChildComponent, {})
   }, item.key);
 }
-function ToolbarGroupComponent({
-  anchorElem,
-  editor,
-  editorConfig,
-  group,
-  index,
-  toolbarStates
-}) {
+function ToolbarGroupComponent(t0) {
+  const $ = _c(22);
+  const {
+    anchorElem,
+    editor,
+    editorConfig,
+    group,
+    index,
+    toolbarStates
+  } = t0;
   const {
     i18n
   } = useTranslation();
   const {
-    fieldProps: {
-      featureClientSchemaMap,
-      schemaPath
-    }
+    fieldProps: t1
   } = useEditorConfigContext();
-  const groupState = toolbarStates.groupStates.get(group.key);
-  const DropdownIcon = useMemo(() => {
-    if (group.type !== 'dropdown') {
-      return undefined;
+  const {
+    featureClientSchemaMap,
+    schemaPath
+  } = t1;
+  let t2;
+  if ($[0] !== group.key || $[1] !== toolbarStates.groupStates) {
+    t2 = toolbarStates.groupStates.get(group.key);
+    $[0] = group.key;
+    $[1] = toolbarStates.groupStates;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const groupState = t2;
+  groupState?.activeItems;
+  let t3;
+  bb0: {
+    if (group.type !== "dropdown") {
+      t3 = undefined;
+      break bb0;
     }
     const activeItem = groupState?.activeItems?.[0];
     if (activeItem) {
-      return activeItem.ChildComponent;
-    }
-    return group.ChildComponent;
-  }, [group, groupState?.activeItems]);
-  const dropdownLabel = useMemo(() => {
-    if (group.type !== 'dropdown') {
-      return undefined;
-    }
-    const activeItems = groupState?.activeItems;
-    if (!activeItems?.length) {
-      return undefined;
-    }
-    if (activeItems.length > 1) {
-      return i18n.t('lexical:general:toolbarItemsActive', {
-        count: activeItems.length
-      });
+      t3 = activeItem.ChildComponent;
+      break bb0;
     }
-    const item = activeItems[0];
-    let label = item.key;
-    if (item.label) {
-      label = typeof item.label === 'function' ? item.label({
-        featureClientSchemaMap,
-        i18n,
-        schemaPath
-      }) : item.label;
-    }
-    if (label.length > 25) {
-      label = label.substring(0, 25) + '...';
-    }
-    return label;
-  }, [group, groupState?.activeItems, i18n, featureClientSchemaMap, schemaPath]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: `fixed-toolbar__group fixed-toolbar__group-${group.key}`,
-    "data-toolbar-group-key": group.key,
-    children: [group.type === 'dropdown' && group.items.length && groupState ? /*#__PURE__*/_jsx(ToolbarDropdown, {
-      anchorElem: anchorElem,
-      editor: editor,
-      group: group,
-      groupState: groupState,
-      Icon: DropdownIcon,
-      itemsContainerClassNames: ['fixed-toolbar__dropdown-items'],
-      label: dropdownLabel
-    }) : null, group.type === 'buttons' && group.items.length ? group.items.map(item_0 => {
-      const itemState = toolbarStates.itemStates.get(item_0.key);
-      return /*#__PURE__*/_jsx(ButtonGroupItem, {
-        active: itemState?.active ?? false,
-        anchorElem: anchorElem,
-        editor: editor,
-        enabled: itemState?.enabled ?? true,
-        item: item_0
-      }, item_0.key);
-    }) : null, index < editorConfig.features.toolbarFixed?.groups.length - 1 && /*#__PURE__*/_jsx("div", {
-      className: "divider"
-    })]
-  }, group.key);
+    t3 = group.ChildComponent;
+  }
+  const DropdownIcon = t3;
+  let t4;
+  if ($[3] !== featureClientSchemaMap || $[4] !== group.type || $[5] !== groupState?.activeItems || $[6] !== i18n || $[7] !== schemaPath) {
+    t4 = () => {
+      if (group.type !== "dropdown") {
+        return;
+      }
+      const activeItems = groupState?.activeItems;
+      if (!activeItems?.length) {
+        return;
+      }
+      if (activeItems.length > 1) {
+        return i18n.t("lexical:general:toolbarItemsActive", {
+          count: activeItems.length
+        });
+      }
+      const item = activeItems[0];
+      let label = item.key;
+      if (item.label) {
+        label = typeof item.label === "function" ? item.label({
+          featureClientSchemaMap,
+          i18n,
+          schemaPath
+        }) : item.label;
+      }
+      if (label.length > 25) {
+        label = label.substring(0, 25) + "...";
+      }
+      return label;
+    };
+    $[3] = featureClientSchemaMap;
+    $[4] = group.type;
+    $[5] = groupState?.activeItems;
+    $[6] = i18n;
+    $[7] = schemaPath;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  groupState?.activeItems;
+  let t5;
+  if ($[9] !== t4) {
+    t5 = t4();
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const dropdownLabel = t5;
+  const t6 = `fixed-toolbar__group fixed-toolbar__group-${group.key}`;
+  let t7;
+  if ($[11] !== DropdownIcon || $[12] !== anchorElem || $[13] !== dropdownLabel || $[14] !== editor || $[15] !== editorConfig.features.toolbarFixed?.groups.length || $[16] !== group || $[17] !== groupState || $[18] !== index || $[19] !== t6 || $[20] !== toolbarStates.itemStates) {
+    t7 = _jsxs("div", {
+      className: t6,
+      "data-toolbar-group-key": group.key,
+      children: [group.type === "dropdown" && group.items.length && groupState ? _jsx(ToolbarDropdown, {
+        anchorElem,
+        editor,
+        group,
+        groupState,
+        Icon: DropdownIcon,
+        itemsContainerClassNames: ["fixed-toolbar__dropdown-items"],
+        label: dropdownLabel
+      }) : null, group.type === "buttons" && group.items.length ? group.items.map(item_0 => {
+        const itemState = toolbarStates.itemStates.get(item_0.key);
+        return _jsx(ButtonGroupItem, {
+          active: itemState?.active ?? false,
+          anchorElem,
+          editor,
+          enabled: itemState?.enabled ?? true,
+          item: item_0
+        }, item_0.key);
+      }) : null, index < editorConfig.features.toolbarFixed?.groups.length - 1 && _jsx("div", {
+        className: "divider"
+      })]
+    }, group.key);
+    $[11] = DropdownIcon;
+    $[12] = anchorElem;
+    $[13] = dropdownLabel;
+    $[14] = editor;
+    $[15] = editorConfig.features.toolbarFixed?.groups.length;
+    $[16] = group;
+    $[17] = groupState;
+    $[18] = index;
+    $[19] = t6;
+    $[20] = toolbarStates.itemStates;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  return t7;
 }
 function FixedToolbar({
   anchorElem,
@@ -124,10 +184,21 @@ function FixedToolbar({
   parentWithFixedToolbar
 }) {
   const currentToolbarRef = React.useRef(null);
+  const keyboardNavigationOptions = useMemo(() => ({
+    toolbarRef: currentToolbarRef
+  }), []);
+  const {
+    fieldProps
+  } = useEditorConfigContext();
+  const {
+    i18n
+  } = useTranslation();
+  useToolbarKeyboardNavigation(keyboardNavigationOptions);
   const isEditable = useLexicalEditable();
   const {
     y
   } = useScrollInfo();
+  useRedirectVerticalWheelToHorizontalScroll();
   const toolbarStates = useToolbarStates(editor, editorConfig?.features?.toolbarFixed?.groups);
   // Memoize the parent toolbar element
   const parentToolbarElem = useMemo(() => {
@@ -173,6 +244,7 @@ function FixedToolbar({
     }
   }, 50, [currentToolbarRef, parentToolbarElem, y]);
   return /*#__PURE__*/_jsx("div", {
+    "aria-label": getTranslation(fieldProps.field.label || fieldProps.path, i18n) || fieldProps.path,
     className: "fixed-toolbar",
     onFocus: event => {
       // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,
@@ -180,7 +252,10 @@ function FixedToolbar({
       event.stopPropagation();
     },
     ref: currentToolbarRef,
-    children: isEditable && /*#__PURE__*/_jsx(React.Fragment, {
+    role: "toolbar",
+    children: isEditable && /*#__PURE__*/_jsx("div", {
+      className: "fixed-toolbar__scroll",
+      tabIndex: -1,
       children: editorConfig?.features && editorConfig.features?.toolbarFixed?.groups.map((group, i) => {
         return /*#__PURE__*/_jsx(ToolbarGroupComponent, {
           anchorElem: anchorElem,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","useLexicalEditable","useScrollInfo","useThrottledEffect","useTranslation","React","useMemo","useEditorConfigContext","ToolbarButton","ToolbarDropdown","useToolbarStates","ButtonGroupItem","active","anchorElem","editor","enabled","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","editorConfig","group","index","toolbarStates","i18n","fieldProps","featureClientSchemaMap","schemaPath","groupState","groupStates","get","DropdownIcon","type","undefined","activeItem","activeItems","dropdownLabel","length","t","count","label","substring","_jsxs","className","items","Icon","itemsContainerClassNames","map","itemState","itemStates","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","t0","$","currentEditor","currentEditorConfig","applyToFocusedEditor","focusedEditor","t1","t2","Symbol","for","bb0","document","body"],"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 { ToolbarStates } from '../../../shared/useToolbarStates.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 { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport { useToolbarStates } from '../../../shared/useToolbarStates.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled: boolean\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  editorConfig,\n  group,\n  index,\n  toolbarStates,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  group: ToolbarGroup\n  index: number\n  toolbarStates: ToolbarStates\n}): React.ReactNode {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const groupState = toolbarStates.groupStates.get(group.key)\n\n  const DropdownIcon = useMemo(() => {\n    if (group.type !== 'dropdown') {\n      return undefined\n    }\n    const activeItem = groupState?.activeItems?.[0]\n    if (activeItem) {\n      return activeItem.ChildComponent\n    }\n    return group.ChildComponent\n  }, [group, groupState?.activeItems])\n\n  const dropdownLabel = useMemo(() => {\n    if (group.type !== 'dropdown') {\n      return undefined\n    }\n    const activeItems = groupState?.activeItems\n    if (!activeItems?.length) {\n      return undefined\n    }\n    if (activeItems.length > 1) {\n      return i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length })\n    }\n    const item = activeItems[0]!\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    if (label.length > 25) {\n      label = label.substring(0, 25) + '...'\n    }\n    return label\n  }, [group, groupState?.activeItems, i18n, featureClientSchemaMap, schemaPath])\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 && groupState ? (\n        <ToolbarDropdown\n          anchorElem={anchorElem}\n          editor={editor}\n          group={group}\n          groupState={groupState}\n          Icon={DropdownIcon}\n          itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n          label={dropdownLabel}\n        />\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            const itemState = toolbarStates.itemStates.get(item.key)\n            return (\n              <ButtonGroupItem\n                active={itemState?.active ?? false}\n                anchorElem={anchorElem}\n                editor={editor}\n                enabled={itemState?.enabled ?? true}\n                item={item}\n                key={item.key}\n              />\n            )\n          })\n        : null}\n      {index < editorConfig.features.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  const toolbarStates = useToolbarStates(editor, editorConfig?.features?.toolbarFixed?.groups)\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                  toolbarStates={toolbarStates}\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      clientProps={clientProps}\n      editor={editor}\n      editorConfig={editorConfig}\n      parentWithFixedToolbar={parentWithFixedToolbar}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","useLexicalEditable","getTranslation","useScrollInfo","useThrottledEffect","useTranslation","React","useMemo","useEditorConfigContext","ToolbarButton","ToolbarDropdown","useToolbarKeyboardNavigation","useToolbarStates","useRedirectVerticalWheelToHorizontalScroll","ButtonGroupItem","active","anchorElem","editor","enabled","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","t0","$","editorConfig","group","index","toolbarStates","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","t2","groupStates","get","groupState","activeItems","t3","bb0","type","undefined","activeItem","DropdownIcon","t4","length","t","count","label","substring","t5","dropdownLabel","t6","t7","features","toolbarFixed","groups","itemStates","_jsxs","className","children","items","Icon","itemsContainerClassNames","map","item_0","itemState","FixedToolbar","clientProps","parentWithFixedToolbar","currentToolbarRef","useRef","keyboardNavigationOptions","toolbarRef","isEditable","y","parentToolbarElem","disableIfParentHasFixedToolbar","parentEditorElem","editorContainerRef","current","sibling","previousElementSibling","classList","contains","currentToolbarElem","currentRect","getBoundingClientRect","parentRect","overlapping","bottom","top","remove","add","field","path","onFocus","event","stopPropagation","ref","role","tabIndex","i","getParentEditorWithFixedToolbar","editorConfigContext","parentEditor","resolvedFeatureMap","has","FixedToolbarPlugin","currentEditor","currentEditorConfig","applyToFocusedEditor","focusedEditor","Symbol","for","document","body"],"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 { getTranslation } from '@payloadcms/translations'\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 { ToolbarStates } from '../../../shared/useToolbarStates.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 { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport { useToolbarKeyboardNavigation } from '../../../shared/useToolbarKeyboardNavigation.js'\nimport { useToolbarStates } from '../../../shared/useToolbarStates.js'\nimport { useRedirectVerticalWheelToHorizontalScroll } from './horizontalWheelScroll.js'\nimport './index.css'\n\nfunction ButtonGroupItem({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled: boolean\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  editorConfig,\n  group,\n  index,\n  toolbarStates,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  group: ToolbarGroup\n  index: number\n  toolbarStates: ToolbarStates\n}): React.ReactNode {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const groupState = toolbarStates.groupStates.get(group.key)\n\n  const DropdownIcon = useMemo(() => {\n    if (group.type !== 'dropdown') {\n      return undefined\n    }\n    const activeItem = groupState?.activeItems?.[0]\n    if (activeItem) {\n      return activeItem.ChildComponent\n    }\n    return group.ChildComponent\n  }, [group, groupState?.activeItems])\n\n  const dropdownLabel = useMemo(() => {\n    if (group.type !== 'dropdown') {\n      return undefined\n    }\n    const activeItems = groupState?.activeItems\n    if (!activeItems?.length) {\n      return undefined\n    }\n    if (activeItems.length > 1) {\n      return i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length })\n    }\n    const item = activeItems[0]!\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    if (label.length > 25) {\n      label = label.substring(0, 25) + '...'\n    }\n    return label\n  }, [group, groupState?.activeItems, i18n, featureClientSchemaMap, schemaPath])\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 && groupState ? (\n        <ToolbarDropdown\n          anchorElem={anchorElem}\n          editor={editor}\n          group={group}\n          groupState={groupState}\n          Icon={DropdownIcon}\n          itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n          label={dropdownLabel}\n        />\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            const itemState = toolbarStates.itemStates.get(item.key)\n            return (\n              <ButtonGroupItem\n                active={itemState?.active ?? false}\n                anchorElem={anchorElem}\n                editor={editor}\n                enabled={itemState?.enabled ?? true}\n                item={item}\n                key={item.key}\n              />\n            )\n          })\n        : null}\n      {index < editorConfig.features.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 keyboardNavigationOptions = useMemo(() => ({ toolbarRef: currentToolbarRef }), [])\n  const { fieldProps } = useEditorConfigContext()\n  const { i18n } = useTranslation()\n\n  useToolbarKeyboardNavigation(keyboardNavigationOptions)\n\n  const isEditable = useLexicalEditable()\n\n  const { y } = useScrollInfo()\n\n  useRedirectVerticalWheelToHorizontalScroll()\n\n  const toolbarStates = useToolbarStates(editor, editorConfig?.features?.toolbarFixed?.groups)\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      aria-label={\n        getTranslation(fieldProps.field.label || fieldProps.path, i18n) || fieldProps.path\n      }\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      role=\"toolbar\"\n    >\n      {isEditable && (\n        <div className=\"fixed-toolbar__scroll\" tabIndex={-1}>\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                  toolbarStates={toolbarStates}\n                />\n              )\n            })}\n        </div>\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      clientProps={clientProps}\n      editor={editor}\n      editorConfig={editorConfig}\n      parentWithFixedToolbar={parentWithFixedToolbar}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,QAAQ;AAClE,YAAYC,KAAA,MAAW;AACvB,SAASC,OAAO,QAAQ;AASxB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,0CAA0C,QAAQ;AAC3D,OAAO;AAEP,SAASC,gBAAgB;EACvBC,MAAM;EACNC,UAAU;EACVC,MAAM;EACNC,OAAO;EACPC;AAAI,CAOL;EACC,IAAIA,IAAA,CAAKC,SAAS,EAAE;IAClB,OACED,IAAA,EAAMC,SAAA,iBACJC,IAAA,CAACF,IAAA,CAAKC,SAAS;MAACJ,UAAA,EAAYA,UAAA;MAAYC,MAAA,EAAQA,MAAA;MAAQE,IAAA,EAAMA;OAAWA,IAAA,CAAKG,GAAG;EAGvF;EAEA,IAAI,CAACH,IAAA,CAAKI,cAAc,EAAE;IACxB,OAAO;EACT;EAEA,oBACEF,IAAA,CAACZ,aAAA;IAAcM,MAAA,EAAQA,MAAA;IAAQE,MAAA,EAAQA,MAAA;IAAQC,OAAA,EAASA,OAAA;IAASC,IAAA,EAAMA,IAAA;cACrE,aAAAE,IAAA,CAACF,IAAA,CAAKI,cAAc;KAD4DJ,IAAA,CAAKG,GAAG;AAI9F;AAEA,SAAAE,sBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAA3B,EAAA;EAA+B;IAAAiB,UAAA;IAAAC,MAAA;IAAAU,YAAA;IAAAC,KAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAL,EAc9B;EACC;IAAAM;EAAA,IAAiB1B,cAAA;EACjB;IAAA2B,UAAA,EAAAC;EAAA,IAEIzB,sBAAA;EADU;IAAA0B,sBAAA;IAAAC;EAAA,IAAAF,EAAsC;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,QAAAE,KAAA,CAAAN,GAAA,IAAAI,CAAA,QAAAI,aAAA,CAAAO,WAAA;IAGjCD,EAAA,GAAAN,aAAA,CAAAO,WAAyB,CAAAC,GAAI,CAACV,KAAA,CAAAN,GAAS;IAAAI,CAAA,MAAAE,KAAA,CAAAN,GAAA;IAAAI,CAAA,MAAAI,aAAA,CAAAO,WAAA;IAAAX,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA1D,MAAAa,UAAA,GAAmBH,EAAuC;EAW/CG,UAAA,EAAAC,WAAY;EAAA,IAAAC,EAAA;EAAAC,GAAA;IARrB,IAAId,KAAA,CAAAe,IAAU,KAAK;MACjBF,EAAA,GAAOG,SAAA;MAAP,MAAAF,GAAA;IAAO;IAET,MAAAG,UAAA,GAAmBN,UAAA,EAAAC,WAA4B;IAC/C,IAAIK,UAAA;MACFJ,EAAA,GAAOI,UAAA,CAAAtB,cAAyB;MAAhC,MAAAmB,GAAA;IAAgC;IAElCD,EAAA,GAAOb,KAAA,CAAAL,cAAoB;EAAA;EAR7B,MAAAuB,YAAA,GAAqBL,EASc;EAAA,IAAAM,EAAA;EAAA,IAAArB,CAAA,QAAAQ,sBAAA,IAAAR,CAAA,QAAAE,KAAA,CAAAe,IAAA,IAAAjB,CAAA,QAAAa,UAAA,EAAAC,WAAA,IAAAd,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAS,UAAA;IAELY,EAAA,GAAAA,CAAA;MAC5B,IAAInB,KAAA,CAAAe,IAAU,KAAK;QAAA;MAAA;MAGnB,MAAAH,WAAA,GAAoBD,UAAA,EAAAC,WAAY;MAChC,IAAI,CAACA,WAAA,EAAAQ,MAAa;QAAA;MAAA;MAGlB,IAAIR,WAAA,CAAAQ,MAAkB,GAAG;QAAA,OAChBjB,IAAA,CAAAkB,CAAM,CAAC,sCAAsC;UAAAC,KAAA,EAASV,WAAA,CAAAQ;QAAmB;MAAA;MAElF,MAAA7B,IAAA,GAAaqB,WAAW,GAAG;MAC3B,IAAAW,KAAA,GAAYhC,IAAA,CAAAG,GAAQ;MACpB,IAAIH,IAAA,CAAAgC,KAAU;QACZA,KAAA,CAAAA,CAAA,CACEA,MAAA,CAAOhC,IAAA,CAAAgC,KAAU,KAAK,UAER,GADVhC,IAAA,CAAAgC,KAAU,CAAC;UAAAjB,sBAAA;UAAAH,IAAA;UAAAI;QAA2C,CACjD,CAAK,GAAVhB,IAAA,CAAAgC,KAAU;MAHhB;MAKF,IAAIA,KAAA,CAAAH,MAAY,GAAG;QACjBG,KAAA,CAAAA,CAAA,CAAQA,KAAA,CAAAC,SAAe,CAAC,GAAG,MAAM;MAAjC;MACF,OACOD,KAAA;IAAA,CACT;IAAAzB,CAAA,MAAAQ,sBAAA;IAAAR,CAAA,MAAAE,KAAA,CAAAe,IAAA;IAAAjB,CAAA,MAAAa,UAAA,EAAAC,WAAA;IAAAd,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAAWa,UAAA,EAAAC,WAAY;EAAA,IAAAa,EAAA;EAAA,IAAA3B,CAAA,QAAAqB,EAAA;IAvBDM,EAAA,GAAQN,EAuB9B,CAA6E;IAAArB,CAAA,MAAAqB,EAAA;IAAArB,CAAA,OAAA2B,EAAA;EAAA;IAAAA,EAAA,GAAA3B,CAAA;EAAA;EAvB7E,MAAA4B,aAAA,GAAsBD,EAuBuD;EAI9D,MAAAE,EAAA,gDAA6C3B,KAAA,CAAAN,GAAS,EAAE;EAAA,IAAAkC,EAAA;EAAA,IAAA9B,CAAA,SAAAoB,YAAA,IAAApB,CAAA,SAAAV,UAAA,IAAAU,CAAA,SAAA4B,aAAA,IAAA5B,CAAA,SAAAT,MAAA,IAAAS,CAAA,SAAAC,YAAA,CAAA8B,QAAA,CAAAC,YAAA,EAAAC,MAAA,CAAAX,MAAA,IAAAtB,CAAA,SAAAE,KAAA,IAAAF,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAG,KAAA,IAAAH,CAAA,SAAA6B,EAAA,IAAA7B,CAAA,SAAAI,aAAA,CAAA8B,UAAA;IADrEJ,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAwD;MAAA,0BAC3C3B,KAAA,CAAAN,GAAS;MAAAyC,QAAA,E,CAGhCnC,KAAA,CAAAe,IAAU,KAAK,UAAgC,IAAlBf,KAAA,CAAAoC,KAAW,CAAAhB,MAAW,IAAnDT,UAUG,GATFlB,IAAA,CAACX,eAAA;QAAAM,UAAA;QAAAC,MAAA;QAAAW,KAAA;QAAAW,UAAA;QAAA0B,IAAA,EAKOnB,YAAA;QAAAoB,wBAAA,EACoB,CAAC,gCAAgC;QAAAf,KAAA,EACpDG;OAEP,IAVH,IAUG,EACH1B,KAAA,CAAAe,IAAU,KAAK,SAA+B,IAAlBf,KAAA,CAAAoC,KAAW,CAAAhB,MAcpC,GAbApB,KAAA,CAAAoC,KAAW,CAAAG,GAAI,CAACC,MAAA;QACd,MAAAC,SAAA,GAAkBvC,aAAA,CAAA8B,UAAwB,CAAAtB,GAAI,CAACnB,MAAA,CAAAG,GAAQ;QAAA,OAErDD,IAAA,CAACP,eAAA;UAAAC,MAAA,EACSsD,SAAA,EAAAtD,MAAqB,IAArB,KAAqB;UAAAC,UAAA;UAAAC,MAAA;UAAAC,OAAA,EAGpBmD,SAAA,EAAAnD,OAAsB,IAAtB,IAAsB;UAAAC,IAAA,EACzBA;WACDA,MAAA,CAAAG,GAAQ;MAAA,CAInB,IAdH,IAcG,EACHO,KAAA,GAAQF,YAAA,CAAA8B,QAAqB,CAAAC,YAAe,EAAAC,MAAO,CAAAX,MAAA,GAAS,C,IAAK3B,IAAA,CAAC;QAAAyC,SAAA,EAAc;;OA5B5ElC,KAAA,CAAAN,GAAS;IAAAI,CAAA,OAAAoB,YAAA;IAAApB,CAAA,OAAAV,UAAA;IAAAU,CAAA,OAAA4B,aAAA;IAAA5B,CAAA,OAAAT,MAAA;IAAAS,CAAA,OAAAC,YAAA,CAAA8B,QAAA,CAAAC,YAAA,EAAAC,MAAA,CAAAX,MAAA;IAAAtB,CAAA,OAAAE,KAAA;IAAAF,CAAA,OAAAa,UAAA;IAAAb,CAAA,OAAAG,KAAA;IAAAH,CAAA,OAAA6B,EAAA;IAAA7B,CAAA,OAAAI,aAAA,CAAA8B,UAAA;IAAAlC,CAAA,OAAA8B,EAAA;EAAA;IAAAA,EAAA,GAAA9B,CAAA;EAAA;EAAA,OAHhB8B,EAGgB;AAAA;AAiCpB,SAASc,aAAa;EACpBtD,UAAU;EACVuD,WAAW;EACXtD,MAAM;EACNU,YAAY;EACZ6C;AAAsB,CAOvB;EACC,MAAMC,iBAAA,GAAoBnE,KAAA,CAAMoE,MAAM,CAAiB;EACvD,MAAMC,yBAAA,GAA4BpE,OAAA,CAAQ,OAAO;IAAEqE,UAAA,EAAYH;EAAkB,IAAI,EAAE;EACvF,MAAM;IAAEzC;EAAU,CAAE,GAAGxB,sBAAA;EACvB,MAAM;IAAEuB;EAAI,CAAE,GAAG1B,cAAA;EAEjBM,4BAAA,CAA6BgE,yBAAA;EAE7B,MAAME,UAAA,GAAa5E,kBAAA;EAEnB,MAAM;IAAE6E;EAAC,CAAE,GAAG3E,aAAA;EAEdU,0CAAA;EAEA,MAAMiB,aAAA,GAAgBlB,gBAAA,CAAiBK,MAAA,EAAQU,YAAA,EAAc8B,QAAA,EAAUC,YAAA,EAAcC,MAAA;EAErF;EACA,MAAMoB,iBAAA,GAAoBxE,OAAA,CAAQ;IAChC,IAAI,CAACiE,sBAAA,IAA0BD,WAAA,EAAaS,8BAAA,EAAgC;MAC1E,OAAO;IACT;IAEA,MAAMC,gBAAA,GAAmBT,sBAAA,CAAuBU,kBAAkB,CAACC,OAAO;IAC1E,IAAIC,OAAA,GAAUH,gBAAA,CAAiBI,sBAAsB;IACrD,OAAOD,OAAA,EAAS;MACd,IAAIA,OAAA,CAAQE,SAAS,CAACC,QAAQ,CAAC,kBAAkB;QAC/C,OAAOH,OAAA;MACT;MACAA,OAAA,GAAUA,OAAA,CAAQC,sBAAsB;IAC1C;IACA,OAAO;EACT,GAAG,CAACd,WAAA,EAAaS,8BAAA,EAAgCR,sBAAA,CAAuB;EAExEpE,kBAAA,CACE;IACE,IAAI,CAAC2E,iBAAA,EAAmB;MACtB;MACA;IACF;IACA,MAAMS,kBAAA,GAAqBf,iBAAA,CAAkBU,OAAO;IACpD,IAAI,CAACK,kBAAA,EAAoB;MACvB;IACF;IAEA,MAAMC,WAAA,GAAcD,kBAAA,CAAmBE,qBAAqB;IAC5D,MAAMC,UAAA,GAAaZ,iBAAA,CAAkBW,qBAAqB;IAE1D;IACA,MAAME,WAAA,GAAc,EAClBH,WAAA,CAAYI,MAAM,GAAGF,UAAA,CAAWG,GAAG,IAAIL,WAAA,CAAYK,GAAG,GAAGH,UAAA,CAAWE,MAAM,CAAD;IAG3E,IAAID,WAAA,EAAa;MACfJ,kBAAA,CAAmBF,SAAS,CAACS,MAAM,CAAC;MACpCP,kBAAA,CAAmBF,SAAS,CAACU,GAAG,CAAC,iBAAiB;MAClDjB,iBAAA,CAAkBO,SAAS,CAACS,MAAM,CAAC;MACnChB,iBAAA,CAAkBO,SAAS,CAACU,GAAG,CAAC,iBAAiB;IACnD,OAAO;MACL,IAAI,CAACR,kBAAA,CAAmBF,SAAS,CAACC,QAAQ,CAAC,+BAA+B;QACxE;MACF;MACAC,kBAAA,CAAmBF,SAAS,CAACS,MAAM,CAAC;MACpCP,kBAAA,CAAmBF,SAAS,CAACU,GAAG,CAAC;MACjCjB,iBAAA,CAAkBO,SAAS,CAACS,MAAM,CAAC;MACnChB,iBAAA,CAAkBO,SAAS,CAACU,GAAG,CAAC;IAClC;EACF,GACA,IACA,CAACvB,iBAAA,EAAmBM,iBAAA,EAAmBD,CAAA,CAAE;EAG3C,oBACEzD,IAAA,CAAC;IACC,cACEnB,cAAA,CAAe8B,UAAA,CAAWiE,KAAK,CAAC9C,KAAK,IAAInB,UAAA,CAAWkE,IAAI,EAAEnE,IAAA,KAASC,UAAA,CAAWkE,IAAI;IAEpFpC,SAAA,EAAU;IACVqC,OAAA,EAAUC,KAAA;MACR;MACA;MACAA,KAAA,CAAMC,eAAe;IACvB;IACAC,GAAA,EAAK7B,iBAAA;IACL8B,IAAA,EAAK;cAEJ1B,UAAA,iBACCxD,IAAA,CAAC;MAAIyC,SAAA,EAAU;MAAwB0C,QAAA,EAAU,CAAC;gBAC/C7E,YAAA,EAAc8B,QAAA,IACb9B,YAAA,CAAa8B,QAAQ,EAAEC,YAAA,EAAcC,MAAA,CAAOQ,GAAA,CAAI,CAACvC,KAAA,EAAO6E,CAAA;QACtD,oBACEpF,IAAA,CAACG,qBAAA;UACCR,UAAA,EAAYA,UAAA;UACZC,MAAA,EAAQA,MAAA;UACRU,YAAA,EAAcA,YAAA;UACdC,KAAA,EAAOA,KAAA;UACPC,KAAA,EAAO4E,CAAA;UAEP3E,aAAA,EAAeA;WADVF,KAAA,CAAMN,GAAG;MAIpB;;;AAKZ;AAEA,MAAMoF,+BAAA,GACJC,mBAAA;EAEA,IAAIA,mBAAA,CAAoBC,YAAY,EAAEjF,YAAA,EAAc;IAClD,IAAIgF,mBAAA,CAAoBC,YAAY,EAAEjF,YAAA,CAAakF,kBAAA,CAAmBC,GAAA,CAAI,iBAAiB;MACzF,OAAOH,mBAAA,CAAoBC,YAAY;IACzC,OAAO;MACL,IAAID,mBAAA,CAAoBC,YAAY,EAAE;QACpC,OAAOF,+BAAA,CAAgCC,mBAAA,CAAoBC,YAAY;MACzE;IACF;EACF;EACA,OAAO;AACT;AAEA,OAAO,MAAMG,kBAAA,GAAgEtF,EAAA;EAAA,MAAAC,CAAA,GAAA3B,EAAA;EAAC;IAAAwE;EAAA,IAAA9C,EAAe;EAC3F,OAAAuF,aAAA,IAAwBhH,yBAAA;EACxB,MAAA2G,mBAAA,GAA4BnG,sBAAA;EAC5B,MAAAqE,UAAA,GAAmB5E,kBAAA;EACnB,IAAI,CAAC4E,UAAA;IAAA,OACI;EAAA;EAGT;IAAAlD,YAAA,EAAAsF;EAAA,IAA8CN,mBAAA;EAE9C,MAAA1F,MAAA,GAAesD,WAAA,CAAA2C,oBAEX,GADAP,mBAAA,CAAAQ,aAAmC,EAAAlG,MAAU,IAA7C+F,aACA,GAFWA,aAEX;EAEJ,MAAArF,YAAA,GAAqB4C,WAAA,CAAA2C,oBAEjB,GADAP,mBAAA,CAAAQ,aAAmC,EAAAxF,YAAgB,IAAnDsF,mBACA,GAFiBA,mBAEjB;EAAA,IAAAhF,EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,QAAA6C,WAAA,IAAA7C,CAAA,QAAAT,MAAA,IAAAS,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAiF,mBAAA;IAMOvE,EAAA,GAAAgF,MAAA,CAAAC,GAAA;IAAA3E,GAAA;MAJX,MAAA8B,sBAAA,GAA+BkC,+BAAA,CAAgCC,mBAAA;MAE/D,IAAIpC,WAAA,EAAAS,8BAAa;QACf,IAAIR,sBAAA;UACKpC,EAAA;UAAA,MAAAM,GAAA;QAAA;MACT;MAGF,IAAI,CAACf,YAAA,EAAA8B,QAAwB,EAAAC,YAAc,EAAAC,MAAQ,EAAAX,MAAA;QAC1CZ,EAAA;QAAA,MAAAM,GAAA;MAAA;MAIPT,EAAA,GAAAZ,IAAA,CAACiD,YAAA;QAAAtD,UAAA,EACasG,QAAA,CAAAC,IAAa;QAAAhD,WAAA;QAAAtD,MAAA;QAAAU,YAAA;QAAA6C;;;;;;;;;;;;;;;;SAD3BvC,E;CAQJ","ignoreList":[]}

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

@@ -0,0 +1,31 @@
+@layer payload-default {
+  .inline-toolbar-popup {
+    display: flex;
+    align-items: center;
+    background: var(--color-bg);
+    padding: 0 var(--spacer-1);
+    gap: var(--spacer-1);
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    z-index: 2;
+    opacity: 0;
+    border-radius: var(--radius-medium);
+    will-change: transform;
+    box-shadow: var(--elevation-300-tooltip);
+  }
+
+  .inline-toolbar-popup__group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    height: var(--spacer-5);
+
+    .divider {
+      width: var(--stroke-width-small);
+      align-self: stretch;
+      background-color: var(--lexical-border-color);
+    }
+  }
+}

package/dist/features/toolbars/inline/client/Toolbar/index.d.ts

@@ -1,4 +1,4 @@
 import type { PluginComponentWithAnchor } from '../../../../typesClient.js';
-import './index.scss';
+import './index.css';
 export declare const InlineToolbarPlugin: PluginComponentWithAnchor<undefined>;
 //# sourceMappingURL=index.d.ts.map

package/dist/features/toolbars/inline/client/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AAU3E,OAAO,cAAc,CAAA;AA6WrB,eAAO,MAAM,mBAAmB,EAAE,yBAAyB,CAAC,SAAS,CAIpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AAW3E,OAAO,aAAa,CAAA;AA0XpB,eAAO,MAAM,mBAAmB,EAAE,yBAAyB,CAAC,SAAS,CAIpE,CAAA"}

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

@@ -5,7 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { mergeRegister } from '@lexical/utils';
-import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, getDOMSelection, SELECTION_CHANGE_COMMAND } from 'lexical';
+import { getTranslation } from '@payloadcms/translations';
+import { useTranslation } from '@payloadcms/ui';
+import { $getSelection, $isRangeSelection, $isTextNode, $onUpdate, COMMAND_PRIORITY_LOW, getDOMSelection, SELECTION_CHANGE_COMMAND } from 'lexical';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
@@ -14,7 +16,9 @@ import { getDOMRangeRect } from '../../../../../lexical/utils/getDOMRangeRect.js
 import { setFloatingElemPosition } from '../../../../../lexical/utils/setFloatingElemPosition.js';
 import { ToolbarButton } from '../../../shared/ToolbarButton/index.js';
 import { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js';
+import { useToolbarKeyboardNavigation } from '../../../shared/useToolbarKeyboardNavigation.js';
 import { useToolbarStates } from '../../../shared/useToolbarStates.js';
+import './index.css';
 function ButtonGroupItem({
   active,
   anchorElem,
@@ -40,52 +44,94 @@ function ButtonGroupItem({
     children: /*#__PURE__*/_jsx(item.ChildComponent, {})
   }, item.key);
 }
-function ToolbarGroupComponent({
-  anchorElem,
-  editor,
-  group,
-  index,
-  toolbarStates
-}) {
+function ToolbarGroupComponent(t0) {
+  const $ = _c(13);
+  const {
+    anchorElem,
+    editor,
+    group,
+    index,
+    toolbarStates
+  } = t0;
   const {
     editorConfig
   } = useEditorConfigContext();
-  const groupState = toolbarStates.groupStates.get(group.key);
-  const DropdownIcon = useMemo(() => {
-    if (group.type !== 'dropdown') {
-      return undefined;
+  let t1;
+  if ($[0] !== group.key || $[1] !== toolbarStates.groupStates) {
+    t1 = toolbarStates.groupStates.get(group.key);
+    $[0] = group.key;
+    $[1] = toolbarStates.groupStates;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const groupState = t1;
+  groupState?.activeItems;
+  let t2;
+  bb0: {
+    if (group.type !== "dropdown") {
+      t2 = undefined;
+      break bb0;
     }
     const activeItem = groupState?.activeItems?.[0];
-    return activeItem?.ChildComponent ?? group.ChildComponent;
-  }, [group, groupState?.activeItems]);
-  return /*#__PURE__*/_jsxs("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 && groupState ? /*#__PURE__*/_jsx(ToolbarDropdown, {
-      anchorElem: anchorElem,
-      editor: editor,
-      group: group,
-      groupState: groupState,
-      Icon: DropdownIcon
-    }) : null, group.type === 'buttons' && group.items.length ? group.items.map(item => {
-      const itemState = toolbarStates.itemStates.get(item.key);
-      return /*#__PURE__*/_jsx(ButtonGroupItem, {
-        active: itemState?.active ?? false,
-        anchorElem: anchorElem,
-        editor: editor,
-        enabled: itemState?.enabled ?? true,
-        item: item
-      }, item.key);
-    }) : null, index < editorConfig.features.toolbarInline?.groups.length - 1 && /*#__PURE__*/_jsx("div", {
-      className: "divider"
-    })]
-  }, group.key);
+    t2 = activeItem?.ChildComponent ?? group.ChildComponent;
+  }
+  const DropdownIcon = t2;
+  const t3 = `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`;
+  let t4;
+  if ($[3] !== DropdownIcon || $[4] !== anchorElem || $[5] !== editor || $[6] !== editorConfig.features.toolbarInline?.groups.length || $[7] !== group || $[8] !== groupState || $[9] !== index || $[10] !== t3 || $[11] !== toolbarStates.itemStates) {
+    t4 = _jsxs("div", {
+      className: t3,
+      "data-toolbar-group-key": group.key,
+      children: [group.type === "dropdown" && group.items.length && groupState ? _jsx(ToolbarDropdown, {
+        anchorElem,
+        editor,
+        group,
+        groupState,
+        Icon: DropdownIcon
+      }) : null, group.type === "buttons" && group.items.length ? group.items.map(item => {
+        const itemState = toolbarStates.itemStates.get(item.key);
+        return _jsx(ButtonGroupItem, {
+          active: itemState?.active ?? false,
+          anchorElem,
+          editor,
+          enabled: itemState?.enabled ?? true,
+          item
+        }, item.key);
+      }) : null, index < editorConfig.features.toolbarInline?.groups.length - 1 && _jsx("div", {
+        className: "divider"
+      })]
+    }, group.key);
+    $[3] = DropdownIcon;
+    $[4] = anchorElem;
+    $[5] = editor;
+    $[6] = editorConfig.features.toolbarInline?.groups.length;
+    $[7] = group;
+    $[8] = groupState;
+    $[9] = index;
+    $[10] = t3;
+    $[11] = toolbarStates.itemStates;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
 }
 function InlineToolbar({
   anchorElem,
   editor
 }) {
   const floatingToolbarRef = useRef(null);
+  const keyboardNavigationOptions = useMemo(() => ({
+    toolbarRef: floatingToolbarRef
+  }), []);
+  const {
+    fieldProps
+  } = useEditorConfigContext();
+  const {
+    i18n
+  } = useTranslation();
+  useToolbarKeyboardNavigation(keyboardNavigationOptions);
   const caretRef = useRef(null);
   const {
     editorConfig
@@ -202,13 +248,15 @@ function InlineToolbar({
         $updateTextFormatFloatingToolbar();
       });
     }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-      $updateTextFormatFloatingToolbar();
+      $onUpdate(() => editor.read('latest', $updateTextFormatFloatingToolbar));
       return false;
     }, COMMAND_PRIORITY_LOW));
   }, [editor, $updateTextFormatFloatingToolbar]);
   return /*#__PURE__*/_jsxs("div", {
+    "aria-label": getTranslation(fieldProps.field.label || fieldProps.path, i18n) || fieldProps.path,
     className: "inline-toolbar-popup",
     ref: floatingToolbarRef,
+    role: "toolbar",
     children: [/*#__PURE__*/_jsx("div", {
       className: "caret",
       ref: caretRef