@payloadcms/richtext-lexical 3.68.0-internal-debug.56c9b68 → 3.68.0-internal-debug.185cc5f

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

@@ -1,6 +1,4 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react';
 const baseClass = 'toolbar-popup__dropdown';
@@ -9,188 +7,162 @@ import { useTranslation } from '@payloadcms/ui';
 import { $getSelection } from 'lexical';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js';
+import './index.scss';
 import { DropDown, DropDownItem } from './DropDown.js';
-const ToolbarItem = t0 => {
-  const $ = _c(14);
-  const {
-    active,
-    anchorElem,
-    editor,
-    enabled,
-    item
-  } = t0;
-  const {
-    i18n
-  } = useTranslation();
-  const {
-    fieldProps: t1
-  } = useEditorConfigContext();
-  const {
-    featureClientSchemaMap,
-    schemaPath
-  } = t1;
-  if (item.Component) {
-    let t2;
-    if ($[0] !== active || $[1] !== anchorElem || $[2] !== editor || $[3] !== enabled || $[4] !== item) {
-      t2 = item?.Component && _jsx(item.Component, {
-        active,
-        anchorElem,
-        editor,
-        enabled,
-        item
-      }, item.key);
-      $[0] = active;
-      $[1] = anchorElem;
-      $[2] = editor;
-      $[3] = enabled;
-      $[4] = item;
-      $[5] = t2;
-    } else {
-      t2 = $[5];
+const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
+    const { i18n } = useTranslation();
+    const { fieldProps: { featureClientSchemaMap, schemaPath } } = useEditorConfigContext();
+    if (item.Component) {
+        return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
+            active: active,
+            anchorElem: anchorElem,
+            editor: editor,
+            enabled: enabled,
+            item: item
+        }, item.key);
     }
-    return t2;
-  }
-  let t2;
-  if ($[6] !== active || $[7] !== editor || $[8] !== enabled || $[9] !== featureClientSchemaMap || $[10] !== i18n || $[11] !== item || $[12] !== schemaPath) {
     let title = item.key;
-    let croppedTitle;
+    let croppedTitle = item.key;
     if (item.label) {
-      title = typeof item.label === "function" ? item.label({
-        featureClientSchemaMap,
-        i18n,
-        schemaPath
-      }) : item.label;
+        title = typeof item.label === 'function' ? item.label({
+            featureClientSchemaMap,
+            i18n,
+            schemaPath
+        }) : item.label;
     }
+    // Crop title to max. 25 characters
     if (title.length > 25) {
-      croppedTitle = title.substring(0, 25) + "...";
+        croppedTitle = title.substring(0, 25) + '...';
     } else {
-      croppedTitle = title;
+        croppedTitle = title;
     }
-    t2 = _jsx(DropDownItem, {
-      active,
-      editor,
-      enabled,
-      Icon: item?.ChildComponent ? _jsx(item.ChildComponent, {}) : undefined,
-      item,
-      itemKey: item.key,
-      tooltip: title,
-      children: _jsx("span", {
-        className: "text",
-        children: croppedTitle
-      })
+    return /*#__PURE__*/ _jsx(DropDownItem, {
+        active: active,
+        editor: editor,
+        enabled: enabled,
+        Icon: item?.ChildComponent ? /*#__PURE__*/ _jsx(item.ChildComponent, {}) : undefined,
+        item: item,
+        itemKey: item.key,
+        tooltip: title,
+        children: /*#__PURE__*/ _jsx("span", {
+            className: "text",
+            children: croppedTitle
+        })
     }, item.key);
-    $[6] = active;
-    $[7] = editor;
-    $[8] = enabled;
-    $[9] = featureClientSchemaMap;
-    $[10] = i18n;
-    $[11] = item;
-    $[12] = schemaPath;
-    $[13] = t2;
-  } else {
-    t2 = $[13];
-  }
-  return t2;
 };
-const MemoToolbarItem = /*#__PURE__*/React.memo(ToolbarItem);
-export const ToolbarDropdown = ({
-  anchorElem,
-  classNames,
-  editor,
-  group,
-  Icon,
-  itemsContainerClassNames,
-  label,
-  maxActiveItems,
-  onActiveChange
-}) => {
-  const [toolbarState, setToolbarState] = React.useState({
-    activeItemKeys: [],
-    enabledGroup: true,
-    enabledItemKeys: []
-  });
-  const deferredToolbarState = useDeferredValue(toolbarState);
-  const editorConfigContext = useEditorConfigContext();
-  const {
-    items,
-    key: groupKey
-  } = group;
-  const runDeprioritized = useRunDeprioritized();
-  const updateStates = useCallback(() => {
-    editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (!selection) {
-        return;
-      }
-      const _activeItemKeys = [];
-      const _activeItems = [];
-      const _enabledItemKeys = [];
-      for (const item of items) {
-        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
-          const isActive = item.isActive({
-            editor,
-            editorConfigContext,
-            selection
-          });
-          if (isActive) {
-            _activeItemKeys.push(item.key);
-            _activeItems.push(item);
-          }
-        }
-        if (item.isEnabled) {
-          const isEnabled = item.isEnabled({
-            editor,
-            editorConfigContext,
-            selection
-          });
-          if (isEnabled) {
-            _enabledItemKeys.push(item.key);
-          }
-        } else {
-          _enabledItemKeys.push(item.key);
-        }
-      }
-      setToolbarState({
-        activeItemKeys: _activeItemKeys,
-        enabledGroup: group.isEnabled ? group.isEnabled({
-          editor,
-          editorConfigContext,
-          selection
-        }) : true,
-        enabledItemKeys: _enabledItemKeys
-      });
-      if (onActiveChange) {
-        onActiveChange({
-          activeItems: _activeItems
-        });
-      }
+const MemoToolbarItem = /*#__PURE__*/ React.memo(ToolbarItem);
+export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, Icon, itemsContainerClassNames, label, maxActiveItems, onActiveChange })=>/**
+   * Maximum number of active items allowed. This is a performance optimization to prevent
+   * unnecessary item active checks when the maximum number of active items is reached.
+   */ {
+    const [toolbarState, setToolbarState] = React.useState({
+        activeItemKeys: [],
+        enabledGroup: true,
+        enabledItemKeys: []
     });
-  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange]);
-  useEffect(() => {
-    // Run on mount in order to update states when dropdown is opened
-    void runDeprioritized(updateStates);
-    return mergeRegister(editor.registerUpdateListener(async () => {
-      await runDeprioritized(updateStates);
-    }));
-  }, [editor, runDeprioritized, updateStates]);
-  const renderedItems = useMemo(() => {
-    return items?.length ? items.map(item_0 => /*#__PURE__*/_jsx(MemoToolbarItem, {
-      active: deferredToolbarState.activeItemKeys.includes(item_0.key),
-      anchorElem: anchorElem,
-      editor: editor,
-      enabled: deferredToolbarState.enabledItemKeys.includes(item_0.key),
-      item: item_0
-    }, item_0.key)) : null;
-  }, [items, deferredToolbarState, anchorElem, editor]);
-  return /*#__PURE__*/_jsx(DropDown, {
-    buttonAriaLabel: `${groupKey} dropdown`,
-    buttonClassName: [baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])].filter(Boolean).join(' '),
-    disabled: !deferredToolbarState.enabledGroup,
-    dropdownKey: groupKey,
-    Icon: Icon,
-    itemsContainerClassNames: [`${baseClass}-items`, ...(itemsContainerClassNames || [])],
-    label: label,
-    children: renderedItems
-  }, groupKey);
+    const deferredToolbarState = useDeferredValue(toolbarState);
+    const editorConfigContext = useEditorConfigContext();
+    const { items, key: groupKey } = group;
+    const runDeprioritized = useRunDeprioritized();
+    const updateStates = useCallback(()=>{
+        editor.getEditorState().read(()=>{
+            const selection = $getSelection();
+            if (!selection) {
+                return;
+            }
+            const _activeItemKeys = [];
+            const _activeItems = [];
+            const _enabledItemKeys = [];
+            for (const item of items){
+                if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
+                    const isActive = item.isActive({
+                        editor,
+                        editorConfigContext,
+                        selection
+                    });
+                    if (isActive) {
+                        _activeItemKeys.push(item.key);
+                        _activeItems.push(item);
+                    }
+                }
+                if (item.isEnabled) {
+                    const isEnabled = item.isEnabled({
+                        editor,
+                        editorConfigContext,
+                        selection
+                    });
+                    if (isEnabled) {
+                        _enabledItemKeys.push(item.key);
+                    }
+                } else {
+                    _enabledItemKeys.push(item.key);
+                }
+            }
+            setToolbarState({
+                activeItemKeys: _activeItemKeys,
+                enabledGroup: group.isEnabled ? group.isEnabled({
+                    editor,
+                    editorConfigContext,
+                    selection
+                }) : true,
+                enabledItemKeys: _enabledItemKeys
+            });
+            if (onActiveChange) {
+                onActiveChange({
+                    activeItems: _activeItems
+                });
+            }
+        });
+    }, [
+        editor,
+        editorConfigContext,
+        group,
+        items,
+        maxActiveItems,
+        onActiveChange
+    ]);
+    useEffect(()=>{
+        // Run on mount in order to update states when dropdown is opened
+        void runDeprioritized(updateStates);
+        return mergeRegister(editor.registerUpdateListener(async ()=>{
+            await runDeprioritized(updateStates);
+        }));
+    }, [
+        editor,
+        runDeprioritized,
+        updateStates
+    ]);
+    const renderedItems = useMemo(()=>{
+        return items?.length ? items.map((item)=>/*#__PURE__*/ _jsx(MemoToolbarItem, {
+                active: deferredToolbarState.activeItemKeys.includes(item.key),
+                anchorElem: anchorElem,
+                editor: editor,
+                enabled: deferredToolbarState.enabledItemKeys.includes(item.key),
+                item: item
+            }, item.key)) : null;
+    }, [
+        items,
+        deferredToolbarState,
+        anchorElem,
+        editor
+    ]);
+    return /*#__PURE__*/ _jsx(DropDown, {
+        buttonAriaLabel: `${groupKey} dropdown`,
+        buttonClassName: [
+            baseClass,
+            `${baseClass}-${groupKey}`,
+            ...classNames || []
+        ].filter(Boolean).join(' '),
+        disabled: !deferredToolbarState.enabledGroup,
+        dropdownKey: groupKey,
+        Icon: Icon,
+        itemsContainerClassNames: [
+            `${baseClass}-items`,
+            ...itemsContainerClassNames || []
+        ],
+        label: label,
+        children: renderedItems
+    }, groupKey);
 };
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","Component","t2","_jsx","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","children","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","Component","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","span","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"mappings":"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"}

package/dist/features/toolbars/types.js

@@ -1,2 +1,30 @@
-export {};
+/**
+   * The dropdown toolbar ChildComponent allows you to pass in a React Component which will be displayed within the dropdown button.
+   */ /**
+   * This is optional and controls if the toolbar group is highlighted or not.
+   */ /**
+   * All toolbar items part of this toolbar group need to be added here.
+   */ /**
+   * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.
+   */ /**
+   * The maximum number of active items that can be selected at once.
+   * Increasing this will hurt performance, as more nodes need to be checked for their active state.
+   *
+   * E.g. if this is 1, we can stop checking nodes once we find an active node.
+   *
+   * @default 1
+   */ /**
+   * Determines where the toolbar group will be.
+   */ /**
+   * Controls the toolbar group type. Set to `dropdown` to create a buttons toolbar group, which displays toolbar items vertically using their icons and labels, if the dropdown is open.
+   */ /**
+   * All toolbar items part of this toolbar group need to be added here.
+   */ /**
+   * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.
+   */ /**
+   * Determines where the toolbar group will be.
+   */ /**
+   * Controls the toolbar group type. Set to `buttons` to create a buttons toolbar group, which displays toolbar items horizontally using only their icons.
+   */ /** A React component which is rendered within your toolbar item's default button component. Usually, you want this to be an icon. */ /** A React component which is rendered in place of the toolbar item's default button component, thus completely replacing it. The `ChildComponent` and `onSelect` properties will be ignored. */ /** This is optional and controls if the toolbar item is highlighted or not. */ /** This is optional and controls if the toolbar item is clickable or not. If `false` is returned here, it will be grayed out and unclickable. */ /** Each toolbar item needs to have a unique key. */ /** The label will be displayed in your toolbar item, if it's within a dropdown group. In order to make use of i18n, this can be a function. */ /** Each toolbar item needs to have a unique key. */ export { };
+
 //# sourceMappingURL=types.js.map

package/dist/features/toolbars/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/features/toolbars/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { BaseSelection, LexicalEditor } from 'lexical'\nimport type React from 'react'\n\nimport type { EditorConfigContextType } from '../../lexical/config/client/EditorConfigProvider.js'\nimport type { FeatureClientSchemaMap } from '../../types.js'\n\nexport type ToolbarGroup = ToolbarButtonsGroup | ToolbarDropdownGroup\n\nexport type ToolbarDropdownGroup = {\n  /**\n   * The dropdown toolbar ChildComponent allows you to pass in a React Component which will be displayed within the dropdown button.\n   */\n  ChildComponent?: React.FC\n  /**\n   * This is optional and controls if the toolbar group is highlighted or not.\n   */\n  isEnabled?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /**\n   * All toolbar items part of this toolbar group need to be added here.\n   */\n  items: Array<ToolbarGroupItem>\n  /**\n   * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n   */\n  key: string\n  /**\n   * The maximum number of active items that can be selected at once.\n   * Increasing this will hurt performance, as more nodes need to be checked for their active state.\n   *\n   * E.g. if this is 1, we can stop checking nodes once we find an active node.\n   *\n   * @default 1\n   */\n  maxActiveItems?: number\n  /**\n   * Determines where the toolbar group will be.\n   */\n  order?: number\n  /**\n   * Controls the toolbar group type. Set to `dropdown` to create a buttons toolbar group, which displays toolbar items vertically using their icons and labels, if the dropdown is open.\n   */\n  type: 'dropdown'\n}\n\nexport type ToolbarButtonsGroup = {\n  /**\n   * All toolbar items part of this toolbar group need to be added here.\n   */\n  items: Array<ToolbarGroupItem>\n  /**\n   * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n   */\n  key: string\n  /**\n   * Determines where the toolbar group will be.\n   */\n  order?: number\n  /**\n   * Controls the toolbar group type. Set to `buttons` to create a buttons toolbar group, which displays toolbar items horizontally using only their icons.\n   */\n  type: 'buttons'\n}\n\nexport type ToolbarGroupItem = {\n  /** A React component which is rendered within your toolbar item's default button component. Usually, you want this to be an icon. */\n  ChildComponent?: React.FC\n  /** A React component which is rendered in place of the toolbar item's default button component, thus completely replacing it. The `ChildComponent` and `onSelect` properties will be ignored. */\n  Component?: React.FC<{\n    active?: boolean\n    anchorElem: HTMLElement\n    editor: LexicalEditor\n    enabled?: boolean\n    item: ToolbarGroupItem\n  }>\n  /** This is optional and controls if the toolbar item is highlighted or not. */\n  isActive?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** This is optional and controls if the toolbar item is clickable or not. If `false` is returned here, it will be grayed out and unclickable. */\n  isEnabled?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** Each toolbar item needs to have a unique key. */\n  key: string\n  /** The label will be displayed in your toolbar item, if it's within a dropdown group. In order to make use of i18n, this can be a function. */\n  label?:\n    | ((args: {\n        featureClientSchemaMap: FeatureClientSchemaMap\n        i18n: I18nClient<{}, string>\n        schemaPath: string\n      }) => string)\n    | string\n  /** Each toolbar item needs to have a unique key. */\n  onSelect?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void\n  order?: number\n}\n\nexport type CustomGroups = Record<\n  string,\n  | Partial<Omit<ToolbarButtonsGroup, 'items' | 'key'>>\n  | Partial<Omit<ToolbarDropdownGroup, 'isEnabled' | 'items' | 'key'>>\n>\n"],"mappings":"AAsHA","ignoreList":[]}
+{"version":3,"sources":["../../../src/features/toolbars/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { BaseSelection, LexicalEditor } from 'lexical'\nimport type React from 'react'\n\nimport type { EditorConfigContextType } from '../../lexical/config/client/EditorConfigProvider.js'\nimport type { FeatureClientSchemaMap } from '../../types.js'\n\nexport type ToolbarGroup = ToolbarButtonsGroup | ToolbarDropdownGroup\n\nexport type ToolbarDropdownGroup = {\n  /**\n   * The dropdown toolbar ChildComponent allows you to pass in a React Component which will be displayed within the dropdown button.\n   */\n  ChildComponent?: React.FC\n  /**\n   * This is optional and controls if the toolbar group is highlighted or not.\n   */\n  isEnabled?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /**\n   * All toolbar items part of this toolbar group need to be added here.\n   */\n  items: Array<ToolbarGroupItem>\n  /**\n   * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n   */\n  key: string\n  /**\n   * The maximum number of active items that can be selected at once.\n   * Increasing this will hurt performance, as more nodes need to be checked for their active state.\n   *\n   * E.g. if this is 1, we can stop checking nodes once we find an active node.\n   *\n   * @default 1\n   */\n  maxActiveItems?: number\n  /**\n   * Determines where the toolbar group will be.\n   */\n  order?: number\n  /**\n   * Controls the toolbar group type. Set to `dropdown` to create a buttons toolbar group, which displays toolbar items vertically using their icons and labels, if the dropdown is open.\n   */\n  type: 'dropdown'\n}\n\nexport type ToolbarButtonsGroup = {\n  /**\n   * All toolbar items part of this toolbar group need to be added here.\n   */\n  items: Array<ToolbarGroupItem>\n  /**\n   * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n   */\n  key: string\n  /**\n   * Determines where the toolbar group will be.\n   */\n  order?: number\n  /**\n   * Controls the toolbar group type. Set to `buttons` to create a buttons toolbar group, which displays toolbar items horizontally using only their icons.\n   */\n  type: 'buttons'\n}\n\nexport type ToolbarGroupItem = {\n  /** A React component which is rendered within your toolbar item's default button component. Usually, you want this to be an icon. */\n  ChildComponent?: React.FC\n  /** A React component which is rendered in place of the toolbar item's default button component, thus completely replacing it. The `ChildComponent` and `onSelect` properties will be ignored. */\n  Component?: React.FC<{\n    active?: boolean\n    anchorElem: HTMLElement\n    editor: LexicalEditor\n    enabled?: boolean\n    item: ToolbarGroupItem\n  }>\n  /** This is optional and controls if the toolbar item is highlighted or not. */\n  isActive?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** This is optional and controls if the toolbar item is clickable or not. If `false` is returned here, it will be grayed out and unclickable. */\n  isEnabled?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** Each toolbar item needs to have a unique key. */\n  key: string\n  /** The label will be displayed in your toolbar item, if it's within a dropdown group. In order to make use of i18n, this can be a function. */\n  label?:\n    | ((args: {\n        featureClientSchemaMap: FeatureClientSchemaMap\n        i18n: I18nClient<{}, string>\n        schemaPath: string\n      }) => string)\n    | string\n  /** Each toolbar item needs to have a unique key. */\n  onSelect?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void\n  order?: number\n}\n\nexport type CustomGroups = Record<\n  string,\n  | Partial<Omit<ToolbarButtonsGroup, 'items' | 'key'>>\n  | Partial<Omit<ToolbarDropdownGroup, 'isEnabled' | 'items' | 'key'>>\n>\n"],"names":[],"mappings":"AAUE;;GAEC,GAED;;GAEC,GAUD;;GAEC,GAED;;GAEC,GAED;;;;;;;GAOC,GAED;;GAEC,GAED;;GAEC,GAKD;;GAEC,GAED;;GAEC,GAED;;GAEC,GAED;;GAEC,GAKD,mIAAmI,GAEnI,+LAA+L,GAQ/L,6EAA6E,GAU7E,+IAA+I,GAU/I,kDAAkD,GAElD,6IAA6I,GAQ7I,kDAAkD,GAKpD,WAIC"}

package/dist/features/typeUtilities.js

@@ -1,7 +1,8 @@
 /**
  * Utility function to create a node with hooks. You don't have to use this utility, but it improves type inference
  * @param node the node
- */export function createNode(node) {
-  return node;
+ */ export function createNode(node) {
+    return node;
 }
+
 //# sourceMappingURL=typeUtilities.js.map

package/dist/features/typeUtilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"typeUtilities.js","names":["createNode","node"],"sources":["../../src/features/typeUtilities.ts"],"sourcesContent":["import type { LexicalNode } from 'lexical'\n\nimport type { NodeWithHooks } from './typesServer.js'\n\n/**\n * Utility function to create a node with hooks. You don't have to use this utility, but it improves type inference\n * @param node the node\n */\nexport function createNode<Node extends LexicalNode>(\n  node: NodeWithHooks<Node>,\n): NodeWithHooks<Node> {\n  return node\n}\n"],"mappings":"AAIA;;;GAIA,OAAO,SAASA,WACdC,IAAyB;EAEzB,OAAOA,IAAA;AACT","ignoreList":[]}
+{"version":3,"sources":["../../src/features/typeUtilities.ts"],"sourcesContent":["import type { LexicalNode } from 'lexical'\n\nimport type { NodeWithHooks } from './typesServer.js'\n\n/**\n * Utility function to create a node with hooks. You don't have to use this utility, but it improves type inference\n * @param node the node\n */\nexport function createNode<Node extends LexicalNode>(\n  node: NodeWithHooks<Node>,\n): NodeWithHooks<Node> {\n  return node\n}\n"],"names":["createNode","node"],"mappings":"AAIA;;;CAGC,GACD,OAAO,SAASA,WACdC,IAAyB;IAEzB,OAAOA;AACT"}

package/dist/features/typesClient.js

@@ -1,2 +1,62 @@
-export {};
+/**
+ * No dependencies => Features need to be sorted on the server first, then sent to client in right order
+ */ /**
+   * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to
+   */ /** unSanitizedEditorConfig.features, but mapped */ // other resolved features, which have been loaded before this one. All features declared in 'dependencies' should be available here
+// unSanitized EditorConfig,
+/**
+ * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more "outside" functionality
+ */ // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+/**
+   * The text formats which are enabled by this feature.
+   */ /**
+   * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more "outside" functionality
+   */ // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more "outside" functionality
+// Determines at which position the Component will be added.
+// Determines at which position the Component will be added.
+/**
+   * Client Features can register their own providers, which will be nested below the EditorConfigProvider
+   */ /**
+   * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to
+   */ /**
+     * Dynamic groups allow you to add different groups depending on the query string (so, the text after the slash).
+     * Thus, to re-calculate the available groups, this function will be called every time you type after the /.
+     *
+     * The groups provided by dynamicGroups will be merged with the static groups provided by the groups property.
+     */ /**
+     * Static array of groups together with the items in them. These will always be present.
+     * While typing after the /, they will be filtered by the query string and the keywords, key and display name of the items.
+     */ /**
+   * An opt-in, classic fixed toolbar which stays at the top of the editor
+   */ /**
+   * The default, floating toolbar which appears when you select text.
+   */ /**
+     * Array of toolbar groups / sections. Each section can contain multiple toolbar items.
+     */ export { }; /** The keys of all enabled features */  /**
+   * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more "outside" functionality
+   */  /**
+     * Dynamic groups allow you to add different groups depending on the query string (so, the text after the slash).
+     * Thus, to re-calculate the available groups, this function will be called every time you type after the /.
+     *
+     * The groups provided by dynamicGroups will be merged with the static groups provided by the groups property.
+     */  /**
+     * Static array of groups together with the items in them. These will always be present.
+     * While typing after the /, they will be filtered by the query string and the keywords, key and display name of the items.
+     */ 
+
 //# sourceMappingURL=typesClient.js.map

package/dist/features/typesClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"typesClient.js","names":[],"sources":["../../src/features/typesClient.ts"],"sourcesContent":["import type {\n  Klass,\n  LexicalEditor,\n  LexicalNode,\n  LexicalNodeReplacement,\n  TextFormatType,\n} from 'lexical'\nimport type { ClientConfig, RichTextFieldClient } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\n\nimport type { ClientEditorConfig } from '../lexical/config/types.js'\nimport type { SlashMenuGroup } from '../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'\nimport type { Transformer } from '../packages/@lexical/markdown/index.js'\nimport type { FeatureClientSchemaMap } from '../types.js'\nimport type { ToolbarGroup } from './toolbars/types.js'\n\nexport type FeatureProviderProviderClient<\n  UnSanitizedClientFeatureProps = undefined,\n  ClientFeatureProps = UnSanitizedClientFeatureProps,\n> = (props: BaseClientFeatureProps<ClientFeatureProps>) => FeatureProviderClient<ClientFeatureProps>\n\n/**\n * No dependencies => Features need to be sorted on the server first, then sent to client in right order\n */\nexport type FeatureProviderClient<\n  UnSanitizedClientFeatureProps = undefined,\n  ClientFeatureProps = UnSanitizedClientFeatureProps,\n> = {\n  /**\n   * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to\n   */\n  clientFeatureProps: BaseClientFeatureProps<UnSanitizedClientFeatureProps>\n  feature:\n    | ((props: {\n        config: ClientConfig\n        featureClientImportMap: Record<string, any>\n        featureClientSchemaMap: FeatureClientSchemaMap\n        /** unSanitizedEditorConfig.features, but mapped */\n        featureProviderMap: ClientFeatureProviderMap\n        field?: RichTextFieldClient\n        // other resolved features, which have been loaded before this one. All features declared in 'dependencies' should be available here\n        resolvedFeatures: ResolvedClientFeatureMap\n        schemaPath: string\n        // unSanitized EditorConfig,\n        unSanitizedEditorConfig: ClientEditorConfig\n      }) => ClientFeature<ClientFeatureProps>)\n    | ClientFeature<ClientFeatureProps>\n}\n\nexport type PluginComponent<ClientFeatureProps = any> = React.FC<{\n  clientProps: ClientFeatureProps\n}>\nexport type PluginComponentWithAnchor<ClientFeatureProps = any> = React.FC<{\n  anchorElem: HTMLElement\n  clientProps: ClientFeatureProps\n}>\n\n/**\n * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n */\nexport type SanitizedPlugin =\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponent\n      key: string\n      position: 'bottom' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponent\n      key: string\n      position: 'normal' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponent\n      key: string\n      position: 'top' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponentWithAnchor\n      desktopOnly?: boolean\n      key: string\n      position: 'floatingAnchorElem' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      Component: PluginComponent\n      key: string\n      position: 'aboveContainer'\n    }\n  | {\n      clientProps: any\n      Component: PluginComponent\n      key: string\n      position: 'belowContainer'\n    }\n\nexport type ClientFeature<ClientFeatureProps> = {\n  /**\n   * The text formats which are enabled by this feature.\n   */\n  enableFormats?: TextFormatType[]\n  markdownTransformers?: (\n    | ((props: {\n        allNodes: Array<Klass<LexicalNode> | LexicalNodeReplacement>\n        allTransformers: Transformer[]\n      }) => Transformer)\n    | Transformer\n  )[]\n  nodes?: Array<Klass<LexicalNode> | LexicalNodeReplacement>\n  /**\n   * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n   */\n  plugins?: Array<\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'aboveContainer' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'bottom' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'normal' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'top' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponentWithAnchor<ClientFeatureProps>\n        position: 'floatingAnchorElem' // Determines at which position the Component will be added.\n      }\n    | {\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'belowContainer' // Determines at which position the Component will be added.\n      }\n  >\n  /**\n   * Client Features can register their own providers, which will be nested below the EditorConfigProvider\n   */\n  providers?: Array<React.FC<{ children: JSX.Element }>>\n  /**\n   * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to\n   */\n  sanitizedClientFeatureProps?: BaseClientFeatureProps<ClientFeatureProps>\n  slashMenu?: {\n    /**\n     * Dynamic groups allow you to add different groups depending on the query string (so, the text after the slash).\n     * Thus, to re-calculate the available groups, this function will be called every time you type after the /.\n     *\n     * The groups provided by dynamicGroups will be merged with the static groups provided by the groups property.\n     */\n    dynamicGroups?: ({\n      editor,\n      queryString,\n    }: {\n      editor: LexicalEditor\n      queryString: string\n    }) => SlashMenuGroup[]\n    /**\n     * Static array of groups together with the items in them. These will always be present.\n     * While typing after the /, they will be filtered by the query string and the keywords, key and display name of the items.\n     */\n    groups?: SlashMenuGroup[]\n  }\n  /**\n   * An opt-in, classic fixed toolbar which stays at the top of the editor\n   */\n  toolbarFixed?: {\n    groups: ToolbarGroup[]\n  }\n  /**\n   * The default, floating toolbar which appears when you select text.\n   */\n  toolbarInline?: {\n    /**\n     * Array of toolbar groups / sections. Each section can contain multiple toolbar items.\n     */\n    groups: ToolbarGroup[]\n  }\n}\n\nexport type BaseClientFeatureProps<ClientFeatureProps> = ClientFeatureProps extends undefined\n  ? {\n      featureKey: string\n      order: number\n    }\n  : {\n      featureKey: string\n      order: number\n    } & ClientFeatureProps\n\nexport type ResolvedClientFeature<ClientFeatureProps> = {\n  key: string\n  order: number\n} & ClientFeature<ClientFeatureProps>\n\nexport type ResolvedClientFeatureMap = Map<string, ResolvedClientFeature<any>>\n\nexport type ClientFeatureProviderMap = Map<string, FeatureProviderClient<any, any>>\n\nexport type SanitizedClientFeatures = {\n  /** The keys of all enabled features */\n  enabledFeatures: string[]\n  enabledFormats: TextFormatType[]\n  markdownTransformers: Transformer[]\n\n  /**\n   * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n   */\n  plugins?: Array<SanitizedPlugin>\n  slashMenu: {\n    /**\n     * Dynamic groups allow you to add different groups depending on the query string (so, the text after the slash).\n     * Thus, to re-calculate the available groups, this function will be called every time you type after the /.\n     *\n     * The groups provided by dynamicGroups will be merged with the static groups provided by the groups property.\n     */\n    dynamicGroups: Array<\n      ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => SlashMenuGroup[]\n    >\n    /**\n     * Static array of groups together with the items in them. These will always be present.\n     * While typing after the /, they will be filtered by the query string and the keywords, key and display name of the items.\n     */\n    groups: SlashMenuGroup[]\n  }\n} & Required<\n  Pick<ResolvedClientFeature<unknown>, 'nodes' | 'providers' | 'toolbarFixed' | 'toolbarInline'>\n>\n"],"mappings":"AAuNA","ignoreList":[]}
+{"version":3,"sources":["../../src/features/typesClient.ts"],"sourcesContent":["import type {\n  Klass,\n  LexicalEditor,\n  LexicalNode,\n  LexicalNodeReplacement,\n  TextFormatType,\n} from 'lexical'\nimport type { ClientConfig, RichTextFieldClient } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\n\nimport type { ClientEditorConfig } from '../lexical/config/types.js'\nimport type { SlashMenuGroup } from '../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'\nimport type { Transformer } from '../packages/@lexical/markdown/index.js'\nimport type { FeatureClientSchemaMap } from '../types.js'\nimport type { ToolbarGroup } from './toolbars/types.js'\n\nexport type FeatureProviderProviderClient<\n  UnSanitizedClientFeatureProps = undefined,\n  ClientFeatureProps = UnSanitizedClientFeatureProps,\n> = (props: BaseClientFeatureProps<ClientFeatureProps>) => FeatureProviderClient<ClientFeatureProps>\n\n/**\n * No dependencies => Features need to be sorted on the server first, then sent to client in right order\n */\nexport type FeatureProviderClient<\n  UnSanitizedClientFeatureProps = undefined,\n  ClientFeatureProps = UnSanitizedClientFeatureProps,\n> = {\n  /**\n   * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to\n   */\n  clientFeatureProps: BaseClientFeatureProps<UnSanitizedClientFeatureProps>\n  feature:\n    | ((props: {\n        config: ClientConfig\n        featureClientImportMap: Record<string, any>\n        featureClientSchemaMap: FeatureClientSchemaMap\n        /** unSanitizedEditorConfig.features, but mapped */\n        featureProviderMap: ClientFeatureProviderMap\n        field?: RichTextFieldClient\n        // other resolved features, which have been loaded before this one. All features declared in 'dependencies' should be available here\n        resolvedFeatures: ResolvedClientFeatureMap\n        schemaPath: string\n        // unSanitized EditorConfig,\n        unSanitizedEditorConfig: ClientEditorConfig\n      }) => ClientFeature<ClientFeatureProps>)\n    | ClientFeature<ClientFeatureProps>\n}\n\nexport type PluginComponent<ClientFeatureProps = any> = React.FC<{\n  clientProps: ClientFeatureProps\n}>\nexport type PluginComponentWithAnchor<ClientFeatureProps = any> = React.FC<{\n  anchorElem: HTMLElement\n  clientProps: ClientFeatureProps\n}>\n\n/**\n * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n */\nexport type SanitizedPlugin =\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponent\n      key: string\n      position: 'bottom' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponent\n      key: string\n      position: 'normal' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponent\n      key: string\n      position: 'top' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n      Component: PluginComponentWithAnchor\n      desktopOnly?: boolean\n      key: string\n      position: 'floatingAnchorElem' // Determines at which position the Component will be added.\n    }\n  | {\n      clientProps: any\n      Component: PluginComponent\n      key: string\n      position: 'aboveContainer'\n    }\n  | {\n      clientProps: any\n      Component: PluginComponent\n      key: string\n      position: 'belowContainer'\n    }\n\nexport type ClientFeature<ClientFeatureProps> = {\n  /**\n   * The text formats which are enabled by this feature.\n   */\n  enableFormats?: TextFormatType[]\n  markdownTransformers?: (\n    | ((props: {\n        allNodes: Array<Klass<LexicalNode> | LexicalNodeReplacement>\n        allTransformers: Transformer[]\n      }) => Transformer)\n    | Transformer\n  )[]\n  nodes?: Array<Klass<LexicalNode> | LexicalNodeReplacement>\n  /**\n   * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n   */\n  plugins?: Array<\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'aboveContainer' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'bottom' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'normal' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'top' // Determines at which position the Component will be added.\n      }\n    | {\n        // plugins are anything which is not directly part of the editor. Like, creating a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n        Component: PluginComponentWithAnchor<ClientFeatureProps>\n        position: 'floatingAnchorElem' // Determines at which position the Component will be added.\n      }\n    | {\n        Component: PluginComponent<ClientFeatureProps>\n        position: 'belowContainer' // Determines at which position the Component will be added.\n      }\n  >\n  /**\n   * Client Features can register their own providers, which will be nested below the EditorConfigProvider\n   */\n  providers?: Array<React.FC<{ children: JSX.Element }>>\n  /**\n   * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to\n   */\n  sanitizedClientFeatureProps?: BaseClientFeatureProps<ClientFeatureProps>\n  slashMenu?: {\n    /**\n     * Dynamic groups allow you to add different groups depending on the query string (so, the text after the slash).\n     * Thus, to re-calculate the available groups, this function will be called every time you type after the /.\n     *\n     * The groups provided by dynamicGroups will be merged with the static groups provided by the groups property.\n     */\n    dynamicGroups?: ({\n      editor,\n      queryString,\n    }: {\n      editor: LexicalEditor\n      queryString: string\n    }) => SlashMenuGroup[]\n    /**\n     * Static array of groups together with the items in them. These will always be present.\n     * While typing after the /, they will be filtered by the query string and the keywords, key and display name of the items.\n     */\n    groups?: SlashMenuGroup[]\n  }\n  /**\n   * An opt-in, classic fixed toolbar which stays at the top of the editor\n   */\n  toolbarFixed?: {\n    groups: ToolbarGroup[]\n  }\n  /**\n   * The default, floating toolbar which appears when you select text.\n   */\n  toolbarInline?: {\n    /**\n     * Array of toolbar groups / sections. Each section can contain multiple toolbar items.\n     */\n    groups: ToolbarGroup[]\n  }\n}\n\nexport type BaseClientFeatureProps<ClientFeatureProps> = ClientFeatureProps extends undefined\n  ? {\n      featureKey: string\n      order: number\n    }\n  : {\n      featureKey: string\n      order: number\n    } & ClientFeatureProps\n\nexport type ResolvedClientFeature<ClientFeatureProps> = {\n  key: string\n  order: number\n} & ClientFeature<ClientFeatureProps>\n\nexport type ResolvedClientFeatureMap = Map<string, ResolvedClientFeature<any>>\n\nexport type ClientFeatureProviderMap = Map<string, FeatureProviderClient<any, any>>\n\nexport type SanitizedClientFeatures = {\n  /** The keys of all enabled features */\n  enabledFeatures: string[]\n  enabledFormats: TextFormatType[]\n  markdownTransformers: Transformer[]\n\n  /**\n   * Plugins are react components which get added to the editor. You can use them to interact with lexical, e.g. to create a command which creates a node, or opens a modal, or some other more \"outside\" functionality\n   */\n  plugins?: Array<SanitizedPlugin>\n  slashMenu: {\n    /**\n     * Dynamic groups allow you to add different groups depending on the query string (so, the text after the slash).\n     * Thus, to re-calculate the available groups, this function will be called every time you type after the /.\n     *\n     * The groups provided by dynamicGroups will be merged with the static groups provided by the groups property.\n     */\n    dynamicGroups: Array<\n      ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => SlashMenuGroup[]\n    >\n    /**\n     * Static array of groups together with the items in them. These will always be present.\n     * While typing after the /, they will be filtered by the query string and the keywords, key and display name of the items.\n     */\n    groups: SlashMenuGroup[]\n  }\n} & Required<\n  Pick<ResolvedClientFeature<unknown>, 'nodes' | 'providers' | 'toolbarFixed' | 'toolbarInline'>\n>\n"],"names":[],"mappings":"AAsBA;;CAEC,GAKC;;GAEC,GAOK,iDAAiD,GAGjD,oIAAoI;AAGpI,4BAA4B;AAcpC;;CAEC,GAIK,6KAA6K;AAG1J,4DAA4D;AAI/E,6KAA6K;AAG1J,4DAA4D;AAI/E,6KAA6K;AAG7J,4DAA4D;AAI5E,6KAA6K;AAI9I,4DAA4D;AAgB/F;;GAEC,GAUD;;GAEC,GAGK,6KAA6K;AAElJ,4DAA4D;AAGvF,6KAA6K;AAE1J,4DAA4D;AAG/E,6KAA6K;AAE1J,4DAA4D;AAG/E,6KAA6K;AAE7J,4DAA4D;AAG5E,6KAA6K;AAE9I,4DAA4D;AAIhE,4DAA4D;AAG7F;;GAEC,GAED;;GAEC,GAGC;;;;;KAKC,GAQD;;;KAGC,GAGH;;GAEC,GAID;;GAEC,GAEC;;KAEC,GAwBL,WA4BC,CA3BC,qCAAqC,IAKrC;;GAEC,IAGC;;;;;KAKC,IAID;;;KAGC"}