@payloadcms/richtext-lexical 3.0.0-beta.34 → 3.0.0-beta.36

package/dist/field/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect';
 import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
 import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction';
@@ -10,7 +11,7 @@ const RichTextEditor = /*#__PURE__*/ lazy(()=>import('./Field.js').then((module)
             default: module.RichText
         })));
 export const RichTextField = (props)=>{
-    const { lexicalEditorConfig, richTextComponentMap } = props;
+    const { admin, lexicalEditorConfig, richTextComponentMap } = props;
     const { schemaPath } = useFieldProps();
     const clientFunctions = useClientFunctions();
     const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false);
@@ -46,10 +47,11 @@ export const RichTextField = (props)=>{
                         lexical: lexicalEditorConfig
                     }
                 });
-                setFinalSanitizedEditorConfig(sanitizeClientEditorConfig(lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig, resolvedClientFeatures));
+                setFinalSanitizedEditorConfig(sanitizeClientEditorConfig(lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig, resolvedClientFeatures, admin));
             }
         }
     }, [
+        admin,
         hasLoadedFeatures,
         clientFunctions,
         schemaPath,
@@ -60,28 +62,34 @@ export const RichTextField = (props)=>{
         featureComponentsWithFeaturesLength
     ]);
     if (!hasLoadedFeatures) {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, Array.isArray(featureProviderComponents) && featureProviderComponents.map((featureProvider)=>{
-            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}
-            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key)=>key.startsWith(`feature.${featureProvider.key}.components.`));
-            const featureComponents = featureComponentKeys.map((key)=>{
-                return richTextComponentMap.get(key);
-            }) // TODO: Type better
-            ;
-            return /*#__PURE__*/ React.createElement(React.Fragment, {
-                key: featureProvider.key
-            }, featureComponents?.length ? featureComponents.map((FeatureComponent)=>{
-                return FeatureComponent;
-            }) : null, featureProvider.ClientComponent);
-        }));
+        return /*#__PURE__*/ _jsx(React.Fragment, {
+            children: Array.isArray(featureProviderComponents) && featureProviderComponents.map((featureProvider)=>{
+                // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}
+                const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key)=>key.startsWith(`feature.${featureProvider.key}.components.`));
+                const featureComponents = featureComponentKeys.map((key)=>{
+                    return richTextComponentMap.get(key);
+                }) // TODO: Type better
+                ;
+                return /*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        featureComponents?.length ? featureComponents.map((FeatureComponent)=>{
+                            return FeatureComponent;
+                        }) : null,
+                        featureProvider.ClientComponent
+                    ]
+                }, featureProvider.key);
+            })
+        });
     }
-    return /*#__PURE__*/ React.createElement(Suspense, {
-        fallback: /*#__PURE__*/ React.createElement(ShimmerEffect, {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx(ShimmerEffect, {
             height: "35vh"
+        }),
+        children: finalSanitizedEditorConfig && /*#__PURE__*/ _jsx(RichTextEditor, {
+            ...props,
+            editorConfig: finalSanitizedEditorConfig
         })
-    }, finalSanitizedEditorConfig && /*#__PURE__*/ React.createElement(RichTextEditor, {
-        ...props,
-        editorConfig: finalSanitizedEditorConfig
-    }));
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical'\n\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'\nimport React, { Suspense, lazy, useEffect, useState } from 'react'\n\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\nimport type { FeatureProviderClient } from './features/types.js'\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport { defaultEditorLexicalConfig } from './lexical/config/client/default.js'\nimport { loadClientFeatures } from './lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from './lexical/config/client/sanitize.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<\n  FormFieldBase & {\n    lexicalEditorConfig: LexicalEditorConfig\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n> = (props) => {\n  const { lexicalEditorConfig, richTextComponentMap } = props\n  const { schemaPath } = useFieldProps()\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            }) // TODO: Type better\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      {finalSanitizedEditorConfig && (\n        <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n      )}\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useFieldProps","useClientFunctions","React","Suspense","lazy","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextEditor","then","module","default","RichText","RichTextField","props","lexicalEditorConfig","richTextComponentMap","schemaPath","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","Fragment","isArray","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","fallback","height","editorConfig"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical'\n\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'\nimport React, { Suspense, lazy, useEffect, useState } from 'react'\n\nimport type { GeneratedFeatureProviderComponent, LexicalFieldAdminProps } from '../types.js'\nimport type { FeatureProviderClient } from './features/types.js'\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport { defaultEditorLexicalConfig } from './lexical/config/client/default.js'\nimport { loadClientFeatures } from './lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from './lexical/config/client/sanitize.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<\n  FormFieldBase & {\n    admin?: LexicalFieldAdminProps\n    lexicalEditorConfig: LexicalEditorConfig\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n> = (props) => {\n  const { admin, lexicalEditorConfig, richTextComponentMap } = props\n  const { schemaPath } = useFieldProps()\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n            admin,\n          ),\n        )\n      }\n    }\n  }, [\n    admin,\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            }) // TODO: Type better\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      {finalSanitizedEditorConfig && (\n        <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n      )}\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useFieldProps","useClientFunctions","React","Suspense","lazy","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextEditor","then","module","default","RichText","RichTextField","props","admin","lexicalEditorConfig","richTextComponentMap","schemaPath","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","Fragment","isArray","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","fallback","height","editorConfig"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/index.scss

@@ -1,8 +1,6 @@
 @import '../scss/styles.scss';
 
 .rich-text-lexical {
-  display: flex;
-
   .errorBoundary {
     pre {
       text-wrap: unset;
@@ -25,22 +23,3 @@
   }
 }
 
-html[data-theme='light'] {
-  .rich-text-lexical {
-    &.error {
-      .editor-container {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .rich-text-lexical {
-    &.error {
-      .editor-container {
-        @include darkInputError;
-      }
-    }
-  }
-}

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

@@ -1,5 +1,4 @@
 import type { LexicalEditor } from 'lexical';
-import React from 'react';
 import type { EditorConfigContextType } from './config/client/EditorConfigProvider.js';
 export type EditorFocusContextType = {
     blurEditor: () => void;
@@ -16,5 +15,5 @@ export type EditorFocusContextType = {
 export declare const useEditorFocus: () => EditorFocusContextType;
 export declare const EditorFocusProvider: ({ children }: {
     children: any;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorFocusProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorFocusProvider.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/EditorFocusProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAItF,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,oBAAoB,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC9F,aAAa,EAAE,aAAa,GAAG,IAAI,CAAA;IACnC,0BAA0B,EAAE,uBAAuB,CAAA;IACnD,oBAAoB,EAAE,MAAM,OAAO,CAAA;IACnC,eAAe,EAAE,MAAM,OAAO,CAAA;IAC9B,qBAAqB,EAAE,MAAM,OAAO,CAAA;IACpC,yBAAyB,EAAE,uBAAuB,CAAA;IAClD,iBAAiB,EAAE,sBAAsB,CAAA;CAC1C,CAAA;AAeD,eAAO,MAAM,cAAc,QAAO,sBAEjC,CAAA;AAED,eAAO,MAAM,mBAAmB;;uBA4D/B,CAAA"}
+{"version":3,"file":"EditorFocusProvider.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/EditorFocusProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAK5C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAItF,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,oBAAoB,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC9F,aAAa,EAAE,aAAa,GAAG,IAAI,CAAA;IACnC,0BAA0B,EAAE,uBAAuB,CAAA;IACnD,oBAAoB,EAAE,MAAM,OAAO,CAAA;IACnC,eAAe,EAAE,MAAM,OAAO,CAAA;IAC9B,qBAAqB,EAAE,MAAM,OAAO,CAAA;IACpC,yBAAyB,EAAE,uBAAuB,CAAA;IAClD,iBAAiB,EAAE,sBAAsB,CAAA;CAC1C,CAAA;AAeD,eAAO,MAAM,cAAc,QAAO,sBAEjC,CAAA;AAED,eAAO,MAAM,mBAAmB;;6CA4D/B,CAAA"}

package/dist/field/lexical/EditorFocusProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import React, { createContext, useCallback, useContext, useState } from 'react';
 import { useEditorConfigContext } from './config/client/EditorConfigProvider.js';
@@ -59,7 +60,7 @@ export const EditorFocusProvider = ({ children })=>{
         editor,
         focusedEditor
     ]);
-    return /*#__PURE__*/ React.createElement(EditorFocusContext.Provider, {
+    return /*#__PURE__*/ _jsx(EditorFocusContext.Provider, {
         value: {
             blurEditor,
             editor,
@@ -71,8 +72,9 @@ export const EditorFocusProvider = ({ children })=>{
             isParentEditorFocused,
             parentEditorConfigContext,
             parentEditorFocus
-        }
-    }, children);
+        },
+        children: children
+    });
 };
 
 //# sourceMappingURL=EditorFocusProvider.js.map

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

@@ -1 +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"}
+{"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,KAACJ,mBAAmBmB,QAAQ;QAC1BC,OAAO;YACLnB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;kBAECG;;AAGP,EAAC"}

package/dist/field/lexical/EditorPlugin.js

@@ -1,12 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 export const EditorPlugin = ({ anchorElem, clientProps, plugin })=>{
     if (plugin.position === 'floatingAnchorElem') {
-        return plugin.Component && /*#__PURE__*/ React.createElement(plugin.Component, {
+        return plugin.Component && /*#__PURE__*/ _jsx(plugin.Component, {
             anchorElem: anchorElem,
             clientProps: clientProps
         });
     }
-    return plugin.Component && /*#__PURE__*/ React.createElement(plugin.Component, {
+    return plugin.Component && /*#__PURE__*/ _jsx(plugin.Component, {
         clientProps: clientProps
     });
 };

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  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"}
+{"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,KAACF,OAAOE,SAAS;YAACJ,YAAYA;YAAYC,aAAaA;;IAE/E;IAEA,OAAOC,OAAOE,SAAS,kBAAI,KAACF,OAAOE,SAAS;QAACH,aAAaA;;AAC5D,EAAC"}

package/dist/field/lexical/LexicalEditor.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js';
@@ -60,87 +61,118 @@ export const LexicalEditor = (props)=>{
         isSmallWidthViewport
     ]);
     const ErrorBoundaryComponent = LexicalErrorBoundary.default || LexicalErrorBoundary;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, editorConfig.features.plugins.map((plugin)=>{
-        if (plugin.position === 'aboveContainer') {
-            return /*#__PURE__*/ React.createElement(EditorPlugin, {
-                clientProps: plugin.clientProps,
-                key: plugin.key,
-                plugin: plugin
-            });
-        }
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "editor-container"
-    }, editorConfig.features.plugins.map((plugin)=>{
-        if (plugin.position === 'top') {
-            return /*#__PURE__*/ React.createElement(EditorPlugin, {
-                clientProps: plugin.clientProps,
-                key: plugin.key,
-                plugin: plugin
-            });
-        }
-    }), /*#__PURE__*/ React.createElement(RichTextPlugin, {
-        //@ts-expect-error ts being dumb
-        ErrorBoundary: ErrorBoundaryComponent,
-        contentEditable: /*#__PURE__*/ React.createElement("div", {
-            className: "editor-scroller"
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: "editor",
-            ref: onRef
-        }, /*#__PURE__*/ React.createElement(LexicalContentEditable, null))),
-        placeholder: /*#__PURE__*/ React.createElement("p", {
-            className: "editor-placeholder"
-        }, "Start typing, or press '/' for commands...")
-    }), /*#__PURE__*/ React.createElement(OnChangePlugin, {
-        // Selection changes can be ignored here, reducing the
-        // frequency that the FieldComponent and Payload receive updates.
-        // Selection changes are only needed if you are saving selection state
-        ignoreSelectionChange: true,
-        onChange: (editorState, editor, tags)=>{
-            // Ignore any onChange event triggered by focus only
-            if (!tags.has('focus') || tags.size > 1) {
-                if (onChange != null) onChange(editorState, editor, tags);
-            }
-        }
-    }), floatingAnchorElem && /*#__PURE__*/ React.createElement(React.Fragment, null, !isSmallWidthViewport && editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(DraggableBlockPlugin, {
-        anchorElem: floatingAnchorElem
-    }), /*#__PURE__*/ React.createElement(AddBlockHandlePlugin, {
-        anchorElem: floatingAnchorElem
-    })), editorConfig.features.plugins.map((plugin)=>{
-        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(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
-            });
-        }
-    }), editorConfig.features.plugins.map((plugin)=>{
-        if (plugin.position === 'bottom') {
-            return /*#__PURE__*/ React.createElement(EditorPlugin, {
-                clientProps: plugin.clientProps,
-                key: plugin.key,
-                plugin: plugin
-            });
-        }
-    })), editorConfig.features.plugins.map((plugin)=>{
-        if (plugin.position === 'belowContainer') {
-            return /*#__PURE__*/ React.createElement(EditorPlugin, {
-                clientProps: plugin.clientProps,
-                key: plugin.key,
-                plugin: plugin
-            });
-        }
-    }));
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            editorConfig.features.plugins.map((plugin)=>{
+                if (plugin.position === 'aboveContainer') {
+                    return /*#__PURE__*/ _jsx(EditorPlugin, {
+                        clientProps: plugin.clientProps,
+                        plugin: plugin
+                    }, plugin.key);
+                }
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "editor-container",
+                children: [
+                    editorConfig.features.plugins.map((plugin)=>{
+                        if (plugin.position === 'top') {
+                            return /*#__PURE__*/ _jsx(EditorPlugin, {
+                                clientProps: plugin.clientProps,
+                                plugin: plugin
+                            }, plugin.key);
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(RichTextPlugin, {
+                        //@ts-expect-error ts being dumb
+                        ErrorBoundary: ErrorBoundaryComponent,
+                        contentEditable: /*#__PURE__*/ _jsx("div", {
+                            className: "editor-scroller",
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: "editor",
+                                ref: onRef,
+                                children: /*#__PURE__*/ _jsx(LexicalContentEditable, {})
+                            })
+                        }),
+                        placeholder: /*#__PURE__*/ _jsx("p", {
+                            className: "editor-placeholder",
+                            children: "Start typing, or press '/' for commands..."
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(OnChangePlugin, {
+                        // Selection changes can be ignored here, reducing the
+                        // frequency that the FieldComponent and Payload receive updates.
+                        // Selection changes are only needed if you are saving selection state
+                        ignoreSelectionChange: true,
+                        onChange: (editorState, editor, tags)=>{
+                            // Ignore any onChange event triggered by focus only
+                            if (!tags.has('focus') || tags.size > 1) {
+                                if (onChange != null) onChange(editorState, editor, tags);
+                            }
+                        }
+                    }),
+                    floatingAnchorElem && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            !isSmallWidthViewport && editor.isEditable() && /*#__PURE__*/ _jsxs(React.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(DraggableBlockPlugin, {
+                                        anchorElem: floatingAnchorElem
+                                    }),
+                                    /*#__PURE__*/ _jsx(AddBlockHandlePlugin, {
+                                        anchorElem: floatingAnchorElem
+                                    })
+                                ]
+                            }),
+                            editorConfig.features.plugins.map((plugin)=>{
+                                if (plugin.position === 'floatingAnchorElem' && !(plugin.desktopOnly === true && isSmallWidthViewport)) {
+                                    return /*#__PURE__*/ _jsx(EditorPlugin, {
+                                        anchorElem: floatingAnchorElem,
+                                        clientProps: plugin.clientProps,
+                                        plugin: plugin
+                                    }, plugin.key);
+                                }
+                            }),
+                            editor.isEditable() && /*#__PURE__*/ _jsx(React.Fragment, {
+                                children: /*#__PURE__*/ _jsx(SlashMenuPlugin, {
+                                    anchorElem: floatingAnchorElem
+                                })
+                            })
+                        ]
+                    }),
+                    editor.isEditable() && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(HistoryPlugin, {}),
+                            editorConfig?.features?.markdownTransformers?.length > 0 && /*#__PURE__*/ _jsx(MarkdownShortcutPlugin, {})
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(TabIndentationPlugin, {}),
+                    editorConfig.features.plugins.map((plugin)=>{
+                        if (plugin.position === 'normal') {
+                            return /*#__PURE__*/ _jsx(EditorPlugin, {
+                                clientProps: plugin.clientProps,
+                                plugin: plugin
+                            }, plugin.key);
+                        }
+                    }),
+                    editorConfig.features.plugins.map((plugin)=>{
+                        if (plugin.position === 'bottom') {
+                            return /*#__PURE__*/ _jsx(EditorPlugin, {
+                                clientProps: plugin.clientProps,
+                                plugin: plugin
+                            }, plugin.key);
+                        }
+                    })
+                ]
+            }),
+            editorConfig.features.plugins.map((plugin)=>{
+                if (plugin.position === 'belowContainer') {
+                    return /*#__PURE__*/ _jsx(EditorPlugin, {
+                        clientProps: plugin.clientProps,
+                        plugin: plugin
+                    }, plugin.key);
+                }
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=LexicalEditor.js.map

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

@@ -1 +1 @@
-{"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 === 'aboveContainer') {\n          return <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n        }\n      })}\n      <div className=\"editor-container\">\n        {editorConfig.features.plugins.map((plugin) => {\n          if (plugin.position === 'top') {\n            return (\n              <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n            )\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\">\n              Start typing, or press &apos;/&apos; for commands...\n            </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 (\n              <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n            )\n          }\n        })}\n        {editorConfig.features.plugins.map((plugin) => {\n          if (plugin.position === 'bottom') {\n            return (\n              <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n            )\n          }\n        })}\n      </div>\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'belowContainer') {\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","div","className","ErrorBoundary","contentEditable","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 === 'aboveContainer') {\n          return <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n        }\n      })}\n      <div className=\"editor-container\">\n        {editorConfig.features.plugins.map((plugin) => {\n          if (plugin.position === 'top') {\n            return (\n              <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n            )\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\">\n              Start typing, or press &apos;/&apos; for commands...\n            </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 (\n              <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n            )\n          }\n        })}\n        {editorConfig.features.plugins.map((plugin) => {\n          if (plugin.position === 'bottom') {\n            return (\n              <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />\n            )\n          }\n        })}\n      </div>\n      {editorConfig.features.plugins.map((plugin) => {\n        if (plugin.position === 'belowContainer') {\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","div","className","ErrorBoundary","contentEditable","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

@@ -22,10 +22,19 @@
     }
   }
 
+  &--show-gutter  {
+    > .rich-text-lexical__wrap > .editor-container > .editor-placeholder {
+      left: 3rem;
+    }
+  }
+
+  &:not(&--show-gutter) > .rich-text-lexical__wrap > .editor-container > .editor-placeholder {
+    left: 0;
+  }
+
   .editor-placeholder {
     position: absolute;
     top: 8px;
-    left: 0;
     font-size: 15px;
     color: var(--theme-elevation-500);
     /* Prevent text selection */

package/dist/field/lexical/LexicalProvider.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { LexicalComposer } from '@lexical/react/LexicalComposer.js';
 import * as React from 'react';
 import { EditorFocusProvider } from './EditorFocusProvider.js';
@@ -48,18 +49,23 @@ export const LexicalProvider = (props)=>{
         throw new Error('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.');
     }
     if (!initialConfig) {
-        return /*#__PURE__*/ React.createElement("p", null, "Loading...");
+        return /*#__PURE__*/ _jsx("p", {
+            children: "Loading..."
+        });
     }
-    return /*#__PURE__*/ React.createElement(LexicalComposer, {
+    return /*#__PURE__*/ _jsx(LexicalComposer, {
         initialConfig: initialConfig,
-        key: path
-    }, /*#__PURE__*/ React.createElement(EditorFocusProvider, null, /*#__PURE__*/ React.createElement(EditorConfigProvider, {
-        editorConfig: editorConfig,
-        fieldProps: fieldProps
-    }, /*#__PURE__*/ React.createElement(LexicalEditorComponent, {
-        editorConfig: editorConfig,
-        onChange: onChange
-    }))));
+        children: /*#__PURE__*/ _jsx(EditorFocusProvider, {
+            children: /*#__PURE__*/ _jsx(EditorConfigProvider, {
+                editorConfig: editorConfig,
+                fieldProps: fieldProps,
+                children: /*#__PURE__*/ _jsx(LexicalEditorComponent, {
+                    editorConfig: editorConfig,
+                    onChange: onChange
+                })
+            })
+        })
+    }, path);
 };
 
 //# sourceMappingURL=LexicalProvider.js.map