@payloadcms/richtext-lexical 3.0.0-alpha.48 → 3.0.0-alpha.49

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAQnF,OAAO,KAA8B,MAAM,OAAO,CAAA;AAWlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,mBAAmB,EAAE,mBAAmB,CAAA;CACzC,CA0JA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AASnF,OAAO,KAA8B,MAAM,OAAO,CAAA;AAWlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,mBAAmB,EAAE,mBAAmB,CAAA;CACzC,CA0JA,CAAA"}

package/dist/cell/index.js

@@ -1,10 +1,11 @@
 'use client';
-import { createHeadlessEditor } from '@lexical/headless';
-import { useTableCell } from '@payloadcms/ui/elements';
-import { useFieldPath } from '@payloadcms/ui/forms';
-import { useClientFunctions } from '@payloadcms/ui/providers';
+import lexicalHeadlessImport from '@lexical/headless';
+const { createHeadlessEditor } = lexicalHeadlessImport;
 import lexicalImport from 'lexical';
 const { $getRoot } = lexicalImport;
+import { useTableCell } from '@payloadcms/ui/elements/Table';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction';
 import React, { useEffect, useState } from 'react';
 import { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js';
 import { loadClientFeatures } from '../field/lexical/config/client/loader.js';
@@ -13,7 +14,7 @@ import { getEnabledNodes } from '../field/lexical/nodes/index.js';
 export const RichTextCell = (props)=>{
     const { lexicalEditorConfig } = props;
     const [preview, setPreview] = React.useState('Loading...');
-    const { schemaPath } = useFieldPath();
+    const { schemaPath } = useFieldProps();
     const { cellData, richTextComponentMap } = useTableCell();
     const clientFunctions = useClientFunctions();
     const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false);

package/dist/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/cell/index.tsx"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'\n\nimport { createHeadlessEditor } from '@lexical/headless'\nimport { useTableCell } from '@payloadcms/ui/elements'\nimport { useFieldPath } from '@payloadcms/ui/forms'\nimport { useClientFunctions } from '@payloadcms/ui/providers'\nimport lexicalImport from 'lexical'\nconst { $getRoot } = lexicalImport\nimport React, { useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../field/features/types.js'\nimport type { SanitizedClientEditorConfig } from '../field/lexical/config/types.js'\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\n\nimport { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'\nimport { loadClientFeatures } from '../field/lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from '../field/lexical/config/client/sanitize.js'\nimport { getEnabledNodes } from '../field/lexical/nodes/index.js'\n\nexport const RichTextCell: React.FC<{\n  lexicalEditorConfig: LexicalEditorConfig\n}> = (props) => {\n  const { lexicalEditorConfig } = props\n\n  const [preview, setPreview] = React.useState('Loading...')\n  const { schemaPath } = useFieldPath()\n\n  const { cellData, richTextComponentMap } = useTableCell()\n\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  useEffect(() => {\n    let dataToUse = cellData\n    if (dataToUse == null || !hasLoadedFeatures || !finalSanitizedEditorConfig) {\n      setPreview('')\n      return\n    }\n\n    // Transform data through load hooks\n    if (finalSanitizedEditorConfig?.features?.hooks?.load?.length) {\n      finalSanitizedEditorConfig.features.hooks.load.forEach((hook) => {\n        dataToUse = hook({ incomingEditorState: dataToUse })\n      })\n    }\n\n    if (!dataToUse || typeof dataToUse !== 'object') {\n      setPreview('')\n      return\n    }\n\n    // If data is from Slate and not Lexical\n    if (Array.isArray(dataToUse) && !('root' in dataToUse)) {\n      setPreview('')\n      return\n    }\n\n    // If data is from payload-plugin-lexical\n    if ('jsonContent' in dataToUse) {\n      setPreview('')\n      return\n    }\n\n    // initialize headless editor\n    const headlessEditor = createHeadlessEditor({\n      namespace: finalSanitizedEditorConfig.lexical.namespace,\n      nodes: getEnabledNodes({ editorConfig: finalSanitizedEditorConfig }),\n      theme: finalSanitizedEditorConfig.lexical.theme,\n    })\n    headlessEditor.setEditorState(headlessEditor.parseEditorState(dataToUse))\n\n    const textContent =\n      headlessEditor.getEditorState().read(() => {\n        return $getRoot().getTextContent()\n      }) || ''\n\n    // Limiting the number of characters shown is done in a CSS rule\n    setPreview(textContent)\n  }, [cellData, lexicalEditorConfig, hasLoadedFeatures, finalSanitizedEditorConfig])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            })\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return <span>{preview}</span>\n}\n"],"names":["createHeadlessEditor","useTableCell","useFieldPath","useClientFunctions","lexicalImport","$getRoot","React","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","getEnabledNodes","RichTextCell","props","lexicalEditorConfig","preview","setPreview","schemaPath","cellData","richTextComponentMap","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","dataToUse","hooks","load","hook","incomingEditorState","isArray","headlessEditor","namespace","nodes","editorConfig","theme","setEditorState","parseEditorState","textContent","getEditorState","read","getTextContent","Fragment","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","span"],"mappings":"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"}
+{"version":3,"sources":["../../src/cell/index.tsx"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'\n\nimport lexicalHeadlessImport from '@lexical/headless'\nconst { createHeadlessEditor } = lexicalHeadlessImport\nimport lexicalImport from 'lexical'\nconst { $getRoot } = lexicalImport\nimport { useTableCell } from '@payloadcms/ui/elements/Table'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../field/features/types.js'\nimport type { SanitizedClientEditorConfig } from '../field/lexical/config/types.js'\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\n\nimport { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'\nimport { loadClientFeatures } from '../field/lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from '../field/lexical/config/client/sanitize.js'\nimport { getEnabledNodes } from '../field/lexical/nodes/index.js'\n\nexport const RichTextCell: React.FC<{\n  lexicalEditorConfig: LexicalEditorConfig\n}> = (props) => {\n  const { lexicalEditorConfig } = props\n\n  const [preview, setPreview] = React.useState('Loading...')\n  const { schemaPath } = useFieldProps()\n\n  const { cellData, richTextComponentMap } = useTableCell()\n\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  useEffect(() => {\n    let dataToUse = cellData\n    if (dataToUse == null || !hasLoadedFeatures || !finalSanitizedEditorConfig) {\n      setPreview('')\n      return\n    }\n\n    // Transform data through load hooks\n    if (finalSanitizedEditorConfig?.features?.hooks?.load?.length) {\n      finalSanitizedEditorConfig.features.hooks.load.forEach((hook) => {\n        dataToUse = hook({ incomingEditorState: dataToUse })\n      })\n    }\n\n    if (!dataToUse || typeof dataToUse !== 'object') {\n      setPreview('')\n      return\n    }\n\n    // If data is from Slate and not Lexical\n    if (Array.isArray(dataToUse) && !('root' in dataToUse)) {\n      setPreview('')\n      return\n    }\n\n    // If data is from payload-plugin-lexical\n    if ('jsonContent' in dataToUse) {\n      setPreview('')\n      return\n    }\n\n    // initialize headless editor\n    const headlessEditor = createHeadlessEditor({\n      namespace: finalSanitizedEditorConfig.lexical.namespace,\n      nodes: getEnabledNodes({ editorConfig: finalSanitizedEditorConfig }),\n      theme: finalSanitizedEditorConfig.lexical.theme,\n    })\n    headlessEditor.setEditorState(headlessEditor.parseEditorState(dataToUse))\n\n    const textContent =\n      headlessEditor.getEditorState().read(() => {\n        return $getRoot().getTextContent()\n      }) || ''\n\n    // Limiting the number of characters shown is done in a CSS rule\n    setPreview(textContent)\n  }, [cellData, lexicalEditorConfig, hasLoadedFeatures, finalSanitizedEditorConfig])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            })\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return <span>{preview}</span>\n}\n"],"names":["lexicalHeadlessImport","createHeadlessEditor","lexicalImport","$getRoot","useTableCell","useFieldProps","useClientFunctions","React","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","getEnabledNodes","RichTextCell","props","lexicalEditorConfig","preview","setPreview","schemaPath","cellData","richTextComponentMap","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","dataToUse","hooks","load","hook","incomingEditorState","isArray","headlessEditor","namespace","nodes","editorConfig","theme","setEditorState","parseEditorState","textContent","getEditorState","read","getTextContent","Fragment","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","span"],"mappings":"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"}

package/dist/field/Field.d.ts

@@ -1,4 +1,4 @@
-import { type FormFieldBase } from '@payloadcms/ui';
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import React from 'react';
 import type { SanitizedClientEditorConfig } from './lexical/config/types.js';
 import './index.scss';
@@ -6,5 +6,6 @@ export declare const RichText: React.FC<FormFieldBase & {
     editorConfig: SanitizedClientEditorConfig;
     name: string;
     richTextComponentMap: Map<string, React.ReactNode>;
+    width?: string;
 }>;
 //# sourceMappingURL=Field.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,gBAAgB,CAAA;AAC7D,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC7B,aAAa,GAAG;IACd,YAAY,EAAE,2BAA2B,CAAA;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,CAoFF,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAOjE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC7B,aAAa,GAAG;IACd,YAAY,EAAE,2BAA2B,CAAA;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CA2FF,CAAA"}

package/dist/field/Field.js

@@ -1,12 +1,15 @@
 'use client';
-import { useField } from '@payloadcms/ui';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+import { useField } from '@payloadcms/ui/forms/useField';
 import React, { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import './index.scss';
 import { LexicalProvider } from './lexical/LexicalProvider.js';
 const baseClass = 'rich-text-lexical';
 export const RichText = (props)=>{
-    const { name, Description, Error, Label, className, editorConfig, path: pathFromProps, readOnly, required, style, validate, width } = props;
+    const { name, CustomDescription, CustomError, CustomLabel, className, descriptionProps, editorConfig, errorProps, labelProps, path: pathFromProps, readOnly, required, style, validate, width } = props;
     const memoizedValidate = useCallback((value, validationOptions)=>{
         if (typeof validate === 'function') {
             return validate(value, {
@@ -43,7 +46,7 @@ export const RichText = (props)=>{
         }
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__wrap`
-    }, Error, Label, /*#__PURE__*/ React.createElement(ErrorBoundary, {
+    }, CustomError !== undefined ? CustomError : /*#__PURE__*/ React.createElement(FieldError, errorProps || {}), CustomLabel !== undefined ? CustomLabel : /*#__PURE__*/ React.createElement(FieldLabel, labelProps || {}), /*#__PURE__*/ React.createElement(ErrorBoundary, {
         fallbackRender: fallbackRender,
         onReset: ()=>{}
     }, /*#__PURE__*/ React.createElement(LexicalProvider, {
@@ -68,7 +71,7 @@ export const RichText = (props)=>{
         path: path,
         readOnly: readOnly,
         value: value
-    })), Description));
+    })), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {})));
 };
 function fallbackRender({ error }) {
     // Call resetErrorBoundary() to reset the error boundary and retry the render.

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { SerializedEditorState } from 'lexical'\n\nimport { type FormFieldBase, useField } from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport './index.scss'\nimport { LexicalProvider } from './lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nexport const RichText: React.FC<\n  FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n> = (props) => {\n  const {\n    name,\n    Description,\n    Error,\n    Label,\n    className,\n    editorConfig,\n    path: pathFromProps,\n    readOnly,\n    required,\n    style,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n    width,\n  } = props\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, props, required })\n      }\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 fieldType = useField<SerializedEditorState>({\n    path: pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    readOnly && `${baseClass}--read-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      className={classes}\n      key={path}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <div className={`${baseClass}__wrap`}>\n        {Error}\n        {Label}\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          <LexicalProvider\n            editorConfig={editorConfig}\n            fieldProps={props}\n            key={JSON.stringify({ initialValue, path })} // 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={(editorState) => {\n              let serializedEditorState = editorState.toJSON()\n\n              // Transform state through save hooks\n              if (editorConfig?.features?.hooks?.save?.length) {\n                editorConfig.features.hooks.save.forEach((hook) => {\n                  serializedEditorState = hook({ incomingEditorState: serializedEditorState })\n                })\n              }\n\n              setValue(serializedEditorState)\n            }}\n            path={path}\n            readOnly={readOnly}\n            value={value}\n          />\n        </ErrorBoundary>\n        {Description}\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }): React.ReactElement {\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"],"names":["useField","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","RichText","props","name","Description","Error","Label","className","editorConfig","path","pathFromProps","readOnly","required","style","validate","width","memoizedValidate","value","validationOptions","fieldType","errorMessage","initialValue","schemaPath","setValue","showError","classes","filter","Boolean","join","div","key","fallbackRender","onReset","fieldProps","JSON","stringify","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","error","role","p","pre","color","message"],"mappings":"AAAA;AAGA,SAA6BA,QAAQ,QAAQ,iBAAgB;AAC7D,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAC1C,SAASC,aAAa,QAAQ,uBAAsB;AAIpD,OAAO,eAAc;AACrB,SAASC,eAAe,QAAQ,+BAA8B;AAE9D,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAMT,CAACC;IACH,MAAM,EACJC,IAAI,EACJC,WAAW,EACXC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,MAAMC,aAAa,EACnBC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGb;IAEJ,MAAMc,mBAAmBnB,YACvB,CAACoB,OAAOC;QACN,IAAI,OAAOJ,aAAa,YAAY;YAClC,OAAOA,SAASG,OAAO;gBAAE,GAAGC,iBAAiB;gBAAEhB;gBAAOU;YAAS;QACjE;IACF,GACA,yDAAyD;IACzD,8DAA8D;IAC9D,iHAAiH;IACjH;QAACE;QAAUF;KAAS;IAGtB,MAAMO,YAAYxB,SAAgC;QAChDc,MAAMC,iBAAiBP;QACvBW,UAAUE;IACZ;IAEA,MAAM,EAAEI,YAAY,EAAEC,YAAY,EAAEZ,IAAI,EAAEa,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAEP,KAAK,EAAE,GAAGE;IAErF,MAAMM,UAAU;QACdzB;QACA;QACAO;QACAiB,aAAa;QACbb,YAAY,CAAC,EAAEX,UAAU,WAAW,CAAC;KACtC,CACE0B,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,oBAACC;QACCtB,WAAWkB;QACXK,KAAKrB;QACLI,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAACc;QAAItB,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;OACjCK,OACAC,qBACD,oBAACR;QAAciC,gBAAgBA;QAAgBC,SAAS,KAAO;qBAC7D,oBAACjC;QACCS,cAAcA;QACdyB,YAAY/B;QACZ4B,KAAKI,KAAKC,SAAS,CAAC;YAAEd;YAAcZ;QAAK;QACzC2B,UAAU,CAACC;YACT,IAAIC,wBAAwBD,YAAYE,MAAM;YAE9C,qCAAqC;YACrC,IAAI/B,cAAcgC,UAAUC,OAAOC,MAAMC,QAAQ;gBAC/CnC,aAAagC,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;oBACxCP,wBAAwBO,KAAK;wBAAEC,qBAAqBR;oBAAsB;gBAC5E;YACF;YAEAf,SAASe;QACX;QACA7B,MAAMA;QACNE,UAAUA;QACVM,OAAOA;SAGVb;AAIT,EAAC;AAED,SAAS2B,eAAe,EAAEgB,KAAK,EAAE;IAC/B,8EAA8E;IAE9E,qBACE,oBAAClB;QAAItB,WAAU;QAAgByC,MAAK;qBAClC,oBAACC,WAAE,wCACH,oBAACC;QAAIrC,OAAO;YAAEsC,OAAO;QAAM;OAAIJ,MAAMK,OAAO;AAGlD"}
+{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { SerializedEditorState } from 'lexical'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport './index.scss'\nimport { LexicalProvider } from './lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nexport const RichText: React.FC<\n  FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  }\n> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    editorConfig,\n    errorProps,\n    labelProps,\n    path: pathFromProps,\n    readOnly,\n    required,\n    style,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n    width,\n  } = props\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, props, required })\n      }\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 fieldType = useField<SerializedEditorState>({\n    path: pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    readOnly && `${baseClass}--read-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      className={classes}\n      key={path}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <div className={`${baseClass}__wrap`}>\n        {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}\n        {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          <LexicalProvider\n            editorConfig={editorConfig}\n            fieldProps={props}\n            key={JSON.stringify({ initialValue, path })} // 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={(editorState) => {\n              let serializedEditorState = editorState.toJSON()\n\n              // Transform state through save hooks\n              if (editorConfig?.features?.hooks?.save?.length) {\n                editorConfig.features.hooks.save.forEach((hook) => {\n                  serializedEditorState = hook({ incomingEditorState: serializedEditorState })\n                })\n              }\n\n              setValue(serializedEditorState)\n            }}\n            path={path}\n            readOnly={readOnly}\n            value={value}\n          />\n        </ErrorBoundary>\n        {CustomDescription !== undefined ? (\n          CustomDescription\n        ) : (\n          <FieldDescription {...(descriptionProps || {})} />\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }): React.ReactElement {\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"],"names":["FieldDescription","FieldError","FieldLabel","useField","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","RichText","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorConfig","errorProps","labelProps","path","pathFromProps","readOnly","required","style","validate","width","memoizedValidate","value","validationOptions","fieldType","errorMessage","initialValue","schemaPath","setValue","showError","classes","filter","Boolean","join","div","key","undefined","fallbackRender","onReset","fieldProps","JSON","stringify","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","error","role","p","pre","color","message"],"mappings":"AAAA;AAIA,SAASA,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAC1C,SAASC,aAAa,QAAQ,uBAAsB;AAIpD,OAAO,eAAc;AACrB,SAASC,eAAe,QAAQ,+BAA8B;AAE9D,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAOT,CAACC;IACH,MAAM,EACJC,IAAI,EACJC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,YAAY,EACZC,UAAU,EACVC,UAAU,EACVC,MAAMC,aAAa,EACnBC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGhB;IAEJ,MAAMiB,mBAAmBtB,YACvB,CAACuB,OAAOC;QACN,IAAI,OAAOJ,aAAa,YAAY;YAClC,OAAOA,SAASG,OAAO;gBAAE,GAAGC,iBAAiB;gBAAEnB;gBAAOa;YAAS;QACjE;IACF,GACA,yDAAyD;IACzD,8DAA8D;IAC9D,iHAAiH;IACjH;QAACE;QAAUF;KAAS;IAGtB,MAAMO,YAAY3B,SAAgC;QAChDiB,MAAMC,iBAAiBV;QACvBc,UAAUE;IACZ;IAEA,MAAM,EAAEI,YAAY,EAAEC,YAAY,EAAEZ,IAAI,EAAEa,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAEP,KAAK,EAAE,GAAGE;IAErF,MAAMM,UAAU;QACd5B;QACA;QACAO;QACAoB,aAAa;QACbb,YAAY,CAAC,EAAEd,UAAU,WAAW,CAAC;KACtC,CACE6B,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,oBAACC;QACCzB,WAAWqB;QACXK,KAAKrB;QACLI,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAACc;QAAIzB,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;OACjCK,gBAAgB6B,YAAY7B,4BAAc,oBAACZ,YAAgBiB,cAAc,CAAC,IAC1EJ,gBAAgB4B,YAAY5B,4BAAc,oBAACZ,YAAgBiB,cAAc,CAAC,kBAC3E,oBAACb;QAAcqC,gBAAgBA;QAAgBC,SAAS,KAAO;qBAC7D,oBAACrC;QACCU,cAAcA;QACd4B,YAAYnC;QACZ+B,KAAKK,KAAKC,SAAS,CAAC;YAAEf;YAAcZ;QAAK;QACzC4B,UAAU,CAACC;YACT,IAAIC,wBAAwBD,YAAYE,MAAM;YAE9C,qCAAqC;YACrC,IAAIlC,cAAcmC,UAAUC,OAAOC,MAAMC,QAAQ;gBAC/CtC,aAAamC,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;oBACxCP,wBAAwBO,KAAK;wBAAEC,qBAAqBR;oBAAsB;gBAC5E;YACF;YAEAhB,SAASgB;QACX;QACA9B,MAAMA;QACNE,UAAUA;QACVM,OAAOA;SAGVhB,sBAAsB8B,YACrB9B,kCAEA,oBAACZ,kBAAsBgB,oBAAoB,CAAC;AAKtD,EAAC;AAED,SAAS2B,eAAe,EAAEgB,KAAK,EAAE;IAC/B,8EAA8E;IAE9E,qBACE,oBAACnB;QAAIzB,WAAU;QAAgB6C,MAAK;qBAClC,oBAACC,WAAE,wCACH,oBAACC;QAAItC,OAAO;YAAEuC,OAAO;QAAM;OAAIJ,MAAMK,OAAO;AAGlD"}

package/dist/field/features/blocks/component/BlockContent.d.ts

@@ -1,5 +1,5 @@
-import type { FieldMap, FormFieldBase } from '@payloadcms/ui';
-import type { ReducedBlock } from '@payloadcms/ui/types';
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
+import type { FieldMap, ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap';
 import React from 'react';
 import type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js';
 import type { BlockFields } from '../nodes/BlocksNode.js';

package/dist/field/features/blocks/component/BlockContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockContent.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/component/BlockContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAqBxD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AACnF,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,wBAAwB,CAAA;AAIpE,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,aAAa,GAAG;QACrB,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,QAAQ,EAAE,WAAW,CAAA;IACrB,UAAU,EAAE,QAAQ,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,YAAY,CAAA;CAC3B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwLxC,CAAA"}
+{"version":3,"file":"BlockContent.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/component/BlockContent.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAYxF,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AACnF,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,wBAAwB,CAAA;AAIpE,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,aAAa,GAAG;QACrB,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,QAAQ,EAAE,WAAW,CAAA;IACrB,UAAU,EAAE,QAAQ,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,YAAY,CAAA;CAC3B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwMxC,CAAA"}

package/dist/field/features/blocks/component/BlockContent.js

@@ -1,11 +1,18 @@
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
 const { useLexicalComposerContext } = lexicalComposerContextImport;
 import { getTranslation } from '@payloadcms/translations';
-import { RenderFields } from '@payloadcms/ui';
-import { Button, Collapsible, ErrorPill, Pill, SectionTitle, useDocumentInfo, useFormSubmitted, useTranslation } from '@payloadcms/ui';
 import isDeepEqual from 'deep-equal';
 import lexicalImport from 'lexical';
 const { $getNodeByKey } = lexicalImport;
+import { Button } from '@payloadcms/ui/elements/Button';
+import { Collapsible } from '@payloadcms/ui/elements/Collapsible';
+import { ErrorPill } from '@payloadcms/ui/elements/ErrorPill';
+import { Pill } from '@payloadcms/ui/elements/Pill';
+import { SectionTitle } from '@payloadcms/ui/fields/Blocks/SectionTitle';
+import { useFormSubmitted } from '@payloadcms/ui/forms/Form';
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields';
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import React, { useCallback } from 'react';
 import { FormSavePlugin } from './FormSavePlugin.js';
 /**
@@ -22,12 +29,12 @@ import { FormSavePlugin } from './FormSavePlugin.js';
     const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo();
     const [collapsed, setCollapsed] = React.useState(()=>{
         let initialState = false;
-        getDocPreferences().then((currentDocPreferences)=>{
+        void getDocPreferences().then((currentDocPreferences)=>{
             const currentFieldPreferences = currentDocPreferences?.fields[field.name];
-            const collapsedMap = currentFieldPreferences?.collapsed;
-            if (collapsedMap && collapsedMap[formData.id] !== undefined) {
-                setCollapsed(collapsedMap[formData.id]);
-                initialState = collapsedMap[formData.id];
+            const collapsedArray = currentFieldPreferences?.collapsed;
+            if (collapsedArray && collapsedArray.includes(formData.id)) {
+                initialState = true;
+                setCollapsed(true);
             }
         });
         return initialState;
@@ -94,18 +101,26 @@ import { FormSavePlugin } from './FormSavePlugin.js';
         hasSubmitted,
         formData
     ]);
-    const onCollapsedChange = useCallback(()=>{
-        getDocPreferences().then((currentDocPreferences)=>{
+    const onCollapsedChange = useCallback((changedCollapsed)=>{
+        void getDocPreferences().then((currentDocPreferences)=>{
             const currentFieldPreferences = currentDocPreferences?.fields[field.name];
-            const collapsedMap = currentFieldPreferences?.collapsed;
-            const newCollapsed = collapsedMap && collapsedMap?.size ? collapsedMap : {};
-            newCollapsed[formData.id] = !collapsed;
+            const collapsedArray = currentFieldPreferences?.collapsed;
+            const newCollapsed = collapsedArray && collapsedArray?.length ? collapsedArray : [];
+            if (changedCollapsed) {
+                if (!newCollapsed.includes(formData.id)) {
+                    newCollapsed.push(formData.id);
+                }
+            } else {
+                if (newCollapsed.includes(formData.id)) {
+                    newCollapsed.splice(newCollapsed.indexOf(formData.id), 1);
+                }
+            }
             setDocFieldPreferences(field.name, {
-                collapsed: newCollapsed
+                collapsed: newCollapsed,
+                hello: 'hi'
             });
         });
     }, [
-        collapsed,
         getDocPreferences,
         field.name,
         setDocFieldPreferences,
@@ -149,14 +164,17 @@ import { FormSavePlugin } from './FormSavePlugin.js';
         })),
         key: 0,
         onToggle: (collapsed)=>{
+            onCollapsedChange(collapsed);
             setCollapsed(collapsed);
-            onCollapsedChange();
         }
     }, /*#__PURE__*/ React.createElement(RenderFields, {
         className: `${baseClass}__fields`,
         fieldMap: Array.isArray(formSchema) ? formSchema : [],
         forceRender: true,
-        margins: "small"
+        margins: "small",
+        path: "",
+        readOnly: false,
+        schemaPath: ""
     })), /*#__PURE__*/ React.createElement(FormSavePlugin, {
         onChange: onFormChange
     }));

package/dist/field/features/blocks/component/BlockContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/component/BlockContent.tsx"],"sourcesContent":["import type { FieldMap, FormFieldBase } from '@payloadcms/ui'\nimport type { ReducedBlock } from '@payloadcms/ui/types'\nimport type { FormState } from 'payload/types'\nimport type { Data } from 'payload/types'\n\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { getTranslation } from '@payloadcms/translations'\nimport { RenderFields } from '@payloadcms/ui'\nimport {\n  Button,\n  Collapsible,\n  ErrorPill,\n  Pill,\n  SectionTitle,\n  useDocumentInfo,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport isDeepEqual from 'deep-equal'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey } = lexicalImport\nimport React, { useCallback } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'\nimport type { BlockFields, BlockNode } from '../nodes/BlocksNode.js'\n\nimport { FormSavePlugin } from './FormSavePlugin.js'\n\ntype Props = {\n  baseClass: string\n  field: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  formData: BlockFields\n  formSchema: FieldMap\n  nodeKey: string\n  reducedBlock: ReducedBlock\n}\n\n/**\n * The actual content of the Block. This should be INSIDE a Form component,\n * scoped to the block. All format operations in here are thus scoped to the block's form, and\n * not the whole document.\n */\nexport const BlockContent: React.FC<Props> = (props) => {\n  const {\n    baseClass,\n    field,\n    formData,\n    formSchema,\n    nodeKey,\n    reducedBlock: { labels },\n  } = props\n\n  const { i18n } = useTranslation()\n  const [editor] = useLexicalComposerContext()\n  // Used for saving collapsed to preferences (and gettin' it from there again)\n  // Remember, these preferences are scoped to the whole document, not just this form. This\n  // is important to consider for the data path used in setDocFieldPreferences\n  const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo()\n\n  const [collapsed, setCollapsed] = React.useState<boolean>(() => {\n    let initialState = false\n\n    getDocPreferences().then((currentDocPreferences) => {\n      const currentFieldPreferences = currentDocPreferences?.fields[field.name]\n\n      const collapsedMap: { [key: string]: boolean } = currentFieldPreferences?.collapsed\n\n      if (collapsedMap && collapsedMap[formData.id] !== undefined) {\n        setCollapsed(collapsedMap[formData.id])\n        initialState = collapsedMap[formData.id]\n      }\n    })\n    return initialState\n  })\n  const hasSubmitted = useFormSubmitted()\n\n  const [errorCount, setErrorCount] = React.useState(0)\n\n  const fieldHasErrors = hasSubmitted && errorCount > 0\n\n  const classNames = [\n    `${baseClass}__row`,\n    fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const onFormChange = useCallback(\n    ({\n      fullFieldsWithValues,\n      newFormData,\n    }: {\n      fullFieldsWithValues: FormState\n      newFormData: Data\n    }) => {\n      newFormData = {\n        ...newFormData,\n        id: formData.id,\n        blockName: newFormData.blockName2, // TODO: Find a better solution for this. We have to wrap it in blockName2 when using it here, as blockName does not accept or provide any updated values for some reason.\n        blockType: formData.blockType,\n      }\n\n      // Recursively remove all undefined values from even being present in formData, as they will\n      // cause isDeepEqual to return false if, for example, formData has a key that fields.data\n      // does not have, even if it's undefined.\n      // Currently, this happens if a block has another sub-blocks field. Inside formData, that sub-blocks field has an undefined blockName property.\n      // Inside of fields.data however, that sub-blocks blockName property does not exist at all.\n      function removeUndefinedAndNullRecursively(obj: object) {\n        Object.keys(obj).forEach((key) => {\n          if (obj[key] && typeof obj[key] === 'object') {\n            removeUndefinedAndNullRecursively(obj[key])\n          } else if (obj[key] === undefined || obj[key] === null) {\n            delete obj[key]\n          }\n        })\n      }\n      removeUndefinedAndNullRecursively(newFormData)\n      removeUndefinedAndNullRecursively(formData)\n\n      // Only update if the data has actually changed. Otherwise, we may be triggering an unnecessary value change,\n      // which would trigger the \"Leave without saving\" dialog unnecessarily\n      if (!isDeepEqual(formData, newFormData)) {\n        // Running this in the next tick in the meantime fixes this issue: https://github.com/payloadcms/payload/issues/4108\n        // I don't know why. When this is called immediately, it might focus out of a nested lexical editor field if an update is made there.\n        // My hypothesis is that the nested editor might not have fully finished its update cycle yet. By updating in the next tick, we\n        // ensure that the nested editor has finished its update cycle before we update the block node.\n        setTimeout(() => {\n          editor.update(() => {\n            const node: BlockNode = $getNodeByKey(nodeKey)\n            if (node) {\n              node.setFields(newFormData as BlockFields)\n            }\n          })\n        }, 0)\n      }\n\n      // update error count\n      if (hasSubmitted) {\n        let rowErrorCount = 0\n        for (const formField of Object.values(fullFieldsWithValues)) {\n          if (formField?.valid === false) {\n            rowErrorCount++\n          }\n        }\n        setErrorCount(rowErrorCount)\n      }\n    },\n    [editor, nodeKey, hasSubmitted, formData],\n  )\n\n  const onCollapsedChange = useCallback(() => {\n    getDocPreferences().then((currentDocPreferences) => {\n      const currentFieldPreferences = currentDocPreferences?.fields[field.name]\n\n      const collapsedMap: { [key: string]: boolean } = currentFieldPreferences?.collapsed\n\n      const newCollapsed: { [key: string]: boolean } =\n        collapsedMap && collapsedMap?.size ? collapsedMap : {}\n\n      newCollapsed[formData.id] = !collapsed\n\n      setDocFieldPreferences(field.name, {\n        collapsed: newCollapsed,\n      })\n    })\n  }, [collapsed, getDocPreferences, field.name, setDocFieldPreferences, formData.id])\n\n  const removeBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey).remove()\n    })\n  }, [editor, nodeKey])\n\n  return (\n    <React.Fragment>\n      <Collapsible\n        className={classNames}\n        collapsed={collapsed}\n        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        header={\n          <div className={`${baseClass}__block-header`}>\n            <div>\n              <Pill\n                className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n                pillStyle=\"white\"\n              >\n                {typeof labels.singular === 'string'\n                  ? getTranslation(labels.singular, i18n)\n                  : '[Singular Label]'}\n              </Pill>\n              <SectionTitle path=\"blockName2\" readOnly={field?.readOnly} />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n            {editor.isEditable() && (\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__removeButton`}\n                disabled={field?.readOnly}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  removeBlock()\n                }}\n                round\n                tooltip=\"Remove Block\"\n              />\n            )}\n          </div>\n        }\n        key={0}\n        onToggle={(collapsed) => {\n          setCollapsed(collapsed)\n          onCollapsedChange()\n        }}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fieldMap={Array.isArray(formSchema) ? formSchema : []}\n          forceRender\n          margins=\"small\"\n        />\n      </Collapsible>\n\n      <FormSavePlugin onChange={onFormChange} />\n    </React.Fragment>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","getTranslation","RenderFields","Button","Collapsible","ErrorPill","Pill","SectionTitle","useDocumentInfo","useFormSubmitted","useTranslation","isDeepEqual","lexicalImport","$getNodeByKey","React","useCallback","FormSavePlugin","BlockContent","props","baseClass","field","formData","formSchema","nodeKey","reducedBlock","labels","i18n","editor","getDocPreferences","setDocFieldPreferences","collapsed","setCollapsed","useState","initialState","then","currentDocPreferences","currentFieldPreferences","fields","name","collapsedMap","id","undefined","hasSubmitted","errorCount","setErrorCount","fieldHasErrors","classNames","filter","Boolean","join","onFormChange","fullFieldsWithValues","newFormData","blockName","blockName2","blockType","removeUndefinedAndNullRecursively","obj","Object","keys","forEach","key","setTimeout","update","node","setFields","rowErrorCount","formField","values","valid","onCollapsedChange","newCollapsed","size","removeBlock","remove","Fragment","className","collapsibleStyle","header","div","pillStyle","singular","path","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","fieldMap","Array","isArray","forceRender","margins","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/component/BlockContent.tsx"],"sourcesContent":["import type { FormState } from 'payload/types'\nimport type { Data } from 'payload/types'\n\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { getTranslation } from '@payloadcms/translations'\nimport isDeepEqual from 'deep-equal'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey } = lexicalImport\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { FieldMap, ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { CollapsedPreferences } from 'payload/types'\n\nimport { Button } from '@payloadcms/ui/elements/Button'\nimport { Collapsible } from '@payloadcms/ui/elements/Collapsible'\nimport { ErrorPill } from '@payloadcms/ui/elements/ErrorPill'\nimport { Pill } from '@payloadcms/ui/elements/Pill'\nimport { SectionTitle } from '@payloadcms/ui/fields/Blocks/SectionTitle'\nimport { useFormSubmitted } from '@payloadcms/ui/forms/Form'\nimport { RenderFields } from '@payloadcms/ui/forms/RenderFields'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'\nimport type { BlockFields, BlockNode } from '../nodes/BlocksNode.js'\n\nimport { FormSavePlugin } from './FormSavePlugin.js'\n\ntype Props = {\n  baseClass: string\n  field: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  formData: BlockFields\n  formSchema: FieldMap\n  nodeKey: string\n  reducedBlock: ReducedBlock\n}\n\n/**\n * The actual content of the Block. This should be INSIDE a Form component,\n * scoped to the block. All format operations in here are thus scoped to the block's form, and\n * not the whole document.\n */\nexport const BlockContent: React.FC<Props> = (props) => {\n  const {\n    baseClass,\n    field,\n    formData,\n    formSchema,\n    nodeKey,\n    reducedBlock: { labels },\n  } = props\n\n  const { i18n } = useTranslation()\n  const [editor] = useLexicalComposerContext()\n  // Used for saving collapsed to preferences (and gettin' it from there again)\n  // Remember, these preferences are scoped to the whole document, not just this form. This\n  // is important to consider for the data path used in setDocFieldPreferences\n  const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo()\n\n  const [collapsed, setCollapsed] = React.useState<boolean>(() => {\n    let initialState = false\n\n    void getDocPreferences().then((currentDocPreferences) => {\n      const currentFieldPreferences = currentDocPreferences?.fields[field.name]\n\n      const collapsedArray = currentFieldPreferences?.collapsed\n\n      if (collapsedArray && collapsedArray.includes(formData.id)) {\n        initialState = true\n        setCollapsed(true)\n      }\n    })\n    return initialState\n  })\n\n  const hasSubmitted = useFormSubmitted()\n\n  const [errorCount, setErrorCount] = React.useState(0)\n\n  const fieldHasErrors = hasSubmitted && errorCount > 0\n\n  const classNames = [\n    `${baseClass}__row`,\n    fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const onFormChange = useCallback(\n    ({\n      fullFieldsWithValues,\n      newFormData,\n    }: {\n      fullFieldsWithValues: FormState\n      newFormData: Data\n    }) => {\n      newFormData = {\n        ...newFormData,\n        id: formData.id,\n        blockName: newFormData.blockName2, // TODO: Find a better solution for this. We have to wrap it in blockName2 when using it here, as blockName does not accept or provide any updated values for some reason.\n        blockType: formData.blockType,\n      }\n\n      // Recursively remove all undefined values from even being present in formData, as they will\n      // cause isDeepEqual to return false if, for example, formData has a key that fields.data\n      // does not have, even if it's undefined.\n      // Currently, this happens if a block has another sub-blocks field. Inside formData, that sub-blocks field has an undefined blockName property.\n      // Inside of fields.data however, that sub-blocks blockName property does not exist at all.\n      function removeUndefinedAndNullRecursively(obj: object) {\n        Object.keys(obj).forEach((key) => {\n          if (obj[key] && typeof obj[key] === 'object') {\n            removeUndefinedAndNullRecursively(obj[key])\n          } else if (obj[key] === undefined || obj[key] === null) {\n            delete obj[key]\n          }\n        })\n      }\n      removeUndefinedAndNullRecursively(newFormData)\n      removeUndefinedAndNullRecursively(formData)\n\n      // Only update if the data has actually changed. Otherwise, we may be triggering an unnecessary value change,\n      // which would trigger the \"Leave without saving\" dialog unnecessarily\n      if (!isDeepEqual(formData, newFormData)) {\n        // Running this in the next tick in the meantime fixes this issue: https://github.com/payloadcms/payload/issues/4108\n        // I don't know why. When this is called immediately, it might focus out of a nested lexical editor field if an update is made there.\n        // My hypothesis is that the nested editor might not have fully finished its update cycle yet. By updating in the next tick, we\n        // ensure that the nested editor has finished its update cycle before we update the block node.\n        setTimeout(() => {\n          editor.update(() => {\n            const node: BlockNode = $getNodeByKey(nodeKey)\n            if (node) {\n              node.setFields(newFormData as BlockFields)\n            }\n          })\n        }, 0)\n      }\n\n      // update error count\n      if (hasSubmitted) {\n        let rowErrorCount = 0\n        for (const formField of Object.values(fullFieldsWithValues)) {\n          if (formField?.valid === false) {\n            rowErrorCount++\n          }\n        }\n        setErrorCount(rowErrorCount)\n      }\n    },\n    [editor, nodeKey, hasSubmitted, formData],\n  )\n\n  const onCollapsedChange = useCallback(\n    (changedCollapsed: boolean) => {\n      void getDocPreferences().then((currentDocPreferences) => {\n        const currentFieldPreferences = currentDocPreferences?.fields[field.name]\n\n        const collapsedArray = currentFieldPreferences?.collapsed\n\n        const newCollapsed: CollapsedPreferences =\n          collapsedArray && collapsedArray?.length ? collapsedArray : []\n\n        if (changedCollapsed) {\n          if (!newCollapsed.includes(formData.id)) {\n            newCollapsed.push(formData.id)\n          }\n        } else {\n          if (newCollapsed.includes(formData.id)) {\n            newCollapsed.splice(newCollapsed.indexOf(formData.id), 1)\n          }\n        }\n\n        setDocFieldPreferences(field.name, {\n          collapsed: newCollapsed,\n          hello: 'hi',\n        })\n      })\n    },\n    [getDocPreferences, field.name, setDocFieldPreferences, formData.id],\n  )\n\n  const removeBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey).remove()\n    })\n  }, [editor, nodeKey])\n\n  return (\n    <React.Fragment>\n      <Collapsible\n        className={classNames}\n        collapsed={collapsed}\n        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        header={\n          <div className={`${baseClass}__block-header`}>\n            <div>\n              <Pill\n                className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n                pillStyle=\"white\"\n              >\n                {typeof labels.singular === 'string'\n                  ? getTranslation(labels.singular, i18n)\n                  : '[Singular Label]'}\n              </Pill>\n              <SectionTitle path=\"blockName2\" readOnly={field?.readOnly} />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n            {editor.isEditable() && (\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__removeButton`}\n                disabled={field?.readOnly}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  removeBlock()\n                }}\n                round\n                tooltip=\"Remove Block\"\n              />\n            )}\n          </div>\n        }\n        key={0}\n        onToggle={(collapsed) => {\n          onCollapsedChange(collapsed)\n          setCollapsed(collapsed)\n        }}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fieldMap={Array.isArray(formSchema) ? formSchema : []}\n          forceRender\n          margins=\"small\"\n          path=\"\"\n          readOnly={false}\n          schemaPath=\"\"\n        />\n      </Collapsible>\n\n      <FormSavePlugin onChange={onFormChange} />\n    </React.Fragment>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","getTranslation","isDeepEqual","lexicalImport","$getNodeByKey","Button","Collapsible","ErrorPill","Pill","SectionTitle","useFormSubmitted","RenderFields","useDocumentInfo","useTranslation","React","useCallback","FormSavePlugin","BlockContent","props","baseClass","field","formData","formSchema","nodeKey","reducedBlock","labels","i18n","editor","getDocPreferences","setDocFieldPreferences","collapsed","setCollapsed","useState","initialState","then","currentDocPreferences","currentFieldPreferences","fields","name","collapsedArray","includes","id","hasSubmitted","errorCount","setErrorCount","fieldHasErrors","classNames","filter","Boolean","join","onFormChange","fullFieldsWithValues","newFormData","blockName","blockName2","blockType","removeUndefinedAndNullRecursively","obj","Object","keys","forEach","key","undefined","setTimeout","update","node","setFields","rowErrorCount","formField","values","valid","onCollapsedChange","changedCollapsed","newCollapsed","length","push","splice","indexOf","hello","removeBlock","remove","Fragment","className","collapsibleStyle","header","div","pillStyle","singular","path","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","fieldMap","Array","isArray","forceRender","margins","schemaPath","onChange"],"mappings":"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"}

package/dist/field/features/blocks/component/FormSavePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSavePlugin.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/component/FormSavePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,CAAC,EACV,oBAAoB,EACpB,WAAW,GACZ,EAAE;QACD,oBAAoB,EAAE,SAAS,CAAA;QAC/B,WAAW,EAAE,IAAI,CAAA;KAClB,KAAK,IAAI,CAAA;CACX,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB1C,CAAA"}
+{"version":3,"file":"FormSavePlugin.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/component/FormSavePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,CAAC,EACV,oBAAoB,EACpB,WAAW,GACZ,EAAE;QACD,oBAAoB,EAAE,SAAS,CAAA;QAC/B,WAAW,EAAE,IAAI,CAAA;KAClB,KAAK,IAAI,CAAA;CACX,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB1C,CAAA"}

package/dist/field/features/blocks/component/FormSavePlugin.js

@@ -1,4 +1,5 @@
-import { reduceFieldsToValues, useAllFormFields } from '@payloadcms/ui';
+import { useAllFormFields } from '@payloadcms/ui/forms/Form';
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues';
 import { useEffect } from 'react';
 export const FormSavePlugin = (props)=>{
     const { onChange } = props;

package/dist/field/features/blocks/component/FormSavePlugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/component/FormSavePlugin.tsx"],"sourcesContent":["import type { FormState } from 'payload/types'\nimport type { Data } from 'payload/types'\nimport type React from 'react'\n\nimport { reduceFieldsToValues, useAllFormFields } from '@payloadcms/ui'\nimport { useEffect } from 'react'\n\ntype Props = {\n  onChange?: ({\n    fullFieldsWithValues,\n    newFormData,\n  }: {\n    fullFieldsWithValues: FormState\n    newFormData: Data\n  }) => void\n}\n\nexport const FormSavePlugin: React.FC<Props> = (props) => {\n  const { onChange } = props\n\n  const [fields, dispatchFields] = useAllFormFields()\n\n  // Pass in fields, and indicate if you'd like to \"unflatten\" field data.\n  // The result below will reflect the data stored in the form at the given time\n  const newFormData = reduceFieldsToValues(fields, true)\n\n  useEffect(() => {\n    if (onChange) {\n      onChange({ fullFieldsWithValues: fields, newFormData })\n    }\n  }, [newFormData, onChange, fields])\n\n  return null\n}\n"],"names":["reduceFieldsToValues","useAllFormFields","useEffect","FormSavePlugin","props","onChange","fields","dispatchFields","newFormData","fullFieldsWithValues"],"mappings":"AAIA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ,iBAAgB;AACvE,SAASC,SAAS,QAAQ,QAAO;AAYjC,OAAO,MAAMC,iBAAkC,CAACC;IAC9C,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,QAAQC,eAAe,GAAGN;IAEjC,wEAAwE;IACxE,8EAA8E;IAC9E,MAAMO,cAAcR,qBAAqBM,QAAQ;IAEjDJ,UAAU;QACR,IAAIG,UAAU;YACZA,SAAS;gBAAEI,sBAAsBH;gBAAQE;YAAY;QACvD;IACF,GAAG;QAACA;QAAaH;QAAUC;KAAO;IAElC,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/component/FormSavePlugin.tsx"],"sourcesContent":["import type { FormState } from 'payload/types'\nimport type { Data } from 'payload/types'\nimport type React from 'react'\n\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'\nimport { useEffect } from 'react'\n\ntype Props = {\n  onChange?: ({\n    fullFieldsWithValues,\n    newFormData,\n  }: {\n    fullFieldsWithValues: FormState\n    newFormData: Data\n  }) => void\n}\n\nexport const FormSavePlugin: React.FC<Props> = (props) => {\n  const { onChange } = props\n\n  const [fields, dispatchFields] = useAllFormFields()\n\n  // Pass in fields, and indicate if you'd like to \"unflatten\" field data.\n  // The result below will reflect the data stored in the form at the given time\n  const newFormData = reduceFieldsToValues(fields, true)\n\n  useEffect(() => {\n    if (onChange) {\n      onChange({ fullFieldsWithValues: fields, newFormData })\n    }\n  }, [newFormData, onChange, fields])\n\n  return null\n}\n"],"names":["useAllFormFields","reduceFieldsToValues","useEffect","FormSavePlugin","props","onChange","fields","dispatchFields","newFormData","fullFieldsWithValues"],"mappings":"AAIA,SAASA,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,oBAAoB,QAAQ,gDAA+C;AACpF,SAASC,SAAS,QAAQ,QAAO;AAYjC,OAAO,MAAMC,iBAAkC,CAACC;IAC9C,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,QAAQC,eAAe,GAAGP;IAEjC,wEAAwE;IACxE,8EAA8E;IAC9E,MAAMQ,cAAcP,qBAAqBK,QAAQ;IAEjDJ,UAAU;QACR,IAAIG,UAAU;YACZA,SAAS;gBAAEI,sBAAsBH;gBAAQE;YAAY;QACvD;IACF,GAAG;QAACA;QAAaH;QAAUC;KAAO;IAElC,OAAO;AACT,EAAC"}

package/dist/field/features/blocks/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/component/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAazD,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,qBAAqB,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,QAAQ,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,mBAAmB,EAAE,WAAW,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuH1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/component/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAkBzD,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,qBAAqB,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,QAAQ,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,mBAAmB,EAAE,WAAW,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqH1C,CAAA"}

package/dist/field/features/blocks/component/index.js

@@ -1,7 +1,12 @@
 'use client';
-import { FieldPathProvider, Form, getFormState, useConfig, useDocumentInfo, useFieldPath, useFormSubmitted } from '@payloadcms/ui';
+import { Form } from '@payloadcms/ui/forms/Form';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 const baseClass = 'lexical-block';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import { useFormSubmitted } from '@payloadcms/ui/forms/Form';
+import { useConfig } from '@payloadcms/ui/providers/Config';
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
+import { getFormState } from '@payloadcms/ui/utilities/getFormState';
 import { v4 as uuid } from 'uuid';
 import { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js';
 import { BlockContent } from './BlockContent.js';
@@ -11,7 +16,7 @@ export const BlockComponent = (props)=>{
     const config = useConfig();
     const submitted = useFormSubmitted();
     const { id } = useDocumentInfo();
-    const { schemaPath } = useFieldPath();
+    const { schemaPath } = useFieldProps();
     const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext();
     const [initialState, setInitialState] = useState(false);
     const { field: { richTextComponentMap } } = useEditorConfigContext();
@@ -83,11 +88,8 @@ export const BlockComponent = (props)=>{
     ]);
     // Memoized Form JSX
     const formContent = useMemo(()=>{
-        return reducedBlock && initialState !== false && /*#__PURE__*/ React.createElement(FieldPathProvider, {
-            path: "",
-            schemaPath: ""
-        }, /*#__PURE__*/ React.createElement(Form, {
-            // @ts-expect-error // TODO: Fix this type. Is this correct?
+        return reducedBlock && initialState !== false && /*#__PURE__*/ React.createElement(Form, {
+            // @ts-expect-error TODO: Fix this
             fields: fieldMap,
             initialState: initialState,
             onChange: [
@@ -102,7 +104,7 @@ export const BlockComponent = (props)=>{
             formSchema: Array.isArray(fieldMap) ? fieldMap : [],
             nodeKey: nodeKey,
             reducedBlock: reducedBlock
-        })));
+        }));
     }, [
         fieldMap,
         parentLexicalRichTextField,

package/dist/field/features/blocks/component/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/component/index.tsx"],"sourcesContent":["'use client'\nimport {\n  FieldPathProvider,\n  Form,\n  type FormProps,\n  getFormState,\n  useConfig,\n  useDocumentInfo,\n  useFieldPath,\n  useFormSubmitted,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { type BlockFields } from '../nodes/BlocksNode.js'\nconst baseClass = 'lexical-block'\n\nimport type { ReducedBlock } from '@payloadcms/ui/types'\nimport type { FormState } from 'payload/types'\n\nimport { v4 as uuid } from 'uuid'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\n\ntype Props = {\n  blockFieldWrapperName: string\n  children?: React.ReactNode\n\n  formData: BlockFields\n  nodeKey?: string\n  /**\n   * This transformedFormData already comes wrapped in blockFieldWrapperName\n   */\n  transformedFormData: BlockFields\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { blockFieldWrapperName, formData, nodeKey } = props\n  const config = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { schemaPath } = useFieldPath()\n  const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.blocks.fields.${formData?.blockType}`\n  const schemaFieldsPath = `${schemaPath}.feature.blocks.${formData?.blockType}`\n\n  const reducedBlock: ReducedBlock = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks?.find((block) => block.slug === formData?.blockType)\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath)\n  // Field Schema\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: JSON.parse(JSON.stringify(formData)),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      if (state) {\n        setInitialState({\n          ...state,\n          blockName2: {\n            initialValue: '',\n            passesCondition: true,\n            valid: true,\n            value: formData.blockName,\n          },\n        })\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const formState = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      return {\n        ...formState,\n        blockName2: {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        },\n      }\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id, formData.blockName],\n  )\n\n  // Memoized Form JSX\n  const formContent = useMemo(() => {\n    return (\n      reducedBlock &&\n      initialState !== false && (\n        <FieldPathProvider path=\"\" schemaPath=\"\">\n          <Form\n            // @ts-expect-error // TODO: Fix this type. Is this correct?\n            fields={fieldMap}\n            initialState={initialState}\n            onChange={[onChange]}\n            submitted={submitted}\n            uuid={uuid()}\n          >\n            <BlockContent\n              baseClass={baseClass}\n              field={parentLexicalRichTextField}\n              formData={formData}\n              formSchema={Array.isArray(fieldMap) ? fieldMap : []}\n              nodeKey={nodeKey}\n              reducedBlock={reducedBlock}\n            />\n          </Form>\n        </FieldPathProvider>\n      )\n    )\n  }, [\n    fieldMap,\n    parentLexicalRichTextField,\n    nodeKey,\n    submitted,\n    initialState,\n    reducedBlock,\n    blockFieldWrapperName,\n    onChange,\n  ])\n\n  return <div className={baseClass}>{formContent}</div>\n}\n"],"names":["FieldPathProvider","Form","getFormState","useConfig","useDocumentInfo","useFieldPath","useFormSubmitted","React","useCallback","useEffect","useMemo","useState","baseClass","v4","uuid","useEditorConfigContext","BlockContent","BlockComponent","props","blockFieldWrapperName","formData","nodeKey","config","submitted","id","schemaPath","editorConfig","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","componentMapRenderedFieldsPath","blockType","schemaFieldsPath","reducedBlock","resolvedFeatureMap","get","clientFeatureProps","reducedBlocks","find","block","slug","fieldMap","awaitInitialState","state","apiRoute","routes","api","body","data","JSON","parse","stringify","operation","serverURL","blockName2","initialValue","passesCondition","valid","value","blockName","onChange","formState","prevFormState","formContent","path","fields","formSchema","Array","isArray","div","className"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/component/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\n\nimport { Form } from '@payloadcms/ui/forms/Form'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { type BlockFields } from '../nodes/BlocksNode.js'\nconst baseClass = 'lexical-block'\n\nimport type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { FormState } from 'payload/types'\n\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useFormSubmitted } from '@payloadcms/ui/forms/Form'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { getFormState } from '@payloadcms/ui/utilities/getFormState'\nimport { v4 as uuid } from 'uuid'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\n\ntype Props = {\n  blockFieldWrapperName: string\n  children?: React.ReactNode\n\n  formData: BlockFields\n  nodeKey?: string\n  /**\n   * This transformedFormData already comes wrapped in blockFieldWrapperName\n   */\n  transformedFormData: BlockFields\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { blockFieldWrapperName, formData, nodeKey } = props\n  const config = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { schemaPath } = useFieldProps()\n  const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.blocks.fields.${formData?.blockType}`\n  const schemaFieldsPath = `${schemaPath}.feature.blocks.${formData?.blockType}`\n\n  const reducedBlock: ReducedBlock = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks?.find((block) => block.slug === formData?.blockType)\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath)\n  // Field Schema\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: JSON.parse(JSON.stringify(formData)),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      if (state) {\n        setInitialState({\n          ...state,\n          blockName2: {\n            initialValue: '',\n            passesCondition: true,\n            valid: true,\n            value: formData.blockName,\n          },\n        })\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const formState = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      return {\n        ...formState,\n        blockName2: {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        },\n      }\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id, formData.blockName],\n  )\n\n  // Memoized Form JSX\n  const formContent = useMemo(() => {\n    return (\n      reducedBlock &&\n      initialState !== false && (\n        <Form\n          // @ts-expect-error TODO: Fix this\n          fields={fieldMap}\n          initialState={initialState}\n          onChange={[onChange]}\n          submitted={submitted}\n          uuid={uuid()}\n        >\n          <BlockContent\n            baseClass={baseClass}\n            field={parentLexicalRichTextField}\n            formData={formData}\n            formSchema={Array.isArray(fieldMap) ? fieldMap : []}\n            nodeKey={nodeKey}\n            reducedBlock={reducedBlock}\n          />\n        </Form>\n      )\n    )\n  }, [\n    fieldMap,\n    parentLexicalRichTextField,\n    nodeKey,\n    submitted,\n    initialState,\n    reducedBlock,\n    blockFieldWrapperName,\n    onChange,\n  ])\n\n  return <div className={baseClass}>{formContent}</div>\n}\n"],"names":["Form","React","useCallback","useEffect","useMemo","useState","baseClass","useFieldProps","useFormSubmitted","useConfig","useDocumentInfo","getFormState","v4","uuid","useEditorConfigContext","BlockContent","BlockComponent","props","blockFieldWrapperName","formData","nodeKey","config","submitted","id","schemaPath","editorConfig","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","componentMapRenderedFieldsPath","blockType","schemaFieldsPath","reducedBlock","resolvedFeatureMap","get","clientFeatureProps","reducedBlocks","find","block","slug","fieldMap","awaitInitialState","state","apiRoute","routes","api","body","data","JSON","parse","stringify","operation","serverURL","blockName2","initialValue","passesCondition","valid","value","blockName","onChange","formState","prevFormState","formContent","fields","formSchema","Array","isArray","div","className"],"mappings":"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"}

package/dist/field/features/blocks/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,SAAS,CAAA;AAE5D,OAAO,KAA2C,MAAM,OAAO,CAAA;AAU/D,eAAO,MAAM,gCAAgC,EAAE,cAAc,CAAC;IAC5D,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;CACrC,CAAqD,CAAA;AAiCtD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EA4DzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,SAAS,CAAA;AAM5D,OAAO,KAA2C,MAAM,OAAO,CAAA;AAU/D,eAAO,MAAM,gCAAgC,EAAE,cAAc,CAAC;IAC5D,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;CACrC,CAAqD,CAAA;AAiCtD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EA4DzC,CAAA"}

package/dist/field/features/blocks/drawer/index.js

@@ -2,9 +2,12 @@
 import * as facelessUIImport from '@faceless-ui/modal';
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
 const { useLexicalComposerContext } = lexicalComposerContextImport;
-import { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui';
 import lexicalImport from 'lexical';
 const { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport;
+import { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer';
+import { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer';
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js';
 import { $createBlockNode } from '../nodes/BlocksNode.js';

package/dist/field/features/blocks/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport\n\nimport type { LexicalCommand, LexicalEditor } from 'lexical'\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { $createBlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from '../plugin/commands.js'\nconst baseClass = 'lexical-blocks-drawer'\n\nexport const INSERT_BLOCK_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_BLOCK_WITH_DRAWER_COMMAND')\n\nconst insertBlock = ({\n  blockType,\n  editor,\n  replaceNodeKey,\n}: {\n  blockType: string\n  editor: LexicalEditor\n  replaceNodeKey: null | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n      id: null,\n      blockName: '',\n      blockType,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createBlockNode({\n            id: null,\n            blockName: '',\n            blockType,\n          }),\n        )\n      }\n    })\n  }\n}\n\nexport const BlocksDrawerComponent: React.FC = () => {\n  const { useModal } = facelessUIImport\n\n  const [editor] = useLexicalComposerContext()\n  const { editorConfig, uuid } = useEditorConfigContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n  const editDepth = useEditDepth()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n\n  const labels = {\n    plural: t('fields:blocks') || 'Blocks',\n    singular: t('fields:block') || 'Block',\n  }\n\n  const addRow = useCallback(\n    (rowIndex: number, blockType: string) => {\n      insertBlock({\n        blockType,\n        editor,\n        replaceNodeKey,\n      })\n    },\n    [editor, replaceNodeKey],\n  )\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-rich-text-blocks-` + uuid,\n    depth: editDepth,\n  })\n\n  const reducedBlocks = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_BLOCK_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openModal(drawerSlug)\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, drawerSlug, openModal])\n\n  return (\n    <BlocksDrawer\n      addRow={addRow}\n      addRowIndex={0}\n      blocks={reducedBlocks}\n      drawerSlug={drawerSlug}\n      labels={labels}\n    />\n  )\n}\n"],"names":["facelessUIImport","lexicalComposerContextImport","useLexicalComposerContext","BlocksDrawer","formatDrawerSlug","useEditDepth","useTranslation","lexicalImport","$getNodeByKey","COMMAND_PRIORITY_EDITOR","createCommand","React","useCallback","useEffect","useState","useEditorConfigContext","$createBlockNode","INSERT_BLOCK_COMMAND","baseClass","INSERT_BLOCK_WITH_DRAWER_COMMAND","insertBlock","blockType","editor","replaceNodeKey","dispatchCommand","id","blockName","update","node","replace","BlocksDrawerComponent","useModal","editorConfig","uuid","setReplaceNodeKey","editDepth","t","openModal","labels","plural","singular","addRow","rowIndex","drawerSlug","slug","depth","reducedBlocks","resolvedFeatureMap","get","clientFeatureProps","registerCommand","payload","nodeKey","addRowIndex","blocks"],"mappings":"AAAA;AACA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,SAASE,YAAY,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,cAAc,QAAQ,iBAAgB;AAC7F,OAAOC,mBAAmB,UAAS;AACnC,MAAM,EAAEC,aAAa,EAAEC,uBAAuB,EAAEC,aAAa,EAAE,GAAGH;AAIlE,OAAOI,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAK/D,SAASC,sBAAsB,QAAQ,yDAAwD;AAC/F,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,oBAAoB,QAAQ,wBAAuB;AAC5D,MAAMC,YAAY;AAElB,OAAO,MAAMC,mCAERT,cAAc,oCAAmC;AAEtD,MAAMU,cAAc,CAAC,EACnBC,SAAS,EACTC,MAAM,EACNC,cAAc,EAKf;IACC,IAAI,CAACA,gBAAgB;QACnBD,OAAOE,eAAe,CAACP,sBAAsB;YAC3CQ,IAAI;YACJC,WAAW;YACXL;QACF;IACF,OAAO;QACLC,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOpB,cAAce;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVb,iBAAiB;oBACfS,IAAI;oBACJC,WAAW;oBACXL;gBACF;YAEJ;QACF;IACF;AACF;AAEA,OAAO,MAAMS,wBAAkC;IAC7C,MAAM,EAAEC,QAAQ,EAAE,GAAG/B;IAErB,MAAM,CAACsB,OAAO,GAAGpB;IACjB,MAAM,EAAE8B,YAAY,EAAEC,IAAI,EAAE,GAAGlB;IAE/B,MAAM,CAACQ,gBAAgBW,kBAAkB,GAAGpB,SAAwB;IACpE,MAAMqB,YAAY9B;IAClB,MAAM,EAAE+B,CAAC,EAAE,GAAG9B;IACd,MAAM,EAAE+B,SAAS,EAAE,GAAGN;IAEtB,MAAMO,SAAS;QACbC,QAAQH,EAAE,oBAAoB;QAC9BI,UAAUJ,EAAE,mBAAmB;IACjC;IAEA,MAAMK,SAAS7B,YACb,CAAC8B,UAAkBrB;QACjBD,YAAY;YACVC;YACAC;YACAC;QACF;IACF,GACA;QAACD;QAAQC;KAAe;IAG1B,MAAMoB,aAAavC,iBAAiB;QAClCwC,MAAM,CAAC,yBAAyB,CAAC,GAAGX;QACpCY,OAAOV;IACT;IAEA,MAAMW,gBACJd,cAAce,oBAAoBC,IAAI,WAClCC,oBACHH;IAEHjC,UAAU;QACR,OAAOS,OAAO4B,eAAe,CAG3B/B,kCACA,CAACgC;YACCjB,kBAAkBiB,SAAStB,UAAUsB,SAAStB,QAAQuB,UAAU;YAChEf,UAAUM;YACV,OAAO;QACT,GACAlC;IAEJ,GAAG;QAACa;QAAQqB;QAAYN;KAAU;IAElC,qBACE,oBAAClC;QACCsC,QAAQA;QACRY,aAAa;QACbC,QAAQR;QACRH,YAAYA;QACZL,QAAQA;;AAGd,EAAC"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport\n\nimport type { LexicalCommand, LexicalEditor } from 'lexical'\n\nimport { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { $createBlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from '../plugin/commands.js'\nconst baseClass = 'lexical-blocks-drawer'\n\nexport const INSERT_BLOCK_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_BLOCK_WITH_DRAWER_COMMAND')\n\nconst insertBlock = ({\n  blockType,\n  editor,\n  replaceNodeKey,\n}: {\n  blockType: string\n  editor: LexicalEditor\n  replaceNodeKey: null | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n      id: null,\n      blockName: '',\n      blockType,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createBlockNode({\n            id: null,\n            blockName: '',\n            blockType,\n          }),\n        )\n      }\n    })\n  }\n}\n\nexport const BlocksDrawerComponent: React.FC = () => {\n  const { useModal } = facelessUIImport\n\n  const [editor] = useLexicalComposerContext()\n  const { editorConfig, uuid } = useEditorConfigContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n  const editDepth = useEditDepth()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n\n  const labels = {\n    plural: t('fields:blocks') || 'Blocks',\n    singular: t('fields:block') || 'Block',\n  }\n\n  const addRow = useCallback(\n    (rowIndex: number, blockType: string) => {\n      insertBlock({\n        blockType,\n        editor,\n        replaceNodeKey,\n      })\n    },\n    [editor, replaceNodeKey],\n  )\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-rich-text-blocks-` + uuid,\n    depth: editDepth,\n  })\n\n  const reducedBlocks = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_BLOCK_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openModal(drawerSlug)\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, drawerSlug, openModal])\n\n  return (\n    <BlocksDrawer\n      addRow={addRow}\n      addRowIndex={0}\n      blocks={reducedBlocks}\n      drawerSlug={drawerSlug}\n      labels={labels}\n    />\n  )\n}\n"],"names":["facelessUIImport","lexicalComposerContextImport","useLexicalComposerContext","lexicalImport","$getNodeByKey","COMMAND_PRIORITY_EDITOR","createCommand","formatDrawerSlug","BlocksDrawer","useEditDepth","useTranslation","React","useCallback","useEffect","useState","useEditorConfigContext","$createBlockNode","INSERT_BLOCK_COMMAND","baseClass","INSERT_BLOCK_WITH_DRAWER_COMMAND","insertBlock","blockType","editor","replaceNodeKey","dispatchCommand","id","blockName","update","node","replace","BlocksDrawerComponent","useModal","editorConfig","uuid","setReplaceNodeKey","editDepth","t","openModal","labels","plural","singular","addRow","rowIndex","drawerSlug","slug","depth","reducedBlocks","resolvedFeatureMap","get","clientFeatureProps","registerCommand","payload","nodeKey","addRowIndex","blocks"],"mappings":"AAAA;AACA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,OAAOE,mBAAmB,UAAS;AACnC,MAAM,EAAEC,aAAa,EAAEC,uBAAuB,EAAEC,aAAa,EAAE,GAAGH;AAIlE,SAASI,gBAAgB,QAAQ,iCAAgC;AACjE,SAASC,YAAY,QAAQ,4CAA2C;AACxE,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAK/D,SAASC,sBAAsB,QAAQ,yDAAwD;AAC/F,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,oBAAoB,QAAQ,wBAAuB;AAC5D,MAAMC,YAAY;AAElB,OAAO,MAAMC,mCAERb,cAAc,oCAAmC;AAEtD,MAAMc,cAAc,CAAC,EACnBC,SAAS,EACTC,MAAM,EACNC,cAAc,EAKf;IACC,IAAI,CAACA,gBAAgB;QACnBD,OAAOE,eAAe,CAACP,sBAAsB;YAC3CQ,IAAI;YACJC,WAAW;YACXL;QACF;IACF,OAAO;QACLC,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOxB,cAAcmB;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVb,iBAAiB;oBACfS,IAAI;oBACJC,WAAW;oBACXL;gBACF;YAEJ;QACF;IACF;AACF;AAEA,OAAO,MAAMS,wBAAkC;IAC7C,MAAM,EAAEC,QAAQ,EAAE,GAAG/B;IAErB,MAAM,CAACsB,OAAO,GAAGpB;IACjB,MAAM,EAAE8B,YAAY,EAAEC,IAAI,EAAE,GAAGlB;IAE/B,MAAM,CAACQ,gBAAgBW,kBAAkB,GAAGpB,SAAwB;IACpE,MAAMqB,YAAY1B;IAClB,MAAM,EAAE2B,CAAC,EAAE,GAAG1B;IACd,MAAM,EAAE2B,SAAS,EAAE,GAAGN;IAEtB,MAAMO,SAAS;QACbC,QAAQH,EAAE,oBAAoB;QAC9BI,UAAUJ,EAAE,mBAAmB;IACjC;IAEA,MAAMK,SAAS7B,YACb,CAAC8B,UAAkBrB;QACjBD,YAAY;YACVC;YACAC;YACAC;QACF;IACF,GACA;QAACD;QAAQC;KAAe;IAG1B,MAAMoB,aAAapC,iBAAiB;QAClCqC,MAAM,CAAC,yBAAyB,CAAC,GAAGX;QACpCY,OAAOV;IACT;IAEA,MAAMW,gBACJd,cAAce,oBAAoBC,IAAI,WAClCC,oBACHH;IAEHjC,UAAU;QACR,OAAOS,OAAO4B,eAAe,CAG3B/B,kCACA,CAACgC;YACCjB,kBAAkBiB,SAAStB,UAAUsB,SAAStB,QAAQuB,UAAU;YAChEf,UAAUM;YACV,OAAO;QACT,GACAtC;IAEJ,GAAG;QAACiB;QAAQqB;QAAYN;KAAU;IAElC,qBACE,oBAAC7B;QACCiC,QAAQA;QACRY,aAAa;QACbC,QAAQR;QACRH,YAAYA;QACZL,QAAQA;;AAGd,EAAC"}

package/dist/field/features/blocks/feature.client.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" resolution-mode="require"/>
-import type { ReducedBlock } from '@payloadcms/ui/types';
+import type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap';
 export type BlocksFeatureClientProps = {
     reducedBlocks: ReducedBlock[];
 };

package/dist/field/features/blocks/feature.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/blocks/feature.client.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAaxD,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,YAAY,EAAE,CAAA;CAC9B,CAAA;AAgDD,eAAO,MAAM,4BAA4B,0FAA6C,CAAA"}
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/blocks/feature.client.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAa9E,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,YAAY,EAAE,CAAA;CAC9B,CAAA;AAgDD,eAAO,MAAM,4BAA4B,0FAA6C,CAAA"}