@payloadcms/richtext-lexical 3.0.0-beta.7 → 3.0.0-beta.71

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

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect } from 'react';
+const baseClass = 'toolbar-popup__dropdown';
+import { mergeRegister } from '@lexical/utils';
+import { useTranslation } from '@payloadcms/ui';
+import { $getSelection } from 'lexical';
+import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import { DropDown, DropDownItem } from './DropDown.js';
+const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
+    const { i18n } = useTranslation();
+    if (item.Component) {
+        return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
+            active: active,
+            anchorElem: anchorElem,
+            editor: editor,
+            enabled: enabled,
+            item: item
+        }, 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__*/ _jsxs(DropDownItem, {
+        active: active,
+        editor: editor,
+        enabled: enabled,
+        item: item,
+        children: [
+            item?.ChildComponent && /*#__PURE__*/ _jsx(item.ChildComponent, {}),
+            /*#__PURE__*/ _jsx("span", {
+                className: "text",
+                children: title
+            })
+        ]
+    }, item.key);
+};
+export const ToolbarDropdown = ({ Icon, anchorElem, classNames, editor, groupKey, items, itemsContainerClassNames, label, maxActiveItems, onActiveChange })=>{
+    const [activeItemKeys, setActiveItemKeys] = React.useState([]);
+    const [enabledItemKeys, setEnabledItemKeys] = React.useState([]);
+    const editorConfigContext = useEditorConfigContext();
+    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,
+                        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);
+                }
+            }
+            setActiveItemKeys(_activeItemKeys);
+            setEnabledItemKeys(_enabledItemKeys);
+            if (onActiveChange) {
+                onActiveChange({
+                    activeItems: _activeItems
+                });
+            }
+        });
+    }, [
+        editor,
+        editorConfigContext,
+        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__*/ _jsx(DropDown, {
+        Icon: Icon,
+        buttonAriaLabel: `${groupKey} dropdown`,
+        buttonClassName: [
+            baseClass,
+            `${baseClass}-${groupKey}`,
+            ...classNames || []
+        ].filter(Boolean).join(' '),
+        itemsContainerClassNames: [
+            `${baseClass}-items`,
+            ...itemsContainerClassNames || []
+        ],
+        label: label,
+        children: items.length && items.map((item)=>{
+            return /*#__PURE__*/ _jsx(ToolbarItem, {
+                active: activeItemKeys.includes(item.key),
+                anchorElem: anchorElem,
+                editor: editor,
+                enabled: enabledItemKeys.includes(item.key),
+                item: item
+            }, item.key);
+        })
+    }, groupKey);
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/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'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.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 editorConfigContext = useEditorConfigContext()\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, 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      setActiveItemKeys(_activeItemKeys)\n      setEnabledItemKeys(_enabledItemKeys)\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, 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","useEditorConfigContext","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","editorConfigContext","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","document","addEventListener","removeEventListener","registerUpdateListener","buttonAriaLabel","buttonClassName","filter","Boolean","join","map","includes"],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import type { I18nClient } from '@payloadcms/translations';
+import type { BaseSelection, LexicalEditor } from 'lexical';
+import type React from 'react';
+import type { EditorConfigContextType } from '../../lexical/config/client/EditorConfigProvider.js';
+export type ToolbarGroup = {
+    /**
+     * All toolbar items part of this toolbar group need to be added here.
+     */
+    items: Array<ToolbarGroupItem>;
+    /**
+     * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.
+     */
+    key: string;
+    /**
+     * Determines where the toolbar group will be.
+     */
+    order?: number;
+    /**
+     * Controls the toolbar group type. Set to `buttons` to create a buttons toolbar group, which displays toolbar items horizontally using only their icons.
+     */
+    type: 'buttons';
+} | {
+    /**
+     * The dropdown toolbar ChildComponent allows you to pass in a React Component which will be displayed within the dropdown button.
+     */
+    ChildComponent?: React.FC;
+    /**
+     * All toolbar items part of this toolbar group need to be added here.
+     */
+    items: Array<ToolbarGroupItem>;
+    /**
+     * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.
+     */
+    key: string;
+    /**
+     * Determines where the toolbar group will be.
+     */
+    order?: number;
+    /**
+     * 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.
+     */
+    type: 'dropdown';
+};
+export type ToolbarGroupItem = {
+    /** A React component which is rendered within your toolbar item's default button component. Usually, you want this to be an icon. */
+    ChildComponent?: React.FC;
+    /** 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. */
+    Component?: React.FC<{
+        active?: boolean;
+        anchorElem: HTMLElement;
+        editor: LexicalEditor;
+        enabled?: boolean;
+        item: ToolbarGroupItem;
+    }>;
+    /** This is optional and controls if the toolbar item is highlighted or not. */
+    isActive?: ({ editor, editorConfigContext, selection, }: {
+        editor: LexicalEditor;
+        editorConfigContext: EditorConfigContextType;
+        selection: BaseSelection;
+    }) => boolean;
+    /** 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. */
+    isEnabled?: ({ editor, editorConfigContext, selection, }: {
+        editor: LexicalEditor;
+        editorConfigContext: EditorConfigContextType;
+        selection: BaseSelection;
+    }) => boolean;
+    /** Each toolbar item needs to have a unique key. */
+    key: string;
+    /** 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. */
+    label?: (({ i18n }: {
+        i18n: I18nClient<{}, string>;
+    }) => string) | string;
+    /** Each toolbar item needs to have a unique key. */
+    onSelect?: ({ editor, isActive }: {
+        editor: LexicalEditor;
+        isActive: boolean;
+    }) => void;
+    order?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/features/toolbars/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAElG,MAAM,MAAM,YAAY,GACpB;IACE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qIAAqI;IACrI,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,iMAAiM;IACjM,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,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,mBAAmB,EAAE,uBAAuB,CAAA;QAC5C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,iJAAiJ;IACjJ,SAAS,CAAC,EAAE,CAAC,EACX,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,mBAAmB,EAAE,uBAAuB,CAAA;QAC5C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,oDAAoD;IACpD,GAAG,EAAE,MAAM,CAAA;IACX,+IAA+I;IAC/I,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;KAAE,KAAK,MAAM,CAAC,GAAG,MAAM,CAAA;IACzE,oDAAoD;IACpD,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/features/toolbars/types.js.map

@@ -0,0 +1 @@
+{"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'\n\nexport type ToolbarGroup =\n  | {\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  | {\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       * 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 `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 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?: (({ i18n }: { i18n: I18nClient<{}, string> }) => string) | 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"],"names":[],"mappings":"AAgDA,WAsCC"}

package/dist/features/typeUtilities.d.ts

@@ -0,0 +1,8 @@
+import type { LexicalNode } from 'lexical';
+import type { NodeWithHooks } from './typesServer.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/features/typeUtilities.d.ts.map

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

package/dist/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/features/typeUtilities.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,186 @@
+import type { Transformer } from '@lexical/markdown';
+import type { Klass, LexicalEditor, LexicalNode, LexicalNodeReplacement, SerializedEditorState } from 'lexical';
+import type React from 'react';
+import type { ClientEditorConfig } from '../lexical/config/types.js';
+import type { SlashMenuGroup } from '../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js';
+import type { ToolbarGroup } from './toolbars/types.js';
+export type FeatureProviderProviderClient<UnSanitizedClientFeatureProps = undefined, ClientFeatureProps = UnSanitizedClientFeatureProps> = (props: ClientComponentProps<ClientFeatureProps>) => FeatureProviderClient<ClientFeatureProps>;
+/**
+ * No dependencies => Features need to be sorted on the server first, then sent to client in right order
+ */
+export type FeatureProviderClient<UnSanitizedClientFeatureProps = undefined, ClientFeatureProps = UnSanitizedClientFeatureProps> = {
+    /**
+     * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to
+     */
+    clientFeatureProps: ClientComponentProps<UnSanitizedClientFeatureProps>;
+    feature: ((props: {
+        clientFunctions: Record<string, any>;
+        /** unSanitizedEditorConfig.features, but mapped */
+        featureProviderMap: ClientFeatureProviderMap;
+        resolvedFeatures: ResolvedClientFeatureMap;
+        unSanitizedEditorConfig: ClientEditorConfig;
+    }) => ClientFeature<ClientFeatureProps>) | 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> = {
+    hooks?: {
+        load?: ({ incomingEditorState, }: {
+            incomingEditorState: SerializedEditorState;
+        }) => SerializedEditorState;
+        save?: ({ incomingEditorState, }: {
+            incomingEditorState: SerializedEditorState;
+        }) => SerializedEditorState;
+    };
+    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: PluginComponent<ClientFeatureProps>;
+        position: 'aboveContainer';
+    } | {
+        Component: PluginComponent<ClientFeatureProps>;
+        position: 'bottom';
+    } | {
+        Component: PluginComponent<ClientFeatureProps>;
+        position: 'normal';
+    } | {
+        Component: PluginComponent<ClientFeatureProps>;
+        position: 'top';
+    } | {
+        Component: PluginComponentWithAnchor<ClientFeatureProps>;
+        position: 'floatingAnchorElem';
+    } | {
+        Component: PluginComponent<ClientFeatureProps>;
+        position: 'belowContainer';
+    }>;
+    /**
+     * Client Features can register their own providers, which will be nested below the EditorConfigProvider
+     */
+    providers?: Array<React.FC>;
+    /**
+     * Return props, to make it easy to retrieve passed in props to this Feature for the client if anyone wants to
+     */
+    sanitizedClientFeatureProps?: ClientComponentProps<ClientFeatureProps>;
+    slashMenu?: {
+        /**
+         * 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[];
+        /**
+         * 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 extends undefined ? {
+    featureKey: string;
+    order: number;
+} : {
+    featureKey: string;
+    order: number;
+} & ClientFeatureProps;
+export type ResolvedClientFeature<ClientFeatureProps> = {
+    key: string;
+    order: number;
+} & ClientFeature<ClientFeatureProps>;
+export type ResolvedClientFeatureMap = Map<string, ResolvedClientFeature<any>>;
+export type ClientFeatureProviderMap = Map<string, FeatureProviderClient<any, any>>;
+/**
+ * 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: PluginComponent;
+    clientProps: any;
+    key: string;
+    position: 'bottom';
+} | {
+    Component: PluginComponent;
+    clientProps: any;
+    key: string;
+    position: 'normal';
+} | {
+    Component: PluginComponent;
+    clientProps: any;
+    key: string;
+    position: 'top';
+} | {
+    Component: PluginComponentWithAnchor;
+    clientProps: any;
+    desktopOnly?: boolean;
+    key: string;
+    position: 'floatingAnchorElem';
+} | {
+    Component: PluginComponent;
+    clientProps: any;
+    key: string;
+    position: 'aboveContainer';
+} | {
+    Component: PluginComponent;
+    clientProps: any;
+    key: string;
+    position: 'belowContainer';
+};
+export type SanitizedClientFeatures = {
+    /** The keys of all enabled features */
+    enabledFeatures: string[];
+    hooks: {
+        load: Array<({ incomingEditorState, }: {
+            incomingEditorState: SerializedEditorState;
+        }) => SerializedEditorState>;
+        save: Array<({ incomingEditorState, }: {
+            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: {
+        /**
+         * 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[]>;
+        /**
+         * 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[];
+    };
+} & Required<Pick<ResolvedClientFeature<unknown>, 'markdownTransformers' | 'nodes' | 'providers' | 'toolbarFixed' | 'toolbarInline'>>;
+//# sourceMappingURL=typesClient.d.ts.map

package/dist/features/typesClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typesClient.d.ts","sourceRoot":"","sources":["../../src/features/typesClient.ts"],"names":[],"mappings":"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"}

package/dist/features/typesClient.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=typesClient.js.map

package/dist/features/typesClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/typesClient.ts"],"sourcesContent":["import type { Transformer } from '@lexical/markdown'\nimport type {\n  Klass,\n  LexicalEditor,\n  LexicalNode,\n  LexicalNodeReplacement,\n  SerializedEditorState,\n} from 'lexical'\nimport type React from 'react'\n\nimport type { ClientEditorConfig } from '../lexical/config/types.js'\nimport type { SlashMenuGroup } from '../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'\nimport type { ToolbarGroup } from './toolbars/types.js'\n\nexport type FeatureProviderProviderClient<\n  UnSanitizedClientFeatureProps = undefined,\n  ClientFeatureProps = UnSanitizedClientFeatureProps,\n> = (props: ClientComponentProps<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: ClientComponentProps<UnSanitizedClientFeatureProps>\n  feature:\n    | ((props: {\n        clientFunctions: Record<string, any>\n        /** unSanitizedEditorConfig.features, but mapped */\n        featureProviderMap: ClientFeatureProviderMap\n        // other resolved features, which have been loaded before this one. All features declared in 'dependencies' should be available here\n        resolvedFeatures: ResolvedClientFeatureMap\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\nexport type ClientFeature<ClientFeatureProps> = {\n  hooks?: {\n    load?: ({\n      incomingEditorState,\n    }: {\n      incomingEditorState: SerializedEditorState\n    }) => SerializedEditorState\n    save?: ({\n      incomingEditorState,\n    }: {\n      incomingEditorState: SerializedEditorState\n    }) => SerializedEditorState\n  }\n  markdownTransformers?: Transformer[]\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>\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?: ClientComponentProps<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 ClientComponentProps<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\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      // 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      clientProps: any\n      key: string\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\n      clientProps: any\n      key: string\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\n      clientProps: any\n      key: string\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\n      clientProps: any\n      desktopOnly?: boolean\n      key: string\n      position: 'floatingAnchorElem' // Determines at which position the Component will be added.\n    }\n  | {\n      Component: PluginComponent\n      clientProps: any\n      key: string\n      position: 'aboveContainer'\n    }\n  | {\n      Component: PluginComponent\n      clientProps: any\n      key: string\n      position: 'belowContainer'\n    }\n\nexport type SanitizedClientFeatures = {\n  /** The keys of all enabled features */\n  enabledFeatures: string[]\n  hooks: {\n    load: Array<\n      ({\n        incomingEditorState,\n      }: {\n        incomingEditorState: SerializedEditorState\n      }) => SerializedEditorState\n    >\n    save: Array<\n      ({\n        incomingEditorState,\n      }: {\n        incomingEditorState: SerializedEditorState\n      }) => SerializedEditorState\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   */\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<\n    ResolvedClientFeature<unknown>,\n    'markdownTransformers' | 'nodes' | 'providers' | 'toolbarFixed' | 'toolbarInline'\n  >\n>\n"],"names":[],"mappings":"AAkNA,WA4CC"}