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

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":"AAAA;AAGA,OAAOA,2BAA2B,oBAAmB;AACrD,MAAM,EAAEC,oBAAoB,EAAE,GAAGD;AACjC,OAAOE,mBAAmB,UAAS;AACnC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;AACrB,SAASE,YAAY,QAAQ,gCAA+B;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,kBAAkB,QAAQ,0CAAyC;AAC5E,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAMlD,SAASC,0BAA0B,QAAQ,4CAA2C;AACtF,SAASC,kBAAkB,QAAQ,2CAA0C;AAC7E,SAASC,0BAA0B,QAAQ,6CAA4C;AACvF,SAASC,eAAe,QAAQ,kCAAiC;AAEjE,OAAO,MAAMC,eAER,CAACC;IACJ,MAAM,EAAEC,mBAAmB,EAAE,GAAGD;IAEhC,MAAM,CAACE,SAASC,WAAW,GAAGX,MAAME,QAAQ,CAAC;IAC7C,MAAM,EAAEU,UAAU,EAAE,GAAGd;IAEvB,MAAM,EAAEe,QAAQ,EAAEC,oBAAoB,EAAE,GAAGjB;IAE3C,MAAMkB,kBAAkBhB;IACxB,MAAM,CAACiB,mBAAmBC,qBAAqB,GAAGf,SAAS;IAE3D,MAAM,CAACgB,kBAAkBC,oBAAoB,GAAGjB,SAA2C,EAAE;IAE7F,MAAM,CAACkB,4BAA4BC,8BAA8B,GAC/DnB,SAAsC;IAExC,IAAIoB,4BAAiER,qBAAqBS,GAAG,CAC3F,WACuC,oBAAoB;;IAC7D,iBAAiB;IACjBD,4BAA4BA,0BAA0BE,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,KAAK,GAAGD,EAAEC,KAAK;IAEtF,MAAMC,sCACJC,MAAMC,IAAI,CAAChB,qBAAqBiB,IAAI,IAAIC,MAAM,CAC5C,CAACC,MAAQA,IAAIC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAACD,IAAIE,QAAQ,CAAC,aACrDC,MAAM,GAAGd,0BAA0Bc,MAAM;IAE7CnC,UAAU;QACR,IAAI,CAACe,mBAAmB;YACtB,MAAMqB,wBAA0D,EAAE;YAClE,IAAIC,sCAAsC;YAE1CC,OAAOC,OAAO,CAACzB,iBAAiB0B,OAAO,CAAC,CAAC,CAACR,KAAKS,OAAO;gBACpD,IAAIT,IAAIC,UAAU,CAAC,CAAC,eAAe,EAAEtB,WAAW,CAAC,CAAC,GAAG;oBACnD,IAAI,CAACqB,IAAIE,QAAQ,CAAC,iBAAiB;wBACjCE,sBAAsBM,IAAI,CAACD;oBAC7B;oBACAJ;gBACF;YACF;YAEA,IAAIA,wCAAwCV,qCAAqC;gBAC/ET,oBAAoBkB;gBACpBpB,qBAAqB;gBAErB;;SAEC,GAED,MAAM2B,yBAAyBxC,mBAAmB;oBAChDW;oBACAH;oBACAiC,yBAAyB;wBACvBC,UAAUT;wBACVU,SAAStC;oBACX;gBACF;gBAEAY,8BACEhB,2BACEI,sBAAsBA,sBAAsBN,4BAC5CyC;YAGN;QACF;IACF,GAAG;QACD5B;QACAD;QACAH;QACAU,0BAA0Bc,MAAM;QAChClB;QACAE;QACAX;QACAmB;KACD;IAED3B,UAAU;QACR,IAAI+C,YAAYnC;QAChB,IAAImC,aAAa,QAAQ,CAAChC,qBAAqB,CAACI,4BAA4B;YAC1ET,WAAW;YACX;QACF;QAEA,oCAAoC;QACpC,IAAIS,4BAA4B0B,UAAUG,OAAOC,MAAMd,QAAQ;YAC7DhB,2BAA2B0B,QAAQ,CAACG,KAAK,CAACC,IAAI,CAACT,OAAO,CAAC,CAACU;gBACtDH,YAAYG,KAAK;oBAAEC,qBAAqBJ;gBAAU;YACpD;QACF;QAEA,IAAI,CAACA,aAAa,OAAOA,cAAc,UAAU;YAC/CrC,WAAW;YACX;QACF;QAEA,wCAAwC;QACxC,IAAIkB,MAAMwB,OAAO,CAACL,cAAc,CAAE,CAAA,UAAUA,SAAQ,GAAI;YACtDrC,WAAW;YACX;QACF;QAEA,yCAAyC;QACzC,IAAI,iBAAiBqC,WAAW;YAC9BrC,WAAW;YACX;QACF;QAEA,6BAA6B;QAC7B,MAAM2C,iBAAiB5D,qBAAqB;YAC1C6D,WAAWnC,2BAA2B2B,OAAO,CAACQ,SAAS;YACvDC,OAAOlD,gBAAgB;gBAAEmD,cAAcrC;YAA2B;YAClEsC,OAAOtC,2BAA2B2B,OAAO,CAACW,KAAK;QACjD;QACAJ,eAAeK,cAAc,CAACL,eAAeM,gBAAgB,CAACZ;QAE9D,MAAMa,cACJP,eAAeQ,cAAc,GAAGC,IAAI,CAAC;YACnC,OAAOnE,WAAWoE,cAAc;QAClC,MAAM;QAER,gEAAgE;QAChErD,WAAWkD;IACb,GAAG;QAAChD;QAAUJ;QAAqBO;QAAmBI;KAA2B;IAEjF,IAAI,CAACJ,mBAAmB;QACtB,qBACE,oBAAChB,MAAMiE,QAAQ,QACZpC,MAAMwB,OAAO,CAAC/B,8BACbA,0BAA0B4C,GAAG,CAAC,CAACC;YAC7B,uGAAuG;YACvG,MAAMC,uBAAuBvC,MAAMC,IAAI,CAAChB,qBAAqBiB,IAAI,IAAIC,MAAM,CAAC,CAACC,MAC3EA,IAAIC,UAAU,CAAC,CAAC,QAAQ,EAAEiC,gBAAgBlC,GAAG,CAAC,YAAY,CAAC;YAE7D,MAAMoC,oBAAuCD,qBAAqBF,GAAG,CAAC,CAACjC;gBACrE,OAAOnB,qBAAqBS,GAAG,CAACU;YAClC;YAEA,qBACE,oBAACjC,MAAMiE,QAAQ;gBAAChC,KAAKkC,gBAAgBlC,GAAG;eACrCoC,mBAAmBjC,SAChBiC,kBAAkBH,GAAG,CAAC,CAACI;gBACrB,OAAOA;YACT,KACA,MACHH,gBAAgBI,eAAe;QAGtC;IAGR;IAEA,qBAAO,oBAACC,cAAM9D;AAChB,EAAC"}

package/dist/field/Field.d.ts

@@ -1,10 +1,13 @@
-import { type FormFieldBase } from '@payloadcms/ui';
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
+import type { FieldBase } from 'payload/types';
 import React from 'react';
 import type { SanitizedClientEditorConfig } from './lexical/config/types.js';
 import './index.scss';
 export declare const RichText: React.FC<FormFieldBase & {
     editorConfig: SanitizedClientEditorConfig;
+    label?: FieldBase['label'];
     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;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAQ9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,cAAc,CAAA;AA2HrB,eAAO,MAAM,QAAQ;kBApHH,2BAA2B;YACjC,SAAS,CAAC,OAAO,CAAC;UACpB,MAAM;0BACU,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;YAC1C,MAAM;EAgH8B,CAAA"}

package/dist/field/Field.js

@@ -1,12 +1,17 @@
 '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 { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import { useField } from '@payloadcms/ui/forms/useField';
+import { withCondition } from '@payloadcms/ui/forms/withCondition';
 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 _RichText = (props)=>{
+    const { name, CustomDescription, CustomError, CustomLabel, className, descriptionProps, editorConfig, errorProps, label, labelProps, path: pathFromProps, readOnly, required, style, validate, width } = props;
     const memoizedValidate = useCallback((value, validationOptions)=>{
         if (typeof validate === 'function') {
             return validate(value, {
@@ -22,8 +27,9 @@ export const RichText = (props)=>{
         validate,
         required
     ]);
+    const { path: pathFromContext } = useFieldProps();
     const fieldType = useField({
-        path: pathFromProps || name,
+        path: pathFromContext || pathFromProps || name,
         validate: memoizedValidate
     });
     const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType;
@@ -43,7 +49,16 @@ export const RichText = (props)=>{
         }
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__wrap`
-    }, Error, Label, /*#__PURE__*/ React.createElement(ErrorBoundary, {
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        path: path,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        label: label,
+        required: required,
+        ...labelProps || {}
+    }), /*#__PURE__*/ React.createElement(ErrorBoundary, {
         fallbackRender: fallbackRender,
         onReset: ()=>{}
     }, /*#__PURE__*/ React.createElement(LexicalProvider, {
@@ -68,7 +83,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.
@@ -81,5 +96,6 @@ function fallbackRender({ error }) {
         }
     }, error.message));
 }
+export const RichText = withCondition(_RichText);
 
 //# sourceMappingURL=Field.js.map

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'\nimport type { FieldBase } from 'payload/types'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { withCondition } from '@payloadcms/ui/forms/withCondition'\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\nconst _RichText: React.FC<\n  FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    label?: FieldBase['label']\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    label,\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  const { path: pathFromContext } = useFieldProps()\n\n  const fieldType = useField<SerializedEditorState>({\n    path: pathFromContext || 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        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n        <FieldLabel\n          CustomLabel={CustomLabel}\n          label={label}\n          required={required}\n          {...(labelProps || {})}\n        />\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\nexport const RichText = withCondition(_RichText)\n"],"names":["FieldDescription","FieldError","FieldLabel","useFieldProps","useField","withCondition","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","_RichText","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorConfig","errorProps","label","labelProps","path","pathFromProps","readOnly","required","style","validate","width","memoizedValidate","value","validationOptions","pathFromContext","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","undefined","error","role","p","pre","color","message","RichText"],"mappings":"AAAA;AAKA,SAASA,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAC1C,SAASC,aAAa,QAAQ,uBAAsB;AAIpD,OAAO,eAAc;AACrB,SAASC,eAAe,QAAQ,+BAA8B;AAE9D,MAAMC,YAAY;AAElB,MAAMC,YAQF,CAACC;IACH,MAAM,EACJC,IAAI,EACJC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,YAAY,EACZC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,MAAMC,aAAa,EACnBC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGjB;IAEJ,MAAMkB,mBAAmBvB,YACvB,CAACwB,OAAOC;QACN,IAAI,OAAOJ,aAAa,YAAY;YAClC,OAAOA,SAASG,OAAO;gBAAE,GAAGC,iBAAiB;gBAAEpB;gBAAOc;YAAS;QACjE;IACF,GACA,yDAAyD;IACzD,8DAA8D;IAC9D,iHAAiH;IACjH;QAACE;QAAUF;KAAS;IAEtB,MAAM,EAAEH,MAAMU,eAAe,EAAE,GAAG9B;IAElC,MAAM+B,YAAY9B,SAAgC;QAChDmB,MAAMU,mBAAmBT,iBAAiBX;QAC1Ce,UAAUE;IACZ;IAEA,MAAM,EAAEK,YAAY,EAAEC,YAAY,EAAEb,IAAI,EAAEc,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAER,KAAK,EAAE,GAAGG;IAErF,MAAMM,UAAU;QACd9B;QACA;QACAO;QACAsB,aAAa;QACbd,YAAY,CAAC,EAAEf,UAAU,WAAW,CAAC;KACtC,CACE+B,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,oBAACC;QACC3B,WAAWuB;QACXK,KAAKtB;QACLI,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAACe;QAAI3B,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;qBAClC,oBAACT;QAAWc,aAAaA;QAAaQ,MAAMA;QAAO,GAAIH,cAAc,CAAC,CAAC;sBACvE,oBAAClB;QACCc,aAAaA;QACbK,OAAOA;QACPK,UAAUA;QACT,GAAIJ,cAAc,CAAC,CAAC;sBAEvB,oBAACd;QAAcsC,gBAAgBA;QAAgBC,SAAS,KAAO;qBAC7D,oBAACtC;QACCU,cAAcA;QACd6B,YAAYpC;QACZiC,KAAKI,KAAKC,SAAS,CAAC;YAAEd;YAAcb;QAAK;QACzC4B,UAAU,CAACC;YACT,IAAIC,wBAAwBD,YAAYE,MAAM;YAE9C,qCAAqC;YACrC,IAAInC,cAAcoC,UAAUC,OAAOC,MAAMC,QAAQ;gBAC/CvC,aAAaoC,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;oBACxCP,wBAAwBO,KAAK;wBAAEC,qBAAqBR;oBAAsB;gBAC5E;YACF;YAEAf,SAASe;QACX;QACA9B,MAAMA;QACNE,UAAUA;QACVM,OAAOA;SAGVjB,sBAAsBgD,YACrBhD,kCAEA,oBAACd,kBAAsBkB,oBAAoB,CAAC;AAKtD;AAEA,SAAS4B,eAAe,EAAEiB,KAAK,EAAE;IAC/B,8EAA8E;IAE9E,qBACE,oBAACnB;QAAI3B,WAAU;QAAgB+C,MAAK;qBAClC,oBAACC,WAAE,wCACH,oBAACC;QAAIvC,OAAO;YAAEwC,OAAO;QAAM;OAAIJ,MAAMK,OAAO;AAGlD;AAEA,OAAO,MAAMC,WAAWhE,cAAcM,WAAU"}

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';
@@ -13,7 +13,9 @@ type Props = {
     formData: BlockFields;
     formSchema: FieldMap;
     nodeKey: string;
+    path: string;
     reducedBlock: ReducedBlock;
+    schemaPath: string;
 };
 /**
  * The actual content of the Block. This should be INSIDE a Form component,

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,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyMxC,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';
 /**
@@ -13,7 +20,7 @@ import { FormSavePlugin } from './FormSavePlugin.js';
  * scoped to the block. All format operations in here are thus scoped to the block's form, and
  * not the whole document.
  */ export const BlockContent = (props)=>{
-    const { baseClass, field, formData, formSchema, nodeKey, reducedBlock: { labels } } = props;
+    const { baseClass, field, formData, formSchema, nodeKey, path, reducedBlock: { labels }, schemaPath } = props;
     const { i18n } = useTranslation();
     const [editor] = useLexicalComposerContext();
     // Used for saving collapsed to preferences (and gettin' it from there again)
@@ -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;
@@ -43,7 +50,6 @@ import { FormSavePlugin } from './FormSavePlugin.js';
         newFormData = {
             ...newFormData,
             id: formData.id,
-            blockName: newFormData.blockName2,
             blockType: formData.blockType
         };
         // Recursively remove all undefined values from even being present in formData, as they will
@@ -94,18 +100,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,
@@ -129,7 +143,7 @@ import { FormSavePlugin } from './FormSavePlugin.js';
             className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
             pillStyle: "white"
         }, typeof labels.singular === 'string' ? getTranslation(labels.singular, i18n) : '[Singular Label]'), /*#__PURE__*/ React.createElement(SectionTitle, {
-            path: "blockName2",
+            path: "blockName",
             readOnly: field?.readOnly
         }), fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
             count: errorCount,
@@ -149,14 +163,18 @@ 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: "" // Leaving path empty makes it so field values are not prefixed / scoped by the entire schemaPath. e.g. we can access "myField" instead of "someLexicalField.feature.blocks.someArrayB" // TODO: Could there be any implications leaving path different than schemaPath?
+        ,
+        readOnly: false,
+        schemaPath: 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  path: string\n  reducedBlock: ReducedBlock\n  schemaPath: string\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    path,\n    reducedBlock: { labels },\n    schemaPath,\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        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=\"blockName\" 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=\"\" // Leaving path empty makes it so field values are not prefixed / scoped by the entire schemaPath. e.g. we can access \"myField\" instead of \"someLexicalField.feature.blocks.someArrayB\" // TODO: Could there be any implications leaving path different than schemaPath?\n          readOnly={false}\n          schemaPath={schemaPath} // Having the correct schemaPath here allows sub-fields (like array > addRow) to run correct form-state calls and retrieve their needed form state from the server\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","path","reducedBlock","labels","schemaPath","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","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","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","fieldMap","Array","isArray","forceRender","margins","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;AAQ9B,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,CAkB1C,CAAA"}

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

@@ -1,8 +1,13 @@
-import { reduceFieldsToValues, useAllFormFields } from '@payloadcms/ui';
+import { useAllFormFields } from '@payloadcms/ui/forms/Form';
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues';
 import { useEffect } from 'react';
+import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
 export const FormSavePlugin = (props)=>{
     const { onChange } = props;
-    const [fields, dispatchFields] = useAllFormFields();
+    const [_fields] = useAllFormFields();
+    const fields = removeEmptyArrayValues({
+        fields: _fields
+    });
     // Pass in fields, and indicate if you'd like to "unflatten" field data.
     // The result below will reflect the data stored in the form at the given time
     const newFormData = reduceFieldsToValues(fields, true);

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\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\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] = useAllFormFields()\n\n  const fields = removeEmptyArrayValues({ fields: _fields })\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","removeEmptyArrayValues","FormSavePlugin","props","onChange","_fields","fields","newFormData","fullFieldsWithValues"],"mappings":"AAIA,SAASA,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,oBAAoB,QAAQ,gDAA+C;AACpF,SAASC,SAAS,QAAQ,QAAO;AAEjC,SAASC,sBAAsB,QAAQ,8BAA6B;AAYpE,OAAO,MAAMC,iBAAkC,CAACC;IAC9C,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,QAAQ,GAAGP;IAElB,MAAMQ,SAASL,uBAAuB;QAAEK,QAAQD;IAAQ;IAExD,wEAAwE;IACxE,8EAA8E;IAC9E,MAAME,cAAcR,qBAAqBO,QAAQ;IAEjDN,UAAU;QACR,IAAII,UAAU;YACZA,SAAS;gBAAEI,sBAAsBF;gBAAQC;YAAY;QACvD;IACF,GAAG;QAACA;QAAaH;QAAUE;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;AAGrB,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"}

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

@@ -1,17 +1,23 @@
 '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';
 import './index.scss';
+import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
 export const BlockComponent = (props)=>{
     const { blockFieldWrapperName, formData, nodeKey } = props;
     const config = useConfig();
     const submitted = useFormSubmitted();
     const { id } = useDocumentInfo();
-    const { schemaPath } = useFieldPath();
+    const { path, schemaPath } = useFieldProps();
     const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext();
     const [initialState, setInitialState] = useState(false);
     const { field: { richTextComponentMap } } = useEditorConfigContext();
@@ -35,8 +41,10 @@ export const BlockComponent = (props)=>{
             ;
             if (state) {
                 setInitialState({
-                    ...state,
-                    blockName2: {
+                    ...removeEmptyArrayValues({
+                        fields: state
+                    }),
+                    blockName: {
                         initialValue: '',
                         passesCondition: true,
                         valid: true,
@@ -67,7 +75,7 @@ export const BlockComponent = (props)=>{
         });
         return {
             ...formState,
-            blockName2: {
+            blockName: {
                 initialValue: '',
                 passesCondition: true,
                 valid: true,
@@ -83,11 +91,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: [
@@ -101,8 +106,10 @@ export const BlockComponent = (props)=>{
             formData: formData,
             formSchema: Array.isArray(fieldMap) ? fieldMap : [],
             nodeKey: nodeKey,
-            reducedBlock: reducedBlock
-        })));
+            path: `${path}.feature.blocks.${formData.blockType}`,
+            reducedBlock: reducedBlock,
+            schemaPath: schemaFieldsPath
+        }));
     }, [
         fieldMap,
         parentLexicalRichTextField,