@payloadcms/richtext-lexical 3.0.0-beta.3 → 3.0.0-beta.31

package/dist/field/lexical/EditorFocusProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/field/lexical/EditorFocusProvider.tsx"],"sourcesContent":["import type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport React, { createContext, useCallback, useContext, useState } from 'react'\n\nimport type { EditorConfigContextType } from './config/client/EditorConfigProvider.js'\n\nimport { useEditorConfigContext } from './config/client/EditorConfigProvider.js'\n\nexport type EditorFocusContextType = {\n  blurEditor: () => void\n  editor: LexicalEditor\n  focusEditor: (_editor?: LexicalEditor, _editorConfigContext?: EditorConfigContextType) => void\n  focusedEditor: LexicalEditor | null\n  focusedEditorConfigContext: EditorConfigContextType\n  isChildEditorFocused: () => boolean\n  isEditorFocused: () => boolean\n  isParentEditorFocused: () => boolean\n  parentEditorConfigContext: EditorConfigContextType\n  parentEditorFocus: EditorFocusContextType\n}\n\nconst EditorFocusContext = createContext<EditorFocusContextType>({\n  blurEditor: null,\n  editor: null,\n  focusEditor: null,\n  focusedEditor: null,\n  focusedEditorConfigContext: null,\n  isChildEditorFocused: null,\n  isEditorFocused: null,\n  isParentEditorFocused: null,\n  parentEditorConfigContext: null,\n  parentEditorFocus: null,\n})\n\nexport const useEditorFocus = (): EditorFocusContextType => {\n  return useContext(EditorFocusContext)\n}\n\nexport const EditorFocusProvider = ({ children }) => {\n  const parentEditorFocus = useEditorFocus()\n  const parentEditorConfigContext = useEditorConfigContext() // Is parent, as this EditorFocusProvider sits outside the EditorConfigProvider\n  const [editor] = useLexicalComposerContext()\n\n  const [focusedEditor, setFocusedEditor] = useState<LexicalEditor | null>(null)\n  const [focusedEditorConfigContext, setFocusedEditorConfigContext] =\n    useState<EditorConfigContextType | null>(null)\n\n  const focusEditor = useCallback(\n    (_editor: LexicalEditor, _editorConfigContext: EditorConfigContextType) => {\n      setFocusedEditor(_editor !== undefined ? _editor : editor)\n      setFocusedEditorConfigContext(_editorConfigContext)\n      if (parentEditorFocus.focusEditor) {\n        parentEditorFocus.focusEditor(\n          _editor !== undefined ? _editor : editor,\n          _editorConfigContext,\n        )\n      }\n    },\n    [editor, parentEditorFocus],\n  )\n\n  const blurEditor = useCallback(() => {\n    if (focusedEditor === editor) {\n      setFocusedEditor(null)\n      setFocusedEditorConfigContext(null)\n    }\n  }, [editor, focusedEditor])\n\n  const isEditorFocused = useCallback(() => {\n    return focusedEditor === editor\n  }, [editor, focusedEditor])\n\n  const isParentEditorFocused = useCallback(() => {\n    return parentEditorFocus?.isEditorFocused ? parentEditorFocus.isEditorFocused() : false\n  }, [parentEditorFocus])\n\n  const isChildEditorFocused = useCallback(() => {\n    return focusedEditor !== editor && !!focusedEditor\n  }, [editor, focusedEditor])\n\n  return (\n    <EditorFocusContext.Provider\n      value={{\n        blurEditor,\n        editor,\n        focusEditor,\n        focusedEditor,\n        focusedEditorConfigContext,\n        isChildEditorFocused,\n        isEditorFocused,\n        isParentEditorFocused,\n        parentEditorConfigContext,\n        parentEditorFocus,\n      }}\n    >\n      {children}\n    </EditorFocusContext.Provider>\n  )\n}\n"],"names":["useLexicalComposerContext","React","createContext","useCallback","useContext","useState","useEditorConfigContext","EditorFocusContext","blurEditor","editor","focusEditor","focusedEditor","focusedEditorConfigContext","isChildEditorFocused","isEditorFocused","isParentEditorFocused","parentEditorConfigContext","parentEditorFocus","useEditorFocus","EditorFocusProvider","children","setFocusedEditor","setFocusedEditorConfigContext","_editor","_editorConfigContext","undefined","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,OAAOC,SAASC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAO;AAI/E,SAASC,sBAAsB,QAAQ,0CAAyC;AAehF,MAAMC,mCAAqBL,cAAsC;IAC/DM,YAAY;IACZC,QAAQ;IACRC,aAAa;IACbC,eAAe;IACfC,4BAA4B;IAC5BC,sBAAsB;IACtBC,iBAAiB;IACjBC,uBAAuB;IACvBC,2BAA2B;IAC3BC,mBAAmB;AACrB;AAEA,OAAO,MAAMC,iBAAiB;IAC5B,OAAOd,WAAWG;AACpB,EAAC;AAED,OAAO,MAAMY,sBAAsB,CAAC,EAAEC,QAAQ,EAAE;IAC9C,MAAMH,oBAAoBC;IAC1B,MAAMF,4BAA4BV,yBAAyB,+EAA+E;;IAC1I,MAAM,CAACG,OAAO,GAAGT;IAEjB,MAAM,CAACW,eAAeU,iBAAiB,GAAGhB,SAA+B;IACzE,MAAM,CAACO,4BAA4BU,8BAA8B,GAC/DjB,SAAyC;IAE3C,MAAMK,cAAcP,YAClB,CAACoB,SAAwBC;QACvBH,iBAAiBE,YAAYE,YAAYF,UAAUd;QACnDa,8BAA8BE;QAC9B,IAAIP,kBAAkBP,WAAW,EAAE;YACjCO,kBAAkBP,WAAW,CAC3Ba,YAAYE,YAAYF,UAAUd,QAClCe;QAEJ;IACF,GACA;QAACf;QAAQQ;KAAkB;IAG7B,MAAMT,aAAaL,YAAY;QAC7B,IAAIQ,kBAAkBF,QAAQ;YAC5BY,iBAAiB;YACjBC,8BAA8B;QAChC;IACF,GAAG;QAACb;QAAQE;KAAc;IAE1B,MAAMG,kBAAkBX,YAAY;QAClC,OAAOQ,kBAAkBF;IAC3B,GAAG;QAACA;QAAQE;KAAc;IAE1B,MAAMI,wBAAwBZ,YAAY;QACxC,OAAOc,mBAAmBH,kBAAkBG,kBAAkBH,eAAe,KAAK;IACpF,GAAG;QAACG;KAAkB;IAEtB,MAAMJ,uBAAuBV,YAAY;QACvC,OAAOQ,kBAAkBF,UAAU,CAAC,CAACE;IACvC,GAAG;QAACF;QAAQE;KAAc;IAE1B,qBACE,oBAACJ,mBAAmBmB,QAAQ;QAC1BC,OAAO;YACLnB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;OAECG;AAGP,EAAC"}

package/dist/field/lexical/EditorPlugin.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { SanitizedPlugin } from '../features/types.js';
 export declare const EditorPlugin: React.FC<{
     anchorElem?: HTMLDivElement;
+    clientProps: any;
     plugin: SanitizedPlugin;
 }>;
 //# sourceMappingURL=EditorPlugin.d.ts.map

package/dist/field/lexical/EditorPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorPlugin.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/EditorPlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAE3D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,MAAM,EAAE,eAAe,CAAA;CACxB,CAMA,CAAA"}
+{"version":3,"file":"EditorPlugin.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/EditorPlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAE3D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,eAAe,CAAA;CACxB,CAQA,CAAA"}

package/dist/field/lexical/EditorPlugin.js

@@ -1,11 +1,14 @@
 import * as React from 'react';
-export const EditorPlugin = ({ anchorElem, plugin })=>{
+export const EditorPlugin = ({ anchorElem, clientProps, plugin })=>{
     if (plugin.position === 'floatingAnchorElem') {
         return plugin.Component && /*#__PURE__*/ React.createElement(plugin.Component, {
-            anchorElem: anchorElem
+            anchorElem: anchorElem,
+            clientProps: clientProps
         });
     }
-    return plugin.Component && /*#__PURE__*/ React.createElement(plugin.Component, null);
+    return plugin.Component && /*#__PURE__*/ React.createElement(plugin.Component, {
+        clientProps: clientProps
+    });
 };
 
 //# sourceMappingURL=EditorPlugin.js.map

package/dist/field/lexical/EditorPlugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/lexical/EditorPlugin.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SanitizedPlugin } from '../features/types.js'\n\nexport const EditorPlugin: React.FC<{\n  anchorElem?: HTMLDivElement\n  plugin: SanitizedPlugin\n}> = ({ anchorElem, plugin }) => {\n  if (plugin.position === 'floatingAnchorElem') {\n    return plugin.Component && <plugin.Component anchorElem={anchorElem} />\n  }\n\n  return plugin.Component && <plugin.Component />\n}\n"],"names":["React","EditorPlugin","anchorElem","plugin","position","Component"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAO;AAI9B,OAAO,MAAMC,eAGR,CAAC,EAAEC,UAAU,EAAEC,MAAM,EAAE;IAC1B,IAAIA,OAAOC,QAAQ,KAAK,sBAAsB;QAC5C,OAAOD,OAAOE,SAAS,kBAAI,oBAACF,OAAOE,SAAS;YAACH,YAAYA;;IAC3D;IAEA,OAAOC,OAAOE,SAAS,kBAAI,oBAACF,OAAOE,SAAS;AAC9C,EAAC"}
+{"version":3,"sources":["../../../src/field/lexical/EditorPlugin.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SanitizedPlugin } from '../features/types.js'\n\nexport const EditorPlugin: React.FC<{\n  anchorElem?: HTMLDivElement\n  clientProps: any\n  plugin: SanitizedPlugin\n}> = ({ anchorElem, clientProps, plugin }) => {\n  if (plugin.position === 'floatingAnchorElem') {\n    return (\n      plugin.Component && <plugin.Component anchorElem={anchorElem} clientProps={clientProps} />\n    )\n  }\n\n  return plugin.Component && <plugin.Component clientProps={clientProps} />\n}\n"],"names":["React","EditorPlugin","anchorElem","clientProps","plugin","position","Component"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAO;AAI9B,OAAO,MAAMC,eAIR,CAAC,EAAEC,UAAU,EAAEC,WAAW,EAAEC,MAAM,EAAE;IACvC,IAAIA,OAAOC,QAAQ,KAAK,sBAAsB;QAC5C,OACED,OAAOE,SAAS,kBAAI,oBAACF,OAAOE,SAAS;YAACJ,YAAYA;YAAYC,aAAaA;;IAE/E;IAEA,OAAOC,OAAOE,SAAS,kBAAI,oBAACF,OAAOE,SAAS;QAACH,aAAaA;;AAC5D,EAAC"}

package/dist/field/lexical/LexicalEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LexicalEditor.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/LexicalEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAGhE,OAAO,sBAAsB,CAAA;AAQ7B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,cAAc,GAAG,UAAU,CAAC,CAgH3F,CAAA"}
+{"version":3,"file":"LexicalEditor.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/LexicalEditor.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAIhE,OAAO,sBAAsB,CAAA;AAQ7B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,cAAc,GAAG,UAAU,CAAC,CA6I3F,CAAA"}

package/dist/field/lexical/LexicalEditor.js

@@ -1,20 +1,18 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js';
-import lexicalHistoryPluginImport from '@lexical/react/LexicalHistoryPlugin.js';
-const { HistoryPlugin } = lexicalHistoryPluginImport;
-import lexicalOnChangePluginImport from '@lexical/react/LexicalOnChangePlugin.js';
-const { OnChangePlugin } = lexicalOnChangePluginImport;
-import lexicalRichTextPluginImport from '@lexical/react/LexicalRichTextPlugin.js';
-const { RichTextPlugin } = lexicalRichTextPluginImport;
-import lexicalTabIndentationPluginImport from '@lexical/react/LexicalTabIndentationPlugin.js';
-const { TabIndentationPlugin } = lexicalTabIndentationPluginImport;
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js';
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin.js';
+import { mergeRegister } from '@lexical/utils';
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { useEditorFocus } from './EditorFocusProvider.js';
 import { EditorPlugin } from './EditorPlugin.js';
 import './LexicalEditor.scss';
-import { FloatingSelectToolbarPlugin } from './plugins/FloatingSelectToolbar/index.js';
+import { useEditorConfigContext } from './config/client/EditorConfigProvider.js';
 import { MarkdownShortcutPlugin } from './plugins/MarkdownShortcut/index.js';
 import { SlashMenuPlugin } from './plugins/SlashMenu/index.js';
 import { AddBlockHandlePlugin } from './plugins/handles/AddBlockHandlePlugin/index.js';
@@ -22,17 +20,33 @@ import { DraggableBlockPlugin } from './plugins/handles/DraggableBlockPlugin/ind
 import { LexicalContentEditable } from './ui/ContentEditable.js';
 export const LexicalEditor = (props)=>{
     const { editorConfig, onChange } = props;
+    const editorConfigContext = useEditorConfigContext();
     const [editor] = useLexicalComposerContext();
+    const editorFocus = useEditorFocus();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const onRef = (_floatingAnchorElem)=>{
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
         }
     };
+    useEffect(()=>{
+        return mergeRegister(editor.registerCommand(FOCUS_COMMAND, ()=>{
+            editorFocus.focusEditor(editor, editorConfigContext);
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(BLUR_COMMAND, ()=>{
+            editorFocus.blurEditor();
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [
+        editor,
+        editorConfig,
+        editorConfigContext,
+        editorFocus
+    ]);
     const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
     useEffect(()=>{
         const updateViewPortWidth = ()=>{
-            const isNextSmallWidthViewport = window.matchMedia('(max-width: 1025px)').matches;
+            const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches;
             if (isNextSmallWidthViewport !== isSmallWidthViewport) {
                 setIsSmallWidthViewport(isNextSmallWidthViewport);
             }
@@ -49,6 +63,7 @@ export const LexicalEditor = (props)=>{
     return /*#__PURE__*/ React.createElement(React.Fragment, null, editorConfig.features.plugins.map((plugin)=>{
         if (plugin.position === 'top') {
             return /*#__PURE__*/ React.createElement(EditorPlugin, {
+                clientProps: plugin.clientProps,
                 key: plugin.key,
                 plugin: plugin
             });
@@ -84,17 +99,17 @@ export const LexicalEditor = (props)=>{
         if (plugin.position === 'floatingAnchorElem' && !(plugin.desktopOnly === true && isSmallWidthViewport)) {
             return /*#__PURE__*/ React.createElement(EditorPlugin, {
                 anchorElem: floatingAnchorElem,
+                clientProps: plugin.clientProps,
                 key: plugin.key,
                 plugin: plugin
             });
         }
-    }), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FloatingSelectToolbarPlugin, {
-        anchorElem: floatingAnchorElem
-    }), /*#__PURE__*/ React.createElement(SlashMenuPlugin, {
+    }), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SlashMenuPlugin, {
         anchorElem: floatingAnchorElem
     }))), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(HistoryPlugin, null), editorConfig?.features?.markdownTransformers?.length > 0 && /*#__PURE__*/ React.createElement(MarkdownShortcutPlugin, null)), /*#__PURE__*/ React.createElement(TabIndentationPlugin, null), editorConfig.features.plugins.map((plugin)=>{
         if (plugin.position === 'normal') {
             return /*#__PURE__*/ React.createElement(EditorPlugin, {
+                clientProps: plugin.clientProps,
                 key: plugin.key,
                 plugin: plugin
             });
@@ -102,6 +117,7 @@ export const LexicalEditor = (props)=>{
     }), editorConfig.features.plugins.map((plugin)=>{
         if (plugin.position === 'bottom') {
             return /*#__PURE__*/ React.createElement(EditorPlugin, {
+                clientProps: plugin.clientProps,
                 key: plugin.key,
                 plugin: plugin
             });

package/dist/field/lexical/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/lexical/LexicalEditor.tsx"],"sourcesContent":["'use client'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\n\nimport LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js'\nimport lexicalHistoryPluginImport from '@lexical/react/LexicalHistoryPlugin.js'\nconst { HistoryPlugin } = lexicalHistoryPluginImport\n\nimport lexicalOnChangePluginImport from '@lexical/react/LexicalOnChangePlugin.js'\nconst { OnChangePlugin } = lexicalOnChangePluginImport\n\nimport lexicalRichTextPluginImport from '@lexical/react/LexicalRichTextPlugin.js'\nconst { RichTextPlugin } = lexicalRichTextPluginImport\n\nimport lexicalTabIndentationPluginImport from '@lexical/react/LexicalTabIndentationPlugin.js'\nconst { TabIndentationPlugin } = lexicalTabIndentationPluginImport\n\nimport * as React from 'react'\nimport { useEffect, useState } from 'react'\n\nimport type { LexicalProviderProps } from './LexicalProvider.js'\n\nimport { EditorPlugin } from './EditorPlugin.js'\nimport './LexicalEditor.scss'\nimport { FloatingSelectToolbarPlugin } from './plugins/FloatingSelectToolbar/index.js'\nimport { MarkdownShortcutPlugin } from './plugins/MarkdownShortcut/index.js'\nimport { SlashMenuPlugin } from './plugins/SlashMenu/index.js'\nimport { AddBlockHandlePlugin } from './plugins/handles/AddBlockHandlePlugin/index.js'\nimport { DraggableBlockPlugin } from './plugins/handles/DraggableBlockPlugin/index.js'\nimport { LexicalContentEditable } from './ui/ContentEditable.js'\n\nexport const LexicalEditor: React.FC<Pick<LexicalProviderProps, 'editorConfig' | 'onChange'>> = (\n  props,\n) => {\n  const { editorConfig, onChange } = props\n  const [editor] = useLexicalComposerContext()\n\n  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)\n  const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n    if (_floatingAnchorElem !== null) {\n      setFloatingAnchorElem(_floatingAnchorElem)\n    }\n  }\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n\n  useEffect(() => {\n    const updateViewPortWidth = () => {\n      const isNextSmallWidthViewport = window.matchMedia('(max-width: 1025px)').matches\n\n      if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n        setIsSmallWidthViewport(isNextSmallWidthViewport)\n      }\n    }\n    updateViewPortWidth()\n    window.addEventListener('resize', updateViewPortWidth)\n\n    return () => {\n      window.removeEventListener('resize', updateViewPortWidth)\n    }\n  }, [isSmallWidthViewport])\n\n  const ErrorBoundaryComponent = LexicalErrorBoundary.default || LexicalErrorBoundary\n\n  return (\n    <React.Fragment>\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'top') {\n          return <EditorPlugin key={plugin.key} plugin={plugin} />\n        }\n      })}\n      <RichTextPlugin\n        //@ts-expect-error ts being dumb\n        ErrorBoundary={ErrorBoundaryComponent}\n        contentEditable={\n          <div className=\"editor-scroller\">\n            <div className=\"editor\" ref={onRef}>\n              <LexicalContentEditable />\n            </div>\n          </div>\n        }\n        placeholder={\n          <p className=\"editor-placeholder\">Start typing, or press '/' for commands...</p>\n        }\n      />\n      <OnChangePlugin\n        // Selection changes can be ignored here, reducing the\n        // frequency that the FieldComponent and Payload receive updates.\n        // Selection changes are only needed if you are saving selection state\n        ignoreSelectionChange\n        onChange={(editorState, editor, tags) => {\n          // Ignore any onChange event triggered by focus only\n          if (!tags.has('focus') || tags.size > 1) {\n            if (onChange != null) onChange(editorState, editor, tags)\n          }\n        }}\n      />\n      {floatingAnchorElem && (\n        <React.Fragment>\n          {!isSmallWidthViewport && editor.isEditable() && (\n            <React.Fragment>\n              <DraggableBlockPlugin anchorElem={floatingAnchorElem} />\n              <AddBlockHandlePlugin anchorElem={floatingAnchorElem} />\n            </React.Fragment>\n          )}\n          {editorConfig.features.plugins.map((plugin) => {\n            if (\n              plugin.position === 'floatingAnchorElem' &&\n              !(plugin.desktopOnly === true && isSmallWidthViewport)\n            ) {\n              return (\n                <EditorPlugin anchorElem={floatingAnchorElem} key={plugin.key} plugin={plugin} />\n              )\n            }\n          })}\n          {editor.isEditable() && (\n            <React.Fragment>\n              <FloatingSelectToolbarPlugin anchorElem={floatingAnchorElem} />\n              <SlashMenuPlugin anchorElem={floatingAnchorElem} />\n            </React.Fragment>\n          )}\n        </React.Fragment>\n      )}\n      {editor.isEditable() && (\n        <React.Fragment>\n          <HistoryPlugin />\n          {editorConfig?.features?.markdownTransformers?.length > 0 && <MarkdownShortcutPlugin />}\n        </React.Fragment>\n      )}\n\n      <TabIndentationPlugin />\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'normal') {\n          return <EditorPlugin key={plugin.key} plugin={plugin} />\n        }\n      })}\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'bottom') {\n          return <EditorPlugin key={plugin.key} plugin={plugin} />\n        }\n      })}\n    </React.Fragment>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","LexicalErrorBoundary","lexicalHistoryPluginImport","HistoryPlugin","lexicalOnChangePluginImport","OnChangePlugin","lexicalRichTextPluginImport","RichTextPlugin","lexicalTabIndentationPluginImport","TabIndentationPlugin","React","useEffect","useState","EditorPlugin","FloatingSelectToolbarPlugin","MarkdownShortcutPlugin","SlashMenuPlugin","AddBlockHandlePlugin","DraggableBlockPlugin","LexicalContentEditable","LexicalEditor","props","editorConfig","onChange","editor","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","isSmallWidthViewport","setIsSmallWidthViewport","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","ErrorBoundaryComponent","default","Fragment","features","plugins","map","plugin","position","key","ErrorBoundary","contentEditable","div","className","ref","placeholder","p","ignoreSelectionChange","editorState","tags","has","size","isEditable","anchorElem","desktopOnly","markdownTransformers","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/field/lexical/LexicalEditor.tsx"],"sourcesContent":["'use client'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js'\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'\nimport { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical'\nimport * as React from 'react'\nimport { useEffect, useState } from 'react'\n\nimport type { LexicalProviderProps } from './LexicalProvider.js'\n\nimport { useEditorFocus } from './EditorFocusProvider.js'\nimport { EditorPlugin } from './EditorPlugin.js'\nimport './LexicalEditor.scss'\nimport { useEditorConfigContext } from './config/client/EditorConfigProvider.js'\nimport { MarkdownShortcutPlugin } from './plugins/MarkdownShortcut/index.js'\nimport { SlashMenuPlugin } from './plugins/SlashMenu/index.js'\nimport { AddBlockHandlePlugin } from './plugins/handles/AddBlockHandlePlugin/index.js'\nimport { DraggableBlockPlugin } from './plugins/handles/DraggableBlockPlugin/index.js'\nimport { LexicalContentEditable } from './ui/ContentEditable.js'\n\nexport const LexicalEditor: React.FC<Pick<LexicalProviderProps, 'editorConfig' | 'onChange'>> = (\n  props,\n) => {\n  const { editorConfig, onChange } = props\n  const editorConfigContext = useEditorConfigContext()\n  const [editor] = useLexicalComposerContext()\n  const editorFocus = useEditorFocus()\n\n  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)\n  const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n    if (_floatingAnchorElem !== null) {\n      setFloatingAnchorElem(_floatingAnchorElem)\n    }\n  }\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand<MouseEvent>(\n        FOCUS_COMMAND,\n        () => {\n          editorFocus.focusEditor(editor, editorConfigContext)\n          return true\n        },\n\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand<MouseEvent>(\n        BLUR_COMMAND,\n        () => {\n          editorFocus.blurEditor()\n          return true\n        },\n\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, editorConfig, editorConfigContext, editorFocus])\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n\n  useEffect(() => {\n    const updateViewPortWidth = () => {\n      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n      if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n        setIsSmallWidthViewport(isNextSmallWidthViewport)\n      }\n    }\n    updateViewPortWidth()\n    window.addEventListener('resize', updateViewPortWidth)\n\n    return () => {\n      window.removeEventListener('resize', updateViewPortWidth)\n    }\n  }, [isSmallWidthViewport])\n\n  const ErrorBoundaryComponent = LexicalErrorBoundary.default || LexicalErrorBoundary\n\n  return (\n    <React.Fragment>\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'top') {\n          return <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n        }\n      })}\n      <RichTextPlugin\n        //@ts-expect-error ts being dumb\n        ErrorBoundary={ErrorBoundaryComponent}\n        contentEditable={\n          <div className=\"editor-scroller\">\n            <div className=\"editor\" ref={onRef}>\n              <LexicalContentEditable />\n            </div>\n          </div>\n        }\n        placeholder={\n          <p className=\"editor-placeholder\">Start typing, or press '/' for commands...</p>\n        }\n      />\n      <OnChangePlugin\n        // Selection changes can be ignored here, reducing the\n        // frequency that the FieldComponent and Payload receive updates.\n        // Selection changes are only needed if you are saving selection state\n        ignoreSelectionChange\n        onChange={(editorState, editor, tags) => {\n          // Ignore any onChange event triggered by focus only\n          if (!tags.has('focus') || tags.size > 1) {\n            if (onChange != null) onChange(editorState, editor, tags)\n          }\n        }}\n      />\n      {floatingAnchorElem && (\n        <React.Fragment>\n          {!isSmallWidthViewport && editor.isEditable() && (\n            <React.Fragment>\n              <DraggableBlockPlugin anchorElem={floatingAnchorElem} />\n              <AddBlockHandlePlugin anchorElem={floatingAnchorElem} />\n            </React.Fragment>\n          )}\n          {editorConfig.features.plugins.map((plugin) => {\n            if (\n              plugin.position === 'floatingAnchorElem' &&\n              !(plugin.desktopOnly === true && isSmallWidthViewport)\n            ) {\n              return (\n                <EditorPlugin\n                  anchorElem={floatingAnchorElem}\n                  clientProps={plugin.clientProps}\n                  key={plugin.key}\n                  plugin={plugin}\n                />\n              )\n            }\n          })}\n          {editor.isEditable() && (\n            <React.Fragment>\n              <SlashMenuPlugin anchorElem={floatingAnchorElem} />\n            </React.Fragment>\n          )}\n        </React.Fragment>\n      )}\n      {editor.isEditable() && (\n        <React.Fragment>\n          <HistoryPlugin />\n          {editorConfig?.features?.markdownTransformers?.length > 0 && <MarkdownShortcutPlugin />}\n        </React.Fragment>\n      )}\n\n      <TabIndentationPlugin />\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'normal') {\n          return <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n        }\n      })}\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'bottom') {\n          return <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n        }\n      })}\n    </React.Fragment>\n  )\n}\n"],"names":["useLexicalComposerContext","LexicalErrorBoundary","HistoryPlugin","OnChangePlugin","RichTextPlugin","TabIndentationPlugin","mergeRegister","BLUR_COMMAND","COMMAND_PRIORITY_LOW","FOCUS_COMMAND","React","useEffect","useState","useEditorFocus","EditorPlugin","useEditorConfigContext","MarkdownShortcutPlugin","SlashMenuPlugin","AddBlockHandlePlugin","DraggableBlockPlugin","LexicalContentEditable","LexicalEditor","props","editorConfig","onChange","editorConfigContext","editor","editorFocus","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","registerCommand","focusEditor","blurEditor","isSmallWidthViewport","setIsSmallWidthViewport","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","ErrorBoundaryComponent","default","Fragment","features","plugins","map","plugin","position","clientProps","key","ErrorBoundary","contentEditable","div","className","ref","placeholder","p","ignoreSelectionChange","editorState","tags","has","size","isEditable","anchorElem","desktopOnly","markdownTransformers","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/lexical/LexicalEditor.scss

@@ -1,3 +1,5 @@
+@import '../../scss/styles';
+
 .rich-text-lexical {
   .editor {
     position: relative;
@@ -23,7 +25,7 @@
   .editor-placeholder {
     position: absolute;
     top: 8px;
-    left: 0px;
+    left: 0;
     font-size: 15px;
     color: var(--theme-elevation-500);
     /* Prevent text selection */
@@ -36,21 +38,3 @@
     pointer-events: none;
   }
 }
-
-.floating-select-toolbar-popup__section-dropdown-align {
-  display: flex;
-  gap: 2px;
-}
-.floating-select-toolbar-popup__section-features {
-  display: flex;
-  gap: 2px;
-}
-.floating-select-toolbar-popup__section-dropdown-text {
-  display: flex;
-  gap: 2px;
-}
-
-.floating-select-toolbar-popup__section-format {
-  display: flex;
-  gap: 2px;
-}

package/dist/field/lexical/LexicalProvider.d.ts

@@ -1,6 +1,6 @@
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import type { EditorState, SerializedEditorState } from 'lexical';
 import type { LexicalEditor } from 'lexical';
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import * as React from 'react';
 import type { SanitizedClientEditorConfig } from './config/types.js';
 export type LexicalProviderProps = {

package/dist/field/lexical/LexicalProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LexicalProvider.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/LexicalProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAMpE,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,2BAA2B,CAAA;IACzC,UAAU,EAAE,aAAa,GAAG;QAC1B,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,QAAQ,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2D1D,CAAA"}
+{"version":3,"file":"LexicalProvider.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/LexicalProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAOpE,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,2BAA2B,CAAA;IACzC,UAAU,EAAE,aAAa,GAAG;QAC1B,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,QAAQ,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6D1D,CAAA"}

package/dist/field/lexical/LexicalProvider.js

@@ -1,7 +1,7 @@
 'use client';
-import lexicalComposerImport from '@lexical/react/LexicalComposer.js';
-const { LexicalComposer } = lexicalComposerImport;
+import { LexicalComposer } from '@lexical/react/LexicalComposer.js';
 import * as React from 'react';
+import { EditorFocusProvider } from './EditorFocusProvider.js';
 import { LexicalEditor as LexicalEditorComponent } from './LexicalEditor.js';
 import { EditorConfigProvider } from './config/client/EditorConfigProvider.js';
 import { getEnabledNodes } from './nodes/index.js';
@@ -53,7 +53,7 @@ export const LexicalProvider = (props)=>{
     return /*#__PURE__*/ React.createElement(LexicalComposer, {
         initialConfig: initialConfig,
         key: path
-    }, /*#__PURE__*/ React.createElement(EditorConfigProvider, {
+    }, /*#__PURE__*/ React.createElement(EditorFocusProvider, null, /*#__PURE__*/ React.createElement(EditorConfigProvider, {
         editorConfig: editorConfig,
         fieldProps: fieldProps
     }, /*#__PURE__*/ React.createElement("div", {
@@ -61,7 +61,7 @@ export const LexicalProvider = (props)=>{
     }, /*#__PURE__*/ React.createElement(LexicalEditorComponent, {
         editorConfig: editorConfig,
         onChange: onChange
-    }))));
+    })))));
 };
 
 //# sourceMappingURL=LexicalProvider.js.map

package/dist/field/lexical/LexicalProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/lexical/LexicalProvider.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\nimport type { LexicalEditor } from 'lexical'\n\nimport lexicalComposerImport from '@lexical/react/LexicalComposer.js'\nconst { LexicalComposer } = lexicalComposerImport\n\nimport type { InitialConfigType } from '@lexical/react/LexicalComposer.js'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\n\nimport * as React from 'react'\n\nimport type { SanitizedClientEditorConfig } from './config/types.js'\n\nimport { LexicalEditor as LexicalEditorComponent } from './LexicalEditor.js'\nimport { EditorConfigProvider } from './config/client/EditorConfigProvider.js'\nimport { getEnabledNodes } from './nodes/index.js'\n\nexport type LexicalProviderProps = {\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void\n  path: string\n  readOnly: boolean\n  value: SerializedEditorState\n}\nexport const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {\n  const { editorConfig, fieldProps, onChange, path, readOnly } = props\n  let { value } = props\n\n  const [initialConfig, setInitialConfig] = React.useState<InitialConfigType | null>(null)\n\n  // set lexical config in useEffect: // TODO: Is this the most performant way to do this? Prob not\n  React.useEffect(() => {\n    const newInitialConfig: InitialConfigType = {\n      editable: readOnly !== true,\n      editorState: value != null ? JSON.stringify(value) : undefined,\n      namespace: editorConfig.lexical.namespace,\n      nodes: [...getEnabledNodes({ editorConfig })],\n      onError: (error: Error) => {\n        throw error\n      },\n      theme: editorConfig.lexical.theme,\n    }\n    setInitialConfig(newInitialConfig)\n  }, [editorConfig, readOnly, value])\n\n  if (editorConfig?.features?.hooks?.load?.length) {\n    editorConfig.features.hooks.load.forEach((hook) => {\n      value = hook({ incomingEditorState: value })\n    })\n  }\n\n  if (value && typeof value !== 'object') {\n    throw new Error(\n      'The value passed to the Lexical editor is not an object. This is not supported. Please remove the data from the field and start again. This is the value that was passed in: ' +\n        JSON.stringify(value),\n    )\n  }\n\n  if (value && Array.isArray(value) && !('root' in value)) {\n    throw new Error(\n      'You have tried to pass in data from the old, Slate editor, to the new, Lexical editor. This is not supported. There is no automatic conversion from Slate to Lexical data available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (value && 'jsonContent' in value) {\n    throw new Error(\n      'You have tried to pass in data from payload-plugin-lexical. This is not supported. The data structure has changed in this editor, compared to the plugin, and there is no automatic conversion available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (!initialConfig) {\n    return <p>Loading...</p>\n  }\n\n  return (\n    <LexicalComposer initialConfig={initialConfig} key={path}>\n      <EditorConfigProvider editorConfig={editorConfig} fieldProps={fieldProps}>\n        <div className=\"editor-shell\">\n          <LexicalEditorComponent editorConfig={editorConfig} onChange={onChange} />\n        </div>\n      </EditorConfigProvider>\n    </LexicalComposer>\n  )\n}\n"],"names":["lexicalComposerImport","LexicalComposer","React","LexicalEditor","LexicalEditorComponent","EditorConfigProvider","getEnabledNodes","LexicalProvider","props","editorConfig","fieldProps","onChange","path","readOnly","value","initialConfig","setInitialConfig","useState","useEffect","newInitialConfig","editable","editorState","JSON","stringify","undefined","namespace","lexical","nodes","onError","error","theme","features","hooks","load","length","forEach","hook","incomingEditorState","Error","Array","isArray","p","key","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,OAAOA,2BAA2B,oCAAmC;AACrE,MAAM,EAAEC,eAAe,EAAE,GAAGD;AAK5B,YAAYE,WAAW,QAAO;AAI9B,SAASC,iBAAiBC,sBAAsB,QAAQ,qBAAoB;AAC5E,SAASC,oBAAoB,QAAQ,0CAAyC;AAC9E,SAASC,eAAe,QAAQ,mBAAkB;AAclD,OAAO,MAAMC,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGL;IAC/D,IAAI,EAAEM,KAAK,EAAE,GAAGN;IAEhB,MAAM,CAACO,eAAeC,iBAAiB,GAAGd,MAAMe,QAAQ,CAA2B;IAEnF,iGAAiG;IACjGf,MAAMgB,SAAS,CAAC;QACd,MAAMC,mBAAsC;YAC1CC,UAAUP,aAAa;YACvBQ,aAAaP,SAAS,OAAOQ,KAAKC,SAAS,CAACT,SAASU;YACrDC,WAAWhB,aAAaiB,OAAO,CAACD,SAAS;YACzCE,OAAO;mBAAIrB,gBAAgB;oBAAEG;gBAAa;aAAG;YAC7CmB,SAAS,CAACC;gBACR,MAAMA;YACR;YACAC,OAAOrB,aAAaiB,OAAO,CAACI,KAAK;QACnC;QACAd,iBAAiBG;IACnB,GAAG;QAACV;QAAcI;QAAUC;KAAM;IAElC,IAAIL,cAAcsB,UAAUC,OAAOC,MAAMC,QAAQ;QAC/CzB,aAAasB,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;YACxCtB,QAAQsB,KAAK;gBAAEC,qBAAqBvB;YAAM;QAC5C;IACF;IAEA,IAAIA,SAAS,OAAOA,UAAU,UAAU;QACtC,MAAM,IAAIwB,MACR,kLACEhB,KAAKC,SAAS,CAACT;IAErB;IAEA,IAAIA,SAASyB,MAAMC,OAAO,CAAC1B,UAAU,CAAE,CAAA,UAAUA,KAAI,GAAI;QACvD,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAIxB,SAAS,iBAAiBA,OAAO;QACnC,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAI,CAACvB,eAAe;QAClB,qBAAO,oBAAC0B,WAAE;IACZ;IAEA,qBACE,oBAACxC;QAAgBc,eAAeA;QAAe2B,KAAK9B;qBAClD,oBAACP;QAAqBI,cAAcA;QAAcC,YAAYA;qBAC5D,oBAACiC;QAAIC,WAAU;qBACb,oBAACxC;QAAuBK,cAAcA;QAAcE,UAAUA;;AAKxE,EAAC"}
+{"version":3,"sources":["../../../src/field/lexical/LexicalProvider.tsx"],"sourcesContent":["'use client'\nimport type { InitialConfigType } from '@lexical/react/LexicalComposer.js'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { EditorState, SerializedEditorState } from 'lexical'\nimport type { LexicalEditor } from 'lexical'\n\nimport { LexicalComposer } from '@lexical/react/LexicalComposer.js'\nimport * as React from 'react'\n\nimport type { SanitizedClientEditorConfig } from './config/types.js'\n\nimport { EditorFocusProvider } from './EditorFocusProvider.js'\nimport { LexicalEditor as LexicalEditorComponent } from './LexicalEditor.js'\nimport { EditorConfigProvider } from './config/client/EditorConfigProvider.js'\nimport { getEnabledNodes } from './nodes/index.js'\n\nexport type LexicalProviderProps = {\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void\n  path: string\n  readOnly: boolean\n  value: SerializedEditorState\n}\nexport const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {\n  const { editorConfig, fieldProps, onChange, path, readOnly } = props\n  let { value } = props\n\n  const [initialConfig, setInitialConfig] = React.useState<InitialConfigType | null>(null)\n\n  // set lexical config in useEffect: // TODO: Is this the most performant way to do this? Prob not\n  React.useEffect(() => {\n    const newInitialConfig: InitialConfigType = {\n      editable: readOnly !== true,\n      editorState: value != null ? JSON.stringify(value) : undefined,\n      namespace: editorConfig.lexical.namespace,\n      nodes: [...getEnabledNodes({ editorConfig })],\n      onError: (error: Error) => {\n        throw error\n      },\n      theme: editorConfig.lexical.theme,\n    }\n    setInitialConfig(newInitialConfig)\n  }, [editorConfig, readOnly, value])\n\n  if (editorConfig?.features?.hooks?.load?.length) {\n    editorConfig.features.hooks.load.forEach((hook) => {\n      value = hook({ incomingEditorState: value })\n    })\n  }\n\n  if (value && typeof value !== 'object') {\n    throw new Error(\n      'The value passed to the Lexical editor is not an object. This is not supported. Please remove the data from the field and start again. This is the value that was passed in: ' +\n        JSON.stringify(value),\n    )\n  }\n\n  if (value && Array.isArray(value) && !('root' in value)) {\n    throw new Error(\n      'You have tried to pass in data from the old, Slate editor, to the new, Lexical editor. This is not supported. There is no automatic conversion from Slate to Lexical data available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (value && 'jsonContent' in value) {\n    throw new Error(\n      'You have tried to pass in data from payload-plugin-lexical. This is not supported. The data structure has changed in this editor, compared to the plugin, and there is no automatic conversion available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (!initialConfig) {\n    return <p>Loading...</p>\n  }\n\n  return (\n    <LexicalComposer initialConfig={initialConfig} key={path}>\n      <EditorFocusProvider>\n        <EditorConfigProvider editorConfig={editorConfig} fieldProps={fieldProps}>\n          <div className=\"editor-shell\">\n            <LexicalEditorComponent editorConfig={editorConfig} onChange={onChange} />\n          </div>\n        </EditorConfigProvider>\n      </EditorFocusProvider>\n    </LexicalComposer>\n  )\n}\n"],"names":["LexicalComposer","React","EditorFocusProvider","LexicalEditor","LexicalEditorComponent","EditorConfigProvider","getEnabledNodes","LexicalProvider","props","editorConfig","fieldProps","onChange","path","readOnly","value","initialConfig","setInitialConfig","useState","useEffect","newInitialConfig","editable","editorState","JSON","stringify","undefined","namespace","lexical","nodes","onError","error","theme","features","hooks","load","length","forEach","hook","incomingEditorState","Error","Array","isArray","p","key","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAMA,SAASA,eAAe,QAAQ,oCAAmC;AACnE,YAAYC,WAAW,QAAO;AAI9B,SAASC,mBAAmB,QAAQ,2BAA0B;AAC9D,SAASC,iBAAiBC,sBAAsB,QAAQ,qBAAoB;AAC5E,SAASC,oBAAoB,QAAQ,0CAAyC;AAC9E,SAASC,eAAe,QAAQ,mBAAkB;AAclD,OAAO,MAAMC,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGL;IAC/D,IAAI,EAAEM,KAAK,EAAE,GAAGN;IAEhB,MAAM,CAACO,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CAA2B;IAEnF,iGAAiG;IACjGhB,MAAMiB,SAAS,CAAC;QACd,MAAMC,mBAAsC;YAC1CC,UAAUP,aAAa;YACvBQ,aAAaP,SAAS,OAAOQ,KAAKC,SAAS,CAACT,SAASU;YACrDC,WAAWhB,aAAaiB,OAAO,CAACD,SAAS;YACzCE,OAAO;mBAAIrB,gBAAgB;oBAAEG;gBAAa;aAAG;YAC7CmB,SAAS,CAACC;gBACR,MAAMA;YACR;YACAC,OAAOrB,aAAaiB,OAAO,CAACI,KAAK;QACnC;QACAd,iBAAiBG;IACnB,GAAG;QAACV;QAAcI;QAAUC;KAAM;IAElC,IAAIL,cAAcsB,UAAUC,OAAOC,MAAMC,QAAQ;QAC/CzB,aAAasB,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;YACxCtB,QAAQsB,KAAK;gBAAEC,qBAAqBvB;YAAM;QAC5C;IACF;IAEA,IAAIA,SAAS,OAAOA,UAAU,UAAU;QACtC,MAAM,IAAIwB,MACR,kLACEhB,KAAKC,SAAS,CAACT;IAErB;IAEA,IAAIA,SAASyB,MAAMC,OAAO,CAAC1B,UAAU,CAAE,CAAA,UAAUA,KAAI,GAAI;QACvD,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAIxB,SAAS,iBAAiBA,OAAO;QACnC,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAI,CAACvB,eAAe;QAClB,qBAAO,oBAAC0B,WAAE;IACZ;IAEA,qBACE,oBAACzC;QAAgBe,eAAeA;QAAe2B,KAAK9B;qBAClD,oBAACV,yCACC,oBAACG;QAAqBI,cAAcA;QAAcC,YAAYA;qBAC5D,oBAACiC;QAAIC,WAAU;qBACb,oBAACxC;QAAuBK,cAAcA;QAAcE,UAAUA;;AAM1E,EAAC"}

package/dist/field/lexical/config/client/EditorConfigProvider.d.ts

@@ -1,7 +1,7 @@
 import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import * as React from 'react';
 import type { SanitizedClientEditorConfig } from '../types.js';
-interface ContextType {
+export interface EditorConfigContextType {
     editorConfig: SanitizedClientEditorConfig;
     field: FormFieldBase & {
         editorConfig: SanitizedClientEditorConfig;
@@ -19,6 +19,5 @@ export declare const EditorConfigProvider: ({ children, editorConfig, fieldProps
         richTextComponentMap: Map<string, React.ReactNode>;
     };
 }) => React.ReactNode;
-export declare const useEditorConfigContext: () => ContextType;
-export {};
+export declare const useEditorConfigContext: () => EditorConfigContextType;
 //# sourceMappingURL=EditorConfigProvider.d.ts.map

package/dist/field/lexical/config/client/EditorConfigProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorConfigProvider.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAM9D,UAAU,WAAW;IACnB,YAAY,EAAE,2BAA2B,CAAA;IACzC,KAAK,EAAE,aAAa,GAAG;QACrB,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAQD,eAAO,MAAM,oBAAoB,4CAI9B;IACD,QAAQ,EAAE,MAAM,SAAS,CAAA;IACzB,YAAY,EAAE,2BAA2B,CAAA;IACzC,UAAU,EAAE,aAAa,GAAG;QAC1B,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC,CAAA;KACnD,CAAA;CACF,KAAG,MAAM,SAeT,CAAA;AAED,eAAO,MAAM,sBAAsB,QAAO,WAMzC,CAAA"}
+{"version":3,"file":"EditorConfigProvider.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAM9D,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,2BAA2B,CAAA;IACzC,KAAK,EAAE,aAAa,GAAG;QACrB,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAQD,eAAO,MAAM,oBAAoB,4CAI9B;IACD,QAAQ,EAAE,MAAM,SAAS,CAAA;IACzB,YAAY,EAAE,2BAA2B,CAAA;IACzC,UAAU,EAAE,aAAa,GAAG;QAC1B,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC,CAAA;KACnD,CAAA;CACF,KAAG,MAAM,SAeT,CAAA;AAED,eAAO,MAAM,sBAAsB,QAAO,uBAMzC,CAAA"}

package/dist/field/lexical/config/client/EditorConfigProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\n\nimport * as React from 'react'\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../types.js'\n\n// Should always produce a 20 character pseudo-random string\nfunction generateQuickGuid(): string {\n  return Math.random().toString(36).substring(2, 12) + Math.random().toString(36).substring(2, 12)\n}\ninterface ContextType {\n  editorConfig: SanitizedClientEditorConfig\n  field: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  uuid: string\n}\n\nconst Context: React.Context<ContextType> = createContext({\n  editorConfig: null,\n  field: null,\n  uuid: generateQuickGuid(),\n})\n\nexport const EditorConfigProvider = ({\n  children,\n  editorConfig,\n  fieldProps,\n}: {\n  children: React.ReactNode\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n}): React.ReactNode => {\n  // State to store the UUID\n  const [uuid, setUuid] = useState(generateQuickGuid())\n\n  // When the component mounts, generate a new UUID only once\n  useEffect(() => {\n    setUuid(generateQuickGuid())\n  }, [])\n\n  const editorContext = useMemo(\n    () => ({ editorConfig, field: fieldProps, uuid }),\n    [editorConfig, fieldProps, uuid],\n  )\n\n  return <Context.Provider value={editorContext}>{children}</Context.Provider>\n}\n\nexport const useEditorConfigContext = (): ContextType => {\n  const context = useContext(Context)\n  if (context === undefined) {\n    throw new Error('useEditorConfigContext must be used within an EditorConfigProvider')\n  }\n  return context\n}\n"],"names":["React","createContext","useContext","useEffect","useMemo","useState","generateQuickGuid","Math","random","toString","substring","Context","editorConfig","field","uuid","EditorConfigProvider","children","fieldProps","setUuid","editorContext","Provider","value","useEditorConfigContext","context","undefined","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,YAAYA,WAAW,QAAO;AAC9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI/E,4DAA4D;AAC5D,SAASC;IACP,OAAOC,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG,MAAMH,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG;AAC/F;AAWA,MAAMC,wBAAsCV,cAAc;IACxDW,cAAc;IACdC,OAAO;IACPC,MAAMR;AACR;AAEA,OAAO,MAAMS,uBAAuB,CAAC,EACnCC,QAAQ,EACRJ,YAAY,EACZK,UAAU,EASX;IACC,0BAA0B;IAC1B,MAAM,CAACH,MAAMI,QAAQ,GAAGb,SAASC;IAEjC,2DAA2D;IAC3DH,UAAU;QACRe,QAAQZ;IACV,GAAG,EAAE;IAEL,MAAMa,gBAAgBf,QACpB,IAAO,CAAA;YAAEQ;YAAcC,OAAOI;YAAYH;QAAK,CAAA,GAC/C;QAACF;QAAcK;QAAYH;KAAK;IAGlC,qBAAO,oBAACH,QAAQS,QAAQ;QAACC,OAAOF;OAAgBH;AAClD,EAAC;AAED,OAAO,MAAMM,yBAAyB;IACpC,MAAMC,UAAUrB,WAAWS;IAC3B,IAAIY,YAAYC,WAAW;QACzB,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOF;AACT,EAAC"}
+{"version":3,"sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\n\nimport * as React from 'react'\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../types.js'\n\n// Should always produce a 20 character pseudo-random string\nfunction generateQuickGuid(): string {\n  return Math.random().toString(36).substring(2, 12) + Math.random().toString(36).substring(2, 12)\n}\nexport interface EditorConfigContextType {\n  editorConfig: SanitizedClientEditorConfig\n  field: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  uuid: string\n}\n\nconst Context: React.Context<EditorConfigContextType> = createContext({\n  editorConfig: null,\n  field: null,\n  uuid: generateQuickGuid(),\n})\n\nexport const EditorConfigProvider = ({\n  children,\n  editorConfig,\n  fieldProps,\n}: {\n  children: React.ReactNode\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n}): React.ReactNode => {\n  // State to store the UUID\n  const [uuid, setUuid] = useState(generateQuickGuid())\n\n  // When the component mounts, generate a new UUID only once\n  useEffect(() => {\n    setUuid(generateQuickGuid())\n  }, [])\n\n  const editorContext = useMemo(\n    () => ({ editorConfig, field: fieldProps, uuid }),\n    [editorConfig, fieldProps, uuid],\n  )\n\n  return <Context.Provider value={editorContext}>{children}</Context.Provider>\n}\n\nexport const useEditorConfigContext = (): EditorConfigContextType => {\n  const context = useContext(Context)\n  if (context === undefined) {\n    throw new Error('useEditorConfigContext must be used within an EditorConfigProvider')\n  }\n  return context\n}\n"],"names":["React","createContext","useContext","useEffect","useMemo","useState","generateQuickGuid","Math","random","toString","substring","Context","editorConfig","field","uuid","EditorConfigProvider","children","fieldProps","setUuid","editorContext","Provider","value","useEditorConfigContext","context","undefined","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,YAAYA,WAAW,QAAO;AAC9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI/E,4DAA4D;AAC5D,SAASC;IACP,OAAOC,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG,MAAMH,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG;AAC/F;AAWA,MAAMC,wBAAkDV,cAAc;IACpEW,cAAc;IACdC,OAAO;IACPC,MAAMR;AACR;AAEA,OAAO,MAAMS,uBAAuB,CAAC,EACnCC,QAAQ,EACRJ,YAAY,EACZK,UAAU,EASX;IACC,0BAA0B;IAC1B,MAAM,CAACH,MAAMI,QAAQ,GAAGb,SAASC;IAEjC,2DAA2D;IAC3DH,UAAU;QACRe,QAAQZ;IACV,GAAG,EAAE;IAEL,MAAMa,gBAAgBf,QACpB,IAAO,CAAA;YAAEQ;YAAcC,OAAOI;YAAYH;QAAK,CAAA,GAC/C;QAACF;QAAcK;QAAYH;KAAK;IAGlC,qBAAO,oBAACH,QAAQS,QAAQ;QAACC,OAAOF;OAAgBH;AAClD,EAAC;AAED,OAAO,MAAMM,yBAAyB;IACpC,MAAMC,UAAUrB,WAAWS;IAC3B,IAAIY,YAAYC,WAAW;QACzB,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOF;AACT,EAAC"}

package/dist/field/lexical/config/client/default.d.ts

@@ -1,3 +1,3 @@
-import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js';
+import type { EditorConfig as LexicalEditorConfig } from 'lexical';
 export declare const defaultEditorLexicalConfig: LexicalEditorConfig;
 //# sourceMappingURL=default.d.ts.map

package/dist/field/lexical/config/client/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/default.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAInF,eAAO,MAAM,0BAA0B,EAAE,mBAGxC,CAAA"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/default.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAIlE,eAAO,MAAM,0BAA0B,EAAE,mBAGxC,CAAA"}

package/dist/field/lexical/config/client/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/lexical/config/client/default.ts"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'\n\nimport { LexicalEditorTheme } from '../../theme/EditorTheme.js'\n\nexport const defaultEditorLexicalConfig: LexicalEditorConfig = {\n  namespace: 'lexical',\n  theme: LexicalEditorTheme,\n}\n"],"names":["LexicalEditorTheme","defaultEditorLexicalConfig","namespace","theme"],"rangeMappings":";;;;;","mappings":"AAAA;AAGA,SAASA,kBAAkB,QAAQ,6BAA4B;AAE/D,OAAO,MAAMC,6BAAkD;IAC7DC,WAAW;IACXC,OAAOH;AACT,EAAC"}
+{"version":3,"sources":["../../../../../src/field/lexical/config/client/default.ts"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical'\n\nimport { LexicalEditorTheme } from '../../theme/EditorTheme.js'\n\nexport const defaultEditorLexicalConfig: LexicalEditorConfig = {\n  namespace: 'lexical',\n  theme: LexicalEditorTheme,\n}\n"],"names":["LexicalEditorTheme","defaultEditorLexicalConfig","namespace","theme"],"rangeMappings":";;;;;","mappings":"AAAA;AAGA,SAASA,kBAAkB,QAAQ,6BAA4B;AAE/D,OAAO,MAAMC,6BAAkD;IAC7DC,WAAW;IACXC,OAAOH;AACT,EAAC"}

package/dist/field/lexical/config/client/sanitize.d.ts

@@ -1,4 +1,4 @@
-import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js';
+import type { EditorConfig as LexicalEditorConfig } from 'lexical';
 import type { ResolvedClientFeatureMap, SanitizedClientFeatures } from '../../../features/types.js';
 import type { SanitizedClientEditorConfig } from '../types.js';
 export declare const sanitizeClientFeatures: (features: ResolvedClientFeatureMap) => SanitizedClientFeatures;

package/dist/field/lexical/config/client/sanitize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/sanitize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEnF,OAAO,KAAK,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAA;AACnG,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAE9D,eAAO,MAAM,sBAAsB,0CAEhC,uBA4IF,CAAA;AAED,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,mBAAmB,EAC5B,wBAAwB,EAAE,wBAAwB,GACjD,2BAA2B,CAM7B"}
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/sanitize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,KAAK,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAA;AACnG,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAE9D,eAAO,MAAM,sBAAsB,0CAEhC,uBAiMF,CAAA;AAED,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,mBAAmB,EAC5B,wBAAwB,EAAE,wBAAwB,GACjD,2BAA2B,CAM7B"}

package/dist/field/lexical/config/client/sanitize.js

@@ -2,9 +2,6 @@
 export const sanitizeClientFeatures = (features)=>{
     const sanitized = {
         enabledFeatures: [],
-        floatingSelectToolbar: {
-            sections: []
-        },
         hooks: {
             load: [],
             save: []
@@ -13,8 +10,14 @@ export const sanitizeClientFeatures = (features)=>{
         nodes: [],
         plugins: [],
         slashMenu: {
-            dynamicOptions: [],
-            groupsWithOptions: []
+            dynamicGroups: [],
+            groups: []
+        },
+        toolbarFixed: {
+            groups: []
+        },
+        toolbarInline: {
+            groups: []
         }
     };
     if (!features?.size) {
@@ -36,50 +39,70 @@ export const sanitizeClientFeatures = (features)=>{
             feature.plugins.forEach((plugin, i)=>{
                 sanitized.plugins.push({
                     Component: plugin.Component,
+                    clientProps: feature.clientFeatureProps,
                     key: feature.key + i,
                     position: plugin.position
                 });
             });
         }
-        if (feature.floatingSelectToolbar?.sections?.length) {
-            for (const section of feature.floatingSelectToolbar.sections){
-                // 1. find the section with the same key or create new one
-                let foundSection = sanitized.floatingSelectToolbar.sections.find((sanitizedSection)=>sanitizedSection.key === section.key);
-                if (!foundSection) {
-                    foundSection = {
-                        ...section,
-                        entries: []
+        if (feature.toolbarInline?.groups?.length) {
+            for (const group of feature.toolbarInline.groups){
+                // 1. find the group with the same key or create new one
+                let foundGroup = sanitized.toolbarInline.groups.find((sanitizedGroup)=>sanitizedGroup.key === group.key);
+                if (!foundGroup) {
+                    foundGroup = {
+                        ...group,
+                        items: []
+                    };
+                } else {
+                    sanitized.toolbarInline.groups = sanitized.toolbarInline.groups.filter((sanitizedGroup)=>sanitizedGroup.key !== group.key);
+                }
+                // 2. Add options to group options array and add to sanitized.slashMenu.groupsWithOptions
+                if (group?.items?.length) {
+                    foundGroup.items = foundGroup.items.concat(group.items);
+                }
+                sanitized.toolbarInline?.groups.push(foundGroup);
+            }
+        }
+        if (feature.toolbarFixed?.groups?.length) {
+            for (const group of feature.toolbarFixed.groups){
+                // 1. find the group with the same key or create new one
+                let foundGroup = sanitized.toolbarFixed.groups.find((sanitizedGroup)=>sanitizedGroup.key === group.key);
+                if (!foundGroup) {
+                    foundGroup = {
+                        ...group,
+                        items: []
                     };
                 } else {
-                    sanitized.floatingSelectToolbar.sections = sanitized.floatingSelectToolbar.sections.filter((sanitizedSection)=>sanitizedSection.key !== section.key);
+                    sanitized.toolbarFixed.groups = sanitized.toolbarFixed.groups.filter((sanitizedGroup)=>sanitizedGroup.key !== group.key);
                 }
                 // 2. Add options to group options array and add to sanitized.slashMenu.groupsWithOptions
-                if (section?.entries?.length) {
-                    foundSection.entries = foundSection.entries.concat(section.entries);
+                if (group?.items?.length) {
+                    foundGroup.items = foundGroup.items.concat(group.items);
                 }
-                sanitized.floatingSelectToolbar?.sections.push(foundSection);
+                sanitized.toolbarFixed?.groups.push(foundGroup);
             }
         }
-        if (feature.slashMenu?.options) {
-            if (feature.slashMenu.dynamicOptions?.length) {
-                sanitized.slashMenu.dynamicOptions = sanitized.slashMenu.dynamicOptions.concat(feature.slashMenu.dynamicOptions);
+        if (feature.slashMenu?.groups) {
+            if (feature.slashMenu.dynamicGroups?.length) {
+                sanitized.slashMenu.dynamicGroups = sanitized.slashMenu.dynamicGroups.concat(feature.slashMenu.dynamicGroups);
             }
-            for (const optionGroup of feature.slashMenu.options){
+            for (const optionGroup of feature.slashMenu.groups){
                 // 1. find the group with the same name or create new one
-                let group = sanitized.slashMenu.groupsWithOptions.find((group)=>group.key === optionGroup.key);
+                let group = sanitized.slashMenu.groups.find((group)=>group.key === optionGroup.key);
                 if (!group) {
                     group = {
                         ...optionGroup,
-                        options: []
+                        items: []
                     };
                 } else {
-                    sanitized.slashMenu.groupsWithOptions = sanitized.slashMenu.groupsWithOptions.filter((group)=>group.key !== optionGroup.key);
+                    sanitized.slashMenu.groups = sanitized.slashMenu.groups.filter((group)=>group.key !== optionGroup.key);
                 }
                 // 2. Add options to group options array and add to sanitized.slashMenu.groupsWithOptions
-                if (optionGroup?.options?.length) {
-                    group.options = group.options.concat(optionGroup.options);
+                if (optionGroup?.items?.length) {
+                    group.items = group.items.concat(optionGroup.items);
                 }
-                sanitized.slashMenu.groupsWithOptions.push(group);
+                sanitized.slashMenu.groups.push(group);
             }
         }
         if (feature.markdownTransformers?.length) {
@@ -87,8 +110,8 @@ export const sanitizeClientFeatures = (features)=>{
         }
         sanitized.enabledFeatures.push(feature.key);
     });
-    // Sort sanitized.floatingSelectToolbar.sections by order property
-    sanitized.floatingSelectToolbar.sections.sort((a, b)=>{
+    // Sort sanitized.toolbarInline.groups by order property
+    sanitized.toolbarInline.groups.sort((a, b)=>{
         if (a.order && b.order) {
             return a.order - b.order;
         } else if (a.order) {
@@ -99,9 +122,35 @@ export const sanitizeClientFeatures = (features)=>{
             return 0;
         }
     });
-    // Sort sanitized.floatingSelectToolbar.sections.[section].entries by order property
-    for (const section of sanitized.floatingSelectToolbar.sections){
-        section.entries.sort((a, b)=>{
+    // Sort sanitized.toolbarFixed.groups by order property
+    sanitized.toolbarFixed.groups.sort((a, b)=>{
+        if (a.order && b.order) {
+            return a.order - b.order;
+        } else if (a.order) {
+            return -1;
+        } else if (b.order) {
+            return 1;
+        } else {
+            return 0;
+        }
+    });
+    // Sort sanitized.toolbarInline.groups.[group].entries by order property
+    for (const group of sanitized.toolbarInline.groups){
+        group.items.sort((a, b)=>{
+            if (a.order && b.order) {
+                return a.order - b.order;
+            } else if (a.order) {
+                return -1;
+            } else if (b.order) {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+    }
+    // Sort sanitized.toolbarFixed.groups.[group].entries by order property
+    for (const group of sanitized.toolbarFixed.groups){
+        group.items.sort((a, b)=>{
             if (a.order && b.order) {
                 return a.order - b.order;
             } else if (a.order) {