@payloadcms/richtext-lexical 3.68.0-internal-debug.35482da → 3.68.0-internal.35482da

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

@@ -1,5 +1,7 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+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 { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui';
@@ -7,281 +9,313 @@ 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 './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);
-    }
-    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);
+function ButtonGroupItem({
+  anchorElem,
+  editor,
+  item
+}) {
+  if (item.Component) {
+    return item?.Component && /*#__PURE__*/_jsx(item.Component, {
+      anchorElem: anchorElem,
+      editor: editor,
+      item: item
+    }, item.key);
+  }
+  if (!item.ChildComponent) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ToolbarButton, {
+    editor: editor,
+    item: item,
+    children: /*#__PURE__*/_jsx(item.ChildComponent, {})
+  }, item.key);
 }
-function ToolbarGroupComponent({ anchorElem, editor, editorConfig, group, index }) {
-    const { i18n } = useTranslation();
-    const { fieldProps: { featureClientSchemaMap, schemaPath } } = useEditorConfigContext();
-    const [dropdownLabel, setDropdownLabel] = React.useState(undefined);
-    const [DropdownIcon, setDropdownIcon] = React.useState(undefined);
-    React.useEffect(()=>{
-        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
-            setDropdownIcon(()=>group.ChildComponent);
+function ToolbarGroupComponent(t0) {
+  const $ = _c(23);
+  const {
+    anchorElem,
+    editor,
+    editorConfig,
+    group,
+    index
+  } = t0;
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    fieldProps: t1
+  } = useEditorConfigContext();
+  const {
+    featureClientSchemaMap,
+    schemaPath
+  } = t1;
+  const [dropdownLabel, setDropdownLabel] = React.useState(undefined);
+  const [DropdownIcon, setDropdownIcon] = React.useState(undefined);
+  let t2;
+  if ($[0] !== group.ChildComponent || $[1] !== group.items || $[2] !== group.type) {
+    t2 = () => {
+      if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
+        setDropdownIcon(() => group.ChildComponent);
+      } else {
+        setDropdownIcon(undefined);
+      }
+    };
+    $[0] = group.ChildComponent;
+    $[1] = group.items;
+    $[2] = group.type;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== group) {
+    t3 = [group];
+    $[4] = group;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  React.useEffect(t2, t3);
+  let t4;
+  if ($[6] !== featureClientSchemaMap || $[7] !== group.ChildComponent || $[8] !== group.items || $[9] !== group.type || $[10] !== i18n || $[11] !== schemaPath) {
+    t4 = t5 => {
+      const {
+        activeItems
+      } = t5;
+      if (!activeItems.length) {
+        if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
+          setDropdownIcon(() => group.ChildComponent);
+          setDropdownLabel(undefined);
         } else {
-            setDropdownIcon(undefined);
-        }
-    }, [
-        group
-    ]);
-    const onActiveChange = React.useCallback(({ activeItems })=>{
-        if (!activeItems.length) {
-            if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
-                setDropdownIcon(()=>group.ChildComponent);
-                setDropdownLabel(undefined);
-            } else {
-                setDropdownIcon(undefined);
-                setDropdownLabel(undefined);
-            }
-            return;
+          setDropdownIcon(undefined);
+          setDropdownLabel(undefined);
         }
-        const item = activeItems[0];
-        let label = item.key;
-        if (item.label) {
-            label = typeof item.label === 'function' ? item.label({
-                featureClientSchemaMap,
-                i18n,
-                schemaPath
-            }) : item.label;
-        }
-        // Crop title to max. 25 characters
-        if (label.length > 25) {
-            label = label.substring(0, 25) + '...';
-        }
-        if (activeItems.length === 1) {
-            setDropdownLabel(label);
-            setDropdownIcon(()=>item.ChildComponent);
+        return;
+      }
+      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) + "...";
+      }
+      if (activeItems.length === 1) {
+        setDropdownLabel(label);
+        setDropdownIcon(() => item.ChildComponent);
+      } else {
+        setDropdownLabel(i18n.t("lexical:general:toolbarItemsActive", {
+          count: activeItems.length
+        }));
+        if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
+          setDropdownIcon(() => group.ChildComponent);
         } else {
-            setDropdownLabel(i18n.t('lexical:general:toolbarItemsActive', {
-                count: activeItems.length
-            }));
-            if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
-                setDropdownIcon(()=>group.ChildComponent);
-            } else {
-                setDropdownIcon(undefined);
-            }
+          setDropdownIcon(undefined);
         }
-    }, [
+      }
+    };
+    $[6] = featureClientSchemaMap;
+    $[7] = group.ChildComponent;
+    $[8] = group.items;
+    $[9] = group.type;
+    $[10] = i18n;
+    $[11] = schemaPath;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const onActiveChange = t4;
+  const t5 = `fixed-toolbar__group fixed-toolbar__group-${group.key}`;
+  let t6;
+  if ($[13] !== DropdownIcon || $[14] !== anchorElem || $[15] !== dropdownLabel || $[16] !== editor || $[17] !== editorConfig.features.toolbarFixed?.groups.length || $[18] !== group || $[19] !== index || $[20] !== onActiveChange || $[21] !== t5) {
+    t6 = _jsxs("div", {
+      className: t5,
+      "data-toolbar-group-key": group.key,
+      children: [group.type === "dropdown" && group.items.length ? DropdownIcon ? _jsx(ToolbarDropdown, {
+        anchorElem,
+        editor,
+        group,
+        Icon: DropdownIcon,
+        itemsContainerClassNames: ["fixed-toolbar__dropdown-items"],
+        label: dropdownLabel,
+        maxActiveItems: group.maxActiveItems ?? 1,
+        onActiveChange
+      }) : _jsx(ToolbarDropdown, {
+        anchorElem,
+        editor,
         group,
-        i18n,
-        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);
+        itemsContainerClassNames: ["fixed-toolbar__dropdown-items"],
+        label: dropdownLabel,
+        maxActiveItems: group.maxActiveItems ?? 1,
+        onActiveChange
+      }) : null, group.type === "buttons" && group.items.length ? group.items.map(item_0 => _jsx(ButtonGroupItem, {
+        anchorElem,
+        editor,
+        item: item_0
+      }, item_0.key)) : null, index < editorConfig.features.toolbarFixed?.groups.length - 1 && _jsx("div", {
+        className: "divider"
+      })]
+    }, group.key);
+    $[13] = DropdownIcon;
+    $[14] = anchorElem;
+    $[15] = dropdownLabel;
+    $[16] = editor;
+    $[17] = editorConfig.features.toolbarFixed?.groups.length;
+    $[18] = group;
+    $[19] = index;
+    $[20] = onActiveChange;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  return t6;
 }
-function FixedToolbar({ anchorElem, clientProps, editor, editorConfig, parentWithFixedToolbar }) {
-    const currentToolbarRef = React.useRef(null);
-    const isEditable = useLexicalEditable();
-    const { y } = useScrollInfo();
-    // Memoize the parent toolbar element
-    const parentToolbarElem = useMemo(()=>{
-        if (!parentWithFixedToolbar || clientProps?.disableIfParentHasFixedToolbar) {
-            return null;
-        }
-        const parentEditorElem = parentWithFixedToolbar.editorContainerRef.current;
-        let sibling = parentEditorElem.previousElementSibling;
-        while(sibling){
-            if (sibling.classList.contains('fixed-toolbar')) {
-                return sibling;
-            }
-            sibling = sibling.previousElementSibling;
-        }
-        return null;
-    }, [
-        clientProps?.disableIfParentHasFixedToolbar,
-        parentWithFixedToolbar
-    ]);
-    useThrottledEffect(()=>{
-        if (!parentToolbarElem) {
-            // this also checks for clientProps?.disableIfParentHasFixedToolbar indirectly, see the parentToolbarElem useMemo
-            return;
-        }
-        const currentToolbarElem = currentToolbarRef.current;
-        if (!currentToolbarElem) {
-            return;
-        }
-        const currentRect = currentToolbarElem.getBoundingClientRect();
-        const parentRect = parentToolbarElem.getBoundingClientRect();
-        // we only need to check for vertical overlap
-        const overlapping = !(currentRect.bottom < parentRect.top || currentRect.top > parentRect.bottom);
-        if (overlapping) {
-            currentToolbarElem.classList.remove('fixed-toolbar');
-            currentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--overlapping');
-            parentToolbarElem.classList.remove('fixed-toolbar');
-            parentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--hide');
-        } else {
-            if (!currentToolbarElem.classList.contains('fixed-toolbar--overlapping')) {
-                return;
-            }
-            currentToolbarElem.classList.remove('fixed-toolbar--overlapping');
-            currentToolbarElem.classList.add('fixed-toolbar');
-            parentToolbarElem.classList.remove('fixed-toolbar--hide');
-            parentToolbarElem.classList.add('fixed-toolbar');
-        }
-    }, 50, [
-        currentToolbarRef,
-        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);
+function FixedToolbar({
+  anchorElem,
+  clientProps,
+  editor,
+  editorConfig,
+  parentWithFixedToolbar
+}) {
+  const currentToolbarRef = React.useRef(null);
+  const isEditable = useLexicalEditable();
+  const {
+    y
+  } = useScrollInfo();
+  // Memoize the parent toolbar element
+  const parentToolbarElem = useMemo(() => {
+    if (!parentWithFixedToolbar || clientProps?.disableIfParentHasFixedToolbar) {
+      return null;
+    }
+    const parentEditorElem = parentWithFixedToolbar.editorContainerRef.current;
+    let sibling = parentEditorElem.previousElementSibling;
+    while (sibling) {
+      if (sibling.classList.contains('fixed-toolbar')) {
+        return sibling;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+    return null;
+  }, [clientProps?.disableIfParentHasFixedToolbar, parentWithFixedToolbar]);
+  useThrottledEffect(() => {
+    if (!parentToolbarElem) {
+      // this also checks for clientProps?.disableIfParentHasFixedToolbar indirectly, see the parentToolbarElem useMemo
+      return;
+    }
+    const currentToolbarElem = currentToolbarRef.current;
+    if (!currentToolbarElem) {
+      return;
+    }
+    const currentRect = currentToolbarElem.getBoundingClientRect();
+    const parentRect = parentToolbarElem.getBoundingClientRect();
+    // we only need to check for vertical overlap
+    const overlapping = !(currentRect.bottom < parentRect.top || currentRect.top > parentRect.bottom);
+    if (overlapping) {
+      currentToolbarElem.classList.remove('fixed-toolbar');
+      currentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--overlapping');
+      parentToolbarElem.classList.remove('fixed-toolbar');
+      parentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--hide');
+    } else {
+      if (!currentToolbarElem.classList.contains('fixed-toolbar--overlapping')) {
+        return;
+      }
+      currentToolbarElem.classList.remove('fixed-toolbar--overlapping');
+      currentToolbarElem.classList.add('fixed-toolbar');
+      parentToolbarElem.classList.remove('fixed-toolbar--hide');
+      parentToolbarElem.classList.add('fixed-toolbar');
+    }
+  }, 50, [currentToolbarRef, parentToolbarElem, y]);
+  return /*#__PURE__*/_jsx("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__*/_jsx(React.Fragment, {
+      children: editorConfig?.features && editorConfig.features?.toolbarFixed?.groups.map((group, i) => {
+        return /*#__PURE__*/_jsx(ToolbarGroupComponent, {
+          anchorElem: anchorElem,
+          editor: editor,
+          editorConfig: editorConfig,
+          group: group,
+          index: i
+        }, group.key);
+      })
+    })
+  });
 }
-const getParentEditorWithFixedToolbar = (editorConfigContext)=>{
-    if (editorConfigContext.parentEditor?.editorConfig) {
-        if (editorConfigContext.parentEditor?.editorConfig.resolvedFeatureMap.has('toolbarFixed')) {
-            return editorConfigContext.parentEditor;
-        } else {
-            if (editorConfigContext.parentEditor) {
-                return getParentEditorWithFixedToolbar(editorConfigContext.parentEditor);
-            }
-        }
+const getParentEditorWithFixedToolbar = editorConfigContext => {
+  if (editorConfigContext.parentEditor?.editorConfig) {
+    if (editorConfigContext.parentEditor?.editorConfig.resolvedFeatureMap.has('toolbarFixed')) {
+      return editorConfigContext.parentEditor;
+    } else {
+      if (editorConfigContext.parentEditor) {
+        return getParentEditorWithFixedToolbar(editorConfigContext.parentEditor);
+      }
     }
-    return false;
+  }
+  return false;
 };
-export const FixedToolbarPlugin = ({ clientProps })=>{
-    const [currentEditor] = useLexicalComposerContext();
-    const editorConfigContext = useEditorConfigContext();
-    const isEditable = useLexicalEditable();
-    if (!isEditable) {
-        return null;
-    }
-    const { editorConfig: currentEditorConfig } = editorConfigContext;
-    const editor = clientProps.applyToFocusedEditor ? editorConfigContext.focusedEditor?.editor || currentEditor : currentEditor;
-    const editorConfig = clientProps.applyToFocusedEditor ? editorConfigContext.focusedEditor?.editorConfig || currentEditorConfig : currentEditorConfig;
-    const parentWithFixedToolbar = getParentEditorWithFixedToolbar(editorConfigContext);
-    if (clientProps?.disableIfParentHasFixedToolbar) {
+export const FixedToolbarPlugin = t0 => {
+  const $ = _c(6);
+  const {
+    clientProps
+  } = t0;
+  const [currentEditor] = useLexicalComposerContext();
+  const editorConfigContext = useEditorConfigContext();
+  const isEditable = useLexicalEditable();
+  if (!isEditable) {
+    return null;
+  }
+  const {
+    editorConfig: currentEditorConfig
+  } = editorConfigContext;
+  const editor = clientProps.applyToFocusedEditor ? editorConfigContext.focusedEditor?.editor || currentEditor : currentEditor;
+  const editorConfig = clientProps.applyToFocusedEditor ? editorConfigContext.focusedEditor?.editorConfig || currentEditorConfig : currentEditorConfig;
+  let t1;
+  let t2;
+  if ($[0] !== clientProps.disableIfParentHasFixedToolbar || $[1] !== editor || $[2] !== editorConfig || $[3] !== editorConfigContext) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const parentWithFixedToolbar = getParentEditorWithFixedToolbar(editorConfigContext);
+      if (clientProps?.disableIfParentHasFixedToolbar) {
         if (parentWithFixedToolbar) {
-            return null;
+          t2 = null;
+          break bb0;
         }
-    }
-    if (!editorConfig?.features?.toolbarFixed?.groups?.length) {
-        return null;
-    }
-    return /*#__PURE__*/ _jsxDEV(FixedToolbar, {
+      }
+      if (!editorConfig?.features?.toolbarFixed?.groups?.length) {
+        t2 = null;
+        break bb0;
+      }
+      t1 = _jsx(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);
+        editor,
+        editorConfig,
+        parentWithFixedToolbar
+      });
+    }
+    $[0] = clientProps.disableIfParentHasFixedToolbar;
+    $[1] = editor;
+    $[2] = editorConfig;
+    $[3] = editorConfigContext;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map