@payloadcms/richtext-lexical 3.83.0-internal.ddc1147 → 3.83.0

package/dist/field/Field.js

@@ -9,6 +9,8 @@ import { ErrorBoundary } from 'react-error-boundary';
 import './bundled.css';
 import { LexicalProvider } from '../lexical/LexicalProvider.js';
 import { useRunDeprioritized } from '../utilities/useRunDeprioritized.js';
+import { useRichTextView } from './RichTextViewProvider.js';
+import { ViewSelector } from './ViewSelector.js';
 const baseClass = 'rich-text-lexical';
 const RichTextComponent = props => {
   const {
@@ -26,6 +28,7 @@ const RichTextComponent = props => {
     },
     path: pathFromProps,
     readOnly: readOnlyFromTopLevelProps,
+    schemaPath,
     validate
   } = props;
   const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
@@ -41,6 +44,9 @@ const RichTextComponent = props => {
     localizationConfig: localizationConfig || undefined
   });
   const editDepth = useEditDepth();
+  const {
+    isControlledByParent
+  } = useRichTextView();
   const memoizedValidate = useCallback((value, validationOptions) => {
     if (typeof validate === 'function') {
       // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
@@ -91,7 +97,7 @@ const RichTextComponent = props => {
       window.removeEventListener('resize', updateViewPortWidth);
     };
   }, [isSmallWidthViewport]);
-  const classes = [baseClass, 'field-type', className, showError && 'error', disabled && `${baseClass}--read-only`, editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport ? `${baseClass}--show-gutter` : null].filter(Boolean).join(' ');
+  const classes = ['field-type', baseClass, className, showError && 'error', disabled && `${baseClass}--read-only`, editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport ? `${baseClass}--show-gutter` : null].filter(Boolean).join(' ');
   const pathWithEditDepth = `${path}.${editDepth}`;
   const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout
 ;
@@ -130,6 +136,9 @@ const RichTextComponent = props => {
   }, [initialValue]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes,
+    "data-field-path": path,
+    "data-field-schemapath": schemaPath,
+    "data-lexical-view": editorConfig?.view,
     style: styles,
     children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Error,
@@ -137,11 +146,14 @@ const RichTextComponent = props => {
         path: path,
         showError: showError
       })
-    }), Label || /*#__PURE__*/_jsx(FieldLabel, {
-      label: label,
-      localized: localized,
-      path: path,
-      required: required
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__label-row`,
+      children: [Label || /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      }), !isControlledByParent && /*#__PURE__*/_jsx(ViewSelector, {})]
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrap`,
       children: [/*#__PURE__*/_jsxs(ErrorBoundary, {

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","isFieldRTL","RenderCustomComponent","useConfig","useEditDepth","useEffectEvent","useField","useLocale","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","locale","config","localization","localizationConfig","rtl","fieldLocalized","undefined","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  isFieldRTL,\n  RenderCustomComponent,\n  useConfig,\n  useEditDepth,\n  useEffectEvent,\n  useField,\n  useLocale,\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 locale = useLocale()\n  const {\n    config: { localization: localizationConfig },\n  } = useConfig()\n\n  const rtl = isFieldRTL({\n    fieldLocalized: localized,\n    locale,\n    localizationConfig: localizationConfig || undefined,\n  })\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              rtl={rtl}\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,"file":"Field.js","names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","isFieldRTL","RenderCustomComponent","useConfig","useEditDepth","useEffectEvent","useField","useLocale","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","locale","config","localization","localizationConfig","rtl","fieldLocalized","undefined","editDepth","isControlledByParent","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","view","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  isFieldRTL,\n  RenderCustomComponent,\n  useConfig,\n  useEditDepth,\n  useEffectEvent,\n  useField,\n  useLocale,\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 locale = useLocale()\n  const {\n    config: { localization: localizationConfig },\n  } = useConfig()\n\n  const rtl = isFieldRTL({\n    fieldLocalized: localized,\n    locale,\n    localizationConfig: localizationConfig || undefined,\n  })\n\n  const editDepth = useEditDepth()\n  const { isControlledByParent } = 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        {!isControlledByParent && <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              rtl={rtl}\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":[]}

package/dist/field/RichTextViewProvider.d.ts

@@ -0,0 +1,86 @@
+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;
+    /**
+     * If true, nested richtext editors will inherit this provider's currentView and views.
+     */
+    inheritable?: boolean;
+    /**
+     * True if this provider's view is controlled by an ancestor provider — either because the
+     * ancestor has a views map (view-map inheritance) or an explicit `currentView` prop.
+     * When true, the ViewSelector is hidden.
+     */
+    isControlledByParent?: 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, isControlledByParent, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Active view: {currentView}</p>
+ *       {isControlledByParent && <p>View controlled by 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;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;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,CA0DA,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,IAAI,uBAAuB,CAEzD"}

package/dist/field/RichTextViewProvider.js

@@ -0,0 +1,94 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useControllableState } from '@payloadcms/ui';
+import React, { createContext, use, useMemo } from 'react';
+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 isControlledByParent = parentContext.inheritable && (Boolean(parentContext.views) || 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,
+    currentView: isControlledByParent ? 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: isControlledByParent && parentContext.views ? parentContext.views : args.views
+  };
+  const [currentViewRaw, setCurrentView] = useControllableState(currentViewFromProps, 'default');
+  // Normalize currentView: if the requested view doesn't exist in this editor's
+  // views map, fall back to 'default'. This ensures all consumers of useRichTextView()
+  // see a consistent currentView that actually exists
+  const currentView = views && currentViewRaw !== 'default' && !views[currentViewRaw] ? 'default' : currentViewRaw;
+  const value = useMemo(() => {
+    const currentViewMap = views ? views[currentView] : undefined;
+    return {
+      currentView,
+      currentViewMap,
+      hasExplicitCurrentView,
+      inheritable,
+      isControlledByParent,
+      setCurrentView,
+      views
+    };
+  }, [currentView, inheritable, hasExplicitCurrentView, isControlledByParent, setCurrentView, views]);
+  return /*#__PURE__*/_jsx(RichTextViewContext, {
+    value: value,
+    children: children
+  });
+};
+/**
+ * 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, isControlledByParent, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Active view: {currentView}</p>
+ *       {isControlledByParent && <p>View controlled by 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,"file":"RichTextViewProvider.js","names":["useControllableState","React","createContext","use","useMemo","RichTextViewContext","currentView","inheritable","setCurrentView","RichTextViewProvider","args","parentContext","useRichTextView","hasOwnExplicitView","undefined","isControlledByParent","Boolean","views","hasExplicitCurrentView","children","currentViewFromProps","currentViewRaw","value","currentViewMap","_jsx"],"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   * If true, nested richtext editors will inherit this provider's currentView and views.\n   */\n  inheritable?: boolean\n  /**\n   * True if this provider's view is controlled by an ancestor provider — either because the\n   * ancestor has a views map (view-map inheritance) or an explicit `currentView` prop.\n   * When true, the ViewSelector is hidden.\n   */\n  isControlledByParent?: 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 isControlledByParent =\n    parentContext.inheritable &&\n    (Boolean(parentContext.views) || 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    currentView: isControlledByParent ? parentContext.currentView : 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: isControlledByParent && parentContext.views ? parentContext.views : args.views,\n  }\n\n  const [currentViewRaw, setCurrentView] = useControllableState(currentViewFromProps, 'default')\n\n  // Normalize currentView: if the requested view doesn't exist in this editor's\n  // views map, fall back to 'default'. This ensures all consumers of useRichTextView()\n  // see a consistent currentView that actually exists\n  const currentView =\n    views && currentViewRaw !== 'default' && !views[currentViewRaw] ? 'default' : currentViewRaw\n\n  const value = useMemo(() => {\n    const currentViewMap = views ? views[currentView] : undefined\n    return {\n      currentView,\n      currentViewMap,\n      hasExplicitCurrentView,\n      inheritable,\n      isControlledByParent,\n      setCurrentView,\n      views,\n    }\n  }, [\n    currentView,\n    inheritable,\n    hasExplicitCurrentView,\n    isControlledByParent,\n    setCurrentView,\n    views,\n  ])\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, isControlledByParent, setCurrentView } = useRichTextView()\n *\n *   return (\n *     <div>\n *       <p>Active view: {currentView}</p>\n *       {isControlledByParent && <p>View controlled by 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"],"mappings":"AAAA;;;AACA,SAASA,oBAAoB,QAAQ;AACrC,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,EAAEC,OAAO,QAAQ;AA0CnD,MAAMC,mBAAA,gBAAsBH,aAAA,CAAuC;EACjEI,WAAA,EAAa;EACbC,WAAA,EAAa;EACbC,cAAA,EAAgBA,CAAA,MAAO;AACzB;AAEA;;;;;;;;;;;;;;;;;AAiBA,OAAO,MAAMC,oBAAA,GAKPC,IAAA;EACJ,MAAMC,aAAA,GAAgBC,eAAA;EAEtB;EACA,MAAMC,kBAAA,GAAqBH,IAAA,CAAKJ,WAAW,KAAKQ,SAAA;EAEhD,MAAMC,oBAAA,GACJJ,aAAA,CAAcJ,WAAW,KACxBS,OAAA,CAAQL,aAAA,CAAcM,KAAK,KAAKD,OAAA,CAAQL,aAAA,CAAcO,sBAAsB;EAE/E;EACA,MAAMA,sBAAA,GACJL,kBAAA,IACCF,aAAA,CAAcJ,WAAW,IAAIS,OAAA,CAAQL,aAAA,CAAcO,sBAAsB;EAE5E,MAAM;IACJC,QAAQ;IACRb,WAAA,EAAac,oBAAoB;IACjCb,WAAW;IACXU;EAAK,CACN,GAAG;IACFE,QAAA,EAAUT,IAAA,CAAKS,QAAQ;IACvBb,WAAA,EAAaS,oBAAA,GAAuBJ,aAAA,CAAcL,WAAW,GAAGI,IAAA,CAAKJ,WAAW;IAChF;IACAC,WAAA,EAAaI,aAAA,CAAcJ,WAAW,IAAIG,IAAA,CAAKH,WAAW;IAC1D;IACAU,KAAA,EAAOF,oBAAA,IAAwBJ,aAAA,CAAcM,KAAK,GAAGN,aAAA,CAAcM,KAAK,GAAGP,IAAA,CAAKO;EAClF;EAEA,MAAM,CAACI,cAAA,EAAgBb,cAAA,CAAe,GAAGR,oBAAA,CAAqBoB,oBAAA,EAAsB;EAEpF;EACA;EACA;EACA,MAAMd,WAAA,GACJW,KAAA,IAASI,cAAA,KAAmB,aAAa,CAACJ,KAAK,CAACI,cAAA,CAAe,GAAG,YAAYA,cAAA;EAEhF,MAAMC,KAAA,GAAQlB,OAAA,CAAQ;IACpB,MAAMmB,cAAA,GAAiBN,KAAA,GAAQA,KAAK,CAACX,WAAA,CAAY,GAAGQ,SAAA;IACpD,OAAO;MACLR,WAAA;MACAiB,cAAA;MACAL,sBAAA;MACAX,WAAA;MACAQ,oBAAA;MACAP,cAAA;MACAS;IACF;EACF,GAAG,CACDX,WAAA,EACAC,WAAA,EACAW,sBAAA,EACAH,oBAAA,EACAP,cAAA,EACAS,KAAA,CACD;EAED,oBAAOO,IAAA,CAACnB,mBAAA;IAAoBiB,KAAA,EAAOA,KAAA;cAAQH;;AAC7C;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBA,OAAO,SAASP,gBAAA;EACd,OAAOT,GAAA,CAAIE,mBAAA;AACb","ignoreList":[]}

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,89 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon, Popup, PopupList } from '@payloadcms/ui';
+import React from 'react';
+import { useRichTextView } from './RichTextViewProvider.js';
+export function ViewSelector() {
+  const $ = _c(5);
+  const {
+    currentView,
+    setCurrentView,
+    views
+  } = useRichTextView();
+  if (!views || Object.keys(views).length === 0) {
+    return null;
+  }
+  let t0;
+  let t1;
+  if ($[0] !== currentView || $[1] !== setCurrentView || $[2] !== views) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const viewKeys = Object.keys(views);
+      const hasNonDefaultViews = viewKeys.some(_temp);
+      if (!hasNonDefaultViews) {
+        t1 = null;
+        break bb0;
+      }
+      const allViews = ["default", ...viewKeys.filter(_temp2)];
+      const currentViewLabel = currentView.charAt(0).toUpperCase() + currentView.slice(1);
+      t0 = _jsx("div", {
+        className: "lexical-view-selector",
+        children: _jsx(Popup, {
+          button: _jsxs("button", {
+            className: "lexical-view-selector__button",
+            type: "button",
+            children: [_jsx("span", {
+              className: "lexical-view-selector__label",
+              children: currentViewLabel
+            }), _jsx(ChevronIcon, {
+              className: "lexical-view-selector__icon"
+            })]
+          }),
+          buttonType: "custom",
+          horizontalAlign: "left",
+          render: t2 => {
+            const {
+              close
+            } = t2;
+            return _jsx(PopupList.ButtonGroup, {
+              children: allViews.map(viewName => {
+                const viewLabel = viewName.charAt(0).toUpperCase() + viewName.slice(1);
+                return _jsx(PopupList.Button, {
+                  active: viewName === currentView,
+                  disabled: viewName === currentView,
+                  onClick: () => {
+                    setCurrentView?.(viewName);
+                    close();
+                  },
+                  children: viewLabel
+                }, viewName);
+              })
+            });
+          },
+          size: "large"
+        })
+      });
+    }
+    $[0] = currentView;
+    $[1] = setCurrentView;
+    $[2] = views;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return t0;
+}
+function _temp2(key_0) {
+  return key_0 !== "default";
+}
+function _temp(key) {
+  return key !== "default";
+}
+//# sourceMappingURL=ViewSelector.js.map

package/dist/field/ViewSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSelector.js","names":["c","_c","ChevronIcon","Popup","PopupList","React","useRichTextView","ViewSelector","$","currentView","setCurrentView","views","Object","keys","length","t0","t1","Symbol","for","bb0","viewKeys","hasNonDefaultViews","some","_temp","allViews","filter","_temp2","currentViewLabel","charAt","toUpperCase","slice","_jsx","className","children","button","_jsxs","type","horizontalAlign","render","t2","close","ButtonGroup","map","viewName","viewLabel","Button","active","disabled","onClick","key_0","key"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,WAAW,EAAEC,KAAK,EAAEC,SAAS,QAAQ;AAC9C,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAGhC,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACL;IAAAQ,WAAA;IAAAC,cAAA;IAAAC;EAAA,IAA+CL,eAAA;EAAA,IAG3C,CAACK,KAAA,IAASC,MAAA,CAAAC,IAAA,CAAYF,KAAA,EAAAG,MAAA,MAAkB;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAE,cAAA,IAAAF,CAAA,QAAAG,KAAA;IASnCK,EAAA,GAAAC,MAAA,CAAAC,GAAA;IAAAC,GAAA;MALT,MAAAC,QAAA,GAAiBR,MAAA,CAAAC,IAAA,CAAYF,KAAA;MAC7B,MAAAU,kBAAA,GAA2BD,QAAA,CAAAE,IAAA,CAAAC,KAA+B;MAAA,KAGrDF,kBAAA;QACIL,EAAA;QAAA,MAAAG,GAAA;MAAA;MAIT,MAAAK,QAAA,IAAkB,cAAcJ,QAAA,CAAAK,MAAA,CAAAC,MAAiC;MAEjE,MAAAC,gBAAA,GAAyBlB,WAAA,CAAAmB,MAAA,EAAmB,EAAAC,WAAA,CAAc,IAAKpB,WAAA,CAAAqB,KAAA,EAAkB;MAG/Ef,EAAA,GAAAgB,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,EACbF,IAAA,CAAA5B,KAAA;UAAA+B,MAAA,EAEIC,KAAA,CAAC;YAAAH,SAAA,EAAiB;YAAAI,IAAA,EAAqC;YAAAH,QAAA,GACrDF,IAAA,CAAC;cAAAC,SAAA,EAAe;cAAAC,QAAA,EAAgCN;YAAA,C,GAChDI,IAAA,CAAA7B,WAAA;cAAA8B,SAAA,EAAuB;YAAA,C;;sBAGhB;UAAAK,eAAA,EACK;UAAAC,MAAA,EAAAC,EAAA;YACP;cAAAC;YAAA,IAAAD,EAAS;YAAA,OAChBR,IAAA,CAAA3B,SAAA,CAAAqC,WAAA;cAAAR,QAAA,EACGT,QAAA,CAAAkB,GAAA,CAAAC,QAAA;gBACC,MAAAC,SAAA,GAAkBD,QAAA,CAAAf,MAAA,EAAgB,EAAAC,WAAA,CAAc,IAAKc,QAAA,CAAAb,KAAA,EAAe;gBAAA,OAGlEC,IAAA,CAAA3B,SAAA,CAAAyC,MAAA;kBAAAC,MAAA,EACUH,QAAA,KAAalC,WAAA;kBAAAsC,QAAA,EACXJ,QAAA,KAAalC,WAAA;kBAAAuC,OAAA,EAAAA,CAAA;oBAGrBtC,cAAA,GAAiBiC,QAAA;oBACjBH,KAAA;kBAAA;kBAAAP,QAAA,EAGDW;gBAAA,GANID,QAAA;cAAA,CASX;YAAA,C;;gBAGC;QAAA,C;;;;;;;;;;;;;;;SA/BT5B,E;;AAtBG,SAAAW,OAAAuB,KAAA;EAAA,OAiBoDC,KAAA,KAAQ;AAAA;AAjB5D,SAAA3B,MAAA2B,GAAA;EAAA,OAS6CA,GAAA,KAAQ;AAAA","ignoreList":[]}