@payloadcms/richtext-lexical 3.80.0-internal-debug.cd99b1f → 3.80.0-internal.21e9c47

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

@@ -1,5 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
@@ -9,646 +10,435 @@ import { $getNodeByKey } from 'lexical';
 import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
-import './index.scss';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
 import { $isBlockNode } from '../nodes/BlocksNode.js';
-import { BlockContent, useBlockComponentContext } from './BlockContent.js';
+import { BlockContent } from './BlockContent.js';
 import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
-/**
-   * Can be modified by the node in order to trigger the re-fetch of the initial state based on the
-   * formData. This is useful when node.setFields() is explicitly called from outside of the form - in
-   * this case, the new field state is likely not reflected in the form state, so we need to re-fetch
-   */ /**
-   * Custom block component from view map
-   * Will be rendered with useBlockComponentContext hook.
-   */ /**
-   * Custom block label from view map
-   * Will be rendered with useBlockComponentContext hook.
-   */ /**
-   * The block's form data (field values).
-   */ /**
-   * The unique key identifying this block node in the current editor instance.
-   */ export const BlockComponent = (props)=>{
-    const { cacheBuster, className: baseClass, CustomBlock: CustomBlockFromProps, CustomLabel: CustomLabelFromProps, formData, nodeKey } = props;
-    const submitted = useFormSubmitted();
-    const { id, collectionSlug, globalSlug } = useDocumentInfo();
-    const { fieldProps: { featureClientSchemaMap, field: parentLexicalRichTextField, initialLexicalFormState, schemaPath }, uuid: uuidFromContext } = useEditorConfigContext();
-    const { fields: parentDocumentFields } = useDocumentForm();
-    const onChangeAbortControllerRef = useRef(new AbortController());
-    const editDepth = useEditDepth();
-    const [errorCount, setErrorCount] = React.useState(0);
-    const { config } = useConfig();
-    const drawerSlug = formatDrawerSlug({
-        slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,
-        depth: editDepth
-    });
-    const { toggleDrawer } = useLexicalDrawer(drawerSlug);
-    // 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 [editor] = useLexicalComposerContext();
-    const isEditable = useLexicalEditable();
-    const blockType = formData.blockType;
-    const { getFormState } = useServerFunctions();
-    const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}.fields`;
-    const [initialState, setInitialState] = React.useState(()=>{
-        // Initial form state that was calculated server-side. May have stale values
-        const cachedFormState = initialLexicalFormState?.[formData.id]?.formState;
-        if (!cachedFormState) {
-            return false;
-        }
-        // Merge current formData values into the cached form state
-        // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits
-        const mergedState = Object.fromEntries(Object.entries(cachedFormState).map(([fieldName, fieldState])=>[
-                fieldName,
-                fieldName in formData ? {
-                    ...fieldState,
-                    initialValue: formData[fieldName],
-                    value: formData[fieldName]
-                } : fieldState
-            ]));
-        // Manually add blockName, as it's not part of cachedFormState
-        mergedState.blockName = {
-            initialValue: formData.blockName,
-            passesCondition: true,
-            valid: true,
-            value: formData.blockName
+export const BlockComponent = props => {
+  const {
+    cacheBuster,
+    className: baseClass,
+    formData,
+    nodeKey
+  } = props;
+  const submitted = useFormSubmitted();
+  const {
+    id,
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const {
+    fieldProps: {
+      featureClientSchemaMap,
+      field: parentLexicalRichTextField,
+      initialLexicalFormState,
+      schemaPath
+    },
+    uuid: uuidFromContext
+  } = useEditorConfigContext();
+  const {
+    fields: parentDocumentFields
+  } = useDocumentForm();
+  const onChangeAbortControllerRef = useRef(new AbortController());
+  const editDepth = useEditDepth();
+  const [errorCount, setErrorCount] = React.useState(0);
+  const {
+    config
+  } = useConfig();
+  const drawerSlug = formatDrawerSlug({
+    slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,
+    depth: editDepth
+  });
+  const {
+    toggleDrawer
+  } = useLexicalDrawer(drawerSlug);
+  // 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 [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
+  const blockType = formData.blockType;
+  const {
+    getFormState
+  } = useServerFunctions();
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}.fields`;
+  const [initialState, setInitialState] = React.useState(() => {
+    // Initial form state that was calculated server-side. May have stale values
+    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState;
+    if (!cachedFormState) {
+      return false;
+    }
+    // Merge current formData values into the cached form state
+    // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits
+    const mergedState = Object.fromEntries(Object.entries(cachedFormState).map(([fieldName, fieldState]) => [fieldName, fieldName in formData ? {
+      ...fieldState,
+      initialValue: formData[fieldName],
+      value: formData[fieldName]
+    } : fieldState]));
+    // Manually add blockName, as it's not part of cachedFormState
+    mergedState.blockName = {
+      initialValue: formData.blockName,
+      passesCondition: true,
+      valid: true,
+      value: formData.blockName
+    };
+    return mergedState;
+  });
+  const hasMounted = useRef(false);
+  const prevCacheBuster = useRef(cacheBuster);
+  useEffect(() => {
+    if (hasMounted.current) {
+      if (prevCacheBuster.current !== cacheBuster) {
+        setInitialState(false);
+      }
+      prevCacheBuster.current = cacheBuster;
+    } else {
+      hasMounted.current = true;
+    }
+  }, [cacheBuster]);
+  const [CustomLabel, setCustomLabel] = React.useState(
+  // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
+  initialState?.['_components']?.customComponents?.BlockLabel ?? undefined);
+  const [CustomBlock, setCustomBlock] = React.useState(
+  // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
+  initialState?.['_components']?.customComponents?.Block ?? undefined);
+  // Initial state for newly created blocks
+  useEffect(() => {
+    const abortController = new AbortController();
+    const awaitInitialState = async () => {
+      /*
+      * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,
+      * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side
+      * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.
+      */
+      const {
+        state
+      } = await getFormState({
+        id,
+        collectionSlug,
+        data: formData,
+        docPermissions: {
+          fields: true
+        },
+        docPreferences: await getDocPreferences(),
+        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
+          excludeFiles: true
+        }),
+        globalSlug,
+        initialBlockData: formData,
+        operation: 'update',
+        readOnly: !isEditable,
+        renderAllFields: true,
+        schemaPath: schemaFieldsPath,
+        signal: abortController.signal
+      });
+      if (state) {
+        state.blockName = {
+          initialValue: formData.blockName,
+          passesCondition: true,
+          valid: true,
+          value: formData.blockName
         };
-        return mergedState;
+        const newFormStateData = reduceFieldsToValues(deepCopyObjectSimpleWithoutReactComponents(state, {
+          excludeFiles: true
+        }), true);
+        // Things like default values may come back from the server => update the node with the new data
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (node && $isBlockNode(node)) {
+            const newData = newFormStateData;
+            newData.blockType = blockType;
+            node.setFields(newData, true);
+          }
+        });
+        setInitialState(state);
+        setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined);
+        setCustomBlock(state._components?.customComponents?.Block ?? undefined);
+      }
+    };
+    if (formData && !initialState) {
+      void awaitInitialState();
+    }
+    return () => {
+      abortAndIgnore(abortController);
+    };
+  }, [getFormState, schemaFieldsPath, isEditable, id, formData, editor, nodeKey, initialState, collectionSlug, globalSlug, getDocPreferences, parentDocumentFields, blockType]);
+  const [isCollapsed, setIsCollapsed] = React.useState(initialLexicalFormState?.[formData.id]?.collapsed ?? false);
+  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`;
+  const clientSchemaMap = featureClientSchemaMap['blocks'];
+  const blocksField = clientSchemaMap?.[componentMapRenderedBlockPath]?.[0];
+  const clientBlock = blocksField.blockReferences ? typeof blocksField?.blockReferences?.[0] === 'string' ? config.blocksMap[blocksField?.blockReferences?.[0]] : blocksField?.blockReferences?.[0] : blocksField?.blocks?.[0];
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const onChange = useCallback(async ({
+    formState: prevFormState,
+    submit
+  }) => {
+    abortAndIgnore(onChangeAbortControllerRef.current);
+    const controller = new AbortController();
+    onChangeAbortControllerRef.current = controller;
+    const {
+      state: newFormState
+    } = await getFormState({
+      id,
+      collectionSlug,
+      docPermissions: {
+        fields: true
+      },
+      docPreferences: await getDocPreferences(),
+      documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
+        excludeFiles: true
+      }),
+      formState: prevFormState,
+      globalSlug,
+      initialBlockFormState: prevFormState,
+      operation: 'update',
+      readOnly: !isEditable,
+      renderAllFields: submit ? true : false,
+      schemaPath: schemaFieldsPath,
+      signal: controller.signal
     });
-    const hasMounted = useRef(false);
-    const prevCacheBuster = useRef(cacheBuster);
-    useEffect(()=>{
-        if (hasMounted.current) {
-            if (prevCacheBuster.current !== cacheBuster) {
-                setInitialState(false);
-            }
-            prevCacheBuster.current = cacheBuster;
-        } else {
-            hasMounted.current = true;
+    if (!newFormState) {
+      return prevFormState;
+    }
+    if (prevFormState.blockName) {
+      newFormState.blockName = prevFormState.blockName;
+    }
+    const newFormStateData_0 = reduceFieldsToValues(removeEmptyArrayValues({
+      fields: deepCopyObjectSimpleWithoutReactComponents(newFormState, {
+        excludeFiles: true
+      })
+    }), true);
+    setTimeout(() => {
+      editor.update(() => {
+        const node_0 = $getNodeByKey(nodeKey);
+        if (node_0 && $isBlockNode(node_0)) {
+          const newData_0 = newFormStateData_0;
+          newData_0.blockType = blockType;
+          node_0.setFields(newData_0, true);
         }
-    }, [
-        cacheBuster
-    ]);
-    const [CustomLabel, setCustomLabel] = React.useState(()=>{
-        if (CustomLabelFromProps) {
-            return /*#__PURE__*/ _jsxDEV(CustomLabelFromProps, {
-                className: baseClass,
-                formData: formData,
-                isEditor: true,
-                isJSXConverter: false,
-                nodeKey: nodeKey,
-                useBlockComponentContext: useBlockComponentContext
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 176,
-                columnNumber: 9
-            }, this);
+      });
+    }, 0);
+    if (submit) {
+      setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined);
+      setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined);
+      let rowErrorCount = 0;
+      for (const formField of Object.values(newFormState)) {
+        if (formField?.valid === false) {
+          rowErrorCount++;
         }
-        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
-        return initialState?.['_components']?.customComponents?.BlockLabel ?? undefined;
+      }
+      setErrorCount(rowErrorCount);
+    }
+    return newFormState;
+  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, blockType, parentDocumentFields, isEditable, editor, nodeKey]);
+  useEffect(() => {
+    return () => {
+      abortAndIgnore(onChangeAbortControllerRef.current);
+    };
+  }, []);
+  const removeBlock = useCallback(() => {
+    editor.update(() => {
+      $getNodeByKey(nodeKey)?.remove();
     });
-    const [CustomBlock, setCustomBlock] = React.useState(()=>{
-        if (CustomBlockFromProps) {
-            return /*#__PURE__*/ _jsxDEV(CustomBlockFromProps, {
-                className: baseClass,
-                formData: formData,
-                isEditor: true,
-                isJSXConverter: false,
-                nodeKey: nodeKey,
-                useBlockComponentContext: useBlockComponentContext
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 193,
-                columnNumber: 9
-            }, this);
+  }, [editor, nodeKey]);
+  const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock?.slug;
+  const onCollapsedChange = useCallback(changedCollapsed => {
+    void getDocPreferences().then(currentDocPreferences => {
+      const currentFieldPreferences = currentDocPreferences?.fields?.[parentLexicalRichTextField.name];
+      const collapsedArray = currentFieldPreferences?.collapsed;
+      const newCollapsed = collapsedArray && collapsedArray?.length ? collapsedArray : [];
+      if (changedCollapsed) {
+        if (!newCollapsed.includes(formData.id)) {
+          newCollapsed.push(formData.id);
         }
-        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
-        return initialState?.['_components']?.customComponents?.Block ?? undefined;
-    });
-    // Initial state for newly created blocks
-    useEffect(()=>{
-        const abortController = new AbortController();
-        const awaitInitialState = async ()=>{
-            /*
-       * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,
-       * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side
-       * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.
-       */ const { state } = await getFormState({
-                id,
-                collectionSlug,
-                data: formData,
-                docPermissions: {
-                    fields: true
-                },
-                docPreferences: await getDocPreferences(),
-                documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
-                    excludeFiles: true
-                }),
-                globalSlug,
-                initialBlockData: formData,
-                operation: 'update',
-                readOnly: !isEditable,
-                renderAllFields: true,
-                schemaPath: schemaFieldsPath,
-                signal: abortController.signal
-            });
-            if (state) {
-                state.blockName = {
-                    initialValue: formData.blockName,
-                    passesCondition: true,
-                    valid: true,
-                    value: formData.blockName
-                };
-                const newFormStateData = reduceFieldsToValues(deepCopyObjectSimpleWithoutReactComponents(state, {
-                    excludeFiles: true
-                }), true);
-                // Things like default values may come back from the server => update the node with the new data
-                editor.update(()=>{
-                    const node = $getNodeByKey(nodeKey);
-                    if (node && $isBlockNode(node)) {
-                        const newData = newFormStateData;
-                        newData.blockType = blockType;
-                        node.setFields(newData, true);
-                    }
-                });
-                setInitialState(state);
-                if (!CustomLabelFromProps) {
-                    setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined);
-                }
-                if (!CustomBlockFromProps) {
-                    setCustomBlock(state._components?.customComponents?.Block ?? undefined);
-                }
-            }
-        };
-        if (formData && !initialState) {
-            void awaitInitialState();
+      } else {
+        if (newCollapsed.includes(formData.id)) {
+          newCollapsed.splice(newCollapsed.indexOf(formData.id), 1);
         }
-        return ()=>{
-            abortAndIgnore(abortController);
-        };
-    }, [
-        getFormState,
-        schemaFieldsPath,
-        isEditable,
-        id,
-        CustomLabelFromProps,
-        CustomBlockFromProps,
-        formData,
-        editor,
-        nodeKey,
-        initialState,
-        collectionSlug,
-        globalSlug,
-        getDocPreferences,
-        parentDocumentFields,
-        blockType
-    ]);
-    const [isCollapsed, setIsCollapsed] = React.useState(initialLexicalFormState?.[formData.id]?.collapsed ?? false);
-    const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`;
-    const clientSchemaMap = featureClientSchemaMap['blocks'];
-    const blocksField = clientSchemaMap?.[componentMapRenderedBlockPath]?.[0];
-    const clientBlock = blocksField.blockReferences ? typeof blocksField?.blockReferences?.[0] === 'string' ? config.blocksMap[blocksField?.blockReferences?.[0]] : blocksField?.blockReferences?.[0] : blocksField?.blocks?.[0];
-    const { i18n, t } = useTranslation();
-    const onChange = useCallback(async ({ formState: prevFormState, submit })=>{
-        abortAndIgnore(onChangeAbortControllerRef.current);
-        const controller = new AbortController();
-        onChangeAbortControllerRef.current = controller;
-        const { state: newFormState } = await getFormState({
-            id,
-            collectionSlug,
-            docPermissions: {
-                fields: true
-            },
-            docPreferences: await getDocPreferences(),
-            documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
-                excludeFiles: true
-            }),
-            formState: prevFormState,
-            globalSlug,
-            initialBlockFormState: prevFormState,
-            operation: 'update',
-            readOnly: !isEditable,
-            renderAllFields: submit ? true : false,
-            schemaPath: schemaFieldsPath,
-            signal: controller.signal
-        });
-        if (!newFormState) {
-            return prevFormState;
-        }
-        if (prevFormState.blockName) {
-            newFormState.blockName = prevFormState.blockName;
-        }
-        const newFormStateData = reduceFieldsToValues(removeEmptyArrayValues({
-            fields: deepCopyObjectSimpleWithoutReactComponents(newFormState, {
-                excludeFiles: true
+      }
+      setDocFieldPreferences(parentLexicalRichTextField.name, {
+        collapsed: newCollapsed,
+        hello: 'hi'
+      });
+    });
+  }, [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id]);
+  const EditButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
+    buttonStyle: "icon-label",
+    className: `${baseClass}__editButton`,
+    disabled: !isEditable,
+    el: "button",
+    icon: "edit",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleDrawer();
+      return false;
+    },
+    onMouseDown: e_0 => {
+      // Needed to preserve lexical selection for toggleDrawer lexical selection restore.
+      // I believe this is needed due to this button (usually) being inside of a collapsible.
+      e_0.preventDefault();
+    },
+    round: true,
+    size: "small",
+    tooltip: t('lexical:blocks:inlineBlocks:edit', {
+      label: blockDisplayName
+    })
+  }), [baseClass, isEditable, t, blockDisplayName, toggleDrawer]);
+  const RemoveButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
+    buttonStyle: "icon-label",
+    className: `${baseClass}__removeButton`,
+    disabled: !isEditable,
+    icon: "x",
+    onClick: e_1 => {
+      e_1.preventDefault();
+      removeBlock();
+    },
+    round: true,
+    tooltip: "Remove Block"
+  }), [baseClass, isEditable, removeBlock]);
+  const BlockCollapsible = useMemo(() => ({
+    Actions,
+    children,
+    className,
+    collapsibleProps,
+    disableBlockName,
+    editButton,
+    errorCount: errorCount_0,
+    fieldHasErrors,
+    Label,
+    Pill: CustomPill,
+    removeButton
+  }) => {
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__container ${baseClass}-${blockType}`,
+      children: /*#__PURE__*/_jsx(Collapsible, {
+        className: [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`, className].filter(Boolean).join(' '),
+        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
+        header: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__block-header`,
+          children: [typeof Label !== 'undefined' ? Label : typeof CustomLabel !== 'undefined' ? CustomLabel : /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__block-label`,
+            children: [typeof CustomPill !== 'undefined' ? CustomPill : /*#__PURE__*/_jsx(Pill, {
+              className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`,
+              pillStyle: "white",
+              size: "small",
+              children: blockDisplayName ?? blockType
+            }), !disableBlockName && !clientBlock?.admin?.disableBlockName && /*#__PURE__*/_jsx(SectionTitle, {
+              path: "blockName",
+              readOnly: !isEditable
+            }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+              count: errorCount_0 ?? 0,
+              i18n: i18n,
+              withMessage: true
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__block-actions`,
+            children: typeof Actions !== 'undefined' ? Actions : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [CustomBlock && editButton !== false || !CustomBlock && editButton ? /*#__PURE__*/_jsx(EditButton, {}) : null, removeButton !== false && isEditable ? /*#__PURE__*/_jsx(RemoveButton, {}) : null]
             })
-        }), true);
-        setTimeout(()=>{
-            editor.update(()=>{
-                const node = $getNodeByKey(nodeKey);
-                if (node && $isBlockNode(node)) {
-                    const newData = newFormStateData;
-                    newData.blockType = blockType;
-                    node.setFields(newData, true);
-                }
-            });
-        }, 0);
-        if (submit) {
-            if (!CustomLabelFromProps) {
-                setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined);
-            }
-            if (!CustomBlockFromProps) {
-                setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined);
-            }
-            let rowErrorCount = 0;
-            for (const formField of Object.values(newFormState)){
-                if (formField?.valid === false) {
-                    rowErrorCount++;
-                }
-            }
-            setErrorCount(rowErrorCount);
-        }
-        return newFormState;
-    }, [
-        getFormState,
-        id,
-        collectionSlug,
-        getDocPreferences,
-        globalSlug,
-        schemaFieldsPath,
-        blockType,
-        parentDocumentFields,
-        isEditable,
-        editor,
-        nodeKey,
-        CustomBlockFromProps,
-        CustomLabelFromProps
-    ]);
-    useEffect(()=>{
-        return ()=>{
-            abortAndIgnore(onChangeAbortControllerRef.current);
-        };
-    }, []);
-    const removeBlock = useCallback(()=>{
-        editor.update(()=>{
-            $getNodeByKey(nodeKey)?.remove();
+          })]
+        }),
+        isCollapsed: isCollapsed,
+        onToggle: incomingCollapsedState => {
+          onCollapsedChange(incomingCollapsedState);
+          setIsCollapsed(incomingCollapsedState);
+        },
+        ...(collapsibleProps || {}),
+        children: children
+      }, 0)
+    });
+  }, [CustomBlock, CustomLabel, EditButton, RemoveButton, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, i18n, isCollapsed, onCollapsedChange, isEditable]);
+  const blockID = formData?.id;
+  const BlockDrawer = useMemo(() => () => /*#__PURE__*/_jsx(EditDepthProvider, {
+    children: /*#__PURE__*/_jsx(Drawer, {
+      className: '',
+      slug: drawerSlug,
+      title: t(`lexical:blocks:inlineBlocks:${blockID ? 'edit' : 'create'}`, {
+        label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label')
+      }),
+      children: initialState ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(RenderFields, {
+          fields: clientBlock?.fields ?? [],
+          forceRender: true,
+          parentIndexPath: "",
+          parentPath: "",
+          parentSchemaPath: schemaFieldsPath,
+          permissions: true,
+          readOnly: !isEditable
+        }), /*#__PURE__*/_jsx(FormSubmit, {
+          programmaticSubmit: true,
+          children: t('fields:saveChanges')
+        })]
+      }) : null
+    })
+  }), [initialState, drawerSlug, blockID, blockDisplayName, t, isEditable, clientBlock?.fields, schemaFieldsPath]);
+  // Memoized Form JSX
+  const Block = useMemo(() => {
+    if (!initialState) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Form, {
+      beforeSubmit: [async ({
+        formState
+      }) => {
+        // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
+        return await onChange({
+          formState,
+          submit: true
         });
-    }, [
-        editor,
-        nodeKey
-    ]);
-    const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock?.slug;
-    const onCollapsedChange = useCallback((changedCollapsed)=>{
-        void getDocPreferences().then((currentDocPreferences)=>{
-            const currentFieldPreferences = currentDocPreferences?.fields?.[parentLexicalRichTextField.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(parentLexicalRichTextField.name, {
-                collapsed: newCollapsed,
-                hello: 'hi'
-            });
+      }],
+      el: "div",
+      fields: clientBlock?.fields ?? [],
+      initialState: initialState,
+      onChange: [onChange],
+      onSubmit: (formState_0, newData_1) => {
+        // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
+        newData_1.blockType = blockType;
+        editor.update(() => {
+          const node_1 = $getNodeByKey(nodeKey);
+          if (node_1 && $isBlockNode(node_1)) {
+            node_1.setFields(newData_1, true);
+          }
         });
-    }, [
-        getDocPreferences,
-        parentLexicalRichTextField.name,
-        setDocFieldPreferences,
-        formData.id
-    ]);
-    const EditButton = useMemo(()=>()=>/*#__PURE__*/ _jsxDEV(Button, {
-                buttonStyle: "icon-label",
-                className: `${baseClass}__editButton`,
-                disabled: !isEditable,
-                el: "button",
-                icon: "edit",
-                onClick: (e)=>{
-                    e.preventDefault();
-                    e.stopPropagation();
-                    toggleDrawer();
-                    return false;
-                },
-                onMouseDown: (e)=>{
-                    // Needed to preserve lexical selection for toggleDrawer lexical selection restore.
-                    // I believe this is needed due to this button (usually) being inside of a collapsible.
-                    e.preventDefault();
-                },
-                round: true,
-                size: "small",
-                tooltip: t('lexical:blocks:inlineBlocks:edit', {
-                    label: blockDisplayName
-                })
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 452,
-                columnNumber: 7
-            }, this), [
-        baseClass,
-        isEditable,
-        t,
-        blockDisplayName,
-        toggleDrawer
-    ]);
-    const RemoveButton = useMemo(()=>()=>/*#__PURE__*/ _jsxDEV(Button, {
-                buttonStyle: "icon-label",
-                className: `${baseClass}__removeButton`,
-                disabled: !isEditable,
-                icon: "x",
-                onClick: (e)=>{
-                    e.preventDefault();
-                    removeBlock();
-                },
-                round: true,
-                tooltip: "Remove Block"
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 479,
-                columnNumber: 7
-            }, this), [
-        baseClass,
-        isEditable,
-        removeBlock
-    ]);
-    const BlockCollapsible = useMemo(()=>({ Actions, children, className, collapsibleProps, disableBlockName, editButton, errorCount, fieldHasErrors, Label, Pill: CustomPill, removeButton })=>{
-            return /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__container ${baseClass}-${blockType}`,
-                children: /*#__PURE__*/ _jsxDEV(Collapsible, {
-                    className: [
-                        `${baseClass}__row`,
-                        fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,
-                        className
-                    ].filter(Boolean).join(' '),
-                    collapsibleStyle: fieldHasErrors ? 'error' : 'default',
-                    header: /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__block-header`,
-                        children: [
-                            typeof Label !== 'undefined' ? Label : typeof CustomLabel !== 'undefined' ? CustomLabel : /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${baseClass}__block-label`,
-                                children: [
-                                    typeof CustomPill !== 'undefined' ? CustomPill : /*#__PURE__*/ _jsxDEV(Pill, {
-                                        className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`,
-                                        pillStyle: "white",
-                                        size: "small",
-                                        children: blockDisplayName ?? blockType
-                                    }, void 0, false, {
-                                        fileName: "src/features/blocks/client/component/index.tsx",
-                                        lineNumber: 532,
-                                        columnNumber: 25
-                                    }, void 0),
-                                    !disableBlockName && !clientBlock?.admin?.disableBlockName && /*#__PURE__*/ _jsxDEV(SectionTitle, {
-                                        path: "blockName",
-                                        readOnly: !isEditable
-                                    }, void 0, false, {
-                                        fileName: "src/features/blocks/client/component/index.tsx",
-                                        lineNumber: 541,
-                                        columnNumber: 25
-                                    }, void 0),
-                                    fieldHasErrors && /*#__PURE__*/ _jsxDEV(ErrorPill, {
-                                        count: errorCount ?? 0,
-                                        i18n: i18n,
-                                        withMessage: true
-                                    }, void 0, false, {
-                                        fileName: "src/features/blocks/client/component/index.tsx",
-                                        lineNumber: 545,
-                                        columnNumber: 25
-                                    }, void 0)
-                                ]
-                            }, void 0, true, {
-                                fileName: "src/features/blocks/client/component/index.tsx",
-                                lineNumber: 528,
-                                columnNumber: 21
-                            }, void 0),
-                            /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${baseClass}__block-actions`,
-                                children: typeof Actions !== 'undefined' ? Actions : /*#__PURE__*/ _jsxDEV(_Fragment, {
-                                    children: [
-                                        CustomBlock && editButton !== false || !CustomBlock && editButton ? /*#__PURE__*/ _jsxDEV(EditButton, {}, void 0, false, {
-                                            fileName: "src/features/blocks/client/component/index.tsx",
-                                            lineNumber: 556,
-                                            columnNumber: 27
-                                        }, void 0) : null,
-                                        removeButton !== false && isEditable ? /*#__PURE__*/ _jsxDEV(RemoveButton, {}, void 0, false, {
-                                            fileName: "src/features/blocks/client/component/index.tsx",
-                                            lineNumber: 558,
-                                            columnNumber: 65
-                                        }, void 0) : null
-                                    ]
-                                }, void 0, true)
-                            }, void 0, false, {
-                                fileName: "src/features/blocks/client/component/index.tsx",
-                                lineNumber: 550,
-                                columnNumber: 19
-                            }, void 0)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/features/blocks/client/component/index.tsx",
-                        lineNumber: 522,
-                        columnNumber: 17
-                    }, void 0),
-                    isCollapsed: isCollapsed,
-                    onToggle: (incomingCollapsedState)=>{
-                        onCollapsedChange(incomingCollapsedState);
-                        setIsCollapsed(incomingCollapsedState);
-                    },
-                    ...collapsibleProps || {},
-                    children: children
-                }, 0, false, {
-                    fileName: "src/features/blocks/client/component/index.tsx",
-                    lineNumber: 512,
-                    columnNumber: 13
-                }, this)
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 511,
-                columnNumber: 11
-            }, this);
-        }, [
-        CustomBlock,
-        CustomLabel,
-        EditButton,
-        RemoveButton,
-        blockDisplayName,
-        baseClass,
-        clientBlock?.admin?.disableBlockName,
-        blockType,
-        i18n,
-        isCollapsed,
-        onCollapsedChange,
-        isEditable
-    ]);
-    const blockID = formData?.id;
-    const BlockDrawer = useMemo(()=>()=>/*#__PURE__*/ _jsxDEV(EditDepthProvider, {
-                children: /*#__PURE__*/ _jsxDEV(Drawer, {
-                    className: '',
-                    slug: drawerSlug,
-                    title: t(`lexical:blocks:inlineBlocks:${blockID ? 'edit' : 'create'}`, {
-                        label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label')
-                    }),
-                    children: initialState ? /*#__PURE__*/ _jsxDEV(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsxDEV(RenderFields, {
-                                fields: clientBlock?.fields ?? [],
-                                forceRender: true,
-                                parentIndexPath: "",
-                                parentPath: // See Blocks feature path for details as for why this is empty
-                                "",
-                                parentSchemaPath: schemaFieldsPath,
-                                permissions: true,
-                                readOnly: !isEditable
-                            }, void 0, false, {
-                                fileName: "src/features/blocks/client/component/index.tsx",
-                                lineNumber: 607,
-                                columnNumber: 15
-                            }, this),
-                            /*#__PURE__*/ _jsxDEV(FormSubmit, {
-                                programmaticSubmit: true,
-                                children: t('fields:saveChanges')
-                            }, void 0, false, {
-                                fileName: "src/features/blocks/client/component/index.tsx",
-                                lineNumber: 616,
-                                columnNumber: 15
-                            }, this)
-                        ]
-                    }, void 0, true) : null
-                }, void 0, false, {
-                    fileName: "src/features/blocks/client/component/index.tsx",
-                    lineNumber: 598,
-                    columnNumber: 9
-                }, this)
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 597,
-                columnNumber: 7
-            }, this), [
-        initialState,
-        drawerSlug,
-        blockID,
-        blockDisplayName,
-        t,
-        isEditable,
-        clientBlock?.fields,
-        schemaFieldsPath
-    ]);
-    // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
-    // Memoized Form JSX
-    const Block = useMemo(()=>{
-        if (!initialState) {
-            return null;
-        }
-        return /*#__PURE__*/ _jsxDEV("div", {
-            "data-block-drawer-slug": drawerSlug,
-            style: {
-                display: 'contents'
-            },
-            children: /*#__PURE__*/ _jsxDEV(Form, {
-                beforeSubmit: [
-                    async ({ formState })=>{
-                        // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
-                        return await onChange({
-                            formState,
-                            submit: true
-                        });
-                    }
-                ],
-                el: "div",
-                fields: clientBlock?.fields ?? [],
-                initialState: initialState,
-                onChange: [
-                    onChange
-                ],
-                onSubmit: (formState, newData)=>{
-                    // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
-                    newData.blockType = blockType;
-                    editor.update(()=>{
-                        const node = $getNodeByKey(nodeKey);
-                        if (node && $isBlockNode(node)) {
-                            node.setFields(newData, true);
-                        }
-                    });
-                    toggleDrawer();
-                },
-                submitted: submitted,
-                uuid: uuid(),
-                children: /*#__PURE__*/ _jsxDEV(BlockContent, {
-                    baseClass: baseClass,
-                    BlockDrawer: BlockDrawer,
-                    Collapsible: BlockCollapsible,
-                    CustomBlock: CustomBlock,
-                    CustomLabel: CustomLabel,
-                    EditButton: EditButton,
-                    errorCount: errorCount,
-                    formSchema: clientBlock?.fields ?? [],
-                    initialState: initialState,
-                    nodeKey: nodeKey,
-                    RemoveButton: RemoveButton
-                }, void 0, false, {
-                    fileName: "src/features/blocks/client/component/index.tsx",
-                    lineNumber: 667,
-                    columnNumber: 11
-                }, this)
-            }, void 0, false, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 642,
-                columnNumber: 9
-            }, this)
-        }, void 0, false, {
-            fileName: "src/features/blocks/client/component/index.tsx",
-            lineNumber: 641,
-            columnNumber: 7
-        }, this);
-    }, [
-        BlockCollapsible,
-        BlockDrawer,
-        CustomBlock,
-        CustomLabel,
-        blockType,
-        drawerSlug,
-        RemoveButton,
-        EditButton,
-        baseClass,
-        editor,
-        errorCount,
-        toggleDrawer,
-        clientBlock?.fields,
-        // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
-        initialState,
-        nodeKey,
-        onChange,
-        submitted
-    ]);
-    if (!clientBlock) {
-        return /*#__PURE__*/ _jsxDEV(BlockCollapsible, {
-            disableBlockName: true,
-            fieldHasErrors: true,
-            children: /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}-not-found`,
-                children: [
-                    "Error: Block '",
-                    blockType,
-                    "' not found in the config but exists in the lexical data"
-                ]
-            }, void 0, true, {
-                fileName: "src/features/blocks/client/component/index.tsx",
-                lineNumber: 707,
-                columnNumber: 9
-            }, this)
-        }, void 0, false, {
-            fileName: "src/features/blocks/client/component/index.tsx",
-            lineNumber: 706,
-            columnNumber: 7
-        }, this);
-    }
-    return Block;
+        toggleDrawer();
+      },
+      submitted: submitted,
+      uuid: uuid(),
+      children: /*#__PURE__*/_jsx(BlockContent, {
+        baseClass: baseClass,
+        BlockDrawer: BlockDrawer,
+        Collapsible: BlockCollapsible,
+        CustomBlock: CustomBlock,
+        EditButton: EditButton,
+        errorCount: errorCount,
+        formSchema: clientBlock?.fields ?? [],
+        initialState: initialState,
+        nodeKey: nodeKey,
+        RemoveButton: RemoveButton
+      })
+    });
+  }, [BlockCollapsible, BlockDrawer, CustomBlock, blockType, RemoveButton, EditButton, baseClass, editor, errorCount, toggleDrawer, clientBlock?.fields,
+  // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
+  initialState, nodeKey, onChange, submitted]);
+  if (!clientBlock) {
+    return /*#__PURE__*/_jsx(BlockCollapsible, {
+      disableBlockName: true,
+      fieldHasErrors: true,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}-not-found`,
+        children: ["Error: Block '", blockType, "' not found in the config but exists in the lexical data"]
+      })
+    });
+  }
+  return Block;
 };
-
 //# sourceMappingURL=index.js.map