@payloadcms/richtext-lexical 4.0.0-internal.5b1e7cd → 4.0.0-internal.5e065b3

package/dist/field/RenderLexical/index.js

@@ -11,10 +11,12 @@ import React, { useCallback, useEffect, useRef } from 'react';
  * @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 $ = _c(10);
   const {
+    name,
     field,
     initialValue,
+    label,
     Loading,
     path,
     schemaPath,
@@ -27,23 +29,20 @@ export const RenderLexical = args => {
     _internal_renderField
   } = serverFunctionContext;
   const [entityType, entitySlug] = schemaPath.split(".", 2);
-  const fieldPath = path ?? (field && "name" in field ? field?.name : "") ?? "";
+  const fieldName = name !== undefined ? name : field?.name;
+  const fieldLabel = label !== undefined ? label : field?.label;
+  const fieldPath = path ?? fieldName ?? "";
   let t0;
-  if ($[0] !== _internal_renderField || $[1] !== field || $[2] !== initialValue || $[3] !== path || $[4] !== schemaPath) {
+  if ($[0] !== _internal_renderField || $[1] !== fieldLabel || $[2] !== fieldName || $[3] !== initialValue || $[4] !== path || $[5] !== schemaPath) {
     t0 = () => {
       const render = async function render() {
         const {
           Field
         } = await _internal_renderField({
-          field: {
-            ...(field || {}),
-            type: "richText",
-            admin: {
-              ...(field?.admin || {}),
-              hidden: false
-            }
-          },
+          name: fieldName,
+          hidden: false,
           initialValue: initialValue ?? undefined,
+          label: typeof fieldLabel === "function" ? undefined : fieldLabel,
           path,
           schemaPath
         });
@@ -52,19 +51,20 @@ export const RenderLexical = args => {
       render();
     };
     $[0] = _internal_renderField;
-    $[1] = field;
-    $[2] = initialValue;
-    $[3] = path;
-    $[4] = schemaPath;
-    $[5] = t0;
+    $[1] = fieldLabel;
+    $[2] = fieldName;
+    $[3] = initialValue;
+    $[4] = path;
+    $[5] = schemaPath;
+    $[6] = t0;
   } else {
-    t0 = $[5];
+    t0 = $[6];
   }
   const renderLexical = t0;
   const mounted = useRef(false);
   let t1;
   let t2;
-  if ($[6] !== renderLexical) {
+  if ($[7] !== renderLexical) {
     t1 = () => {
       if (mounted.current) {
         return;
@@ -73,12 +73,12 @@ export const RenderLexical = args => {
       renderLexical();
     };
     t2 = [renderLexical];
-    $[6] = renderLexical;
-    $[7] = t1;
-    $[8] = t2;
+    $[7] = renderLexical;
+    $[8] = t1;
+    $[9] = t2;
   } else {
-    t1 = $[7];
-    t2 = $[8];
+    t1 = $[8];
+    t2 = $[9];
   }
   useEffect(t1, t2);
   if (!Component) {

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,"file":"index.js","names":["c","_c","FieldContext","FieldPathContext","ServerFunctionsContext","ShimmerEffect","useServerFunctions","React","useCallback","useEffect","useRef","RenderLexical","args","$","name","field","initialValue","label","Loading","path","schemaPath","setValue","value","Component","setComponent","useState","serverFunctionContext","_internal_renderField","entityType","entitySlug","split","fieldName","undefined","fieldLabel","fieldPath","t0","render","Field","hidden","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 {\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 { LexicalRichTextField } from '../../types/index.js'\nimport type { DefaultTypedEditorState } from '../../types/nodeTypes.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    /** @deprecated Use `name` and `label` instead. */\n    field?: Partial<LexicalRichTextField>\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  } & Omit<RenderFieldServerFnArgs, 'hidden'>\n> = (args) => {\n  const { name, field, initialValue, label, 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 fieldName = name !== undefined ? name : field?.name\n  const fieldLabel = label !== undefined ? label : field?.label\n  const fieldPath = path ?? fieldName ?? ''\n\n  const renderLexical = useCallback(() => {\n    async function render() {\n      const { Field } = await _internal_renderField({\n        name: fieldName,\n        // When using \"fake\" anchor fields, hidden is often set to true.\n        // We need to override that here to ensure the field is rendered.\n        hidden: false,\n        initialValue: initialValue ?? undefined,\n        label: typeof fieldLabel === 'function' ? undefined : fieldLabel,\n        path,\n        schemaPath,\n      })\n\n      setComponent(Field)\n    }\n    void render()\n  }, [_internal_renderField, schemaPath, path, fieldName, fieldLabel, 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":[]}

package/dist/field/RichTextViewProvider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LexicalEditorNodeMap, LexicalEditorViewMap } from '../types.js';
+import type { LexicalEditorNodeMap, LexicalEditorViewMap } from '../types/index.js';
 /**
  * Context for managing richtext editor view state and inheritance.
  */

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

@@ -1 +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"}
+{"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,mBAAmB,CAAA;AAEnF;;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.map

@@ -1 +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":[]}
+{"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/index.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.css

@@ -0,0 +1,32 @@
+.lexical-view-selector {
+  display: inline-flex;
+  margin-inline-start: var(--spacing-xs);
+  vertical-align: middle;
+}
+
+.lexical-view-selector__button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacer-1);
+  padding: var(--spacer-1) var(--spacer-2);
+  background: transparent;
+  border-radius: var(--radius-small);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  box-sizing: border-box;
+
+  &:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text);
+  }
+}
+
+.lexical-view-selector__label {
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.lexical-view-selector__icon {
+  flex-shrink: 0;
+}

package/dist/field/ViewSelector.d.ts

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

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

@@ -1 +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"}
+{"version":3,"file":"ViewSelector.d.ts","sourceRoot":"","sources":["../../src/field/ViewSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,oBAAoB,CAAA;AAE3B,wBAAgB,YAAY,IAAI,IAAI,GAAG,KAAK,CAAC,YAAY,CA0DxD"}

package/dist/field/ViewSelector.js

@@ -5,6 +5,7 @@ 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';
+import './ViewSelector.css';
 export function ViewSelector() {
   const $ = _c(5);
   const {
@@ -43,6 +44,7 @@ export function ViewSelector() {
           }),
           buttonType: "custom",
           horizontalAlign: "left",
+          popupType: "menu",
           render: t2 => {
             const {
               close

package/dist/field/ViewSelector.js.map

@@ -1 +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":[]}
+{"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","popupType","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.css'\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        popupType=\"menu\"\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;AAChC,OAAO;AAEP,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,SAAA,EACN;UAAAC,MAAA,EAAAC,EAAA;YACD;cAAAC;YAAA,IAAAD,EAAS;YAAA,OAChBT,IAAA,CAAA3B,SAAA,CAAAsC,WAAA;cAAAT,QAAA,EACGT,QAAA,CAAAmB,GAAA,CAAAC,QAAA;gBACC,MAAAC,SAAA,GAAkBD,QAAA,CAAAhB,MAAA,EAAgB,EAAAC,WAAA,CAAc,IAAKe,QAAA,CAAAd,KAAA,EAAe;gBAAA,OAGlEC,IAAA,CAAA3B,SAAA,CAAA0C,MAAA;kBAAAC,MAAA,EACUH,QAAA,KAAanC,WAAA;kBAAAuC,QAAA,EACXJ,QAAA,KAAanC,WAAA;kBAAAwC,OAAA,EAAAA,CAAA;oBAGrBvC,cAAA,GAAiBkC,QAAA;oBACjBH,KAAA;kBAAA;kBAAAR,QAAA,EAGDY;gBAAA,GANID,QAAA;cAAA,CASX;YAAA,C;;gBAGC;QAAA,C;;;;;;;;;;;;;;;SAhCT7B,E;;AAtBG,SAAAW,OAAAwB,KAAA;EAAA,OAiBoDC,KAAA,KAAQ;AAAA;AAjB5D,SAAA5B,MAAA4B,GAAA;EAAA,OAS6CA,GAAA,KAAQ;AAAA","ignoreList":[]}