@payloadcms/richtext-lexical 3.77.0 → 3.78.0-internal-debug.f663370

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useEffectEvent","useField","mergeFieldStyles","dequal","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","useRunDeprioritized","baseClass","RichTextComponent","props","editorConfig","field","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","disabledFromField","initialValue","setValue","showError","potentiallyStalePath","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","runDeprioritized","handleChange","editorState","updateFieldValue","newState","toJSON","current","styles","handleInitialValueChange","JSON","parse","stringify","Date","Object","is","_jsxs","style","_jsx","CustomComponent","Fallback","fallbackRender","onReset","drawerSlugPrefix","composerKey","fieldProps","onChange","error","role","color","message","RichText"],"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport {\n  BulkUploadProvider,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  RenderCustomComponent,\n  useEditDepth,\n  useEffectEvent,\n  useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport { dequal } from 'dequal/lite'\nimport { type Validate } from 'payload'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\n\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport { useRunDeprioritized } from '../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n  } & LexicalRichTextFieldProps\n> = (props) => {\n  const {\n    editorConfig,\n    field,\n    field: {\n      admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback<Validate>(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n        return validate(value, { ...validationOptions, required })\n      }\n      return true\n    },\n    // Important: do not add props to the dependencies array.\n    // This would cause an infinite loop and endless re-rendering.\n    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled: disabledFromField,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || disabledFromField\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n  const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n  const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n  const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\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 classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n      ? `${baseClass}--show-gutter`\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      // Capture `editorState` in the closure so we can safely run later.\n      const updateFieldValue = () => {\n        const newState = editorState.toJSON()\n        prevValueRef.current = newState\n        setValue(newState)\n      }\n\n      // Queue the update for the browser’s idle time (or Safari shim)\n      // and let the hook handle debouncing/cancellation.\n      void runDeprioritized(updateFieldValue)\n    },\n    [setValue, runDeprioritized], // `runDeprioritized` is stable (useCallback inside hook)\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const handleInitialValueChange = useEffectEvent(\n    (initialValue: SerializedEditorState | undefined) => {\n      // Object deep equality check here, as re-mounting the editor if\n      // the new value is the same as the old one is not necessary.\n      // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,\n      // so we need to do a deep equality check here that does not care about key order => we use dequal.\n      // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.\n      if (\n        prevValueRef.current !== value &&\n        !dequal(\n          prevValueRef.current != null\n            ? JSON.parse(JSON.stringify(prevValueRef.current))\n            : prevValueRef.current,\n          value,\n        )\n      ) {\n        prevInitialValueRef.current = initialValue\n        prevValueRef.current = value\n        setRerenderProviderKey(new Date())\n      }\n    },\n  )\n\n  useEffect(() => {\n    // Needs to trigger for object reference changes - otherwise,\n    // reacting to the same initial value change twice will cause\n    // the second change to be ignored, even though the value has changed.\n    // That's because initialValue is not kept up-to-date\n    if (!Object.is(initialValue, prevInitialValueRef.current)) {\n      handleInitialValueChange(initialValue)\n    }\n  }, [initialValue])\n\n  return (\n    <div className={classes} key={pathWithEditDepth} style={styles}>\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          {/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer\n          is rendered in the correct depth (not displayed *behind* the current drawer)*/}\n          <BulkUploadProvider drawerSlugPrefix={path}>\n            <LexicalProvider\n              composerKey={pathWithEditDepth}\n              editorConfig={editorConfig}\n              fieldProps={props}\n              isSmallWidthViewport={isSmallWidthViewport}\n              key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n              onChange={handleChange}\n              readOnly={disabled}\n              value={value}\n            />\n          </BulkUploadProvider>\n          {AfterInput}\n        </ErrorBoundary>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\n  // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n  return (\n    <div className=\"errorBoundary\" role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n    </div>\n  )\n}\n\nexport const RichText: typeof RichTextComponent = RichTextComponent\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport {\n  BulkUploadProvider,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  RenderCustomComponent,\n  useEditDepth,\n  useEffectEvent,\n  useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport { dequal } from 'dequal/lite'\nimport { type Validate } from 'payload'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\n\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport { useRunDeprioritized } from '../utilities/useRunDeprioritized.js'\nimport { useRichTextView } from './RichTextViewProvider.js'\nimport { ViewSelector } from './ViewSelector.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n  } & LexicalRichTextFieldProps\n> = (props) => {\n  const {\n    editorConfig,\n    field,\n    field: {\n      admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    schemaPath,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const editDepth = useEditDepth()\n  const { hasInheritedViews } = useRichTextView()\n\n  const memoizedValidate = useCallback<Validate>(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n        return validate(value, { ...validationOptions, required })\n      }\n      return true\n    },\n    // Important: do not add props to the dependencies array.\n    // This would cause an infinite loop and endless re-rendering.\n    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled: disabledFromField,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || disabledFromField\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n  const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n  const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n  const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\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 classes = [\n    'field-type',\n    baseClass,\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n      ? `${baseClass}--show-gutter`\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      // Capture `editorState` in the closure so we can safely run later.\n      const updateFieldValue = () => {\n        const newState = editorState.toJSON()\n        prevValueRef.current = newState\n        setValue(newState)\n      }\n\n      // Queue the update for the browser’s idle time (or Safari shim)\n      // and let the hook handle debouncing/cancellation.\n      void runDeprioritized(updateFieldValue)\n    },\n    [setValue, runDeprioritized], // `runDeprioritized` is stable (useCallback inside hook)\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const handleInitialValueChange = useEffectEvent(\n    (initialValue: SerializedEditorState | undefined) => {\n      // Object deep equality check here, as re-mounting the editor if\n      // the new value is the same as the old one is not necessary.\n      // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,\n      // so we need to do a deep equality check here that does not care about key order => we use dequal.\n      // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.\n      if (\n        prevValueRef.current !== value &&\n        !dequal(\n          prevValueRef.current != null\n            ? JSON.parse(JSON.stringify(prevValueRef.current))\n            : prevValueRef.current,\n          value,\n        )\n      ) {\n        prevInitialValueRef.current = initialValue\n        prevValueRef.current = value\n        setRerenderProviderKey(new Date())\n      }\n    },\n  )\n\n  useEffect(() => {\n    // Needs to trigger for object reference changes - otherwise,\n    // reacting to the same initial value change twice will cause\n    // the second change to be ignored, even though the value has changed.\n    // That's because initialValue is not kept up-to-date\n    if (!Object.is(initialValue, prevInitialValueRef.current)) {\n      handleInitialValueChange(initialValue)\n    }\n  }, [initialValue])\n\n  return (\n    <div\n      className={classes}\n      data-field-path={path}\n      data-field-schemapath={schemaPath}\n      data-lexical-view={editorConfig?.view}\n      key={pathWithEditDepth}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <div className={`${baseClass}__label-row`}>\n        {Label || (\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        )}\n        {!hasInheritedViews && <ViewSelector />}\n      </div>\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          {/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer\n          is rendered in the correct depth (not displayed *behind* the current drawer)*/}\n          <BulkUploadProvider drawerSlugPrefix={path}>\n            <LexicalProvider\n              composerKey={pathWithEditDepth}\n              editorConfig={editorConfig}\n              fieldProps={props}\n              isSmallWidthViewport={isSmallWidthViewport}\n              key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n              onChange={handleChange}\n              readOnly={disabled}\n              value={value}\n            />\n          </BulkUploadProvider>\n          {AfterInput}\n        </ErrorBoundary>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\n  // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n  return (\n    <div className=\"errorBoundary\" role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n    </div>\n  )\n}\n\nexport const RichText: typeof RichTextComponent = RichTextComponent\n"],"names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useEffectEvent","useField","mergeFieldStyles","dequal","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","useRunDeprioritized","useRichTextView","ViewSelector","baseClass","RichTextComponent","props","editorConfig","field","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","schemaPath","validate","readOnlyFromProps","editDepth","hasInheritedViews","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","disabledFromField","initialValue","setValue","showError","potentiallyStalePath","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","runDeprioritized","handleChange","editorState","updateFieldValue","newState","toJSON","current","styles","handleInitialValueChange","JSON","parse","stringify","Date","Object","is","div","data-field-path","data-field-schemapath","data-lexical-view","view","style","CustomComponent","Fallback","fallbackRender","onReset","drawerSlugPrefix","composerKey","fieldProps","onChange","error","role","p","pre","color","message","RichText"],"mappings":"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"}

package/dist/field/RenderLexical/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { FieldContext, FieldPathContext, ServerFunctionsContext, ShimmerEffect, useServerFunctions } from '@payloadcms/ui';
 import React, { useCallback, useEffect, useRef } from 'react';
 /**
@@ -9,123 +7,129 @@ import React, { useCallback, useEffect, useRef } from 'react';
  *
  * @experimental - may break in minor releases
  * @todo - replace this with a general utility that works for all fields. Maybe merge with packages/ui/src/forms/RenderFields/RenderField.tsx
- */
-export const RenderLexical = args => {
-  const $ = _c(9);
-  const {
-    field,
-    initialValue,
-    Loading,
-    path,
-    schemaPath,
-    setValue,
-    value
-  } = args;
-  const [Component, setComponent] = React.useState(null);
-  const serverFunctionContext = useServerFunctions();
-  const {
-    _internal_renderField
-  } = serverFunctionContext;
-  const [entityType, entitySlug] = schemaPath.split(".", 2);
-  const fieldPath = path ?? (field && "name" in field ? field?.name : "") ?? "";
-  let t0;
-  if ($[0] !== _internal_renderField || $[1] !== field || $[2] !== initialValue || $[3] !== path || $[4] !== schemaPath) {
-    t0 = () => {
-      const render = async function render() {
-        const {
-          Field
-        } = await _internal_renderField({
-          field: {
-            ...(field || {}),
-            type: "richText",
-            admin: {
-              ...(field?.admin || {}),
-              hidden: false
-            }
-          },
-          initialValue: initialValue ?? undefined,
-          path,
-          schemaPath
-        });
-        setComponent(Field);
-      };
-      render();
+ */ export const RenderLexical = /**
+   * If value or setValue, or both, is provided, this component will manage its own value.
+   * If neither is passed, it will rely on the parent form to manage the value.
+   */ /**
+     * Override the loading state while the field component is being fetched and rendered.
+     */ (args)=>{
+    const { field, initialValue, Loading, path, schemaPath, setValue, value } = args;
+    const [Component, setComponent] = React.useState(null);
+    const serverFunctionContext = useServerFunctions();
+    const { _internal_renderField } = serverFunctionContext;
+    const [entityType, entitySlug] = schemaPath.split('.', 2);
+    const fieldPath = path ?? (field && 'name' in field ? field?.name : '') ?? '';
+    const renderLexical = useCallback(()=>{
+        async function render() {
+            const { Field } = await _internal_renderField({
+                field: {
+                    ...field || {},
+                    type: 'richText',
+                    admin: {
+                        ...field?.admin || {},
+                        // When using "fake" anchor fields, hidden is often set to true. We need to override that here to ensure the field is rendered.
+                        hidden: false
+                    }
+                },
+                initialValue: initialValue ?? undefined,
+                path,
+                schemaPath
+            });
+            setComponent(Field);
+        }
+        void render();
+    }, [
+        _internal_renderField,
+        schemaPath,
+        path,
+        field,
+        initialValue
+    ]);
+    const mounted = useRef(false);
+    useEffect(()=>{
+        if (mounted.current) {
+            return;
+        }
+        mounted.current = true;
+        void renderLexical();
+    }, [
+        renderLexical
+    ]);
+    if (!Component) {
+        return typeof Loading !== 'undefined' ? Loading : /*#__PURE__*/ _jsxDEV(ShimmerEffect, {}, void 0, false, {
+            fileName: "src/field/RenderLexical/index.tsx",
+            lineNumber: 82,
+            columnNumber: 55
+        }, this);
+    }
+    /**
+   * By default, the lexical will make form state requests (e.g. to get drawer fields), passing in the arguments
+   * of the current field. However, we need to override those arguments to get it to make requests based on the
+   * *target* field. The server only knows the schema map of the target field.
+   */ const adjustedServerFunctionContext = {
+        ...serverFunctionContext,
+        getFormState: async (getFormStateArgs)=>{
+            return serverFunctionContext.getFormState({
+                ...getFormStateArgs,
+                collectionSlug: entityType === 'collection' ? entitySlug : undefined,
+                globalSlug: entityType === 'global' ? entitySlug : undefined
+            });
+        }
     };
-    $[0] = _internal_renderField;
-    $[1] = field;
-    $[2] = initialValue;
-    $[3] = path;
-    $[4] = schemaPath;
-    $[5] = t0;
-  } else {
-    t0 = $[5];
-  }
-  const renderLexical = t0;
-  const mounted = useRef(false);
-  let t1;
-  let t2;
-  if ($[6] !== renderLexical) {
-    t1 = () => {
-      if (mounted.current) {
-        return;
-      }
-      mounted.current = true;
-      renderLexical();
+    if (typeof value === 'undefined' && !setValue) {
+        return /*#__PURE__*/ _jsxDEV(ServerFunctionsContext, {
+            value: {
+                ...adjustedServerFunctionContext
+            },
+            children: /*#__PURE__*/ _jsxDEV(FieldPathContext, {
+                value: fieldPath,
+                children: Component
+            }, fieldPath, false, {
+                fileName: "src/field/RenderLexical/index.tsx",
+                lineNumber: 104,
+                columnNumber: 9
+            }, this)
+        }, void 0, false, {
+            fileName: "src/field/RenderLexical/index.tsx",
+            lineNumber: 103,
+            columnNumber: 7
+        }, this);
+    }
+    const fieldValue = {
+        disabled: false,
+        formInitializing: false,
+        formProcessing: false,
+        formSubmitted: false,
+        initialValue: value,
+        path: fieldPath,
+        setValue: setValue ?? (()=>undefined),
+        showError: false,
+        value
     };
-    t2 = [renderLexical];
-    $[6] = renderLexical;
-    $[7] = t1;
-    $[8] = t2;
-  } else {
-    t1 = $[7];
-    t2 = $[8];
-  }
-  useEffect(t1, t2);
-  if (!Component) {
-    return typeof Loading !== "undefined" ? Loading : _jsx(ShimmerEffect, {});
-  }
-  const adjustedServerFunctionContext = {
-    ...serverFunctionContext,
-    getFormState: async getFormStateArgs => serverFunctionContext.getFormState({
-      ...getFormStateArgs,
-      collectionSlug: entityType === "collection" ? entitySlug : undefined,
-      globalSlug: entityType === "global" ? entitySlug : undefined
-    })
-  };
-  if (typeof value === "undefined" && !setValue) {
-    return _jsx(ServerFunctionsContext, {
-      value: {
-        ...adjustedServerFunctionContext
-      },
-      children: _jsx(FieldPathContext, {
-        value: fieldPath,
-        children: Component
-      }, fieldPath)
-    });
-  }
-  const fieldValue = {
-    disabled: false,
-    formInitializing: false,
-    formProcessing: false,
-    formSubmitted: false,
-    initialValue: value,
-    path: fieldPath,
-    setValue: setValue ?? _temp,
-    showError: false,
-    value
-  };
-  return _jsx(ServerFunctionsContext, {
-    value: {
-      ...adjustedServerFunctionContext
-    },
-    children: _jsx(FieldPathContext, {
-      value: fieldPath,
-      children: _jsx(FieldContext, {
-        value: fieldValue,
-        children: Component
-      })
-    }, fieldPath)
-  });
+    return /*#__PURE__*/ _jsxDEV(ServerFunctionsContext, {
+        value: {
+            ...adjustedServerFunctionContext
+        },
+        children: /*#__PURE__*/ _jsxDEV(FieldPathContext, {
+            value: fieldPath,
+            children: /*#__PURE__*/ _jsxDEV(FieldContext, {
+                value: fieldValue,
+                children: Component
+            }, void 0, false, {
+                fileName: "src/field/RenderLexical/index.tsx",
+                lineNumber: 126,
+                columnNumber: 9
+            }, this)
+        }, fieldPath, false, {
+            fileName: "src/field/RenderLexical/index.tsx",
+            lineNumber: 125,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/field/RenderLexical/index.tsx",
+        lineNumber: 124,
+        columnNumber: 5
+    }, this);
 };
-function _temp() {}
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","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","t0","render","Field","type","admin","hidden","undefined","renderLexical","mounted","t1","t2","current","_jsx","adjustedServerFunctionContext","getFormState","getFormStateArgs","collectionSlug","globalSlug","children","fieldValue","disabled","formInitializing","formProcessing","formSubmitted","_temp","showError"],"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"],"mappings":"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","ignoreList":[]}
+{"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,85 @@
+import React from 'react';
+import type { LexicalEditorNodeMap, LexicalEditorViewMap } from '../types.js';
+/**
+ * Context for managing richtext editor view state and inheritance.
+ */
+type RichTextViewContextType = {
+    /**
+     * The currently active view name (e.g., 'default', 'frontend', 'debug').
+     */
+    currentView: string;
+    /**
+     * The resolved node map for the current view, containing rendering overrides for each node type.
+     */
+    currentViewMap?: LexicalEditorNodeMap;
+    /**
+     * True if the current view was explicitly set (via prop) by this provider or an ancestor.
+     * Used to distinguish intentional view settings from automatic defaults.
+     */
+    hasExplicitCurrentView?: boolean;
+    /**
+     * True if this provider inherited its view from a parent provider.
+     * When true, the ViewSelector is hidden because the view is controlled by an ancestor.
+     */
+    hasInheritedViews?: boolean;
+    /**
+     * If true, nested richtext editors will inherit this provider's currentView and views.
+     */
+    inheritable?: boolean;
+    /**
+     * Function to programmatically change the current view.
+     */
+    setCurrentView: (view: string) => void;
+    /**
+     * Map of all available views for this editor. Each key is a view name, each value contains
+     * admin config, node overrides, and lexical config for that view.
+     */
+    views?: LexicalEditorViewMap;
+};
+/**
+ * Provider for managing richtext editor view state and its inheritance.
+ *
+ * Handles two key scenarios:
+ * 1. **Explicit view setting**: Wrap with `currentView` and `inheritable={true}` to force nested editors to a specific view
+ * 2. **View map inheritance**: Nested editors inherit `views` from parents, allowing view switching across the hierarchy
+ *
+ * When a nested editor inherits from a parent, its ViewSelector is hidden because the view is controlled by an ancestor.
+ *
+ * @example
+ * Force all nested richtext editors to use "frontend" view:
+ * ```tsx
+ * <RichTextViewProvider currentView="frontend" inheritable={true}>
+ *   <MyForm /> {/* All richtext fields inside will use "frontend" view }
+ * </RichTextViewProvider>
+ * ```
+ */
+export declare const RichTextViewProvider: React.FC<{
+    children: React.ReactNode;
+    currentView?: string;
+    inheritable?: boolean;
+    views?: LexicalEditorViewMap;
+}>;
+/**
+ * Access the current richtext editor view context.
+ *
+ * Returns the active view name, node overrides, inheritance state, and a function to switch views.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentView, currentViewMap, hasInheritedViews, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Active view: {currentView}</p>
+ *       {hasInheritedViews && <p>View inherited from parent</p>}
+ *       {currentViewMap?.heading && <p>Custom heading renderer active</p>}
+ *       <button onClick={() => setCurrentView('frontend')}>Switch to frontend</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;;OAEG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAA;IACrC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;OAGG;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,CAgDA,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,IAAI,uBAAuB,CAEzD"}

package/dist/field/RichTextViewProvider.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { useControllableState } from '@payloadcms/ui';
+import React, { createContext, use, useMemo } from 'react';
+/**
+ * Context for managing richtext editor view state and inheritance.
+ */ /**
+   * The currently active view name (e.g., 'default', 'frontend', 'debug').
+   */ /**
+   * The resolved node map for the current view, containing rendering overrides for each node type.
+   */ /**
+   * True if the current view was explicitly set (via prop) by this provider or an ancestor.
+   * Used to distinguish intentional view settings from automatic defaults.
+   */ /**
+   * True if this provider inherited its view from a parent provider.
+   * When true, the ViewSelector is hidden because the view is controlled by an ancestor.
+   */ /**
+   * If true, nested richtext editors will inherit this provider's currentView and views.
+   */ /**
+   * Function to programmatically change the current view.
+   */ /**
+   * Map of all available views for this editor. Each key is a view name, each value contains
+   * admin config, node overrides, and lexical config for that view.
+   */ const RichTextViewContext = /*#__PURE__*/ createContext({
+    currentView: 'default',
+    inheritable: false,
+    setCurrentView: ()=>{}
+});
+/**
+ * Provider for managing richtext editor view state and its inheritance.
+ *
+ * Handles two key scenarios:
+ * 1. **Explicit view setting**: Wrap with `currentView` and `inheritable={true}` to force nested editors to a specific view
+ * 2. **View map inheritance**: Nested editors inherit `views` from parents, allowing view switching across the hierarchy
+ *
+ * When a nested editor inherits from a parent, its ViewSelector is hidden because the view is controlled by an ancestor.
+ *
+ * @example
+ * Force all nested richtext editors to use "frontend" view:
+ * ```tsx
+ * <RichTextViewProvider currentView="frontend" inheritable={true}>
+ *   <MyForm /> {/* All richtext fields inside will use "frontend" view }
+ * </RichTextViewProvider>
+ * ```
+ */ export const RichTextViewProvider = (args)=>{
+    const parentContext = useRichTextView();
+    // Track if this provider explicitly sets currentView (not just using the default)
+    const hasOwnExplicitView = args.currentView !== undefined;
+    const hasInheritedViews = parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView);
+    // This provider has explicit currentView if it sets one OR inherits one from parent
+    const hasExplicitCurrentView = hasOwnExplicitView || parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView);
+    const { children, currentView: currentViewFromProps, inheritable, views } = {
+        children: args.children,
+        // Only inherit currentView if parent has an explicit one
+        currentView: parentContext.inheritable && parentContext.hasExplicitCurrentView ? parentContext.currentView : args.currentView,
+        // Propagate inheritable flag through the hierarchy
+        inheritable: parentContext.inheritable || args.inheritable,
+        // Only inherit views if parent has a views map
+        views: parentContext.inheritable && parentContext.views ? parentContext.views : args.views
+    };
+    const [currentView, setCurrentView] = useControllableState(currentViewFromProps, 'default');
+    const value = useMemo(()=>{
+        const currentViewMap = views ? views[currentView] || views.default : undefined;
+        return {
+            currentView,
+            currentViewMap,
+            hasExplicitCurrentView,
+            hasInheritedViews,
+            inheritable,
+            setCurrentView,
+            views
+        };
+    }, [
+        currentView,
+        inheritable,
+        hasExplicitCurrentView,
+        hasInheritedViews,
+        setCurrentView,
+        views
+    ]);
+    return /*#__PURE__*/ _jsxDEV(RichTextViewContext, {
+        value: value,
+        children: children
+    }, void 0, false, {
+        fileName: "src/field/RichTextViewProvider.tsx",
+        lineNumber: 119,
+        columnNumber: 10
+    }, this);
+};
+/**
+ * Access the current richtext editor view context.
+ *
+ * Returns the active view name, node overrides, inheritance state, and a function to switch views.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentView, currentViewMap, hasInheritedViews, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Active view: {currentView}</p>
+ *       {hasInheritedViews && <p>View inherited from parent</p>}
+ *       {currentViewMap?.heading && <p>Custom heading renderer active</p>}
+ *       <button onClick={() => setCurrentView('frontend')}>Switch to frontend</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 for managing richtext editor view state and inheritance.\n */\ntype RichTextViewContextType = {\n  /**\n   * The currently active view name (e.g., 'default', 'frontend', 'debug').\n   */\n  currentView: string\n  /**\n   * The resolved node map for the current view, containing rendering overrides for each node type.\n   */\n  currentViewMap?: LexicalEditorNodeMap\n  /**\n   * True if the current view was explicitly set (via prop) by this provider or an ancestor.\n   * Used to distinguish intentional view settings from automatic defaults.\n   */\n  hasExplicitCurrentView?: boolean\n  /**\n   * True if this provider inherited its view from a parent provider.\n   * When true, the ViewSelector is hidden because the view is controlled by an ancestor.\n   */\n  hasInheritedViews?: boolean\n  /**\n   * If true, nested richtext editors will inherit this provider's currentView and views.\n   */\n  inheritable?: boolean\n  /**\n   * Function to programmatically change the current view.\n   */\n  setCurrentView: (view: string) => void\n  /**\n   * Map of all available views for this editor. Each key is a view name, each value contains\n   * admin config, node overrides, and lexical config for that view.\n   */\n  views?: LexicalEditorViewMap\n}\n\nconst RichTextViewContext = createContext<RichTextViewContextType>({\n  currentView: 'default',\n  inheritable: false,\n  setCurrentView: () => {},\n})\n\n/**\n * Provider for managing richtext editor view state and its inheritance.\n *\n * Handles two key scenarios:\n * 1. **Explicit view setting**: Wrap with `currentView` and `inheritable={true}` to force nested editors to a specific view\n * 2. **View map inheritance**: Nested editors inherit `views` from parents, allowing view switching across the hierarchy\n *\n * When a nested editor inherits from a parent, its ViewSelector is hidden because the view is controlled by an ancestor.\n *\n * @example\n * Force all nested richtext editors to use \"frontend\" view:\n * ```tsx\n * <RichTextViewProvider currentView=\"frontend\" inheritable={true}>\n *   <MyForm /> {/* All richtext fields inside will use \"frontend\" view }\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  // Track if this provider explicitly sets currentView (not just using the default)\n  const hasOwnExplicitView = args.currentView !== undefined\n\n  const hasInheritedViews =\n    parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView)\n\n  // This provider has explicit currentView if it sets one OR inherits one from parent\n  const hasExplicitCurrentView =\n    hasOwnExplicitView ||\n    (parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView))\n\n  const {\n    children,\n    currentView: currentViewFromProps,\n    inheritable,\n    views,\n  } = {\n    children: args.children,\n    // Only inherit currentView if parent has an explicit one\n    currentView:\n      parentContext.inheritable && parentContext.hasExplicitCurrentView\n        ? parentContext.currentView\n        : args.currentView,\n    // Propagate inheritable flag through the hierarchy\n    inheritable: parentContext.inheritable || args.inheritable,\n    // Only inherit views if parent has a views map\n    views: parentContext.inheritable && parentContext.views ? parentContext.views : args.views,\n  }\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      hasExplicitCurrentView,\n      hasInheritedViews,\n      inheritable,\n      setCurrentView,\n      views,\n    }\n  }, [currentView, inheritable, hasExplicitCurrentView, hasInheritedViews, setCurrentView, views])\n\n  return <RichTextViewContext value={value}>{children}</RichTextViewContext>\n}\n\n/**\n * Access the current richtext editor view context.\n *\n * Returns the active view name, node overrides, inheritance state, and a function to switch views.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { currentView, currentViewMap, hasInheritedViews, setCurrentView } = useRichTextView()\n *\n *   return (\n *     <div>\n *       <p>Active view: {currentView}</p>\n *       {hasInheritedViews && <p>View inherited from parent</p>}\n *       {currentViewMap?.heading && <p>Custom heading renderer active</p>}\n *       <button onClick={() => setCurrentView('frontend')}>Switch to frontend</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","hasOwnExplicitView","undefined","hasInheritedViews","Boolean","hasExplicitCurrentView","children","currentViewFromProps","views","value","currentViewMap","default"],"mappings":"AAAA;;AACA,SAASA,oBAAoB,QAAQ,iBAAgB;AACrD,OAAOC,SAASC,aAAa,EAAEC,GAAG,EAAEC,OAAO,QAAQ,QAAO;AAI1D;;CAEC,GAEC;;GAEC,GAED;;GAEC,GAED;;;GAGC,GAED;;;GAGC,GAED;;GAEC,GAED;;GAEC,GAED;;;GAGC,GAIH,MAAMC,oCAAsBH,cAAuC;IACjEI,aAAa;IACbC,aAAa;IACbC,gBAAgB,KAAO;AACzB;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAKR,CAACC;IACJ,MAAMC,gBAAgBC;IAEtB,kFAAkF;IAClF,MAAMC,qBAAqBH,KAAKJ,WAAW,KAAKQ;IAEhD,MAAMC,oBACJJ,cAAcJ,WAAW,IAAIS,QAAQL,cAAcM,sBAAsB;IAE3E,oFAAoF;IACpF,MAAMA,yBACJJ,sBACCF,cAAcJ,WAAW,IAAIS,QAAQL,cAAcM,sBAAsB;IAE5E,MAAM,EACJC,QAAQ,EACRZ,aAAaa,oBAAoB,EACjCZ,WAAW,EACXa,KAAK,EACN,GAAG;QACFF,UAAUR,KAAKQ,QAAQ;QACvB,yDAAyD;QACzDZ,aACEK,cAAcJ,WAAW,IAAII,cAAcM,sBAAsB,GAC7DN,cAAcL,WAAW,GACzBI,KAAKJ,WAAW;QACtB,mDAAmD;QACnDC,aAAaI,cAAcJ,WAAW,IAAIG,KAAKH,WAAW;QAC1D,+CAA+C;QAC/Ca,OAAOT,cAAcJ,WAAW,IAAII,cAAcS,KAAK,GAAGT,cAAcS,KAAK,GAAGV,KAAKU,KAAK;IAC5F;IAEA,MAAM,CAACd,aAAaE,eAAe,GAAGR,qBAAqBmB,sBAAsB;IAEjF,MAAME,QAAQjB,QAAQ;QACpB,MAAMkB,iBAAiBF,QAAQA,KAAK,CAACd,YAAY,IAAIc,MAAMG,OAAO,GAAGT;QACrE,OAAO;YACLR;YACAgB;YACAL;YACAF;YACAR;YACAC;YACAY;QACF;IACF,GAAG;QAACd;QAAaC;QAAaU;QAAwBF;QAAmBP;QAAgBY;KAAM;IAE/F,qBAAO,QAACf;QAAoBgB,OAAOA;kBAAQH;;;;;;AAC7C,EAAC;AAED;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASN;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"}