@payloadcms/richtext-lexical 3.0.0-beta.84 → 3.0.0-beta.86

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { getTranslation } from '@payloadcms/translations';
@@ -12,187 +14,179 @@ import { FormSavePlugin } from './FormSavePlugin.js';
 // Currently, this happens if a block has another sub-blocks field. Inside formData, that sub-blocks field has an undefined blockName property.
 // Inside of fields.data however, that sub-blocks blockName property does not exist at all.
 function removeUndefinedAndNullAndEmptyArraysRecursively(obj) {
-    for(const key in obj){
-        const value = obj[key];
-        if (Array.isArray(value) && !value?.length) {
-            delete obj[key];
-        } else if (value && typeof value === 'object') {
-            removeUndefinedAndNullAndEmptyArraysRecursively(value);
-        } else if (value === undefined || value === null) {
-            delete obj[key];
-        }
+  for (const key in obj) {
+    const value = obj[key];
+    if (Array.isArray(value) && !value?.length) {
+      delete obj[key];
+    } else if (value && typeof value === 'object') {
+      removeUndefinedAndNullAndEmptyArraysRecursively(value);
+    } else if (value === undefined || value === null) {
+      delete obj[key];
     }
+  }
 }
 /**
  * The actual content of the Block. This should be INSIDE a Form component,
  * 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, clientBlock, field, formSchema, nodeKey, schemaPath } = props;
-    let { formData } = props;
-    const { i18n } = useTranslation();
-    const [editor] = useLexicalComposerContext();
-    // Used for saving collapsed to preferences (and gettin' it from there again)
-    // Remember, these preferences are scoped to the whole document, not just this form. This
-    // is important to consider for the data path used in setDocFieldPreferences
-    const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo();
-    const [isCollapsed, setIsCollapsed] = React.useState(()=>{
-        let initialState = false;
-        void getDocPreferences().then((currentDocPreferences)=>{
-            const currentFieldPreferences = currentDocPreferences?.fields[field.name];
-            const collapsedArray = currentFieldPreferences?.collapsed;
-            if (collapsedArray && collapsedArray.includes(formData.id)) {
-                initialState = true;
-                setIsCollapsed(true);
-            }
-        });
-        return initialState;
+ */
+export const BlockContent = props => {
+  const {
+    baseClass,
+    clientBlock,
+    field,
+    formSchema,
+    nodeKey,
+    schemaPath
+  } = props;
+  let {
+    formData
+  } = props;
+  const {
+    i18n
+  } = useTranslation();
+  const [editor] = useLexicalComposerContext();
+  // Used for saving collapsed to preferences (and gettin' it from there again)
+  // Remember, these preferences are scoped to the whole document, not just this form. This
+  // is important to consider for the data path used in setDocFieldPreferences
+  const {
+    getDocPreferences,
+    setDocFieldPreferences
+  } = useDocumentInfo();
+  const [isCollapsed, setIsCollapsed] = React.useState(() => {
+    let initialState = false;
+    void getDocPreferences().then(currentDocPreferences => {
+      const currentFieldPreferences = currentDocPreferences?.fields[field.name];
+      const collapsedArray = currentFieldPreferences?.collapsed;
+      if (collapsedArray && collapsedArray.includes(formData.id)) {
+        initialState = true;
+        setIsCollapsed(true);
+      }
     });
-    const hasSubmitted = useFormSubmitted();
-    const [errorCount, setErrorCount] = React.useState(0);
-    const fieldHasErrors = hasSubmitted && errorCount > 0;
-    const classNames = [
-        `${baseClass}__row`,
-        fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`
-    ].filter(Boolean).join(' ');
-    const onFormChange = useCallback(({ fullFieldsWithValues, newFormData })=>{
-        newFormData.id = formData.id;
-        newFormData.blockType = formData.blockType;
-        removeUndefinedAndNullAndEmptyArraysRecursively(newFormData);
-        removeUndefinedAndNullAndEmptyArraysRecursively(formData);
-        // Only update if the data has actually changed. Otherwise, we may be triggering an unnecessary value change,
-        // which would trigger the "Leave without saving" dialog unnecessarily
-        if (!dequal(formData, newFormData)) {
-            // Running this in the next tick in the meantime fixes this issue: https://github.com/payloadcms/payload/issues/4108
-            // 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.
-            // My hypothesis is that the nested editor might not have fully finished its update cycle yet. By updating in the next tick, we
-            // ensure that the nested editor has finished its update cycle before we update the block node.
-            setTimeout(()=>{
-                editor.update(()=>{
-                    const node = $getNodeByKey(nodeKey);
-                    if (node) {
-                        formData = newFormData;
-                        node.setFields(newFormData);
-                    }
-                });
-            }, 0);
+    return initialState;
+  });
+  const hasSubmitted = useFormSubmitted();
+  const [errorCount, setErrorCount] = React.useState(0);
+  const fieldHasErrors = hasSubmitted && errorCount > 0;
+  const classNames = [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`].filter(Boolean).join(' ');
+  const onFormChange = useCallback(({
+    fullFieldsWithValues,
+    newFormData
+  }) => {
+    newFormData.id = formData.id;
+    newFormData.blockType = formData.blockType;
+    removeUndefinedAndNullAndEmptyArraysRecursively(newFormData);
+    removeUndefinedAndNullAndEmptyArraysRecursively(formData);
+    // Only update if the data has actually changed. Otherwise, we may be triggering an unnecessary value change,
+    // which would trigger the "Leave without saving" dialog unnecessarily
+    if (!dequal(formData, newFormData)) {
+      // Running this in the next tick in the meantime fixes this issue: https://github.com/payloadcms/payload/issues/4108
+      // 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.
+      // My hypothesis is that the nested editor might not have fully finished its update cycle yet. By updating in the next tick, we
+      // ensure that the nested editor has finished its update cycle before we update the block node.
+      setTimeout(() => {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (node) {
+            formData = newFormData;
+            node.setFields(newFormData);
+          }
+        });
+      }, 0);
+    }
+    // update error count
+    if (hasSubmitted) {
+      let rowErrorCount = 0;
+      for (const formField of Object.values(fullFieldsWithValues)) {
+        if (formField?.valid === false) {
+          rowErrorCount++;
+        }
+      }
+      setErrorCount(rowErrorCount);
+    }
+  }, [editor, nodeKey, hasSubmitted, formData]);
+  const onCollapsedChange = useCallback(changedCollapsed => {
+    void getDocPreferences().then(currentDocPreferences_0 => {
+      const currentFieldPreferences_0 = currentDocPreferences_0?.fields[field.name];
+      const collapsedArray_0 = currentFieldPreferences_0?.collapsed;
+      const newCollapsed = collapsedArray_0 && collapsedArray_0?.length ? collapsedArray_0 : [];
+      if (changedCollapsed) {
+        if (!newCollapsed.includes(formData.id)) {
+          newCollapsed.push(formData.id);
         }
-        // update error count
-        if (hasSubmitted) {
-            let rowErrorCount = 0;
-            for (const formField of Object.values(fullFieldsWithValues)){
-                if (formField?.valid === false) {
-                    rowErrorCount++;
-                }
-            }
-            setErrorCount(rowErrorCount);
+      } else {
+        if (newCollapsed.includes(formData.id)) {
+          newCollapsed.splice(newCollapsed.indexOf(formData.id), 1);
         }
-    }, [
-        editor,
-        nodeKey,
-        hasSubmitted,
-        formData
-    ]);
-    const onCollapsedChange = useCallback((changedCollapsed)=>{
-        void getDocPreferences().then((currentDocPreferences)=>{
-            const currentFieldPreferences = currentDocPreferences?.fields[field.name];
-            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,
-                hello: 'hi'
-            });
-        });
-    }, [
-        getDocPreferences,
-        field.name,
-        setDocFieldPreferences,
-        formData.id
-    ]);
-    const removeBlock = useCallback(()=>{
-        editor.update(()=>{
-            $getNodeByKey(nodeKey).remove();
-        });
-    }, [
-        editor,
-        nodeKey
-    ]);
-    return /*#__PURE__*/ _jsxs(React.Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(Collapsible, {
-                className: classNames,
-                collapsibleStyle: fieldHasErrors ? 'error' : 'default',
-                header: clientBlock?.admin?.components?.Label ? /*#__PURE__*/ _jsx(RenderComponent, {
-                    clientProps: {
-                        blockKind: 'lexicalBlock',
-                        formData
-                    },
-                    mappedComponent: clientBlock.admin.components.Label
-                }) : /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__block-header`,
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            children: [
-                                /*#__PURE__*/ _jsx(Pill, {
-                                    className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
-                                    pillStyle: "white",
-                                    children: typeof clientBlock?.labels.singular === 'string' ? getTranslation(clientBlock?.labels.singular, i18n) : clientBlock.slug
-                                }),
-                                /*#__PURE__*/ _jsx(SectionTitle, {
-                                    path: "blockName",
-                                    readOnly: field?.admin?.readOnly
-                                }),
-                                fieldHasErrors && /*#__PURE__*/ _jsx(ErrorPill, {
-                                    count: errorCount,
-                                    i18n: i18n,
-                                    withMessage: true
-                                })
-                            ]
-                        }),
-                        editor.isEditable() && /*#__PURE__*/ _jsx(Button, {
-                            buttonStyle: "icon-label",
-                            className: `${baseClass}__removeButton`,
-                            disabled: field?.admin?.readOnly,
-                            icon: "x",
-                            onClick: (e)=>{
-                                e.preventDefault();
-                                removeBlock();
-                            },
-                            round: true,
-                            tooltip: "Remove Block"
-                        })
-                    ]
-                }),
-                isCollapsed: isCollapsed,
-                onToggle: (incomingCollapsedState)=>{
-                    onCollapsedChange(incomingCollapsedState);
-                    setIsCollapsed(incomingCollapsedState);
-                },
-                children: /*#__PURE__*/ _jsx(RenderFields, {
-                    className: `${baseClass}__fields`,
-                    fields: formSchema,
-                    forceRender: true,
-                    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
-                })
-            }, 0),
-            /*#__PURE__*/ _jsx(FormSavePlugin, {
-                onChange: onFormChange
-            })
-        ]
+      }
+      setDocFieldPreferences(field.name, {
+        collapsed: newCollapsed,
+        hello: 'hi'
+      });
     });
-};
+  }, [getDocPreferences, field.name, setDocFieldPreferences, formData.id]);
+  const removeBlock = useCallback(() => {
+    editor.update(() => {
+      $getNodeByKey(nodeKey).remove();
+    });
+  }, [editor, nodeKey]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Collapsible, {
+      className: classNames,
+      collapsibleStyle: fieldHasErrors ? 'error' : 'default',
+      header: clientBlock?.admin?.components?.Label ? /*#__PURE__*/_jsx(RenderComponent, {
+        clientProps: {
+          blockKind: 'lexicalBlock',
+          formData
+        },
+        mappedComponent: clientBlock.admin.components.Label
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__block-header`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx(Pill, {
+            className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
+            pillStyle: "white",
+            children: typeof clientBlock?.labels.singular === 'string' ? getTranslation(clientBlock?.labels.singular, i18n) : clientBlock.slug
+          }), /*#__PURE__*/_jsx(SectionTitle, {
+            path: "blockName",
+            readOnly: field?.admin?.readOnly
+          }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+            count: errorCount,
+            i18n: i18n,
+            withMessage: true
+          })]
+        }), editor.isEditable() && /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "icon-label",
+          className: `${baseClass}__removeButton`,
+          disabled: field?.admin?.readOnly,
+          icon: "x",
+          onClick: e => {
+            e.preventDefault();
+            removeBlock();
+          },
+          round: true,
+          tooltip: "Remove Block"
+        })]
+      }),
+      isCollapsed: isCollapsed,
+      onToggle: incomingCollapsedState => {
+        onCollapsedChange(incomingCollapsedState);
+        setIsCollapsed(incomingCollapsedState);
+      },
+      children: /*#__PURE__*/_jsx(RenderFields, {
+        className: `${baseClass}__fields`,
+        fields: formSchema,
+        forceRender: true,
+        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
+      })
+    }, 0), /*#__PURE__*/_jsx(FormSavePlugin, {
+      onChange: onFormChange
+    })]
+  });
+};
 //# sourceMappingURL=BlockContent.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/blocks/client/component/BlockContent.tsx"],"sourcesContent":["import type { ClientBlock, ClientField, CollapsedPreferences, 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  RenderComponent,\n  RenderFields,\n  SectionTitle,\n  useDocumentInfo,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { dequal } from 'dequal/lite'\nimport { $getNodeByKey } from 'lexical'\nimport React, { useCallback } from 'react'\n\nimport type { LexicalRichTextFieldProps } from '../../../../types.js'\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\nimport type { BlockNode } from '../nodes/BlocksNode.js'\n\nimport { FormSavePlugin } from './FormSavePlugin.js'\n\ntype Props = {\n  baseClass: string\n  clientBlock: ClientBlock\n  field: LexicalRichTextFieldProps['field']\n  formData: BlockFields\n  formSchema: ClientField[]\n  nodeKey: string\n  path: string\n  schemaPath: string\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.\nfunction 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\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 { baseClass, clientBlock, field, formSchema, nodeKey, schemaPath } = props\n  let { formData } = 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: BlockFields\n    }) => {\n      newFormData.id = formData.id\n      newFormData.blockType = formData.blockType\n\n      removeUndefinedAndNullAndEmptyArraysRecursively(newFormData)\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              formData = newFormData\n              node.setFields(newFormData)\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          clientBlock?.admin?.components?.Label ? (\n            <RenderComponent\n              clientProps={{ blockKind: 'lexicalBlock', formData }}\n              mappedComponent={clientBlock.admin.components.Label}\n            />\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 clientBlock?.labels.singular === 'string'\n                    ? getTranslation(clientBlock?.labels.singular, i18n)\n                    : clientBlock.slug}\n                </Pill>\n                <SectionTitle path=\"blockName\" readOnly={field?.admin?.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?.admin?.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          fields={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","RenderComponent","RenderFields","SectionTitle","useDocumentInfo","useFormSubmitted","useTranslation","dequal","$getNodeByKey","React","useCallback","FormSavePlugin","removeUndefinedAndNullAndEmptyArraysRecursively","obj","key","value","Array","isArray","length","undefined","BlockContent","props","baseClass","clientBlock","field","formSchema","nodeKey","schemaPath","formData","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","setTimeout","update","node","setFields","rowErrorCount","formField","Object","values","valid","onCollapsedChange","changedCollapsed","newCollapsed","push","splice","indexOf","hello","removeBlock","remove","Fragment","className","collapsibleStyle","header","admin","components","Label","clientProps","blockKind","mappedComponent","div","pillStyle","labels","singular","slug","path","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","incomingCollapsedState","forceRender","margins","onChange"],"mappings":"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"}
+{"version":3,"file":"BlockContent.js","names":["useLexicalComposerContext","getTranslation","Button","Collapsible","ErrorPill","Pill","RenderComponent","RenderFields","SectionTitle","useDocumentInfo","useFormSubmitted","useTranslation","dequal","$getNodeByKey","React","useCallback","FormSavePlugin","removeUndefinedAndNullAndEmptyArraysRecursively","obj","key","value","Array","isArray","length","undefined","BlockContent","props","baseClass","clientBlock","field","formSchema","nodeKey","schemaPath","formData","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","setTimeout","update","node","setFields","rowErrorCount","formField","Object","values","valid","onCollapsedChange","changedCollapsed","newCollapsed","push","splice","indexOf","hello","removeBlock","remove","_jsxs","Fragment","_jsx","className","collapsibleStyle","header","admin","components","Label","clientProps","blockKind","mappedComponent","pillStyle","labels","singular","slug","path","readOnly","count","withMessage","isEditable","buttonStyle","disabled","icon","onClick","e","preventDefault","round","tooltip","onToggle","incomingCollapsedState","forceRender","margins","onChange"],"sources":["../../../../../src/features/blocks/client/component/BlockContent.tsx"],"sourcesContent":["'use client'\nimport type { ClientBlock, ClientField, CollapsedPreferences, 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  RenderComponent,\n  RenderFields,\n  SectionTitle,\n  useDocumentInfo,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { dequal } from 'dequal/lite'\nimport { $getNodeByKey } from 'lexical'\nimport React, { useCallback } from 'react'\n\nimport type { LexicalRichTextFieldProps } from '../../../../types.js'\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\nimport type { BlockNode } from '../nodes/BlocksNode.js'\n\nimport { FormSavePlugin } from './FormSavePlugin.js'\n\ntype Props = {\n  baseClass: string\n  clientBlock: ClientBlock\n  field: LexicalRichTextFieldProps['field']\n  formData: BlockFields\n  formSchema: ClientField[]\n  nodeKey: string\n  path: string\n  schemaPath: string\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.\nfunction 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\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 { baseClass, clientBlock, field, formSchema, nodeKey, schemaPath } = props\n  let { formData } = 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: BlockFields\n    }) => {\n      newFormData.id = formData.id\n      newFormData.blockType = formData.blockType\n\n      removeUndefinedAndNullAndEmptyArraysRecursively(newFormData)\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              formData = newFormData\n              node.setFields(newFormData)\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          clientBlock?.admin?.components?.Label ? (\n            <RenderComponent\n              clientProps={{ blockKind: 'lexicalBlock', formData }}\n              mappedComponent={clientBlock.admin.components.Label}\n            />\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 clientBlock?.labels.singular === 'string'\n                    ? getTranslation(clientBlock?.labels.singular, i18n)\n                    : clientBlock.slug}\n                </Pill>\n                <SectionTitle path=\"blockName\" readOnly={field?.admin?.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?.admin?.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          fields={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"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"FormSavePlugin.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/FormSavePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,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"}
+{"version":3,"file":"FormSavePlugin.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/FormSavePlugin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,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/features/blocks/client/component/FormSavePlugin.js

@@ -1,29 +1,53 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { useAllFormFields } from '@payloadcms/ui';
 import { reduceFieldsToValues } from 'payload/shared';
 import { useEffect } from 'react';
 import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
-export const FormSavePlugin = (props)=>{
-    const { onChange } = props;
-    const [_fields] = useAllFormFields();
-    const fields = removeEmptyArrayValues({
-        fields: _fields
+export const FormSavePlugin = props => {
+  const $ = _c(8);
+  const {
+    onChange
+  } = props;
+  const [_fields] = useAllFormFields();
+  let t0;
+  let fields;
+  if ($[0] !== _fields) {
+    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);
-    useEffect(()=>{
-        if (onChange) {
-            onChange({
-                fullFieldsWithValues: fields,
-                newFormData
-            });
-        }
-    }, [
-        newFormData,
-        onChange,
-        fields
-    ]);
-    return null;
+    t0 = reduceFieldsToValues(fields, true);
+    $[0] = _fields;
+    $[1] = t0;
+    $[2] = fields;
+  } else {
+    t0 = $[1];
+    fields = $[2];
+  }
+  const newFormData = t0;
+  let t1;
+  let t2;
+  if ($[3] !== onChange || $[4] !== fields || $[5] !== newFormData) {
+    t1 = () => {
+      if (onChange) {
+        onChange({
+          fullFieldsWithValues: fields,
+          newFormData
+        });
+      }
+    };
+    t2 = [newFormData, onChange, fields];
+    $[3] = onChange;
+    $[4] = fields;
+    $[5] = newFormData;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+  return null;
 };
-
 //# sourceMappingURL=FormSavePlugin.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/blocks/client/component/FormSavePlugin.tsx"],"sourcesContent":["import type { Data, FormState } from 'payload'\nimport type React from 'react'\n\nimport { useAllFormFields } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\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":"AAGA,SAASA,gBAAgB,QAAQ,iBAAgB;AACjD,SAASC,oBAAoB,QAAQ,iBAAgB;AACrD,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"}
+{"version":3,"file":"FormSavePlugin.js","names":["c","_c","useAllFormFields","reduceFieldsToValues","useEffect","removeEmptyArrayValues","FormSavePlugin","props","$","onChange","_fields","t0","fields","newFormData","t1","t2","fullFieldsWithValues"],"sources":["../../../../../src/features/blocks/client/component/FormSavePlugin.tsx"],"sourcesContent":["'use client'\nimport type { Data, FormState } from 'payload'\nimport type React from 'react'\n\nimport { useAllFormFields } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAIA,SAASC,gBAAgB,QAAQ;AACjC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,SAAS,QAAQ;AAE1B,SAASC,sBAAsB,QAAQ;AAYvC,OAAO,MAAMC,cAAA,GAAkCC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAC7C;IAAAQ;EAAA,IAAqBF,KAAA;EAErB,OAAAG,OAAA,IAAkBR,gBAAA;EAAA,IAAAS,EAAA;EAAA,IAAAC,MAAA;EAAA,IAAAJ,CAAA,QAAAE,OAAA;IAElBE,MAAA,GAAeP,sBAAA;MAAAO,MAAA,EAAiCF;IAAA,CAAQ;IAIpCC,EAAA,GAAAR,oBAAA,CAAqBS,MAAA,MAAQ;IAAAJ,CAAA,MAAAE,OAAA;IAAAF,CAAA,MAAAG,EAAA;IAAAH,CAAA,MAAAI,MAAA;EAAA;IAAAD,EAAA,GAAAH,CAAA;IAAAI,MAAA,GAAAJ,CAAA;EAAA;EAAjD,MAAAK,WAAA,GAAoBF,EAA6B;EAAA,IAAAG,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAK,WAAA;IAEvCC,EAAA,GAAAA,CAAA;MAAA,IACJL,QAAA;QACFA,QAAA;UAAAO,oBAAA,EAAiCJ,MAAA;UAAAC;QAAA,CAAoB;MAAA;IAAA;IAEtDE,EAAA,IAACF,WAAA,EAAaJ,QAAA,EAAUG,MAAA;IAAOJ,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAI,MAAA;IAAAJ,CAAA,MAAAK,WAAA;IAAAL,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;EAAA;IAAAD,EAAA,GAAAN,CAAA;IAAAO,EAAA,GAAAP,CAAA;EAAA;EAJlCJ,SAAA,CAAUU,EAIV,EAAGC,EAA+B;EAAA;AAAA,CAGpC","ignoreList":[]}