@payloadcms/richtext-lexical 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/features/blocks/client/component/components/BlockCollapsible.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useBlockComponentContext } from '../BlockContent.js';
+export const BlockCollapsible = t0 => {
+  const $ = _c(6);
+  const {
+    children,
+    editButton,
+    Label,
+    removeButton
+  } = t0;
+  const {
+    BlockCollapsible
+  } = useBlockComponentContext();
+  let t1;
+  if ($[0] !== BlockCollapsible || $[1] !== editButton || $[2] !== Label || $[3] !== removeButton || $[4] !== children) {
+    t1 = BlockCollapsible ? _jsx(BlockCollapsible, {
+      editButton,
+      Label,
+      removeButton,
+      children
+    }) : null;
+    $[0] = BlockCollapsible;
+    $[1] = editButton;
+    $[2] = Label;
+    $[3] = removeButton;
+    $[4] = children;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+};
+//# sourceMappingURL=BlockCollapsible.js.map

package/dist/features/blocks/client/component/components/BlockCollapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockCollapsible.js","names":["c","_c","React","useBlockComponentContext","BlockCollapsible","t0","$","children","editButton","Label","removeButton","t1","_jsx"],"sources":["../../../../../../src/features/blocks/client/component/components/BlockCollapsible.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useBlockComponentContext } from '../BlockContent.js'\n\nexport const BlockCollapsible: React.FC<{\n  children?: React.ReactNode\n  editButton?: boolean\n\n  /**\n   * Override the default label with a custom label\n   */\n  Label?: React.ReactNode\n  removeButton?: boolean\n}> = ({ children, editButton, Label, removeButton }) => {\n  const { BlockCollapsible } = useBlockComponentContext()\n\n  return BlockCollapsible ? (\n    <BlockCollapsible editButton={editButton} Label={Label} removeButton={removeButton}>\n      {children}\n    </BlockCollapsible>\n  ) : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,wBAAwB,QAAQ;AAEzC,OAAO,MAAMC,gBAAA,GASRC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM,QAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAL,EAA6C;EACjD;IAAAD;EAAA,IAA6BD,wBAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAL,CAAA,QAAAF,gBAAA,IAAAE,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAC,QAAA;IAEtBI,EAAA,GAAAP,gBAAA,GACLQ,IAAA,CAACR,gBAAA;MAAAI,UAAA;MAAAC,KAAA;MAAAC,YAAA;MAAAH;IAAA,C,QAGC;IAAAD,CAAA,MAAAF,gBAAA;IAAAE,CAAA,MAAAE,UAAA;IAAAF,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAA,OAJGK,EAIH;AAAA,CACN","ignoreList":[]}

package/dist/features/blocks/client/component/components/BlockEditButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const BlockEditButton: () => React.JSX.Element | null;
+//# sourceMappingURL=BlockEditButton.d.ts.map

package/dist/features/blocks/client/component/components/BlockEditButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockEditButton.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/component/components/BlockEditButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,eAAe,gCAI3B,CAAA"}

package/dist/features/blocks/client/component/components/BlockEditButton.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useBlockComponentContext } from '../BlockContent.js';
+export const BlockEditButton = () => {
+  const $ = _c(2);
+  const {
+    EditButton
+  } = useBlockComponentContext();
+  let t0;
+  if ($[0] !== EditButton) {
+    t0 = EditButton ? _jsx(EditButton, {}) : null;
+    $[0] = EditButton;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=BlockEditButton.js.map

package/dist/features/blocks/client/component/components/BlockEditButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockEditButton.js","names":["c","_c","React","useBlockComponentContext","BlockEditButton","$","EditButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/component/components/BlockEditButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useBlockComponentContext } from '../BlockContent.js'\n\nexport const BlockEditButton = () => {\n  const { EditButton } = useBlockComponentContext()\n\n  return EditButton ? <EditButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,wBAAwB,QAAQ;AAEzC,OAAO,MAAMC,eAAA,GAAkBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAC7B;IAAAK;EAAA,IAAuBH,wBAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,UAAA;IAEhBC,EAAA,GAAAD,UAAA,GAAaE,IAAA,CAACF,UAAA,YAAgB;IAAAD,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAA9BE,EAA8B;AAAA,CACvC","ignoreList":[]}

package/dist/features/blocks/client/component/components/BlockRemoveButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const BlockRemoveButton: () => React.JSX.Element | null;
+//# sourceMappingURL=BlockRemoveButton.d.ts.map

package/dist/features/blocks/client/component/components/BlockRemoveButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRemoveButton.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/component/components/BlockRemoveButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,iBAAiB,gCAI7B,CAAA"}

package/dist/features/blocks/client/component/components/BlockRemoveButton.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useBlockComponentContext } from '../BlockContent.js';
+export const BlockRemoveButton = () => {
+  const $ = _c(2);
+  const {
+    RemoveButton
+  } = useBlockComponentContext();
+  let t0;
+  if ($[0] !== RemoveButton) {
+    t0 = RemoveButton ? _jsx(RemoveButton, {}) : null;
+    $[0] = RemoveButton;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=BlockRemoveButton.js.map

package/dist/features/blocks/client/component/components/BlockRemoveButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRemoveButton.js","names":["c","_c","React","useBlockComponentContext","BlockRemoveButton","$","RemoveButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/component/components/BlockRemoveButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useBlockComponentContext } from '../BlockContent.js'\n\nexport const BlockRemoveButton = () => {\n  const { RemoveButton } = useBlockComponentContext()\n\n  return RemoveButton ? <RemoveButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,wBAAwB,QAAQ;AAEzC,OAAO,MAAMC,iBAAA,GAAoBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAC/B;IAAAK;EAAA,IAAyBH,wBAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,YAAA;IAElBC,EAAA,GAAAD,YAAA,GAAeE,IAAA,CAACF,YAAA,YAAkB;IAAAD,CAAA,MAAAC,YAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAlCE,EAAkC;AAAA,CAC3C","ignoreList":[]}

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

@@ -4,7 +4,7 @@ import './index.scss';
 type Props = {
     readonly children?: React.ReactNode;
     readonly formData: BlockFields;
-    readonly nodeKey?: string;
+    readonly nodeKey: string;
 };
 export declare const BlockComponent: React.FC<Props>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoD,MAAM,OAAO,CAAA;AASxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAInE,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAA;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsJ1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAStE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAMnE,OAAO,cAAc,CAAA;AAGrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAA;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4c1C,CAAA"}

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

@@ -1,59 +1,101 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Collapsible, Form, Pill, RenderComponent, SectionTitle, ShimmerEffect, useConfig, useDocumentInfo, useFieldProps, useFormSubmitted, useTranslation } from '@payloadcms/ui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Collapsible, Drawer, EditDepthProvider, ErrorPill, Form, formatDrawerSlug, FormSubmit, Pill, RenderFields, SectionTitle, useDocumentInfo, useEditDepth, useFormSubmitted, useServerFunctions, useTranslation } from '@payloadcms/ui';
+import { abortAndIgnore } from '@payloadcms/ui/shared';
+import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 const baseClass = 'lexical-block';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { getTranslation } from '@payloadcms/translations';
-import { getFormState } from '@payloadcms/ui/shared';
+import { $getNodeByKey } from 'lexical';
 import { v4 as uuid } from 'uuid';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
+import { $isBlockNode } from '../nodes/BlocksNode.js';
 import { BlockContent } from './BlockContent.js';
+import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
 export const BlockComponent = props => {
   const {
     formData,
     nodeKey
   } = props;
-  const {
-    config
-  } = useConfig();
   const submitted = useFormSubmitted();
   const {
-    id
+    id,
+    collectionSlug,
+    globalSlug
   } = useDocumentInfo();
   const {
-    path,
-    schemaPath
-  } = useFieldProps();
-  const {
-    field: parentLexicalRichTextField
+    fieldProps: {
+      featureClientSchemaMap,
+      field: parentLexicalRichTextField,
+      initialLexicalFormState,
+      permissions,
+      readOnly,
+      schemaPath
+    },
+    uuid: uuidFromContext
   } = useEditorConfigContext();
-  const [initialState, setInitialState] = useState(false);
+  const onChangeAbortControllerRef = useRef(new AbortController());
+  const editDepth = useEditDepth();
+  const [errorCount, setErrorCount] = React.useState(0);
+  const drawerSlug = formatDrawerSlug({
+    slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,
+    depth: editDepth
+  });
+  const {
+    toggleDrawer
+  } = useLexicalDrawer(drawerSlug, true);
+  // 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 {
-    field: {
-      richTextComponentMap
+    getDocPreferences,
+    setDocFieldPreferences
+  } = useDocumentInfo();
+  const [editor] = useLexicalComposerContext();
+  const {
+    getFormState
+  } = useServerFunctions();
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}.fields`;
+  const [initialState, setInitialState] = React.useState(initialLexicalFormState?.[formData.id]?.formState ? {
+    ...initialLexicalFormState?.[formData.id]?.formState,
+    blockName: {
+      initialValue: formData.blockName,
+      passesCondition: true,
+      valid: true,
+      value: formData.blockName
     }
-  } = useEditorConfigContext();
-  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.lexical_blocks.${formData.blockType}`;
-  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_blocks`;
-  const blocksField = richTextComponentMap.get(componentMapRenderedBlockPath)[0];
-  const clientBlock = blocksField.blocks.find(block => block.slug === formData.blockType);
-  // Field Schema
+  } : false);
+  // Initial state for newly created blocks
   useEffect(() => {
+    const abortController = new AbortController();
     const awaitInitialState = async () => {
-      const state = await getFormState({
-        apiRoute: config.routes.api,
-        body: {
-          id,
-          data: formData,
-          operation: 'update',
-          schemaPath: schemaFieldsPath
+      /*
+      * 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
         },
-        serverURL: config.serverURL
+        docPreferences: await getDocPreferences(),
+        globalSlug,
+        operation: 'update',
+        renderAllFields: true,
+        schemaPath: schemaFieldsPath,
+        signal: abortController.signal
       });
       if (state) {
         state.blockName = {
-          initialValue: '',
+          initialValue: formData.blockName,
           passesCondition: true,
           valid: true,
           value: formData.blockName
@@ -61,85 +103,244 @@ export const BlockComponent = props => {
         setInitialState(state);
       }
     };
-    if (formData) {
+    if (formData && !initialState) {
       void awaitInitialState();
     }
-  }, [config.routes.api, config.serverURL, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
-  ;
+    return () => {
+      abortAndIgnore(abortController);
+    };
+  }, [getFormState, schemaFieldsPath, id, formData, initialState, collectionSlug, globalSlug, getDocPreferences]);
+  const [isCollapsed, setIsCollapsed] = React.useState(initialLexicalFormState?.[formData.id]?.collapsed ?? false);
+  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}`;
+  const clientSchemaMap = featureClientSchemaMap['blocks'];
+  const blocksField = clientSchemaMap[componentMapRenderedBlockPath][0];
+  const clientBlock = blocksField.blocks[0];
+  const {
+    i18n,
+    t
+  } = useTranslation();
   const onChange = useCallback(async ({
-    formState: prevFormState
+    formState: prevFormState,
+    submit
   }) => {
-    const formState = await getFormState({
-      apiRoute: config.routes.api,
-      body: {
-        id,
-        formState: prevFormState,
-        operation: 'update',
-        schemaPath: schemaFieldsPath
+    abortAndIgnore(onChangeAbortControllerRef.current);
+    const controller = new AbortController();
+    onChangeAbortControllerRef.current = controller;
+    const {
+      state: newFormState
+    } = await getFormState({
+      id,
+      collectionSlug,
+      docPermissions: {
+        fields: true
       },
-      serverURL: config.serverURL
+      docPreferences: await getDocPreferences(),
+      formState: prevFormState,
+      globalSlug,
+      operation: 'update',
+      schemaPath: schemaFieldsPath,
+      signal: controller.signal
     });
-    formState.blockName = {
-      initialValue: '',
-      passesCondition: true,
-      valid: true,
-      value: formData.blockName
+    if (!newFormState) {
+      return prevFormState;
+    }
+    newFormState.blockName = prevFormState.blockName;
+    const newFormStateData = reduceFieldsToValues(removeEmptyArrayValues({
+      fields: deepCopyObjectSimpleWithoutReactComponents(newFormState)
+    }), true);
+    setTimeout(() => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (node && $isBlockNode(node)) {
+          const newData = {
+            ...newFormStateData,
+            blockType: formData.blockType
+          };
+          node.setFields(newData);
+        }
+      });
+    }, 0);
+    if (submit) {
+      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, formData.blockType, editor, nodeKey]);
+  useEffect(() => {
+    return () => {
+      abortAndIgnore(onChangeAbortControllerRef.current);
     };
-    return formState;
-  }, [config.routes.api, config.serverURL, id, schemaFieldsPath, formData.blockName]);
-  const {
-    i18n
-  } = useTranslation();
-  const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ');
+  }, []);
+  const removeBlock = useCallback(() => {
+    editor.update(() => {
+      $getNodeByKey(nodeKey)?.remove();
+    });
+  }, [editor, nodeKey]);
+  const CustomLabel = initialState?.['_components']?.customComponents?.BlockLabel;
+  const CustomBlock = initialState?.['_components']?.customComponents?.Block;
+  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'
+      });
+    });
+  }, [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id]);
+  const EditButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
+    buttonStyle: "icon-label",
+    className: `${baseClass}__editButton`,
+    disabled: readOnly,
+    el: "div",
+    icon: "edit",
+    onClick: () => {
+      toggleDrawer();
+    },
+    round: true,
+    size: "small",
+    tooltip: t('lexical:blocks:inlineBlocks:edit', {
+      label: blockDisplayName
+    })
+  }), [blockDisplayName, readOnly, t, toggleDrawer]);
+  const RemoveButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
+    buttonStyle: "icon-label",
+    className: `${baseClass}__removeButton`,
+    disabled: parentLexicalRichTextField?.admin?.readOnly || false,
+    icon: "x",
+    onClick: e => {
+      e.preventDefault();
+      removeBlock();
+    },
+    round: true,
+    tooltip: "Remove Block"
+  }), [parentLexicalRichTextField?.admin?.readOnly, removeBlock]);
+  const BlockCollapsible = useMemo(() => ({
+    children,
+    editButton,
+    errorCount: errorCount_0,
+    fieldHasErrors,
+    Label,
+    removeButton
+  }) => /*#__PURE__*/_jsx("div", {
+    className: baseClass + ' ' + baseClass + '-' + formData.blockType,
+    children: /*#__PURE__*/_jsx(Collapsible, {
+      className: [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`].join(' '),
+      collapsibleStyle: fieldHasErrors ? 'error' : 'default',
+      header: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__block-header`,
+        children: [Label ?? CustomLabel ? Label ?? CustomLabel : /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx(Pill, {
+            className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
+            pillStyle: "white",
+            children: blockDisplayName
+          }), /*#__PURE__*/_jsx(SectionTitle, {
+            path: "blockName",
+            readOnly: parentLexicalRichTextField?.admin?.readOnly || false
+          }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+            count: errorCount_0 ?? 0,
+            i18n: i18n,
+            withMessage: true
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          children: [CustomBlock && editButton !== false || !CustomBlock && editButton ? /*#__PURE__*/_jsx(EditButton, {}) : null, removeButton !== false && editor.isEditable() ? /*#__PURE__*/_jsx(RemoveButton, {}) : null]
+        })]
+      }),
+      isCollapsed: isCollapsed,
+      onToggle: incomingCollapsedState => {
+        onCollapsedChange(incomingCollapsedState);
+        setIsCollapsed(incomingCollapsedState);
+      },
+      children: children
+    }, 0)
+  }), [CustomBlock, CustomLabel, EditButton, RemoveButton, blockDisplayName, editor, formData.blockType, i18n, isCollapsed, onCollapsedChange, parentLexicalRichTextField?.admin?.readOnly]);
+  const BlockDrawer = useMemo(() => () => /*#__PURE__*/_jsx(EditDepthProvider, {
+    children: /*#__PURE__*/_jsx(Drawer, {
+      className: '',
+      slug: drawerSlug,
+      title: t(`lexical:blocks:inlineBlocks:${formData?.id ? '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: "" // See Blocks feature path for details as for why this is empty
+          ,
+
+          parentSchemaPath: schemaFieldsPath,
+          permissions: permissions,
+          readOnly: false
+        }), /*#__PURE__*/_jsx(FormSubmit, {
+          children: t('fields:saveChanges')
+        })]
+      }) : null
+    })
+  }), [initialState, drawerSlug, blockDisplayName, t, clientBlock.fields, schemaFieldsPath, permissions]);
   // Memoized Form JSX
-  const formContent = useMemo(() => {
-    return clientBlock && initialState !== false ? /*#__PURE__*/_jsx(Form, {
-      beforeSubmit: [onChange],
+  const Block = useMemo(() => {
+    if (!initialState) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Form, {
+      beforeSubmit: [async ({
+        formState
+      }) => {
+        return await onChange({
+          formState,
+          submit: true
+        });
+      }],
       fields: clientBlock.fields,
       initialState: initialState,
       onChange: [onChange],
+      onSubmit: formState_0 => {
+        // THis is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
+        const newData_0 = reduceFieldsToValues(formState_0);
+        newData_0.blockType = formData.blockType;
+        editor.update(() => {
+          const node_0 = $getNodeByKey(nodeKey);
+          if (node_0 && $isBlockNode(node_0)) {
+            node_0.setFields(newData_0);
+          }
+        });
+        toggleDrawer();
+      },
       submitted: submitted,
       uuid: uuid(),
       children: /*#__PURE__*/_jsx(BlockContent, {
         baseClass: baseClass,
-        clientBlock: clientBlock,
-        field: parentLexicalRichTextField,
-        formData: formData,
+        BlockDrawer: BlockDrawer,
+        Collapsible: BlockCollapsible,
+        CustomBlock: CustomBlock,
+        EditButton: EditButton,
+        errorCount: errorCount,
         formSchema: clientBlock.fields,
+        initialState: initialState,
         nodeKey: nodeKey,
-        path: `${path}.lexical_internal_feature.blocks.${formData.blockType}`,
-        schemaPath: schemaFieldsPath
+        RemoveButton: RemoveButton
       })
-    }) : /*#__PURE__*/_jsx(Collapsible, {
-      className: classNames,
-      collapsibleStyle: "default",
-      header: clientBlock?.admin?.components?.Label ? /*#__PURE__*/_jsx(RenderComponent, {
-        clientProps: {
-          blockKind: 'lexicalBlock',
-          formData
-        },
-        mappedComponent: clientBlock.admin.components.Label
-      }) : /*#__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: clientBlock && typeof clientBlock.labels.singular === 'string' ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock.slug
-          }), /*#__PURE__*/_jsx(SectionTitle, {
-            path: "blockName",
-            readOnly: parentLexicalRichTextField?.admin?.readOnly
-          })]
-        })
-      }),
-      children: /*#__PURE__*/_jsx(ShimmerEffect, {
-        height: "35vh"
-      })
-    }, 0);
-  }, [clientBlock, initialState, onChange, submitted, parentLexicalRichTextField, nodeKey, path, schemaFieldsPath, classNames, i18n]);
-  return /*#__PURE__*/_jsx("div", {
-    className: baseClass + ' ' + baseClass + '-' + formData.blockType,
-    children: formContent
-  });
+    });
+  }, [BlockCollapsible, BlockDrawer, CustomBlock, RemoveButton, EditButton, 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]);
+  return Block;
 };
 //# sourceMappingURL=index.js.map