@payloadcms/richtext-lexical 3.0.0-beta.9 → 3.0.0-canary.f6e77b8

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

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

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

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

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

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

package/dist/field/features/toolbars/types.d.ts

@@ -0,0 +1,48 @@
+import type { I18n } from '@payloadcms/translations';
+import type { BaseSelection, LexicalEditor } from 'lexical';
+import type React from 'react';
+import type { EditorFocusContextType } from '../../lexical/EditorFocusProvider.js';
+export type ToolbarGroup = {
+    ChildComponent?: React.FC;
+    items: Array<ToolbarGroupItem>;
+    key: string;
+    order?: number;
+    type: 'dropdown';
+} | {
+    items: Array<ToolbarGroupItem>;
+    key: string;
+    order?: number;
+    type: 'buttons';
+};
+export type ToolbarGroupItem = {
+    ChildComponent?: React.FC;
+    /** Use component to ignore the children and onClick properties. It does not use the default, pre-defined format Button component */
+    Component?: React.FC<{
+        active?: boolean;
+        anchorElem: HTMLElement;
+        editor: LexicalEditor;
+        enabled?: boolean;
+        item: ToolbarGroupItem;
+    }>;
+    isActive?: ({ editor, editorFocusContext, selection, }: {
+        editor: LexicalEditor;
+        editorFocusContext: EditorFocusContextType;
+        selection: BaseSelection;
+    }) => boolean;
+    isEnabled?: ({ editor, editorFocusContext, selection, }: {
+        editor: LexicalEditor;
+        editorFocusContext: EditorFocusContextType;
+        selection: BaseSelection;
+    }) => boolean;
+    key: string;
+    /** The label is displayed as text if the item is part of a dropdown group */
+    label?: (({ i18n }: {
+        i18n: I18n;
+    }) => string) | string;
+    onSelect?: ({ editor, isActive }: {
+        editor: LexicalEditor;
+        isActive: boolean;
+    }) => void;
+    order?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/field/features/toolbars/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/field/features/toolbars/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAElF,MAAM,MAAM,YAAY,GACpB;IACE,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,UAAU,CAAA;CACjB,GACD;IACE,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,oIAAoI;IACpI,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,UAAU,EAAE,WAAW,CAAA;QACvB,MAAM,EAAE,aAAa,CAAA;QACrB,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,IAAI,EAAE,gBAAgB,CAAA;KACvB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,CAAC,EACV,MAAM,EACN,kBAAkB,EAClB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,kBAAkB,EAAE,sBAAsB,CAAA;QAC1C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,CAAC,EACX,MAAM,EACN,kBAAkB,EAClB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,kBAAkB,EAAE,sBAAsB,CAAA;QAC1C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,6EAA6E;IAC7E,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAK,MAAM,CAAC,GAAG,MAAM,CAAA;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACvF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/field/features/toolbars/types.ts"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type { BaseSelection, LexicalEditor } from 'lexical'\nimport type React from 'react'\n\nimport type { EditorFocusContextType } from '../../lexical/EditorFocusProvider.js'\n\nexport type ToolbarGroup =\n  | {\n      ChildComponent?: React.FC\n      items: Array<ToolbarGroupItem>\n      key: string\n      order?: number\n      type: 'dropdown'\n    }\n  | {\n      items: Array<ToolbarGroupItem>\n      key: string\n      order?: number\n      type: 'buttons'\n    }\n\nexport type ToolbarGroupItem = {\n  ChildComponent?: React.FC\n  /** Use component to ignore the children and onClick properties. It does not use the default, pre-defined format Button component */\n  Component?: React.FC<{\n    active?: boolean\n    anchorElem: HTMLElement\n    editor: LexicalEditor\n    enabled?: boolean\n    item: ToolbarGroupItem\n  }>\n  isActive?: ({\n    editor,\n    editorFocusContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorFocusContext: EditorFocusContextType\n    selection: BaseSelection\n  }) => boolean\n  isEnabled?: ({\n    editor,\n    editorFocusContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorFocusContext: EditorFocusContextType\n    selection: BaseSelection\n  }) => boolean\n  key: string\n  /** The label is displayed as text if the item is part of a dropdown group */\n  label?: (({ i18n }: { i18n: I18n }) => string) | string\n  onSelect?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void\n  order?: number\n}\n"],"names":[],"rangeMappings":"","mappings":"AAqBA,WAiCC"}

package/dist/field/features/typeUtilities.d.ts

@@ -0,0 +1,8 @@
+import type { LexicalNode } from 'lexical';
+import type { NodeWithHooks } from './types.js';
+/**
+ * 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 declare function createNode<Node extends LexicalNode>(node: NodeWithHooks<Node>): NodeWithHooks<Node>;
+//# sourceMappingURL=typeUtilities.d.ts.map

package/dist/field/features/typeUtilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeUtilities.d.ts","sourceRoot":"","sources":["../../../src/field/features/typeUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,SAAS,WAAW,EACjD,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,GACxB,aAAa,CAAC,IAAI,CAAC,CAErB"}

package/dist/field/features/typeUtilities.js

@@ -0,0 +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;
+}
+
+//# sourceMappingURL=typeUtilities.js.map

package/dist/field/features/typeUtilities.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/field/features/typeUtilities.ts"],"sourcesContent":["import type { LexicalNode } from 'lexical'\n\nimport type { NodeWithHooks } from './types.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"],"rangeMappings":";;;;;","mappings":"AAIA;;;CAGC,GACD,OAAO,SAASA,WACdC,IAAyB;IAEzB,OAAOA;AACT"}

package/dist/field/features/types.d.ts

@@ -6,31 +6,36 @@ import type { SerializedLexicalNode } from 'lexical';
 import type { LexicalNodeReplacement } from 'lexical';
 import type { RequestContext } from 'payload';
 import type { SanitizedConfig } from 'payload/config';
-import type { Field, PayloadRequest, RichTextField, ValidateOptions } from 'payload/types';
+import type { Field, PayloadRequestWithData, ReplaceAny, RichTextField, ValidateOptions } from 'payload/types';
 import type React from 'react';
 import type { AdapterProps } from '../../types.js';
 import type { ClientEditorConfig, ServerEditorConfig } from '../lexical/config/types.js';
-import type { FloatingToolbarSection } from '../lexical/plugins/FloatingSelectToolbar/types.js';
 import type { SlashMenuGroup } from '../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js';
 import type { HTMLConverter } from './converters/html/converter/types.js';
-export type PopulationPromise<T extends SerializedLexicalNode = SerializedLexicalNode> = ({ context, currentDepth, depth, editorPopulationPromises, field, findMany, flattenLocales, node, overrideAccess, populationPromises, req, showHiddenFields, siblingDoc, }: {
+import type { ToolbarGroup } from './toolbars/types.js';
+export type PopulationPromise<T extends SerializedLexicalNode = SerializedLexicalNode> = ({ context, currentDepth, depth, editorPopulationPromises, field, fieldPromises, findMany, flattenLocales, node, overrideAccess, populationPromises, req, showHiddenFields, siblingDoc, }: {
     context: RequestContext;
     currentDepth: number;
     depth: number;
+    draft: boolean;
     /**
      * This maps all population promises to the node type
      */
     editorPopulationPromises: Map<string, Array<PopulationPromise>>;
     field: RichTextField<SerializedEditorState, AdapterProps>;
+    /**
+     * fieldPromises are used for things like field hooks. They will be awaited before awaiting populationPromises
+     */
+    fieldPromises: Promise<void>[];
     findMany: boolean;
     flattenLocales: boolean;
     node: T;
     overrideAccess: boolean;
     populationPromises: Promise<void>[];
-    req: PayloadRequest;
+    req: PayloadRequestWithData;
     showHiddenFields: boolean;
     siblingDoc: Record<string, unknown>;
-}) => Promise<void>[];
+}) => void;
 export type NodeValidation<T extends SerializedLexicalNode = SerializedLexicalNode> = ({ node, nodeValidations, validation, }: {
     node: T;
     nodeValidations: Map<string, Array<NodeValidation>>;
@@ -47,12 +52,17 @@ export type FeatureProviderServer<ServerFeatureProps, ClientFeatureProps> = {
     dependenciesPriority?: string[];
     /** Keys of soft-dependencies needed for this feature. The FeatureProviders dependencies are optional, but are considered as last-priority in the loading process */
     dependenciesSoft?: string[];
+    /**
+     * This is being called during the payload sanitization process
+     */
     feature: (props: {
+        config: SanitizedConfig;
         /** unSanitizedEditorConfig.features, but mapped */
         featureProviderMap: ServerFeatureProviderMap;
+        isRoot?: boolean;
         resolvedFeatures: ResolvedServerFeatureMap;
         unSanitizedEditorConfig: ServerEditorConfig;
-    }) => ServerFeature<ServerFeatureProps, ClientFeatureProps>;
+    }) => Promise<ServerFeature<ServerFeatureProps, ClientFeatureProps>> | ServerFeature<ServerFeatureProps, ClientFeatureProps>;
     key: string;
     /** Props which were passed into your feature will have to be passed here. This will allow them to be used / read in other places of the code, e.g. wherever you can use useEditorConfigContext */
     serverFeatureProps: ServerFeatureProps;
@@ -74,14 +84,18 @@ export type FeatureProviderClient<ClientFeatureProps> = {
         unSanitizedEditorConfig: ClientEditorConfig;
     }) => ClientFeature<ClientFeatureProps>;
 };
+export type PluginComponent<ClientFeatureProps = any> = React.FC<{
+    clientProps: ClientFeatureProps;
+}>;
+export type PluginComponentWithAnchor<ClientFeatureProps = any> = React.FC<{
+    anchorElem: HTMLElement;
+    clientProps: ClientFeatureProps;
+}>;
 export type ClientFeature<ClientFeatureProps> = {
     /**
      * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to
      */
     clientFeatureProps: ClientComponentProps<ClientFeatureProps>;
-    floatingSelectToolbar?: {
-        sections: FloatingToolbarSection[];
-    };
     hooks?: {
         load?: ({ incomingEditorState, }: {
             incomingEditorState: SerializedEditorState;
@@ -92,33 +106,90 @@ export type ClientFeature<ClientFeatureProps> = {
     };
     markdownTransformers?: Transformer[];
     nodes?: Array<Klass<LexicalNode> | LexicalNodeReplacement>;
+    /**
+     * 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?: Array<{
-        Component: React.FC;
+        Component: PluginComponent<ClientFeatureProps>;
         position: 'bottom';
     } | {
-        Component: React.FC;
+        Component: PluginComponent<ClientFeatureProps>;
         position: 'normal';
     } | {
-        Component: React.FC;
+        Component: PluginComponent<ClientFeatureProps>;
         position: 'top';
     } | {
-        Component: React.FC<{
-            anchorElem: HTMLElement;
-        }>;
+        Component: PluginComponentWithAnchor<ClientFeatureProps>;
         position: 'floatingAnchorElem';
     }>;
     slashMenu?: {
-        dynamicOptions?: ({ editor, queryString, }: {
+        /**
+         * 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.
+         */
+        dynamicGroups?: ({ editor, queryString, }: {
             editor: LexicalEditor;
             queryString: string;
         }) => SlashMenuGroup[];
-        options?: SlashMenuGroup[];
+        /**
+         * 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.
+         */
+        groups?: SlashMenuGroup[];
+    };
+    /**
+     * An opt-in, classic fixed toolbar which stays at the top of the editor
+     */
+    toolbarFixed?: {
+        groups: ToolbarGroup[];
+    };
+    /**
+     * The default, floating toolbar which appears when you select text.
+     */
+    toolbarInline?: {
+        /**
+         * Array of toolbar groups / sections. Each section can contain multiple toolbar items.
+         */
+        groups: ToolbarGroup[];
     };
 };
 export type ClientComponentProps<ClientFeatureProps> = ClientFeatureProps & {
     featureKey: string;
     order: number;
 };
+export type FieldNodeHookArgs<T extends SerializedLexicalNode> = {
+    context: RequestContext;
+    /** Boolean to denote if this hook is running against finding one, or finding many within the afterRead hook. */
+    findMany?: boolean;
+    /** The value of the field. */
+    node?: T;
+    /** A string relating to which operation the field type is currently executing within. Useful within beforeValidate, beforeChange, and afterChange hooks to differentiate between create and update operations. */
+    operation?: 'create' | 'delete' | 'read' | 'update';
+    overrideAccess?: boolean;
+    /** The Express request object. It is mocked for Local API operations. */
+    req: PayloadRequestWithData;
+};
+export type FieldNodeHook<T extends SerializedLexicalNode> = (args: FieldNodeHookArgs<T>) => Promise<T> | T;
+export type NodeWithHooks<T extends LexicalNode = any> = {
+    converters?: {
+        html?: HTMLConverter<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>;
+    };
+    hooks?: {
+        afterChange?: Array<FieldNodeHook<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+        afterRead?: Array<FieldNodeHook<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+        beforeChange?: Array<FieldNodeHook<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+        /**
+         * Runs before a document is duplicated to prevent errors in unique fields or return null to use defaultValue.
+         */
+        beforeDuplicate?: Array<FieldNodeHook<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+        beforeValidate?: Array<FieldNodeHook<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+    };
+    node: Klass<T> | LexicalNodeReplacement;
+    populationPromises?: Array<PopulationPromise<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+    validations?: Array<NodeValidation<ReturnType<ReplaceAny<T, LexicalNode>['exportJSON']>>>;
+};
 export type ServerFeature<ServerProps, ClientFeatureProps> = {
     ClientComponent?: React.FC<ClientComponentProps<ClientFeatureProps>>;
     /**
@@ -142,11 +213,7 @@ export type ServerFeature<ServerProps, ClientFeatureProps> = {
         props: ServerProps;
         schemaMap: Map<string, Field[]>;
         schemaPath: string;
-    }) => {
-        [key: string]: Field[];
-    } | Promise<{
-        [key: string]: Field[];
-    }>;
+    }) => Map<string, Field[]> | null;
     generatedTypes?: {
         modifyOutputSchema: ({ collectionIDFieldTypes, config, currentSchema, field, interfaceNameDefinitions, isRequired, }: {
             collectionIDFieldTypes: {
@@ -165,22 +232,8 @@ export type ServerFeature<ServerProps, ClientFeatureProps> = {
             isRequired: boolean;
         }) => JSONSchema4;
     };
-    hooks?: {
-        afterReadPromise?: ({ field, incomingEditorState, siblingDoc, }: {
-            field: RichTextField<SerializedEditorState, AdapterProps>;
-            incomingEditorState: SerializedEditorState;
-            siblingDoc: Record<string, unknown>;
-        }) => Promise<void> | null;
-    };
     markdownTransformers?: Transformer[];
-    nodes?: Array<{
-        converters?: {
-            html?: HTMLConverter;
-        };
-        node: Klass<LexicalNode> | LexicalNodeReplacement;
-        populationPromises?: Array<PopulationPromise>;
-        validations?: Array<NodeValidation>;
-    }>;
+    nodes?: Array<NodeWithHooks>;
     /** Props which were passed into your feature will have to be passed here. This will allow them to be used / read in other places of the code, e.g. wherever you can use useEditorConfigContext */
     serverFeatureProps: ServerProps;
 };
@@ -195,22 +248,27 @@ export type ResolvedServerFeatureMap = Map<string, ResolvedServerFeature<unknown
 export type ResolvedClientFeatureMap = Map<string, ResolvedClientFeature<unknown>>;
 export type ServerFeatureProviderMap = Map<string, FeatureProviderServer<unknown, unknown>>;
 export type ClientFeatureProviderMap = Map<string, FeatureProviderClient<unknown>>;
+/**
+ * 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
+ */
 export type SanitizedPlugin = {
-    Component: React.FC;
+    Component: PluginComponent;
+    clientProps: any;
     key: string;
     position: 'bottom';
 } | {
-    Component: React.FC;
+    Component: PluginComponent;
+    clientProps: any;
     key: string;
     position: 'normal';
 } | {
-    Component: React.FC;
+    Component: PluginComponent;
+    clientProps: any;
     key: string;
     position: 'top';
 } | {
-    Component: React.FC<{
-        anchorElem: HTMLElement;
-    }>;
+    Component: PluginComponentWithAnchor;
+    clientProps: any;
     desktopOnly?: boolean;
     key: string;
     position: 'floatingAnchorElem';
@@ -240,24 +298,24 @@ export type SanitizedServerFeatures = Required<Pick<ResolvedServerFeature<unknow
             isRequired: boolean;
         }) => JSONSchema4>;
     };
-    hooks: {
-        afterReadPromises: Array<({ field, incomingEditorState, siblingDoc, }: {
-            field: RichTextField<SerializedEditorState, AdapterProps>;
-            incomingEditorState: SerializedEditorState;
-            siblingDoc: Record<string, unknown>;
-        }) => Promise<void> | null>;
-    };
-    /**  The node types mapped to their populationPromises */
+    /**  The node types mapped to their hooks */
+    hooks?: {
+        afterChange?: Map<string, Array<FieldNodeHook<SerializedLexicalNode>>>;
+        afterRead?: Map<string, Array<FieldNodeHook<SerializedLexicalNode>>>;
+        beforeChange?: Map<string, Array<FieldNodeHook<SerializedLexicalNode>>>;
+        /**
+         * Runs before a document is duplicated to prevent errors in unique fields or return null to use defaultValue.
+         */
+        beforeDuplicate?: Map<string, Array<FieldNodeHook<SerializedLexicalNode>>>;
+        beforeValidate?: Map<string, Array<FieldNodeHook<SerializedLexicalNode>>>;
+    }; /**  The node types mapped to their populationPromises */
     populationPromises: Map<string, Array<PopulationPromise>>;
     /**  The node types mapped to their validations */
     validations: Map<string, Array<NodeValidation>>;
 };
-export type SanitizedClientFeatures = Required<Pick<ResolvedClientFeature<unknown>, 'markdownTransformers' | 'nodes'>> & {
+export type SanitizedClientFeatures = Required<Pick<ResolvedClientFeature<unknown>, 'markdownTransformers' | 'nodes' | 'toolbarFixed' | 'toolbarInline'>> & {
     /** The keys of all enabled features */
     enabledFeatures: string[];
-    floatingSelectToolbar: {
-        sections: FloatingToolbarSection[];
-    };
     hooks: {
         load: Array<({ incomingEditorState, }: {
             incomingEditorState: SerializedEditorState;
@@ -266,13 +324,26 @@ export type SanitizedClientFeatures = Required<Pick<ResolvedClientFeature<unknow
             incomingEditorState: SerializedEditorState;
         }) => SerializedEditorState>;
     };
+    /**
+     * 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?: Array<SanitizedPlugin>;
     slashMenu: {
-        dynamicOptions: Array<({ editor, queryString }: {
+        /**
+         * 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.
+         */
+        dynamicGroups: Array<({ editor, queryString }: {
             editor: LexicalEditor;
             queryString: string;
         }) => SlashMenuGroup[]>;
-        groupsWithOptions: SlashMenuGroup[];
+        /**
+         * 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.
+         */
+        groups: SlashMenuGroup[];
     };
 };
 //# sourceMappingURL=types.d.ts.map