@payloadcms/richtext-lexical 3.0.0-beta.70 → 3.0.0-beta.71

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

@@ -1,5 +1,4 @@
-import type { FormFieldBase } from '@payloadcms/ui';
-import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap';
+import type { FieldMap, FormFieldBase } from 'payload';
 import React from 'react';
 import type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js';
 import type { ClientBlock } from '../feature.client.js';

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

@@ -1 +1 @@
-{"version":3,"file":"BlockContent.d.ts","sourceRoot":"","sources":["../../../../src/features/blocks/component/BlockContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAA;AAkB1E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,wBAAwB,CAAA;AAIpE,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE;QACL,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,GAAG,aAAa,CAAA;IACjB,QAAQ,EAAE,WAAW,CAAA;IACrB,UAAU,EAAE,QAAQ,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,WAAW,CAAA;IACzB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgNxC,CAAA"}
+{"version":3,"file":"BlockContent.d.ts","sourceRoot":"","sources":["../../../../src/features/blocks/component/BlockContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA8B,QAAQ,EAAE,aAAa,EAAa,MAAM,SAAS,CAAA;AAiB7F,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,wBAAwB,CAAA;AAIpE,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE;QACL,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,GAAG,aAAa,CAAA;IACjB,QAAQ,EAAE,WAAW,CAAA;IACrB,UAAU,EAAE,QAAQ,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,WAAW,CAAA;IACzB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgNxC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/features/blocks/component/BlockContent.tsx"],"sourcesContent":["import type { FormFieldBase } from '@payloadcms/ui'\nimport type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { CollapsedPreferences, Data, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Collapsible,\n  ErrorPill,\n  Pill,\n  RenderFields,\n  SectionTitle,\n  useDocumentInfo,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { dequal } from 'dequal/lite' // lite: no need for Map and Set support\nimport { $getNodeByKey } from 'lexical'\nimport React, { useCallback } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'\nimport type { ClientBlock } from '../feature.client.js'\nimport type { BlockFields, BlockNode } from '../nodes/BlocksNode.js'\n\nimport { FormSavePlugin } from './FormSavePlugin.js'\n\ntype Props = {\n  baseClass: string\n  field: {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  } & FormFieldBase\n  formData: BlockFields\n  formSchema: FieldMap\n  nodeKey: string\n  path: string\n  reducedBlock: ClientBlock\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    reducedBlock: { LabelComponent, 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 [isCollapsed, setIsCollapsed] = 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        setIsCollapsed(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 removeUndefinedAndNullAndEmptyArraysRecursively(obj: object) {\n        for (const key in obj) {\n          const value = obj[key]\n          if (Array.isArray(value) && !value?.length) {\n            delete obj[key]\n          } else if (value && typeof value === 'object') {\n            removeUndefinedAndNullAndEmptyArraysRecursively(value)\n          } else if (value === undefined || value === null) {\n            delete obj[key]\n          }\n        }\n      }\n      removeUndefinedAndNullAndEmptyArraysRecursively(newFormData)\n\n      removeUndefinedAndNullAndEmptyArraysRecursively(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 (!dequal(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        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        header={\n          LabelComponent ? (\n            <LabelComponent blockKind={'lexicalBlock'} formData={formData} />\n          ) : (\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        }\n        isCollapsed={isCollapsed}\n        key={0}\n        onToggle={(incomingCollapsedState) => {\n          onCollapsedChange(incomingCollapsedState)\n          setIsCollapsed(incomingCollapsedState)\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":["useLexicalComposerContext","getTranslation","Button","Collapsible","ErrorPill","Pill","RenderFields","SectionTitle","useDocumentInfo","useFormSubmitted","useTranslation","dequal","$getNodeByKey","React","useCallback","FormSavePlugin","BlockContent","props","baseClass","field","formData","formSchema","nodeKey","reducedBlock","LabelComponent","labels","schemaPath","i18n","editor","getDocPreferences","setDocFieldPreferences","isCollapsed","setIsCollapsed","useState","initialState","then","currentDocPreferences","currentFieldPreferences","fields","name","collapsedArray","collapsed","includes","id","hasSubmitted","errorCount","setErrorCount","fieldHasErrors","classNames","filter","Boolean","join","onFormChange","fullFieldsWithValues","newFormData","blockType","removeUndefinedAndNullAndEmptyArraysRecursively","obj","key","value","Array","isArray","length","undefined","setTimeout","update","node","setFields","rowErrorCount","formField","Object","values","valid","onCollapsedChange","changedCollapsed","newCollapsed","push","splice","indexOf","hello","removeBlock","remove","Fragment","className","collapsibleStyle","header","blockKind","div","pillStyle","singular","path","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","incomingCollapsedState","fieldMap","forceRender","margins","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/features/blocks/component/BlockContent.tsx"],"sourcesContent":["import type { CollapsedPreferences, Data, FieldMap, FormFieldBase, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Collapsible,\n  ErrorPill,\n  Pill,\n  RenderFields,\n  SectionTitle,\n  useDocumentInfo,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { dequal } from 'dequal/lite' // lite: no need for Map and Set support\nimport { $getNodeByKey } from 'lexical'\nimport React, { useCallback } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'\nimport type { ClientBlock } from '../feature.client.js'\nimport type { BlockFields, BlockNode } from '../nodes/BlocksNode.js'\n\nimport { FormSavePlugin } from './FormSavePlugin.js'\n\ntype Props = {\n  baseClass: string\n  field: {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  } & FormFieldBase\n  formData: BlockFields\n  formSchema: FieldMap\n  nodeKey: string\n  path: string\n  reducedBlock: ClientBlock\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    reducedBlock: { LabelComponent, 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 [isCollapsed, setIsCollapsed] = 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        setIsCollapsed(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 removeUndefinedAndNullAndEmptyArraysRecursively(obj: object) {\n        for (const key in obj) {\n          const value = obj[key]\n          if (Array.isArray(value) && !value?.length) {\n            delete obj[key]\n          } else if (value && typeof value === 'object') {\n            removeUndefinedAndNullAndEmptyArraysRecursively(value)\n          } else if (value === undefined || value === null) {\n            delete obj[key]\n          }\n        }\n      }\n      removeUndefinedAndNullAndEmptyArraysRecursively(newFormData)\n\n      removeUndefinedAndNullAndEmptyArraysRecursively(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 (!dequal(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        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        header={\n          LabelComponent ? (\n            <LabelComponent blockKind={'lexicalBlock'} formData={formData} />\n          ) : (\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        }\n        isCollapsed={isCollapsed}\n        key={0}\n        onToggle={(incomingCollapsedState) => {\n          onCollapsedChange(incomingCollapsedState)\n          setIsCollapsed(incomingCollapsedState)\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":["useLexicalComposerContext","getTranslation","Button","Collapsible","ErrorPill","Pill","RenderFields","SectionTitle","useDocumentInfo","useFormSubmitted","useTranslation","dequal","$getNodeByKey","React","useCallback","FormSavePlugin","BlockContent","props","baseClass","field","formData","formSchema","nodeKey","reducedBlock","LabelComponent","labels","schemaPath","i18n","editor","getDocPreferences","setDocFieldPreferences","isCollapsed","setIsCollapsed","useState","initialState","then","currentDocPreferences","currentFieldPreferences","fields","name","collapsedArray","collapsed","includes","id","hasSubmitted","errorCount","setErrorCount","fieldHasErrors","classNames","filter","Boolean","join","onFormChange","fullFieldsWithValues","newFormData","blockType","removeUndefinedAndNullAndEmptyArraysRecursively","obj","key","value","Array","isArray","length","undefined","setTimeout","update","node","setFields","rowErrorCount","formField","Object","values","valid","onCollapsedChange","changedCollapsed","newCollapsed","push","splice","indexOf","hello","removeBlock","remove","Fragment","className","collapsibleStyle","header","blockKind","div","pillStyle","singular","path","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","incomingCollapsedState","fieldMap","forceRender","margins","onChange"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
-import type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap';
-import type { Block } from 'payload';
+import type { Block, ReducedBlock } from 'payload';
 export type ClientBlock = {
     LabelComponent?: Block['admin']['components']['Label'];
 } & ReducedBlock;

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

@@ -1 +1 @@
-{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../src/features/blocks/feature.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAC9E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAcpC,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAA;CACvD,GAAG,YAAY,CAAA;AAEhB,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,WAAW,EAAE,CAAA;IAC5B,mBAAmB,EAAE,WAAW,EAAE,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,mBAAmB;;;6BAyI7B,CAAA"}
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../src/features/blocks/feature.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAclD,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAA;CACvD,GAAG,YAAY,CAAA;AAEhB,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,WAAW,EAAE,CAAA;IAC5B,mBAAmB,EAAE,WAAW,EAAE,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,mBAAmB;;;6BAyI7B,CAAA"}

package/dist/features/blocks/feature.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/blocks/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { Block } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { ToolbarGroup } from '../toolbars/types.js'\n\nimport { BlockIcon } from '../../lexical/ui/icons/Block/index.js'\nimport { InlineBlocksIcon } from '../../lexical/ui/icons/InlineBlocks/index.js'\nimport { createClientFeature } from '../../utilities/createClientFeature.js'\nimport { BlockNode } from './nodes/BlocksNode.js'\nimport { InlineBlockNode } from './nodes/InlineBlocksNode.js'\nimport { INSERT_BLOCK_COMMAND, OPEN_INLINE_BLOCK_DRAWER_COMMAND } from './plugin/commands.js'\nimport { BlocksPlugin } from './plugin/index.js'\n\nexport type ClientBlock = {\n  LabelComponent?: Block['admin']['components']['Label']\n} & ReducedBlock\n\nexport type BlocksFeatureClientProps = {\n  reducedBlocks: ClientBlock[]\n  reducedInlineBlocks: ClientBlock[]\n}\n\nexport const BlocksFeatureClient = createClientFeature<BlocksFeatureClientProps>(({ props }) => ({\n  nodes: [BlockNode, InlineBlockNode],\n  plugins: [\n    {\n      Component: BlocksPlugin,\n      position: 'normal',\n    },\n  ],\n  sanitizedClientFeatureProps: props,\n  slashMenu: {\n    groups: [\n      props.reducedBlocks?.length\n        ? {\n            items: props.reducedBlocks.map((block) => {\n              return {\n                Icon: BlockIcon,\n                key: 'block-' + block.slug,\n                keywords: ['block', 'blocks', block.slug],\n                label: ({ i18n }) => {\n                  if (!block.labels.singular) {\n                    return block.slug\n                  }\n\n                  return getTranslation(block.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n                    id: null,\n                    blockName: '',\n                    blockType: block.slug,\n                  })\n                },\n              }\n            }),\n            key: 'blocks',\n            label: ({ i18n }) => {\n              return i18n.t('lexical:blocks:label')\n            },\n          }\n        : null,\n      props.reducedInlineBlocks?.length\n        ? {\n            items: props.reducedInlineBlocks.map((inlineBlock) => {\n              return {\n                Icon: InlineBlocksIcon,\n                key: 'inlineBlocks-' + inlineBlock.slug,\n                keywords: ['inlineBlock', 'inline block', inlineBlock.slug],\n                label: ({ i18n }) => {\n                  if (!inlineBlock.labels.singular) {\n                    return inlineBlock.slug\n                  }\n\n                  return getTranslation(inlineBlock.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {\n                    fields: {\n                      id: null,\n                      blockName: '',\n                      blockType: inlineBlock.slug,\n                    },\n                  })\n                },\n              }\n            }),\n            key: 'inlineBlocks',\n            label: ({ i18n }) => {\n              return i18n.t('lexical:blocks:inlineBlocks:label')\n            },\n          }\n        : null,\n    ].filter(Boolean),\n  },\n  toolbarFixed: {\n    groups: [\n      props.reducedBlocks?.length\n        ? {\n            type: 'dropdown',\n            ChildComponent: BlockIcon,\n            items: props.reducedBlocks.map((block, index) => {\n              return {\n                ChildComponent: BlockIcon,\n                isActive: undefined, // At this point, we would be inside a sub-richtext-editor. And at this point this will be run against the focused sub-editor, not the parent editor which has the actual block. Thus, no point in running this\n                key: 'block-' + block.slug,\n                label: ({ i18n }) => {\n                  if (!block.labels.singular) {\n                    return block.slug\n                  }\n\n                  return getTranslation(block.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n                    id: null,\n                    blockName: '',\n                    blockType: block.slug,\n                  })\n                },\n                order: index,\n              }\n            }),\n            key: 'blocks',\n            order: 20,\n          }\n        : null,\n      props.reducedInlineBlocks?.length\n        ? {\n            type: 'dropdown',\n            ChildComponent: InlineBlocksIcon,\n            items: props.reducedInlineBlocks.map((inlineBlock, index) => {\n              return {\n                ChildComponent: InlineBlocksIcon,\n                isActive: undefined,\n                key: 'inlineBlock-' + inlineBlock.slug,\n                label: ({ i18n }) => {\n                  if (!inlineBlock.labels.singular) {\n                    return inlineBlock.slug\n                  }\n\n                  return getTranslation(inlineBlock.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {\n                    fields: {\n                      blockType: inlineBlock.slug,\n                    },\n                  })\n                },\n                order: index,\n              }\n            }),\n            key: 'inlineBlocks',\n            order: 25,\n          }\n        : null,\n    ].filter(Boolean) as ToolbarGroup[],\n  },\n}))\n"],"names":["getTranslation","BlockIcon","InlineBlocksIcon","createClientFeature","BlockNode","InlineBlockNode","INSERT_BLOCK_COMMAND","OPEN_INLINE_BLOCK_DRAWER_COMMAND","BlocksPlugin","BlocksFeatureClient","props","nodes","plugins","Component","position","sanitizedClientFeatureProps","slashMenu","groups","reducedBlocks","length","items","map","block","Icon","key","slug","keywords","label","i18n","labels","singular","onSelect","editor","dispatchCommand","id","blockName","blockType","t","reducedInlineBlocks","inlineBlock","fields","filter","Boolean","toolbarFixed","type","ChildComponent","index","isActive","undefined","order"],"mappings":"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"}
+{"version":3,"sources":["../../../src/features/blocks/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Block, ReducedBlock } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { ToolbarGroup } from '../toolbars/types.js'\n\nimport { BlockIcon } from '../../lexical/ui/icons/Block/index.js'\nimport { InlineBlocksIcon } from '../../lexical/ui/icons/InlineBlocks/index.js'\nimport { createClientFeature } from '../../utilities/createClientFeature.js'\nimport { BlockNode } from './nodes/BlocksNode.js'\nimport { InlineBlockNode } from './nodes/InlineBlocksNode.js'\nimport { INSERT_BLOCK_COMMAND, OPEN_INLINE_BLOCK_DRAWER_COMMAND } from './plugin/commands.js'\nimport { BlocksPlugin } from './plugin/index.js'\n\nexport type ClientBlock = {\n  LabelComponent?: Block['admin']['components']['Label']\n} & ReducedBlock\n\nexport type BlocksFeatureClientProps = {\n  reducedBlocks: ClientBlock[]\n  reducedInlineBlocks: ClientBlock[]\n}\n\nexport const BlocksFeatureClient = createClientFeature<BlocksFeatureClientProps>(({ props }) => ({\n  nodes: [BlockNode, InlineBlockNode],\n  plugins: [\n    {\n      Component: BlocksPlugin,\n      position: 'normal',\n    },\n  ],\n  sanitizedClientFeatureProps: props,\n  slashMenu: {\n    groups: [\n      props.reducedBlocks?.length\n        ? {\n            items: props.reducedBlocks.map((block) => {\n              return {\n                Icon: BlockIcon,\n                key: 'block-' + block.slug,\n                keywords: ['block', 'blocks', block.slug],\n                label: ({ i18n }) => {\n                  if (!block.labels.singular) {\n                    return block.slug\n                  }\n\n                  return getTranslation(block.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n                    id: null,\n                    blockName: '',\n                    blockType: block.slug,\n                  })\n                },\n              }\n            }),\n            key: 'blocks',\n            label: ({ i18n }) => {\n              return i18n.t('lexical:blocks:label')\n            },\n          }\n        : null,\n      props.reducedInlineBlocks?.length\n        ? {\n            items: props.reducedInlineBlocks.map((inlineBlock) => {\n              return {\n                Icon: InlineBlocksIcon,\n                key: 'inlineBlocks-' + inlineBlock.slug,\n                keywords: ['inlineBlock', 'inline block', inlineBlock.slug],\n                label: ({ i18n }) => {\n                  if (!inlineBlock.labels.singular) {\n                    return inlineBlock.slug\n                  }\n\n                  return getTranslation(inlineBlock.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {\n                    fields: {\n                      id: null,\n                      blockName: '',\n                      blockType: inlineBlock.slug,\n                    },\n                  })\n                },\n              }\n            }),\n            key: 'inlineBlocks',\n            label: ({ i18n }) => {\n              return i18n.t('lexical:blocks:inlineBlocks:label')\n            },\n          }\n        : null,\n    ].filter(Boolean),\n  },\n  toolbarFixed: {\n    groups: [\n      props.reducedBlocks?.length\n        ? {\n            type: 'dropdown',\n            ChildComponent: BlockIcon,\n            items: props.reducedBlocks.map((block, index) => {\n              return {\n                ChildComponent: BlockIcon,\n                isActive: undefined, // At this point, we would be inside a sub-richtext-editor. And at this point this will be run against the focused sub-editor, not the parent editor which has the actual block. Thus, no point in running this\n                key: 'block-' + block.slug,\n                label: ({ i18n }) => {\n                  if (!block.labels.singular) {\n                    return block.slug\n                  }\n\n                  return getTranslation(block.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n                    id: null,\n                    blockName: '',\n                    blockType: block.slug,\n                  })\n                },\n                order: index,\n              }\n            }),\n            key: 'blocks',\n            order: 20,\n          }\n        : null,\n      props.reducedInlineBlocks?.length\n        ? {\n            type: 'dropdown',\n            ChildComponent: InlineBlocksIcon,\n            items: props.reducedInlineBlocks.map((inlineBlock, index) => {\n              return {\n                ChildComponent: InlineBlocksIcon,\n                isActive: undefined,\n                key: 'inlineBlock-' + inlineBlock.slug,\n                label: ({ i18n }) => {\n                  if (!inlineBlock.labels.singular) {\n                    return inlineBlock.slug\n                  }\n\n                  return getTranslation(inlineBlock.labels.singular, i18n)\n                },\n                onSelect: ({ editor }) => {\n                  editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {\n                    fields: {\n                      blockType: inlineBlock.slug,\n                    },\n                  })\n                },\n                order: index,\n              }\n            }),\n            key: 'inlineBlocks',\n            order: 25,\n          }\n        : null,\n    ].filter(Boolean) as ToolbarGroup[],\n  },\n}))\n"],"names":["getTranslation","BlockIcon","InlineBlocksIcon","createClientFeature","BlockNode","InlineBlockNode","INSERT_BLOCK_COMMAND","OPEN_INLINE_BLOCK_DRAWER_COMMAND","BlocksPlugin","BlocksFeatureClient","props","nodes","plugins","Component","position","sanitizedClientFeatureProps","slashMenu","groups","reducedBlocks","length","items","map","block","Icon","key","slug","keywords","label","i18n","labels","singular","onSelect","editor","dispatchCommand","id","blockName","blockType","t","reducedInlineBlocks","inlineBlock","fields","filter","Boolean","toolbarFixed","type","ChildComponent","index","isActive","undefined","order"],"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 'payload';
 import React from 'react';
 import type { SanitizedClientEditorConfig } from '../lexical/config/types.js';
 import './bundled.css';

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAWnD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAG7E,OAAO,eAAe,CAAA;AACtB,OAAO,cAAc,CAAA;AA0HrB,eAAO,MAAM,QAAQ;kBApHH,2BAA2B;UACnC,MAAM;0BACU,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;YAC1C,MAAM;kBAiH8B,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAU5C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAG7E,OAAO,eAAe,CAAA;AACtB,OAAO,cAAc,CAAA;AA0HrB,eAAO,MAAM,QAAQ;kBApHH,2BAA2B;UACnC,MAAM;0BACU,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;YAC1C,MAAM;kBAiH8B,CAAA"}

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui'\nimport type { SerializedEditorState } from 'lexical'\n\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  useField,\n  useFieldProps,\n  withCondition,\n} 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 { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport './bundled.css'\nimport './index.scss'\n\nconst baseClass = 'rich-text-lexical'\n\nconst _RichText: React.FC<\n  {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  } & FormFieldBase\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    editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,\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      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret=\"left\" />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${baseClass}__wrap`}>\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","useField","useFieldProps","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","admin","hideGutter","filter","Boolean","join","div","alignCaret","fallbackRender","onReset","fieldProps","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","JSON","stringify","undefined","error","role","p","pre","color","message","RichText"],"mappings":"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"}
+{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { SerializedEditorState } from 'lexical'\nimport type { FormFieldBase } from 'payload'\n\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  useField,\n  useFieldProps,\n  withCondition,\n} 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 { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport './bundled.css'\nimport './index.scss'\n\nconst baseClass = 'rich-text-lexical'\n\nconst _RichText: React.FC<\n  {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  } & FormFieldBase\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    editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,\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      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret=\"left\" />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${baseClass}__wrap`}>\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","useField","useFieldProps","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","admin","hideGutter","filter","Boolean","join","div","alignCaret","fallbackRender","onReset","fieldProps","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","JSON","stringify","undefined","error","role","p","pre","color","message","RichText"],"mappings":"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"}

package/dist/field/index.d.ts

@@ -1,5 +1,5 @@
-import type { FormFieldBase } from '@payloadcms/ui';
 import type { EditorConfig as LexicalEditorConfig } from 'lexical';
+import type { FormFieldBase } from 'payload';
 import React from 'react';
 import type { LexicalFieldAdminProps } from '../types.js';
 export declare const RichTextField: React.FC<{

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAA8C,MAAM,OAAO,CAAA;AAIlE,OAAO,KAAK,EAAqC,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAU5F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC;IACE,KAAK,CAAC,EAAE,sBAAsB,CAAA;IAC9B,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CA0HlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAA8C,MAAM,OAAO,CAAA;AAIlE,OAAO,KAAK,EAAqC,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAU5F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC;IACE,KAAK,CAAC,EAAE,sBAAsB,CAAA;IAC9B,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CA0HlB,CAAA"}