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

package/dist/features/blockquote/i18n.js

@@ -0,0 +1,100 @@
+export const i18n = {
+    ar: {
+        label: 'اقتباس'
+    },
+    az: {
+        label: 'Blokkvota'
+    },
+    bg: {
+        label: 'Цитат'
+    },
+    cs: {
+        label: 'Citace'
+    },
+    de: {
+        label: 'Blockzitat'
+    },
+    en: {
+        label: 'Blockquote'
+    },
+    es: {
+        label: 'Cita en bloque'
+    },
+    fa: {
+        label: 'نقل قول بلوکی'
+    },
+    fr: {
+        label: 'Citation'
+    },
+    he: {
+        label: 'בלוק ציטוט'
+    },
+    hr: {
+        label: 'Blok citat'
+    },
+    hu: {
+        label: 'Idézetblokk'
+    },
+    it: {
+        label: 'Citazione'
+    },
+    ja: {
+        label: 'ブロッククォート'
+    },
+    ko: {
+        label: '인용구'
+    },
+    my: {
+        label: 'ဒေါင်းချီးခြင်း'
+    },
+    nb: {
+        label: 'Blokksitat'
+    },
+    nl: {
+        label: 'Citaat'
+    },
+    pl: {
+        label: 'Cytat blokowy'
+    },
+    pt: {
+        label: 'Citação em bloco'
+    },
+    ro: {
+        label: 'Citat'
+    },
+    rs: {
+        label: 'Blok citat'
+    },
+    'rs-latin': {
+        label: 'Blok citata'
+    },
+    ru: {
+        label: 'Цитата'
+    },
+    sk: {
+        label: 'Citát'
+    },
+    sv: {
+        label: 'Blockcitat'
+    },
+    th: {
+        label: '[SKIPPED]'
+    },
+    tr: {
+        label: 'Alıntı'
+    },
+    uk: {
+        label: 'Блокцитата'
+    },
+    vi: {
+        label: 'Trích dẫn'
+    },
+    zh: {
+        label: '块引用'
+    },
+    'zh-TW': {
+        label: '引用塊'
+    }
+};
+
+//# sourceMappingURL=i18n.js.map

package/dist/features/blockquote/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/blockquote/i18n.ts"],"sourcesContent":["import type { GenericLanguages } from '@payloadcms/translations'\n\nexport const i18n: Partial<GenericLanguages> = {\n  ar: {\n    label: 'اقتباس',\n  },\n  az: {\n    label: 'Blokkvota',\n  },\n  bg: {\n    label: 'Цитат',\n  },\n  cs: {\n    label: 'Citace',\n  },\n  de: {\n    label: 'Blockzitat',\n  },\n  en: {\n    label: 'Blockquote',\n  },\n  es: {\n    label: 'Cita en bloque',\n  },\n  fa: {\n    label: 'نقل قول بلوکی',\n  },\n  fr: {\n    label: 'Citation',\n  },\n  he: {\n    label: 'בלוק ציטוט',\n  },\n  hr: {\n    label: 'Blok citat',\n  },\n  hu: {\n    label: 'Idézetblokk',\n  },\n  it: {\n    label: 'Citazione',\n  },\n  ja: {\n    label: 'ブロッククォート',\n  },\n  ko: {\n    label: '인용구',\n  },\n  my: {\n    label: 'ဒေါင်းချီးခြင်း',\n  },\n  nb: {\n    label: 'Blokksitat',\n  },\n  nl: {\n    label: 'Citaat',\n  },\n  pl: {\n    label: 'Cytat blokowy',\n  },\n  pt: {\n    label: 'Citação em bloco',\n  },\n  ro: {\n    label: 'Citat',\n  },\n  rs: {\n    label: 'Blok citat',\n  },\n  'rs-latin': {\n    label: 'Blok citata',\n  },\n  ru: {\n    label: 'Цитата',\n  },\n  sk: {\n    label: 'Citát',\n  },\n  sv: {\n    label: 'Blockcitat',\n  },\n  th: {\n    label: '[SKIPPED]',\n  },\n  tr: {\n    label: 'Alıntı',\n  },\n  uk: {\n    label: 'Блокцитата',\n  },\n  vi: {\n    label: 'Trích dẫn',\n  },\n  zh: {\n    label: '块引用',\n  },\n  'zh-TW': {\n    label: '引用塊',\n  },\n}\n"],"names":["i18n","ar","label","az","bg","cs","de","en","es","fa","fr","he","hr","hu","it","ja","ko","my","nb","nl","pl","pt","ro","rs","ru","sk","sv","th","tr","uk","vi","zh"],"mappings":"AAEA,OAAO,MAAMA,OAAkC;IAC7CC,IAAI;QACFC,OAAO;IACT;IACAC,IAAI;QACFD,OAAO;IACT;IACAE,IAAI;QACFF,OAAO;IACT;IACAG,IAAI;QACFH,OAAO;IACT;IACAI,IAAI;QACFJ,OAAO;IACT;IACAK,IAAI;QACFL,OAAO;IACT;IACAM,IAAI;QACFN,OAAO;IACT;IACAO,IAAI;QACFP,OAAO;IACT;IACAQ,IAAI;QACFR,OAAO;IACT;IACAS,IAAI;QACFT,OAAO;IACT;IACAU,IAAI;QACFV,OAAO;IACT;IACAW,IAAI;QACFX,OAAO;IACT;IACAY,IAAI;QACFZ,OAAO;IACT;IACAa,IAAI;QACFb,OAAO;IACT;IACAc,IAAI;QACFd,OAAO;IACT;IACAe,IAAI;QACFf,OAAO;IACT;IACAgB,IAAI;QACFhB,OAAO;IACT;IACAiB,IAAI;QACFjB,OAAO;IACT;IACAkB,IAAI;QACFlB,OAAO;IACT;IACAmB,IAAI;QACFnB,OAAO;IACT;IACAoB,IAAI;QACFpB,OAAO;IACT;IACAqB,IAAI;QACFrB,OAAO;IACT;IACA,YAAY;QACVA,OAAO;IACT;IACAsB,IAAI;QACFtB,OAAO;IACT;IACAuB,IAAI;QACFvB,OAAO;IACT;IACAwB,IAAI;QACFxB,OAAO;IACT;IACAyB,IAAI;QACFzB,OAAO;IACT;IACA0B,IAAI;QACF1B,OAAO;IACT;IACA2B,IAAI;QACF3B,OAAO;IACT;IACA4B,IAAI;QACF5B,OAAO;IACT;IACA6B,IAAI;QACF7B,OAAO;IACT;IACA,SAAS;QACPA,OAAO;IACT;AACF,EAAC"}

package/dist/features/blockquote/markdownTransformer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownTransformer.d.ts","sourceRoot":"","sources":["../../../src/features/blockquote/markdownTransformer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAK3D,eAAO,MAAM,mBAAmB,EAAE,kBAmCjC,CAAA"}

package/dist/features/blockquote/markdownTransformer.js

@@ -0,0 +1,40 @@
+import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text';
+import { $createLineBreakNode } from 'lexical';
+export const MarkdownTransformer = {
+    type: 'element',
+    dependencies: [
+        QuoteNode
+    ],
+    export: (node, exportChildren)=>{
+        if (!$isQuoteNode(node)) {
+            return null;
+        }
+        const lines = exportChildren(node).split('\n');
+        const output = [];
+        for (const line of lines){
+            output.push('> ' + line);
+        }
+        return output.join('\n');
+    },
+    regExp: /^>\s/,
+    replace: (parentNode, children, _match, isImport)=>{
+        if (isImport) {
+            const previousNode = parentNode.getPreviousSibling();
+            if ($isQuoteNode(previousNode)) {
+                previousNode.splice(previousNode.getChildrenSize(), 0, [
+                    $createLineBreakNode(),
+                    ...children
+                ]);
+                previousNode.select(0, 0);
+                parentNode.remove();
+                return;
+            }
+        }
+        const node = $createQuoteNode();
+        node.append(...children);
+        parentNode.replace(node);
+        node.select(0, 0);
+    }
+};
+
+//# sourceMappingURL=markdownTransformer.js.map

package/dist/features/blockquote/markdownTransformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/blockquote/markdownTransformer.ts"],"sourcesContent":["import type { ElementTransformer } from '@lexical/markdown'\n\nimport { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'\nimport { $createLineBreakNode } from 'lexical'\n\nexport const MarkdownTransformer: ElementTransformer = {\n  type: 'element',\n  dependencies: [QuoteNode],\n  export: (node, exportChildren) => {\n    if (!$isQuoteNode(node)) {\n      return null\n    }\n\n    const lines = exportChildren(node).split('\\n')\n    const output = []\n    for (const line of lines) {\n      output.push('> ' + line)\n    }\n    return output.join('\\n')\n  },\n  regExp: /^>\\s/,\n  replace: (parentNode, children, _match, isImport) => {\n    if (isImport) {\n      const previousNode = parentNode.getPreviousSibling()\n      if ($isQuoteNode(previousNode)) {\n        previousNode.splice(previousNode.getChildrenSize(), 0, [\n          $createLineBreakNode(),\n          ...children,\n        ])\n        previousNode.select(0, 0)\n        parentNode.remove()\n        return\n      }\n    }\n\n    const node = $createQuoteNode()\n    node.append(...children)\n    parentNode.replace(node)\n    node.select(0, 0)\n  },\n}\n"],"names":["$createQuoteNode","$isQuoteNode","QuoteNode","$createLineBreakNode","MarkdownTransformer","type","dependencies","export","node","exportChildren","lines","split","output","line","push","join","regExp","replace","parentNode","children","_match","isImport","previousNode","getPreviousSibling","splice","getChildrenSize","select","remove","append"],"mappings":"AAEA,SAASA,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,QAAQ,qBAAoB;AAC9E,SAASC,oBAAoB,QAAQ,UAAS;AAE9C,OAAO,MAAMC,sBAA0C;IACrDC,MAAM;IACNC,cAAc;QAACJ;KAAU;IACzBK,QAAQ,CAACC,MAAMC;QACb,IAAI,CAACR,aAAaO,OAAO;YACvB,OAAO;QACT;QAEA,MAAME,QAAQD,eAAeD,MAAMG,KAAK,CAAC;QACzC,MAAMC,SAAS,EAAE;QACjB,KAAK,MAAMC,QAAQH,MAAO;YACxBE,OAAOE,IAAI,CAAC,OAAOD;QACrB;QACA,OAAOD,OAAOG,IAAI,CAAC;IACrB;IACAC,QAAQ;IACRC,SAAS,CAACC,YAAYC,UAAUC,QAAQC;QACtC,IAAIA,UAAU;YACZ,MAAMC,eAAeJ,WAAWK,kBAAkB;YAClD,IAAItB,aAAaqB,eAAe;gBAC9BA,aAAaE,MAAM,CAACF,aAAaG,eAAe,IAAI,GAAG;oBACrDtB;uBACGgB;iBACJ;gBACDG,aAAaI,MAAM,CAAC,GAAG;gBACvBR,WAAWS,MAAM;gBACjB;YACF;QACF;QAEA,MAAMnB,OAAOR;QACbQ,KAAKoB,MAAM,IAAIT;QACfD,WAAWD,OAAO,CAACT;QACnBA,KAAKkB,MAAM,CAAC,GAAG;IACjB;AACF,EAAC"}

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

@@ -0,0 +1,27 @@
+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';
+import type { BlockFields } from '../nodes/BlocksNode.js';
+type Props = {
+    baseClass: string;
+    field: {
+        editorConfig: SanitizedClientEditorConfig;
+        name: string;
+        richTextComponentMap: Map<string, React.ReactNode>;
+    } & FormFieldBase;
+    formData: BlockFields;
+    formSchema: FieldMap;
+    nodeKey: string;
+    path: string;
+    reducedBlock: ClientBlock;
+    schemaPath: string;
+};
+/**
+ * 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 declare const BlockContent: React.FC<Props>;
+export {};
+//# sourceMappingURL=BlockContent.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { getTranslation } from '@payloadcms/translations';
+import { Button, Collapsible, ErrorPill, Pill, RenderFields, SectionTitle, useDocumentInfo, useFormSubmitted, useTranslation } from '@payloadcms/ui';
+import { dequal } from 'dequal/lite'; // lite: no need for Map and Set support
+import { $getNodeByKey } from 'lexical';
+import React, { useCallback } from 'react';
+import { FormSavePlugin } from './FormSavePlugin.js';
+/**
+ * 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, field, formData, formSchema, nodeKey, reducedBlock: { LabelComponent, labels }, schemaPath } = 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;
+    });
+    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 = {
+            ...newFormData,
+            id: formData.id,
+            blockType: formData.blockType
+        };
+        // Recursively remove all undefined values from even being present in formData, as they will
+        // cause isDeepEqual to return false if, for example, formData has a key that fields.data
+        // does not have, even if it's undefined.
+        // 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];
+                }
+            }
+        }
+        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) {
+                        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)=>{
+            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: LabelComponent ? /*#__PURE__*/ _jsx(LabelComponent, {
+                    blockKind: 'lexicalBlock',
+                    formData: formData
+                }) : /*#__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 labels.singular === 'string' ? getTranslation(labels.singular, i18n) : '[Singular Label]'
+                                }),
+                                /*#__PURE__*/ _jsx(SectionTitle, {
+                                    path: "blockName",
+                                    readOnly: field?.readOnly
+                                }),
+                                fieldHasErrors && /*#__PURE__*/ _jsx(ErrorPill, {
+                                    count: errorCount,
+                                    i18n: i18n,
+                                    withMessage: true
+                                })
+                            ]
+                        }),
+                        editor.isEditable() && /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "icon-label",
+                            className: `${baseClass}__removeButton`,
+                            disabled: field?.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`,
+                    fieldMap: Array.isArray(formSchema) ? 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/component/BlockContent.js.map

@@ -0,0 +1 @@
+{"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/component/FormSavePlugin.d.ts

@@ -0,0 +1,11 @@
+import type { Data, FormState } from 'payload';
+import type React from 'react';
+type Props = {
+    onChange?: ({ fullFieldsWithValues, newFormData, }: {
+        fullFieldsWithValues: FormState;
+        newFormData: Data;
+    }) => void;
+};
+export declare const FormSavePlugin: React.FC<Props>;
+export {};
+//# sourceMappingURL=FormSavePlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormSavePlugin.d.ts","sourceRoot":"","sources":["../../../../src/features/blocks/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"}

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

@@ -0,0 +1,29 @@
+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
+    });
+    // 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;
+};
+
+//# sourceMappingURL=FormSavePlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/blocks/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"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type BlockFields } from '../nodes/BlocksNode.js';
+import './index.scss';
+type Props = {
+    children?: React.ReactNode;
+    formData: BlockFields;
+    nodeKey?: string;
+};
+export declare const BlockComponent: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/blocks/component/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAazD,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuJ1C,CAAA"}

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

@@ -0,0 +1,162 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible, Form, Pill, SectionTitle, ShimmerEffect, useConfig, useDocumentInfo, useFieldProps, useFormSubmitted, useTranslation } from '@payloadcms/ui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+const baseClass = 'lexical-block';
+import { getTranslation } from '@payloadcms/translations';
+import { getFormState } from '@payloadcms/ui/shared';
+import { v4 as uuid } from 'uuid';
+import { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js';
+import { BlockContent } from './BlockContent.js';
+export const BlockComponent = (props)=>{
+    const { formData, nodeKey } = props;
+    const config = useConfig();
+    const submitted = useFormSubmitted();
+    const { id } = useDocumentInfo();
+    const { path, schemaPath } = useFieldProps();
+    const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext();
+    const [initialState, setInitialState] = useState(false);
+    const { field: { richTextComponentMap } } = useEditorConfigContext();
+    const componentMapRenderedFieldsPath = `lexical_internal_feature.blocks.fields.${formData?.blockType}`;
+    const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.${formData?.blockType}`;
+    const reducedBlock = editorConfig?.resolvedFeatureMap?.get('blocks')?.sanitizedClientFeatureProps?.reducedBlocks?.find((block)=>block.slug === formData?.blockType);
+    const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath);
+    // Field Schema
+    useEffect(()=>{
+        const awaitInitialState = async ()=>{
+            const state = await getFormState({
+                apiRoute: config.routes.api,
+                body: {
+                    id,
+                    data: formData,
+                    operation: 'update',
+                    schemaPath: schemaFieldsPath
+                },
+                serverURL: config.serverURL
+            }) // Form State
+            ;
+            if (state) {
+                setInitialState({
+                    ...state,
+                    blockName: {
+                        initialValue: '',
+                        passesCondition: true,
+                        valid: true,
+                        value: formData.blockName
+                    }
+                });
+            }
+        };
+        if (formData) {
+            void awaitInitialState();
+        }
+    }, [
+        config.routes.api,
+        config.serverURL,
+        schemaFieldsPath,
+        id
+    ]);
+    const onChange = useCallback(async ({ formState: prevFormState })=>{
+        const formState = await getFormState({
+            apiRoute: config.routes.api,
+            body: {
+                id,
+                formState: prevFormState,
+                operation: 'update',
+                schemaPath: schemaFieldsPath
+            },
+            serverURL: config.serverURL
+        });
+        return {
+            ...formState,
+            blockName: {
+                initialValue: '',
+                passesCondition: true,
+                valid: true,
+                value: formData.blockName
+            }
+        };
+    }, [
+        config.routes.api,
+        config.serverURL,
+        schemaFieldsPath,
+        id,
+        formData.blockName
+    ]);
+    const { i18n } = useTranslation();
+    const classNames = [
+        `${baseClass}__row`,
+        `${baseClass}__row--no-errors`
+    ].filter(Boolean).join(' ');
+    const LabelComponent = reducedBlock?.LabelComponent;
+    // Memoized Form JSX
+    const formContent = useMemo(()=>{
+        return reducedBlock && initialState !== false ? /*#__PURE__*/ _jsx(Form, {
+            beforeSubmit: [
+                onChange
+            ],
+            // @ts-expect-error TODO: Fix this
+            fields: fieldMap,
+            initialState: initialState,
+            onChange: [
+                onChange
+            ],
+            submitted: submitted,
+            uuid: uuid(),
+            children: /*#__PURE__*/ _jsx(BlockContent, {
+                baseClass: baseClass,
+                field: parentLexicalRichTextField,
+                formData: formData,
+                formSchema: Array.isArray(fieldMap) ? fieldMap : [],
+                nodeKey: nodeKey,
+                path: `${path}.lexical_internal_feature.blocks.${formData.blockType}`,
+                reducedBlock: reducedBlock,
+                schemaPath: schemaFieldsPath
+            })
+        }) : /*#__PURE__*/ _jsx(Collapsible, {
+            className: classNames,
+            collapsibleStyle: "default",
+            header: LabelComponent ? /*#__PURE__*/ _jsx(LabelComponent, {
+                blockKind: 'lexicalBlock',
+                formData: formData
+            }) : /*#__PURE__*/ _jsx("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: reducedBlock && typeof reducedBlock.labels.singular === 'string' ? getTranslation(reducedBlock.labels.singular, i18n) : '[Singular Label]'
+                        }),
+                        /*#__PURE__*/ _jsx(SectionTitle, {
+                            path: "blockName",
+                            readOnly: parentLexicalRichTextField?.readOnly
+                        })
+                    ]
+                })
+            }),
+            children: /*#__PURE__*/ _jsx(ShimmerEffect, {
+                height: "35vh"
+            })
+        }, 0);
+    }, [
+        classNames,
+        fieldMap,
+        parentLexicalRichTextField,
+        nodeKey,
+        i18n,
+        submitted,
+        initialState,
+        reducedBlock,
+        onChange,
+        schemaFieldsPath,
+        path
+    ]) // Adding formData to the dependencies here might break it
+    ;
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass + ' ' + baseClass + '-' + formData.blockType,
+        children: formContent
+    });
+};
+
+//# sourceMappingURL=index.js.map