@payloadcms/richtext-lexical 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

package/dist/field/RenderLexical/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/RenderLexical/index.tsx"],"sourcesContent":["'use client'\nimport type { RichTextField } from 'payload'\n\nimport {\n  FieldContext,\n  FieldPathContext,\n  type FieldType,\n  type RenderFieldServerFnArgs,\n  ServerFunctionsContext,\n  type ServerFunctionsContextType,\n  ShimmerEffect,\n  useServerFunctions,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type { DefaultTypedEditorState } from '../../nodeTypes.js'\nimport type { LexicalRichTextField } from '../../types.js'\n\n/**\n * Utility to render a lexical editor on the client.\n *\n * @experimental - may break in minor releases\n * @todo - replace this with a general utility that works for all fields. Maybe merge with packages/ui/src/forms/RenderFields/RenderField.tsx\n */\nexport const RenderLexical: React.FC<\n  /**\n   * If value or setValue, or both, is provided, this component will manage its own value.\n   * If neither is passed, it will rely on the parent form to manage the value.\n   */\n  {\n    /**\n     * Override the loading state while the field component is being fetched and rendered.\n     */\n    Loading?: React.ReactElement\n\n    setValue?: FieldType<DefaultTypedEditorState | undefined>['setValue']\n    value?: FieldType<DefaultTypedEditorState | undefined>['value']\n  } & RenderFieldServerFnArgs<LexicalRichTextField>\n> = (args) => {\n  const { field, initialValue, Loading, path, schemaPath, setValue, value } = args\n  const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n  const serverFunctionContext = useServerFunctions()\n  const { _internal_renderField } = serverFunctionContext\n\n  const [entityType, entitySlug] = schemaPath.split('.', 2)\n\n  const fieldPath = path ?? (field && 'name' in field ? field?.name : '') ?? ''\n\n  const renderLexical = useCallback(() => {\n    async function render() {\n      const { Field } = await _internal_renderField({\n        field: {\n          ...((field as RichTextField) || {}),\n          type: 'richText',\n          admin: {\n            ...((field as RichTextField)?.admin || {}),\n            // When using \"fake\" anchor fields, hidden is often set to true. We need to override that here to ensure the field is rendered.\n            hidden: false,\n          },\n        },\n        initialValue: initialValue ?? undefined,\n        path,\n        schemaPath,\n      })\n\n      setComponent(Field)\n    }\n    void render()\n  }, [_internal_renderField, schemaPath, path, field, initialValue])\n\n  const mounted = useRef(false)\n\n  useEffect(() => {\n    if (mounted.current) {\n      return\n    }\n    mounted.current = true\n    void renderLexical()\n  }, [renderLexical])\n\n  if (!Component) {\n    return typeof Loading !== 'undefined' ? Loading : <ShimmerEffect />\n  }\n\n  /**\n   * By default, the lexical will make form state requests (e.g. to get drawer fields), passing in the arguments\n   * of the current field. However, we need to override those arguments to get it to make requests based on the\n   * *target* field. The server only knows the schema map of the target field.\n   */\n  const adjustedServerFunctionContext: ServerFunctionsContextType = {\n    ...serverFunctionContext,\n    getFormState: async (getFormStateArgs) => {\n      return serverFunctionContext.getFormState({\n        ...getFormStateArgs,\n        collectionSlug: entityType === 'collection' ? entitySlug : undefined,\n        globalSlug: entityType === 'global' ? entitySlug : undefined,\n      })\n    },\n  }\n\n  if (typeof value === 'undefined' && !setValue) {\n    return (\n      <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n        <FieldPathContext key={fieldPath} value={fieldPath}>\n          {Component}\n        </FieldPathContext>\n      </ServerFunctionsContext>\n    )\n  }\n\n  const fieldValue: FieldType<DefaultTypedEditorState | undefined> = {\n    disabled: false,\n    formInitializing: false,\n    formProcessing: false,\n    formSubmitted: false,\n    initialValue: value,\n    path: fieldPath,\n    setValue: setValue ?? (() => undefined),\n    showError: false,\n    value,\n  }\n\n  return (\n    <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n      <FieldPathContext key={fieldPath} value={fieldPath}>\n        <FieldContext value={fieldValue}>{Component}</FieldContext>\n      </FieldPathContext>\n    </ServerFunctionsContext>\n  )\n}\n"],"names":["FieldContext","FieldPathContext","ServerFunctionsContext","ShimmerEffect","useServerFunctions","React","useCallback","useEffect","useRef","RenderLexical","args","field","initialValue","Loading","path","schemaPath","setValue","value","Component","setComponent","useState","serverFunctionContext","_internal_renderField","entityType","entitySlug","split","fieldPath","name","renderLexical","render","Field","type","admin","hidden","undefined","mounted","current","adjustedServerFunctionContext","getFormState","getFormStateArgs","collectionSlug","globalSlug","key","fieldValue","disabled","formInitializing","formProcessing","formSubmitted","showError"],"mappings":"AAAA;AAGA,SACEA,YAAY,EACZC,gBAAgB,EAGhBC,sBAAsB,EAEtBC,aAAa,EACbC,kBAAkB,QACb,iBAAgB;AACvB,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAK7D;;;;;CAKC,GACD,OAAO,MAAMC,gBACX;;;GAGC,GAEC;;KAEC,GAMD,CAACC;IACH,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGP;IAC5E,MAAM,CAACQ,WAAWC,aAAa,GAAGd,MAAMe,QAAQ,CAAyB;IACzE,MAAMC,wBAAwBjB;IAC9B,MAAM,EAAEkB,qBAAqB,EAAE,GAAGD;IAElC,MAAM,CAACE,YAAYC,WAAW,GAAGT,WAAWU,KAAK,CAAC,KAAK;IAEvD,MAAMC,YAAYZ,QAASH,CAAAA,SAAS,UAAUA,QAAQA,OAAOgB,OAAO,EAAC,KAAM;IAE3E,MAAMC,gBAAgBtB,YAAY;QAChC,eAAeuB;YACb,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAMR,sBAAsB;gBAC5CX,OAAO;oBACL,GAAI,AAACA,SAA2B,CAAC,CAAC;oBAClCoB,MAAM;oBACNC,OAAO;wBACL,GAAI,AAACrB,OAAyBqB,SAAS,CAAC,CAAC;wBACzC,+HAA+H;wBAC/HC,QAAQ;oBACV;gBACF;gBACArB,cAAcA,gBAAgBsB;gBAC9BpB;gBACAC;YACF;YAEAI,aAAaW;QACf;QACA,KAAKD;IACP,GAAG;QAACP;QAAuBP;QAAYD;QAAMH;QAAOC;KAAa;IAEjE,MAAMuB,UAAU3B,OAAO;IAEvBD,UAAU;QACR,IAAI4B,QAAQC,OAAO,EAAE;YACnB;QACF;QACAD,QAAQC,OAAO,GAAG;QAClB,KAAKR;IACP,GAAG;QAACA;KAAc;IAElB,IAAI,CAACV,WAAW;QACd,OAAO,OAAOL,YAAY,cAAcA,WAAWV;IACrD;IAEA;;;;GAIC,GACD,MAAMkC,gCAA4D;QAChE,GAAGhB,qBAAqB;QACxBiB,cAAc,OAAOC;YACnB,OAAOlB,sBAAsBiB,YAAY,CAAC;gBACxC,GAAGC,gBAAgB;gBACnBC,gBAAgBjB,eAAe,eAAeC,aAAaU;gBAC3DO,YAAYlB,eAAe,WAAWC,aAAaU;YACrD;QACF;IACF;IAEA,IAAI,OAAOjB,UAAU,eAAe,CAACD,UAAU;QAC7C,QACGd,uBAAuBe,OAAO;YAAE,GAAGoB,6BAA6B;QAAC,GAAG;QACnE,CAACpC,iBAAiByC,KAAKhB,WAAWT,OAAOS,WAAW;UAClD,CAACR,UAAU;QACb,EAAEjB,iBAAiB;MACrB,EAAEC;IAEN;IAEA,MAAMyC,aAA6D;QACjEC,UAAU;QACVC,kBAAkB;QAClBC,gBAAgB;QAChBC,eAAe;QACfnC,cAAcK;QACdH,MAAMY;QACNV,UAAUA,YAAa,CAAA,IAAMkB,SAAQ;QACrCc,WAAW;QACX/B;IACF;IAEA,QACGf,uBAAuBe,OAAO;QAAE,GAAGoB,6BAA6B;IAAC,GAAG;MACnE,CAACpC,iBAAiByC,KAAKhB,WAAWT,OAAOS,WAAW;QAClD,CAAC1B,aAAaiB,OAAO0B,aAAazB,YAAYlB,aAAa;MAC7D,EAAEC,iBAAiB;IACrB,EAAEC;AAEN,EAAC"}
+{"version":3,"sources":["../../../src/field/RenderLexical/index.tsx"],"sourcesContent":["'use client'\nimport type { RichTextField } from 'payload'\n\nimport {\n  FieldContext,\n  FieldPathContext,\n  type FieldType,\n  type RenderFieldServerFnArgs,\n  ServerFunctionsContext,\n  type ServerFunctionsContextType,\n  ShimmerEffect,\n  useServerFunctions,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type { DefaultTypedEditorState } from '../../nodeTypes.js'\nimport type { LexicalRichTextField } from '../../types.js'\n\n/**\n * Utility to render a lexical editor on the client.\n *\n * @experimental - may break in minor releases\n * @todo - replace this with a general utility that works for all fields. Maybe merge with packages/ui/src/forms/RenderFields/RenderField.tsx\n */\nexport const RenderLexical: React.FC<\n  /**\n   * If value or setValue, or both, is provided, this component will manage its own value.\n   * If neither is passed, it will rely on the parent form to manage the value.\n   */\n  {\n    /**\n     * Override the loading state while the field component is being fetched and rendered.\n     */\n    Loading?: React.ReactElement\n\n    setValue?: FieldType<DefaultTypedEditorState | undefined>['setValue']\n    value?: FieldType<DefaultTypedEditorState | undefined>['value']\n  } & RenderFieldServerFnArgs<LexicalRichTextField>\n> = (args) => {\n  const { field, initialValue, Loading, path, schemaPath, setValue, value } = args\n  const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n  const serverFunctionContext = useServerFunctions()\n  const { _internal_renderField } = serverFunctionContext\n\n  const [entityType, entitySlug] = schemaPath.split('.', 2)\n\n  const fieldPath = path ?? (field && 'name' in field ? field?.name : '') ?? ''\n\n  const renderLexical = useCallback(() => {\n    async function render() {\n      const { Field } = await _internal_renderField({\n        field: {\n          ...((field as RichTextField) || {}),\n          type: 'richText',\n          admin: {\n            ...((field as RichTextField)?.admin || {}),\n            // When using \"fake\" anchor fields, hidden is often set to true. We need to override that here to ensure the field is rendered.\n            hidden: false,\n          },\n        },\n        initialValue: initialValue ?? undefined,\n        path,\n        schemaPath,\n      })\n\n      setComponent(Field)\n    }\n    void render()\n  }, [_internal_renderField, schemaPath, path, field, initialValue])\n\n  const mounted = useRef(false)\n\n  useEffect(() => {\n    if (mounted.current) {\n      return\n    }\n    mounted.current = true\n    void renderLexical()\n  }, [renderLexical])\n\n  if (!Component) {\n    return typeof Loading !== 'undefined' ? Loading : <ShimmerEffect />\n  }\n\n  /**\n   * By default, the lexical will make form state requests (e.g. to get drawer fields), passing in the arguments\n   * of the current field. However, we need to override those arguments to get it to make requests based on the\n   * *target* field. The server only knows the schema map of the target field.\n   */\n  const adjustedServerFunctionContext: ServerFunctionsContextType = {\n    ...serverFunctionContext,\n    getFormState: async (getFormStateArgs) => {\n      return serverFunctionContext.getFormState({\n        ...getFormStateArgs,\n        collectionSlug: entityType === 'collection' ? entitySlug : undefined,\n        globalSlug: entityType === 'global' ? entitySlug : undefined,\n      })\n    },\n  }\n\n  if (typeof value === 'undefined' && !setValue) {\n    return (\n      <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n        <FieldPathContext key={fieldPath} value={fieldPath}>\n          {Component}\n        </FieldPathContext>\n      </ServerFunctionsContext>\n    )\n  }\n\n  const fieldValue: FieldType<DefaultTypedEditorState | undefined> = {\n    disabled: false,\n    formInitializing: false,\n    formProcessing: false,\n    formSubmitted: false,\n    initialValue: value,\n    path: fieldPath,\n    setValue: setValue ?? (() => undefined),\n    showError: false,\n    value,\n  }\n\n  return (\n    <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n      <FieldPathContext key={fieldPath} value={fieldPath}>\n        <FieldContext value={fieldValue}>{Component}</FieldContext>\n      </FieldPathContext>\n    </ServerFunctionsContext>\n  )\n}\n"],"names":["FieldContext","FieldPathContext","ServerFunctionsContext","ShimmerEffect","useServerFunctions","React","useCallback","useEffect","useRef","RenderLexical","args","field","initialValue","Loading","path","schemaPath","setValue","value","Component","setComponent","useState","serverFunctionContext","_internal_renderField","entityType","entitySlug","split","fieldPath","name","renderLexical","render","Field","type","admin","hidden","undefined","mounted","current","adjustedServerFunctionContext","getFormState","getFormStateArgs","collectionSlug","globalSlug","fieldValue","disabled","formInitializing","formProcessing","formSubmitted","showError"],"mappings":"AAAA;;AAGA,SACEA,YAAY,EACZC,gBAAgB,EAGhBC,sBAAsB,EAEtBC,aAAa,EACbC,kBAAkB,QACb,iBAAgB;AACvB,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAK7D;;;;;CAKC,GACD,OAAO,MAAMC,gBACX;;;GAGC,GAEC;;KAEC,GAMD,CAACC;IACH,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGP;IAC5E,MAAM,CAACQ,WAAWC,aAAa,GAAGd,MAAMe,QAAQ,CAAyB;IACzE,MAAMC,wBAAwBjB;IAC9B,MAAM,EAAEkB,qBAAqB,EAAE,GAAGD;IAElC,MAAM,CAACE,YAAYC,WAAW,GAAGT,WAAWU,KAAK,CAAC,KAAK;IAEvD,MAAMC,YAAYZ,QAASH,CAAAA,SAAS,UAAUA,QAAQA,OAAOgB,OAAO,EAAC,KAAM;IAE3E,MAAMC,gBAAgBtB,YAAY;QAChC,eAAeuB;YACb,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAMR,sBAAsB;gBAC5CX,OAAO;oBACL,GAAI,AAACA,SAA2B,CAAC,CAAC;oBAClCoB,MAAM;oBACNC,OAAO;wBACL,GAAI,AAACrB,OAAyBqB,SAAS,CAAC,CAAC;wBACzC,+HAA+H;wBAC/HC,QAAQ;oBACV;gBACF;gBACArB,cAAcA,gBAAgBsB;gBAC9BpB;gBACAC;YACF;YAEAI,aAAaW;QACf;QACA,KAAKD;IACP,GAAG;QAACP;QAAuBP;QAAYD;QAAMH;QAAOC;KAAa;IAEjE,MAAMuB,UAAU3B,OAAO;IAEvBD,UAAU;QACR,IAAI4B,QAAQC,OAAO,EAAE;YACnB;QACF;QACAD,QAAQC,OAAO,GAAG;QAClB,KAAKR;IACP,GAAG;QAACA;KAAc;IAElB,IAAI,CAACV,WAAW;QACd,OAAO,OAAOL,YAAY,cAAcA,wBAAU,QAACV;;;;;IACrD;IAEA;;;;GAIC,GACD,MAAMkC,gCAA4D;QAChE,GAAGhB,qBAAqB;QACxBiB,cAAc,OAAOC;YACnB,OAAOlB,sBAAsBiB,YAAY,CAAC;gBACxC,GAAGC,gBAAgB;gBACnBC,gBAAgBjB,eAAe,eAAeC,aAAaU;gBAC3DO,YAAYlB,eAAe,WAAWC,aAAaU;YACrD;QACF;IACF;IAEA,IAAI,OAAOjB,UAAU,eAAe,CAACD,UAAU;QAC7C,qBACE,QAACd;YAAuBe,OAAO;gBAAE,GAAGoB,6BAA6B;YAAC;sBAChE,cAAA,QAACpC;gBAAiCgB,OAAOS;0BACtCR;eADoBQ;;;;;;;;;;IAK7B;IAEA,MAAMgB,aAA6D;QACjEC,UAAU;QACVC,kBAAkB;QAClBC,gBAAgB;QAChBC,eAAe;QACflC,cAAcK;QACdH,MAAMY;QACNV,UAAUA,YAAa,CAAA,IAAMkB,SAAQ;QACrCa,WAAW;QACX9B;IACF;IAEA,qBACE,QAACf;QAAuBe,OAAO;YAAE,GAAGoB,6BAA6B;QAAC;kBAChE,cAAA,QAACpC;YAAiCgB,OAAOS;sBACvC,cAAA,QAAC1B;gBAAaiB,OAAOyB;0BAAaxB;;;;;;WADbQ;;;;;;;;;;AAK7B,EAAC"}

package/dist/field/RichTextViewProvider.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { LexicalEditorNodeMap, LexicalEditorViewMap } from '../types.js';
+/**
+ * Context type for rich text view management.
+ */
+type RichTextViewContextType = {
+    /**
+     * The name of the currently active view (e.g., 'default', 'frontend', 'debug')
+     */
+    currentView: string;
+    /**
+     * The node map for the currently active view, containing rendering overrides for each node type.
+     * This is the resolved view from the views map based on currentView.
+     */
+    currentViewMap?: LexicalEditorNodeMap;
+    /**
+     * If true, the current view will be inherited by nested richtext editors.
+     */
+    inheritable?: boolean;
+    /**
+     * Function to change the current view.
+     */
+    setCurrentView: (view: string) => void;
+    /**
+     * The complete map of all available views for this field.
+     */
+    views?: LexicalEditorViewMap;
+};
+/**
+ * Provider component for rich text view context.
+ *
+ * This provider manages the current view state internally and makes it accessible to child components
+ * via the useRichTextView hook. It automatically resolves the current view's node map
+ * based on the active view name.
+ *
+ * @example
+ * ```tsx
+ * <RichTextViewProvider
+ *   currentView="frontend"
+ *   views={myViews}
+ * >
+ *   <MyEditor />
+ * </RichTextViewProvider>
+ * ```
+ */
+export declare const RichTextViewProvider: React.FC<{
+    children: React.ReactNode;
+    currentView?: string;
+    inheritable?: boolean;
+    views?: LexicalEditorViewMap;
+}>;
+/**
+ * Hook to access the current rich text view context.
+ *
+ * Use this hook to access the currently active view and its node map,
+ * or to programmatically switch between views.
+ *
+ * @returns An object containing:
+ * - `currentView`: The name of the active view
+ * - `currentViewMap`: The node overrides for the current view
+ * - `setCurrentView`: Function to change views
+ * - `views`: All available views
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentView, currentViewMap, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Current view: {currentView}</p>
+ *       {currentViewMap?.heading && <p>Heading overrides are active</p>}
+ *       <button onClick={() => setCurrentView('frontend')}>
+ *         Switch to frontend view
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useRichTextView(): RichTextViewContextType;
+export {};
+//# sourceMappingURL=RichTextViewProvider.d.ts.map

package/dist/field/RichTextViewProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewProvider.d.ts","sourceRoot":"","sources":["../../src/field/RichTextViewProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAE7E;;GAEG;AACH,KAAK,uBAAuB,GAAG;IAC7B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAA;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAA;CAC7B,CAAA;AAQD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,oBAAoB,CAAA;CAC7B,CA6BA,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,eAAe,IAAI,uBAAuB,CAEzD"}

package/dist/field/RichTextViewProvider.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { useControllableState } from '@payloadcms/ui';
+import React, { createContext, use, useMemo } from 'react';
+/**
+ * Context type for rich text view management.
+ */ /**
+   * The name of the currently active view (e.g., 'default', 'frontend', 'debug')
+   */ /**
+   * The node map for the currently active view, containing rendering overrides for each node type.
+   * This is the resolved view from the views map based on currentView.
+   */ /**
+   * If true, the current view will be inherited by nested richtext editors.
+   */ /**
+   * Function to change the current view.
+   */ /**
+   * The complete map of all available views for this field.
+   */ const RichTextViewContext = /*#__PURE__*/ createContext({
+    currentView: 'default',
+    inheritable: false,
+    setCurrentView: ()=>{}
+});
+/**
+ * Provider component for rich text view context.
+ *
+ * This provider manages the current view state internally and makes it accessible to child components
+ * via the useRichTextView hook. It automatically resolves the current view's node map
+ * based on the active view name.
+ *
+ * @example
+ * ```tsx
+ * <RichTextViewProvider
+ *   currentView="frontend"
+ *   views={myViews}
+ * >
+ *   <MyEditor />
+ * </RichTextViewProvider>
+ * ```
+ */ export const RichTextViewProvider = (args)=>{
+    const parentContext = useRichTextView();
+    const { children, currentView: currentViewFromProps, inheritable, views } = parentContext.inheritable ? {
+        ...parentContext,
+        ...args
+    } : args;
+    const [currentView, setCurrentView] = useControllableState(currentViewFromProps, 'default');
+    const value = useMemo(()=>{
+        const currentViewMap = views ? views[currentView] || views.default : undefined;
+        return {
+            currentView,
+            currentViewMap,
+            inheritable,
+            setCurrentView,
+            views
+        };
+    }, [
+        currentView,
+        inheritable,
+        setCurrentView,
+        views
+    ]);
+    return /*#__PURE__*/ _jsxDEV(RichTextViewContext, {
+        value: value,
+        children: children
+    }, void 0, false, {
+        fileName: "src/field/RichTextViewProvider.tsx",
+        lineNumber: 90,
+        columnNumber: 10
+    }, this);
+};
+/**
+ * Hook to access the current rich text view context.
+ *
+ * Use this hook to access the currently active view and its node map,
+ * or to programmatically switch between views.
+ *
+ * @returns An object containing:
+ * - `currentView`: The name of the active view
+ * - `currentViewMap`: The node overrides for the current view
+ * - `setCurrentView`: Function to change views
+ * - `views`: All available views
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentView, currentViewMap, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Current view: {currentView}</p>
+ *       {currentViewMap?.heading && <p>Heading overrides are active</p>}
+ *       <button onClick={() => setCurrentView('frontend')}>
+ *         Switch to frontend view
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */ export function useRichTextView() {
+    return use(RichTextViewContext);
+}
+
+//# sourceMappingURL=RichTextViewProvider.js.map

package/dist/field/RichTextViewProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/field/RichTextViewProvider.tsx"],"sourcesContent":["'use client'\nimport { useControllableState } from '@payloadcms/ui'\nimport React, { createContext, use, useMemo } from 'react'\n\nimport type { LexicalEditorNodeMap, LexicalEditorViewMap } from '../types.js'\n\n/**\n * Context type for rich text view management.\n */\ntype RichTextViewContextType = {\n  /**\n   * The name of the currently active view (e.g., 'default', 'frontend', 'debug')\n   */\n  currentView: string\n  /**\n   * The node map for the currently active view, containing rendering overrides for each node type.\n   * This is the resolved view from the views map based on currentView.\n   */\n  currentViewMap?: LexicalEditorNodeMap\n  /**\n   * If true, the current view will be inherited by nested richtext editors.\n   */\n  inheritable?: boolean\n  /**\n   * Function to change the current view.\n   */\n  setCurrentView: (view: string) => void\n  /**\n   * The complete map of all available views for this field.\n   */\n  views?: LexicalEditorViewMap\n}\n\nconst RichTextViewContext = createContext<RichTextViewContextType>({\n  currentView: 'default',\n  inheritable: false,\n  setCurrentView: () => {},\n})\n\n/**\n * Provider component for rich text view context.\n *\n * This provider manages the current view state internally and makes it accessible to child components\n * via the useRichTextView hook. It automatically resolves the current view's node map\n * based on the active view name.\n *\n * @example\n * ```tsx\n * <RichTextViewProvider\n *   currentView=\"frontend\"\n *   views={myViews}\n * >\n *   <MyEditor />\n * </RichTextViewProvider>\n * ```\n */\nexport const RichTextViewProvider: React.FC<{\n  children: React.ReactNode\n  currentView?: string\n  inheritable?: boolean\n  views?: LexicalEditorViewMap\n}> = (args) => {\n  const parentContext = useRichTextView()\n\n  const {\n    children,\n    currentView: currentViewFromProps,\n    inheritable,\n    views,\n  } = parentContext.inheritable\n    ? {\n        ...parentContext,\n        ...args,\n      }\n    : args\n\n  const [currentView, setCurrentView] = useControllableState(currentViewFromProps, 'default')\n\n  const value = useMemo(() => {\n    const currentViewMap = views ? views[currentView] || views.default : undefined\n    return {\n      currentView,\n      currentViewMap,\n      inheritable,\n      setCurrentView,\n      views,\n    }\n  }, [currentView, inheritable, setCurrentView, views])\n\n  return <RichTextViewContext value={value}>{children}</RichTextViewContext>\n}\n\n/**\n * Hook to access the current rich text view context.\n *\n * Use this hook to access the currently active view and its node map,\n * or to programmatically switch between views.\n *\n * @returns An object containing:\n * - `currentView`: The name of the active view\n * - `currentViewMap`: The node overrides for the current view\n * - `setCurrentView`: Function to change views\n * - `views`: All available views\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { currentView, currentViewMap, setCurrentView } = useRichTextView()\n *\n *   return (\n *     <div>\n *       <p>Current view: {currentView}</p>\n *       {currentViewMap?.heading && <p>Heading overrides are active</p>}\n *       <button onClick={() => setCurrentView('frontend')}>\n *         Switch to frontend view\n *       </button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useRichTextView(): RichTextViewContextType {\n  return use(RichTextViewContext)\n}\n"],"names":["useControllableState","React","createContext","use","useMemo","RichTextViewContext","currentView","inheritable","setCurrentView","RichTextViewProvider","args","parentContext","useRichTextView","children","currentViewFromProps","views","value","currentViewMap","default","undefined"],"mappings":"AAAA;;AACA,SAASA,oBAAoB,QAAQ,iBAAgB;AACrD,OAAOC,SAASC,aAAa,EAAEC,GAAG,EAAEC,OAAO,QAAQ,QAAO;AAI1D;;CAEC,GAEC;;GAEC,GAED;;;GAGC,GAED;;GAEC,GAED;;GAEC,GAED;;GAEC,GAIH,MAAMC,oCAAsBH,cAAuC;IACjEI,aAAa;IACbC,aAAa;IACbC,gBAAgB,KAAO;AACzB;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAKR,CAACC;IACJ,MAAMC,gBAAgBC;IAEtB,MAAM,EACJC,QAAQ,EACRP,aAAaQ,oBAAoB,EACjCP,WAAW,EACXQ,KAAK,EACN,GAAGJ,cAAcJ,WAAW,GACzB;QACE,GAAGI,aAAa;QAChB,GAAGD,IAAI;IACT,IACAA;IAEJ,MAAM,CAACJ,aAAaE,eAAe,GAAGR,qBAAqBc,sBAAsB;IAEjF,MAAME,QAAQZ,QAAQ;QACpB,MAAMa,iBAAiBF,QAAQA,KAAK,CAACT,YAAY,IAAIS,MAAMG,OAAO,GAAGC;QACrE,OAAO;YACLb;YACAW;YACAV;YACAC;YACAO;QACF;IACF,GAAG;QAACT;QAAaC;QAAaC;QAAgBO;KAAM;IAEpD,qBAAO,QAACV;QAAoBW,OAAOA;kBAAQH;;;;;;AAC7C,EAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASD;IACd,OAAOT,IAAIE;AACb"}

package/dist/field/ViewSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './ViewSelector.scss';
+export declare function ViewSelector(): null | React.ReactElement;
+//# sourceMappingURL=ViewSelector.d.ts.map

package/dist/field/ViewSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSelector.d.ts","sourceRoot":"","sources":["../../src/field/ViewSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,qBAAqB,CAAA;AAE5B,wBAAgB,YAAY,IAAI,IAAI,GAAG,KAAK,CAAC,YAAY,CAyDxD"}

package/dist/field/ViewSelector.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { ChevronIcon, Popup, PopupList } from '@payloadcms/ui';
+import React from 'react';
+import { useRichTextView } from './RichTextViewProvider.js';
+import './ViewSelector.scss';
+export function ViewSelector() {
+    const { currentView, setCurrentView, views } = useRichTextView();
+    // Don't show if no views or only default exists
+    if (!views || Object.keys(views).length === 0) {
+        return null;
+    }
+    const viewKeys = Object.keys(views);
+    const hasNonDefaultViews = viewKeys.some((key)=>key !== 'default');
+    // If only 'default' exists, no need to show selector
+    if (!hasNonDefaultViews) {
+        return null;
+    }
+    // Build list of available views
+    const allViews = [
+        'default',
+        ...viewKeys.filter((key)=>key !== 'default')
+    ];
+    const currentViewLabel = currentView.charAt(0).toUpperCase() + currentView.slice(1);
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: "lexical-view-selector",
+        children: /*#__PURE__*/ _jsxDEV(Popup, {
+            button: /*#__PURE__*/ _jsxDEV("button", {
+                className: "lexical-view-selector__button",
+                type: "button",
+                children: [
+                    /*#__PURE__*/ _jsxDEV("span", {
+                        className: "lexical-view-selector__label",
+                        children: currentViewLabel
+                    }, void 0, false, {
+                        fileName: "src/field/ViewSelector.tsx",
+                        lineNumber: 34,
+                        columnNumber: 13
+                    }, void 0),
+                    /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                        className: "lexical-view-selector__icon"
+                    }, void 0, false, {
+                        fileName: "src/field/ViewSelector.tsx",
+                        lineNumber: 35,
+                        columnNumber: 13
+                    }, void 0)
+                ]
+            }, void 0, true, {
+                fileName: "src/field/ViewSelector.tsx",
+                lineNumber: 33,
+                columnNumber: 11
+            }, void 0),
+            buttonType: "custom",
+            horizontalAlign: "left",
+            render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
+                    children: allViews.map((viewName)=>{
+                        const viewLabel = viewName.charAt(0).toUpperCase() + viewName.slice(1);
+                        return /*#__PURE__*/ _jsxDEV(PopupList.Button, {
+                            active: viewName === currentView,
+                            disabled: viewName === currentView,
+                            onClick: ()=>{
+                                setCurrentView?.(viewName);
+                                close();
+                            },
+                            children: viewLabel
+                        }, viewName, false, {
+                            fileName: "src/field/ViewSelector.tsx",
+                            lineNumber: 46,
+                            columnNumber: 17
+                        }, void 0);
+                    })
+                }, void 0, false, {
+                    fileName: "src/field/ViewSelector.tsx",
+                    lineNumber: 41,
+                    columnNumber: 11
+                }, void 0),
+            size: "large"
+        }, void 0, false, {
+            fileName: "src/field/ViewSelector.tsx",
+            lineNumber: 31,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/field/ViewSelector.tsx",
+        lineNumber: 30,
+        columnNumber: 5
+    }, this);
+}
+
+//# sourceMappingURL=ViewSelector.js.map

package/dist/field/ViewSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/field/ViewSelector.tsx"],"sourcesContent":["'use client'\nimport { ChevronIcon, Popup, PopupList } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useRichTextView } from './RichTextViewProvider.js'\nimport './ViewSelector.scss'\n\nexport function ViewSelector(): null | React.ReactElement {\n  const { currentView, setCurrentView, views } = useRichTextView()\n\n  // Don't show if no views or only default exists\n  if (!views || Object.keys(views).length === 0) {\n    return null\n  }\n\n  const viewKeys = Object.keys(views)\n  const hasNonDefaultViews = viewKeys.some((key) => key !== 'default')\n\n  // If only 'default' exists, no need to show selector\n  if (!hasNonDefaultViews) {\n    return null\n  }\n\n  // Build list of available views\n  const allViews = ['default', ...viewKeys.filter((key) => key !== 'default')]\n\n  const currentViewLabel = currentView.charAt(0).toUpperCase() + currentView.slice(1)\n\n  return (\n    <div className=\"lexical-view-selector\">\n      <Popup\n        button={\n          <button className=\"lexical-view-selector__button\" type=\"button\">\n            <span className=\"lexical-view-selector__label\">{currentViewLabel}</span>\n            <ChevronIcon className=\"lexical-view-selector__icon\" />\n          </button>\n        }\n        buttonType=\"custom\"\n        horizontalAlign=\"left\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            {allViews.map((viewName) => {\n              const viewLabel = viewName.charAt(0).toUpperCase() + viewName.slice(1)\n\n              return (\n                <PopupList.Button\n                  active={viewName === currentView}\n                  disabled={viewName === currentView}\n                  key={viewName}\n                  onClick={() => {\n                    setCurrentView?.(viewName)\n                    close()\n                  }}\n                >\n                  {viewLabel}\n                </PopupList.Button>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"large\"\n      />\n    </div>\n  )\n}\n"],"names":["ChevronIcon","Popup","PopupList","React","useRichTextView","ViewSelector","currentView","setCurrentView","views","Object","keys","length","viewKeys","hasNonDefaultViews","some","key","allViews","filter","currentViewLabel","charAt","toUpperCase","slice","div","className","button","type","span","buttonType","horizontalAlign","render","close","ButtonGroup","map","viewName","viewLabel","Button","active","disabled","onClick","size"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,KAAK,EAAEC,SAAS,QAAQ,iBAAgB;AAC9D,OAAOC,WAAW,QAAO;AAEzB,SAASC,eAAe,QAAQ,4BAA2B;AAC3D,OAAO,sBAAqB;AAE5B,OAAO,SAASC;IACd,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,gDAAgD;IAChD,IAAI,CAACI,SAASC,OAAOC,IAAI,CAACF,OAAOG,MAAM,KAAK,GAAG;QAC7C,OAAO;IACT;IAEA,MAAMC,WAAWH,OAAOC,IAAI,CAACF;IAC7B,MAAMK,qBAAqBD,SAASE,IAAI,CAAC,CAACC,MAAQA,QAAQ;IAE1D,qDAAqD;IACrD,IAAI,CAACF,oBAAoB;QACvB,OAAO;IACT;IAEA,gCAAgC;IAChC,MAAMG,WAAW;QAAC;WAAcJ,SAASK,MAAM,CAAC,CAACF,MAAQA,QAAQ;KAAW;IAE5E,MAAMG,mBAAmBZ,YAAYa,MAAM,CAAC,GAAGC,WAAW,KAAKd,YAAYe,KAAK,CAAC;IAEjF,qBACE,QAACC;QAAIC,WAAU;kBACb,cAAA,QAACtB;YACCuB,sBACE,QAACA;gBAAOD,WAAU;gBAAgCE,MAAK;;kCACrD,QAACC;wBAAKH,WAAU;kCAAgCL;;;;;;kCAChD,QAAClB;wBAAYuB,WAAU;;;;;;;;;;;;YAG3BI,YAAW;YACXC,iBAAgB;YAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,QAAC5B,UAAU6B,WAAW;8BACnBf,SAASgB,GAAG,CAAC,CAACC;wBACb,MAAMC,YAAYD,SAASd,MAAM,CAAC,GAAGC,WAAW,KAAKa,SAASZ,KAAK,CAAC;wBAEpE,qBACE,QAACnB,UAAUiC,MAAM;4BACfC,QAAQH,aAAa3B;4BACrB+B,UAAUJ,aAAa3B;4BAEvBgC,SAAS;gCACP/B,iBAAiB0B;gCACjBH;4BACF;sCAECI;2BANID;;;;;oBASX;;;;;;YAGJM,MAAK;;;;;;;;;;;AAIb"}

package/dist/field/ViewSelector.scss

@@ -0,0 +1,34 @@
+@import '~@payloadcms/ui/scss';
+
+.lexical-view-selector {
+  display: inline-flex;
+  margin-left: var(--spacing-xs);
+  vertical-align: middle;
+
+  &__button {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    background: transparent;
+    border-radius: var(--border-radius-s);
+    cursor: pointer;
+    color: var(--theme-elevation-600);
+    box-sizing: border-box;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+      color: var(--theme-elevation-800);
+    }
+  }
+
+  &__label {
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}

package/dist/field/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { LexicalRichTextFieldProps } from '../types.js';
 export declare const RichTextField: React.FC<LexicalRichTextFieldProps>;
+export declare const RichTextFieldImpl: React.FC<LexicalRichTextFieldProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAIlE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAU5D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAiE7D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAIlE,OAAO,KAAK,EAAgC,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAW1F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAM7D,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAgFjE,CAAA"}

package/dist/field/index.js

@@ -1,18 +1,40 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { createElement as _createElement } from "react";
 import { ShimmerEffect, useConfig } from '@payloadcms/ui';
-import { lazy, Suspense, useEffect, useState } from 'react';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
 import { defaultEditorLexicalConfig } from '../lexical/config/client/default.js';
 import { loadClientFeatures } from '../lexical/config/client/loader.js';
 import { sanitizeClientEditorConfig } from '../lexical/config/client/sanitize.js';
-const RichTextEditor = lazy(()=>import('./Field.js').then((module)=>({
+import { RichTextViewProvider, useRichTextView } from './RichTextViewProvider.js';
+const RichTextEditor = /*#__PURE__*/ lazy(()=>import('./Field.js').then((module)=>({
             default: module.RichText
         })));
 export const RichTextField = (props)=>{
-    const { admin = {}, clientFeatures, featureClientImportMap = {}, featureClientSchemaMap, field, lexicalEditorConfig = defaultEditorLexicalConfig, schemaPath } = props;
+    return /*#__PURE__*/ _jsxDEV(RichTextViewProvider, {
+        views: props.views,
+        children: /*#__PURE__*/ _jsxDEV(RichTextFieldImpl, {
+            ...props
+        }, void 0, false, {
+            fileName: "src/field/index.tsx",
+            lineNumber: 25,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/field/index.tsx",
+        lineNumber: 24,
+        columnNumber: 5
+    }, this);
+};
+export const RichTextFieldImpl = (props)=>{
+    const { admin: _admin = {}, clientFeatures, featureClientImportMap = {}, featureClientSchemaMap, field, lexicalEditorConfig: _lexicalEditorConfig = defaultEditorLexicalConfig, schemaPath, views } = props;
+    const { currentView } = useRichTextView();
+    const currentViewAdminConfig = views?.[currentView]?.admin ?? _admin;
+    const currentViewLexicalEditorConfig = views?.[currentView]?.lexical ?? _lexicalEditorConfig;
     const { config } = useConfig();
     const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] = useState(null);
     useEffect(()=>{
-        if (finalSanitizedEditorConfig) {
+        if (finalSanitizedEditorConfig && finalSanitizedEditorConfig.view === currentView) {
             return;
         }
         const featureProvidersLocal = [];
@@ -31,25 +53,47 @@ export const RichTextField = (props)=>{
             schemaPath: schemaPath ?? field.name,
             unSanitizedEditorConfig: {
                 features: featureProvidersLocal,
-                lexical: lexicalEditorConfig
+                lexical: currentViewLexicalEditorConfig
             }
         });
-        setFinalSanitizedEditorConfig(sanitizeClientEditorConfig(resolvedClientFeatures, lexicalEditorConfig, admin));
+        setFinalSanitizedEditorConfig(sanitizeClientEditorConfig(resolvedClientFeatures, currentViewLexicalEditorConfig, currentViewAdminConfig, currentView));
     }, [
-        admin,
+        currentViewAdminConfig,
         clientFeatures,
         config,
         featureClientImportMap,
         featureClientSchemaMap,
         field,
         finalSanitizedEditorConfig,
-        lexicalEditorConfig,
-        schemaPath
+        currentViewLexicalEditorConfig,
+        schemaPath,
+        currentView
     ]);
     // TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate
-    return <Suspense fallback={<ShimmerEffect height="35vh"/>}>
-      {finalSanitizedEditorConfig && <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig}/>}
-    </Suspense>;
+    return /*#__PURE__*/ _jsxDEV(Suspense, {
+        fallback: /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
+            height: "35vh"
+        }, void 0, false, {
+            fileName: "src/field/index.tsx",
+            lineNumber: 100,
+            columnNumber: 25
+        }, void 0),
+        children: finalSanitizedEditorConfig && /*#__PURE__*/ _createElement(RichTextEditor, {
+            ...props,
+            editorConfig: finalSanitizedEditorConfig,
+            key: finalSanitizedEditorConfig.view,
+            __source: {
+                fileName: "src/field/index.tsx",
+                lineNumber: 102,
+                columnNumber: 9
+            },
+            __self: this
+        })
+    }, void 0, false, {
+        fileName: "src/field/index.tsx",
+        lineNumber: 100,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport type { RichTextFieldClient } from 'payload'\n\nimport { ShimmerEffect, useConfig } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../features/typesClient.js'\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../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<LexicalRichTextFieldProps> = (props) => {\n  const {\n    admin = {},\n    clientFeatures,\n    featureClientImportMap = {},\n    featureClientSchemaMap,\n    field,\n    lexicalEditorConfig = defaultEditorLexicalConfig,\n    schemaPath,\n  } = props\n\n  const { config } = useConfig()\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<null | SanitizedClientEditorConfig>(null)\n\n  useEffect(() => {\n    if (finalSanitizedEditorConfig) {\n      return\n    }\n\n    const featureProvidersLocal: FeatureProviderClient<any, any>[] = []\n    for (const clientFeature of Object.values(clientFeatures)) {\n      if (!clientFeature.clientFeatureProvider) {\n        continue\n      }\n      featureProvidersLocal.push(\n        clientFeature.clientFeatureProvider(clientFeature.clientFeatureProps),\n      ) // Execute the clientFeatureProvider function here, as the server cannot execute functions imported from use client files\n    }\n\n    const resolvedClientFeatures = loadClientFeatures({\n      config,\n      featureClientImportMap,\n      featureClientSchemaMap,\n      field: field as RichTextFieldClient,\n      schemaPath: schemaPath ?? field.name,\n      unSanitizedEditorConfig: {\n        features: featureProvidersLocal,\n        lexical: lexicalEditorConfig,\n      },\n    })\n\n    setFinalSanitizedEditorConfig(\n      sanitizeClientEditorConfig(resolvedClientFeatures, lexicalEditorConfig, admin),\n    )\n  }, [\n    admin,\n    clientFeatures,\n    config,\n    featureClientImportMap,\n    featureClientSchemaMap,\n    field,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    schemaPath,\n  ]) // TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      {finalSanitizedEditorConfig && (\n        <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n      )}\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useConfig","lazy","Suspense","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextEditor","then","module","default","RichText","RichTextField","props","admin","clientFeatures","featureClientImportMap","featureClientSchemaMap","field","lexicalEditorConfig","schemaPath","config","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProvidersLocal","clientFeature","Object","values","clientFeatureProvider","push","clientFeatureProps","resolvedClientFeatures","name","unSanitizedEditorConfig","features","lexical","fallback","height","editorConfig"],"mappings":"AAAA;AAIA,SAASA,aAAa,EAAEC,SAAS,QAAQ,iBAAgB;AACzD,SAAgBC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAMlE,SAASC,0BAA0B,QAAQ,sCAAqC;AAChF,SAASC,kBAAkB,QAAQ,qCAAoC;AACvE,SAASC,0BAA0B,QAAQ,uCAAsC;AAEjF,MAAMC,iBAAiBP,KAAK,IAC1B,MAAM,CAAC,cAAcQ,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,QAAQ;QAAC,CAAA;AAGpE,OAAO,MAAMC,gBAAqD,CAACC;IACjE,MAAM,EACJC,QAAQ,CAAC,CAAC,EACVC,cAAc,EACdC,yBAAyB,CAAC,CAAC,EAC3BC,sBAAsB,EACtBC,KAAK,EACLC,sBAAsBf,0BAA0B,EAChDgB,UAAU,EACX,GAAGP;IAEJ,MAAM,EAAEQ,MAAM,EAAE,GAAGtB;IAEnB,MAAM,CAACuB,4BAA4BC,8BAA8B,GAC/DpB,SAA6C;IAE/CD,UAAU;QACR,IAAIoB,4BAA4B;YAC9B;QACF;QAEA,MAAME,wBAA2D,EAAE;QACnE,KAAK,MAAMC,iBAAiBC,OAAOC,MAAM,CAACZ,gBAAiB;YACzD,IAAI,CAACU,cAAcG,qBAAqB,EAAE;gBACxC;YACF;YACAJ,sBAAsBK,IAAI,CACxBJ,cAAcG,qBAAqB,CAACH,cAAcK,kBAAkB;QAExE;QADI,yHAAyH;QAG7H,MAAMC,yBAAyB1B,mBAAmB;YAChDgB;YACAL;YACAC;YACAC,OAAOA;YACPE,YAAYA,cAAcF,MAAMc,IAAI;YACpCC,yBAAyB;gBACvBC,UAAUV;gBACVW,SAAShB;YACX;QACF;QAEAI,8BACEjB,2BAA2ByB,wBAAwBZ,qBAAqBL;IAE5E,GAAG;QACDA;QACAC;QACAM;QACAL;QACAC;QACAC;QACAI;QACAH;QACAC;KACD;IAAE,gJAAgJ;IAEnJ,QACGnB,SAASmC,WAAWtC,cAAcuC,OAAO,UAAW;MACnD,CAACf,+BACEf,gBAAgB,GAAGM,KAAK,EAAEyB,cAAchB,8BACzC;IACJ,EAAErB;AAEN,EAAC"}
+{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical'\nimport type { RichTextFieldClient } from 'payload'\n\nimport { ShimmerEffect, useConfig } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../features/typesClient.js'\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalFieldAdminClientProps, LexicalRichTextFieldProps } from '../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'\nimport { RichTextViewProvider, useRichTextView } from './RichTextViewProvider.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<LexicalRichTextFieldProps> = (props) => {\n  return (\n    <RichTextViewProvider views={props.views}>\n      <RichTextFieldImpl {...props} />\n    </RichTextViewProvider>\n  )\n}\n\nexport const RichTextFieldImpl: React.FC<LexicalRichTextFieldProps> = (props) => {\n  const {\n    admin: _admin = {},\n    clientFeatures,\n    featureClientImportMap = {},\n    featureClientSchemaMap,\n    field,\n    lexicalEditorConfig: _lexicalEditorConfig = defaultEditorLexicalConfig,\n    schemaPath,\n    views,\n  } = props\n  const { currentView } = useRichTextView()\n  const currentViewAdminConfig: LexicalFieldAdminClientProps = views?.[currentView]?.admin ?? _admin\n  const currentViewLexicalEditorConfig: LexicalEditorConfig =\n    views?.[currentView]?.lexical ?? _lexicalEditorConfig\n\n  const { config } = useConfig()\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<null | SanitizedClientEditorConfig>(null)\n\n  useEffect(() => {\n    if (finalSanitizedEditorConfig && finalSanitizedEditorConfig.view === currentView) {\n      return\n    }\n\n    const featureProvidersLocal: FeatureProviderClient<any, any>[] = []\n    for (const clientFeature of Object.values(clientFeatures)) {\n      if (!clientFeature.clientFeatureProvider) {\n        continue\n      }\n      featureProvidersLocal.push(\n        clientFeature.clientFeatureProvider(clientFeature.clientFeatureProps),\n      ) // Execute the clientFeatureProvider function here, as the server cannot execute functions imported from use client files\n    }\n\n    const resolvedClientFeatures = loadClientFeatures({\n      config,\n      featureClientImportMap,\n      featureClientSchemaMap,\n      field: field as RichTextFieldClient,\n      schemaPath: schemaPath ?? field.name,\n      unSanitizedEditorConfig: {\n        features: featureProvidersLocal,\n        lexical: currentViewLexicalEditorConfig,\n      },\n    })\n\n    setFinalSanitizedEditorConfig(\n      sanitizeClientEditorConfig(\n        resolvedClientFeatures,\n        currentViewLexicalEditorConfig,\n        currentViewAdminConfig,\n        currentView,\n      ),\n    )\n  }, [\n    currentViewAdminConfig,\n    clientFeatures,\n    config,\n    featureClientImportMap,\n    featureClientSchemaMap,\n    field,\n    finalSanitizedEditorConfig,\n    currentViewLexicalEditorConfig,\n    schemaPath,\n    currentView,\n  ]) // TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      {finalSanitizedEditorConfig && (\n        <RichTextEditor\n          {...props}\n          editorConfig={finalSanitizedEditorConfig}\n          key={finalSanitizedEditorConfig.view}\n        />\n      )}\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useConfig","React","lazy","Suspense","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextViewProvider","useRichTextView","RichTextEditor","then","module","default","RichText","RichTextField","props","views","RichTextFieldImpl","admin","_admin","clientFeatures","featureClientImportMap","featureClientSchemaMap","field","lexicalEditorConfig","_lexicalEditorConfig","schemaPath","currentView","currentViewAdminConfig","currentViewLexicalEditorConfig","lexical","config","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","view","featureProvidersLocal","clientFeature","Object","values","clientFeatureProvider","push","clientFeatureProps","resolvedClientFeatures","name","unSanitizedEditorConfig","features","fallback","height","editorConfig","key"],"mappings":"AAAA;;;AAKA,SAASA,aAAa,EAAEC,SAAS,QAAQ,iBAAgB;AACzD,OAAOC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAMlE,SAASC,0BAA0B,QAAQ,sCAAqC;AAChF,SAASC,kBAAkB,QAAQ,qCAAoC;AACvE,SAASC,0BAA0B,QAAQ,uCAAsC;AACjF,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,4BAA2B;AAEjF,MAAMC,+BAAiBT,KAAK,IAC1B,MAAM,CAAC,cAAcU,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,QAAQ;QAAC,CAAA;AAGpE,OAAO,MAAMC,gBAAqD,CAACC;IACjE,qBACE,QAACR;QAAqBS,OAAOD,MAAMC,KAAK;kBACtC,cAAA,QAACC;YAAmB,GAAGF,KAAK;;;;;;;;;;;AAGlC,EAAC;AAED,OAAO,MAAME,oBAAyD,CAACF;IACrE,MAAM,EACJG,OAAOC,SAAS,CAAC,CAAC,EAClBC,cAAc,EACdC,yBAAyB,CAAC,CAAC,EAC3BC,sBAAsB,EACtBC,KAAK,EACLC,qBAAqBC,uBAAuBrB,0BAA0B,EACtEsB,UAAU,EACVV,KAAK,EACN,GAAGD;IACJ,MAAM,EAAEY,WAAW,EAAE,GAAGnB;IACxB,MAAMoB,yBAAuDZ,OAAO,CAACW,YAAY,EAAET,SAASC;IAC5F,MAAMU,iCACJb,OAAO,CAACW,YAAY,EAAEG,WAAWL;IAEnC,MAAM,EAAEM,MAAM,EAAE,GAAGjC;IAEnB,MAAM,CAACkC,4BAA4BC,8BAA8B,GAC/D9B,SAA6C;IAE/CD,UAAU;QACR,IAAI8B,8BAA8BA,2BAA2BE,IAAI,KAAKP,aAAa;YACjF;QACF;QAEA,MAAMQ,wBAA2D,EAAE;QACnE,KAAK,MAAMC,iBAAiBC,OAAOC,MAAM,CAAClB,gBAAiB;YACzD,IAAI,CAACgB,cAAcG,qBAAqB,EAAE;gBACxC;YACF;YACAJ,sBAAsBK,IAAI,CACxBJ,cAAcG,qBAAqB,CAACH,cAAcK,kBAAkB;QAExE;QADI,yHAAyH;QAG7H,MAAMC,yBAAyBrC,mBAAmB;YAChD0B;YACAV;YACAC;YACAC,OAAOA;YACPG,YAAYA,cAAcH,MAAMoB,IAAI;YACpCC,yBAAyB;gBACvBC,UAAUV;gBACVL,SAASD;YACX;QACF;QAEAI,8BACE3B,2BACEoC,wBACAb,gCACAD,wBACAD;IAGN,GAAG;QACDC;QACAR;QACAW;QACAV;QACAC;QACAC;QACAS;QACAH;QACAH;QACAC;KACD;IAAE,gJAAgJ;IAEnJ,qBACE,QAAC1B;QAAS6C,wBAAU,QAACjD;YAAckD,QAAO;;;;;;kBACvCf,4CACC,eAACvB;YACE,GAAGM,KAAK;YACTiC,cAAchB;YACdiB,KAAKjB,2BAA2BE,IAAI;;;;;;;;;;;;;AAK9C,EAAC"}

package/dist/field/index.scss

@@ -15,6 +15,18 @@
       }
     }
 
+    &__label-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: calc(var(--base) / 4);
+      gap: calc(var(--base) / 3);
+
+      label.field-label:not(.unstyled) {
+        margin-right: unset;
+        padding-bottom: unset;
+      }
+    }
+
     &__wrap {
       width: 100%;
       position: relative;

package/dist/field/rscEntry.d.ts

@@ -4,5 +4,5 @@ import type { SanitizedServerEditorConfig } from '../lexical/config/types.js';
 import type { LexicalEditorProps } from '../types.js';
 export declare const RscEntryLexicalField: React.FC<{
     sanitizedEditorConfig: SanitizedServerEditorConfig;
-} & ClientComponentProps & Pick<FieldPaths, 'path'> & Pick<LexicalEditorProps, 'admin'> & ServerComponentProps>;
+} & ClientComponentProps & Pick<FieldPaths, 'path'> & Pick<LexicalEditorProps, 'admin' | 'views'> & ServerComponentProps>;
 //# sourceMappingURL=rscEntry.d.ts.map

package/dist/field/rscEntry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rscEntry.d.ts","sourceRoot":"","sources":["../../src/field/rscEntry.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,UAAU,EAGV,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAC7E,OAAO,KAAK,EACV,kBAAkB,EAGnB,MAAM,aAAa,CAAA;AAOpB,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CACzC;IACE,qBAAqB,EAAE,2BAA2B,CAAA;CACnD,GAAG,oBAAoB,GACtB,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GACxB,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC,GACjC,oBAAoB,CA6FvB,CAAA"}
+{"version":3,"file":"rscEntry.d.ts","sourceRoot":"","sources":["../../src/field/rscEntry.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,UAAU,EAGV,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAKhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAC7E,OAAO,KAAK,EACV,kBAAkB,EAInB,MAAM,aAAa,CAAA;AAOpB,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CACzC;IACE,qBAAqB,EAAE,2BAA2B,CAAA;CACnD,GAAG,oBAAoB,GACtB,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GACxB,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,OAAO,CAAC,GAC3C,oBAAoB,CAyGvB,CAAA"}

package/dist/field/rscEntry.js

@@ -1,5 +1,8 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { renderField } from '@payloadcms/ui/forms/renderField';
+import { getFromImportMap } from 'payload/shared';
+import React from 'react';
 // eslint-disable-next-line payload/no-imports-from-exports-dir
 import { RichTextField } from '../exports/client/index.js';
 import { buildInitialState } from '../utilities/buildInitialState.js';
@@ -74,6 +77,17 @@ export const RscEntryLexicalField = async (args)=>{
         renderedBlocks: args.renderedBlocks,
         schemaPath
     };
+    if (args?.views) {
+        const viewMap = getFromImportMap({
+            importMap: args.payload.importMap,
+            PayloadComponent: args.views,
+            schemaPath: 'lexical-viewMap',
+            silent: true
+        });
+        if (viewMap) {
+            props.views = viewMap;
+        }
+    }
     if (Object.keys(admin).length) {
         props.admin = admin;
     }
@@ -85,7 +99,13 @@ export const RscEntryLexicalField = async (args)=>{
             delete props[key];
         }
     }
-    return <RichTextField {...props}/>;
+    return /*#__PURE__*/ _jsxDEV(RichTextField, {
+        ...props
+    }, void 0, false, {
+        fileName: "src/field/rscEntry.tsx",
+        lineNumber: 138,
+        columnNumber: 10
+    }, this);
 };
 
 //# sourceMappingURL=rscEntry.js.map