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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Collapsible","Form","Pill","RenderComponent","SectionTitle","ShimmerEffect","useConfig","useDocumentInfo","useFieldProps","useFormSubmitted","useTranslation","React","useCallback","useEffect","useMemo","useState","baseClass","getTranslation","getFormState","v4","uuid","useEditorConfigContext","BlockContent","BlockComponent","props","formData","nodeKey","config","submitted","id","path","schemaPath","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","schemaFieldsPath","blockType","componentMapRenderedBlockPath","blocksField","get","clientBlock","blocks","find","block","slug","awaitInitialState","state","apiRoute","routes","api","body","data","operation","serverURL","blockName","initialValue","passesCondition","valid","value","onChange","formState","prevFormState","i18n","classNames","filter","Boolean","join","formContent","_jsx","beforeSubmit","fields","formSchema","className","collapsibleStyle","header","admin","components","Label","clientProps","blockKind","mappedComponent","_jsxs","pillStyle","labels","singular","readOnly","height"],"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Collapsible,\n  Form,\n  Pill,\n  RenderComponent,\n  SectionTitle,\n  ShimmerEffect,\n  useConfig,\n  useDocumentInfo,\n  useFieldProps,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nconst baseClass = 'lexical-block'\nimport type { BlockFieldClient, FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { v4 as uuid } from 'uuid'\n\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\n\ntype Props = {\n  readonly children?: React.ReactNode\n  readonly formData: BlockFields\n  readonly nodeKey?: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { formData, nodeKey } = props\n  const { config } = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { path, schemaPath } = useFieldProps()\n  const { field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.lexical_blocks.${formData.blockType}`\n\n  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_blocks`\n  const blocksField: BlockFieldClient = richTextComponentMap.get(componentMapRenderedBlockPath)[0]\n\n  const clientBlock = blocksField.blocks.find((block) => block.slug === formData.blockType)\n\n  // Field Schema\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: formData,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      if (state) {\n        state.blockName = {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        }\n\n        setInitialState(state)\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const formState = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      formState.blockName = {\n        initialValue: '',\n        passesCondition: true,\n        valid: true,\n        value: formData.blockName,\n      }\n\n      return formState\n    },\n\n    [config.routes.api, config.serverURL, id, schemaFieldsPath, formData.blockName],\n  )\n  const { i18n } = useTranslation()\n\n  const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ')\n\n  // Memoized Form JSX\n  const formContent = useMemo(() => {\n    return clientBlock && initialState !== false ? (\n      <Form\n        beforeSubmit={[onChange]}\n        fields={clientBlock.fields}\n        initialState={initialState}\n        onChange={[onChange]}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          clientBlock={clientBlock}\n          field={parentLexicalRichTextField}\n          formData={formData}\n          formSchema={clientBlock.fields}\n          nodeKey={nodeKey}\n          path={`${path}.lexical_internal_feature.blocks.${formData.blockType}`}\n          schemaPath={schemaFieldsPath}\n        />\n      </Form>\n    ) : (\n      <Collapsible\n        className={classNames}\n        collapsibleStyle=\"default\"\n        header={\n          clientBlock?.admin?.components?.Label ? (\n            <RenderComponent\n              clientProps={{ blockKind: 'lexicalBlock', formData }}\n              mappedComponent={clientBlock.admin.components.Label}\n            />\n          ) : (\n            <div className={`${baseClass}__block-header`}>\n              <div>\n                <Pill\n                  className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n                  pillStyle=\"white\"\n                >\n                  {clientBlock && typeof clientBlock.labels.singular === 'string'\n                    ? getTranslation(clientBlock.labels.singular, i18n)\n                    : clientBlock.slug}\n                </Pill>\n                <SectionTitle\n                  path=\"blockName\"\n                  readOnly={parentLexicalRichTextField?.admin?.readOnly}\n                />\n              </div>\n            </div>\n          )\n        }\n        key={0}\n      >\n        <ShimmerEffect height=\"35vh\" />\n      </Collapsible>\n    )\n  }, [\n    clientBlock,\n    initialState,\n    onChange,\n    submitted,\n    parentLexicalRichTextField,\n    nodeKey,\n    path,\n    schemaFieldsPath,\n    classNames,\n    i18n,\n  ])\n\n  return <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>{formContent}</div>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Button","Collapsible","Drawer","EditDepthProvider","ErrorPill","Form","formatDrawerSlug","FormSubmit","Pill","RenderFields","SectionTitle","useDocumentInfo","useEditDepth","useFormSubmitted","useServerFunctions","useTranslation","abortAndIgnore","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","React","useCallback","useEffect","useMemo","useRef","baseClass","useLexicalComposerContext","getTranslation","$getNodeByKey","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isBlockNode","BlockContent","removeEmptyArrayValues","BlockComponent","props","formData","nodeKey","submitted","id","collectionSlug","globalSlug","fieldProps","featureClientSchemaMap","field","parentLexicalRichTextField","initialLexicalFormState","permissions","readOnly","schemaPath","uuidFromContext","onChangeAbortControllerRef","AbortController","editDepth","errorCount","setErrorCount","useState","drawerSlug","slug","depth","toggleDrawer","getDocPreferences","setDocFieldPreferences","editor","getFormState","schemaFieldsPath","blockType","initialState","setInitialState","formState","blockName","initialValue","passesCondition","valid","value","abortController","awaitInitialState","state","data","docPermissions","fields","docPreferences","operation","renderAllFields","signal","isCollapsed","setIsCollapsed","collapsed","componentMapRenderedBlockPath","clientSchemaMap","blocksField","clientBlock","blocks","i18n","t","onChange","prevFormState","submit","current","controller","newFormState","newFormStateData","setTimeout","update","node","newData","setFields","rowErrorCount","formField","Object","values","removeBlock","remove","CustomLabel","customComponents","BlockLabel","CustomBlock","Block","blockDisplayName","labels","singular","onCollapsedChange","changedCollapsed","then","currentDocPreferences","currentFieldPreferences","name","collapsedArray","newCollapsed","length","includes","push","splice","indexOf","hello","EditButton","_jsx","buttonStyle","className","disabled","el","icon","onClick","round","size","tooltip","label","RemoveButton","admin","e","preventDefault","BlockCollapsible","children","editButton","fieldHasErrors","Label","removeButton","join","collapsibleStyle","header","_jsxs","pillStyle","path","count","withMessage","isEditable","onToggle","incomingCollapsedState","BlockDrawer","title","_Fragment","forceRender","parentIndexPath","parentPath","parentSchemaPath","beforeSubmit","onSubmit","formSchema"],"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Button,\n  Collapsible,\n  Drawer,\n  EditDepthProvider,\n  ErrorPill,\n  Form,\n  formatDrawerSlug,\n  FormSubmit,\n  Pill,\n  RenderFields,\n  SectionTitle,\n  useDocumentInfo,\n  useEditDepth,\n  useFormSubmitted,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\n\nconst baseClass = 'lexical-block'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { getTranslation } from '@payloadcms/translations'\nimport { $getNodeByKey } from 'lexical'\nimport { type BlocksFieldClient, type CollapsedPreferences, type FormState } from 'payload'\nimport { v4 as uuid } from 'uuid'\n\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isBlockNode } from '../nodes/BlocksNode.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\n\ntype Props = {\n  readonly children?: React.ReactNode\n  readonly formData: BlockFields\n  readonly nodeKey: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { formData, nodeKey } = props\n  const submitted = useFormSubmitted()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n  const {\n    fieldProps: {\n      featureClientSchemaMap,\n      field: parentLexicalRichTextField,\n      initialLexicalFormState,\n      permissions,\n      readOnly,\n      schemaPath,\n    },\n    uuid: uuidFromContext,\n  } = useEditorConfigContext()\n  const onChangeAbortControllerRef = useRef(new AbortController())\n  const editDepth = useEditDepth()\n  const [errorCount, setErrorCount] = React.useState(0)\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug, true)\n\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  const [editor] = useLexicalComposerContext()\n\n  const { getFormState } = useServerFunctions()\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}.fields`\n\n  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(\n    initialLexicalFormState?.[formData.id]?.formState\n      ? {\n          ...initialLexicalFormState?.[formData.id]?.formState,\n          blockName: {\n            initialValue: formData.blockName,\n            passesCondition: true,\n            valid: true,\n            value: formData.blockName,\n          },\n        }\n      : false,\n  )\n\n  // Initial state for newly created blocks\n  useEffect(() => {\n    const abortController = new AbortController()\n\n    const awaitInitialState = async () => {\n      /*\n       * 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,\n       * 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\n       * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.\n       */\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        data: formData,\n        docPermissions: { fields: true },\n        docPreferences: await getDocPreferences(),\n        globalSlug,\n        operation: 'update',\n        renderAllFields: true,\n        schemaPath: schemaFieldsPath,\n        signal: abortController.signal,\n      })\n\n      if (state) {\n        state.blockName = {\n          initialValue: formData.blockName,\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        }\n\n        setInitialState(state)\n      }\n    }\n\n    if (formData && !initialState) {\n      void awaitInitialState()\n    }\n\n    return () => {\n      abortAndIgnore(abortController)\n    }\n  }, [\n    getFormState,\n    schemaFieldsPath,\n    id,\n    formData,\n    initialState,\n    collectionSlug,\n    globalSlug,\n    getDocPreferences,\n  ])\n\n  const [isCollapsed, setIsCollapsed] = React.useState<boolean>(\n    initialLexicalFormState?.[formData.id]?.collapsed ?? false,\n  )\n\n  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}`\n\n  const clientSchemaMap = featureClientSchemaMap['blocks']\n\n  const blocksField: BlocksFieldClient = clientSchemaMap[\n    componentMapRenderedBlockPath\n  ][0] as BlocksFieldClient\n\n  const clientBlock = blocksField.blocks[0]\n\n  const { i18n, t } = useTranslation<object, string>()\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState, submit }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state: newFormState } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: await getDocPreferences(),\n        formState: prevFormState,\n        globalSlug,\n        operation: 'update',\n        schemaPath: schemaFieldsPath,\n        signal: controller.signal,\n      })\n\n      if (!newFormState) {\n        return prevFormState\n      }\n\n      newFormState.blockName = prevFormState.blockName\n\n      const newFormStateData: BlockFields = reduceFieldsToValues(\n        removeEmptyArrayValues({\n          fields: deepCopyObjectSimpleWithoutReactComponents(newFormState),\n        }),\n        true,\n      ) as BlockFields\n\n      setTimeout(() => {\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isBlockNode(node)) {\n            const newData = {\n              ...newFormStateData,\n              blockType: formData.blockType,\n            }\n            node.setFields(newData)\n          }\n        })\n      }, 0)\n\n      if (submit) {\n        let rowErrorCount = 0\n        for (const formField of Object.values(newFormState)) {\n          if (formField?.valid === false) {\n            rowErrorCount++\n          }\n        }\n        setErrorCount(rowErrorCount)\n      }\n\n      return newFormState\n    },\n\n    [\n      getFormState,\n      id,\n      collectionSlug,\n      getDocPreferences,\n      globalSlug,\n      schemaFieldsPath,\n      formData.blockType,\n      editor,\n      nodeKey,\n    ],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  const removeBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const CustomLabel = initialState?.['_components']?.customComponents?.BlockLabel\n  const CustomBlock = initialState?.['_components']?.customComponents?.Block\n\n  const blockDisplayName = clientBlock?.labels?.singular\n    ? getTranslation(clientBlock.labels.singular, i18n)\n    : clientBlock?.slug\n\n  const onCollapsedChange = useCallback(\n    (changedCollapsed: boolean) => {\n      void getDocPreferences().then((currentDocPreferences) => {\n        const currentFieldPreferences =\n          currentDocPreferences?.fields[parentLexicalRichTextField.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(parentLexicalRichTextField.name, {\n          collapsed: newCollapsed,\n          hello: 'hi',\n        })\n      })\n    },\n    [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id],\n  )\n\n  const EditButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__editButton`}\n        disabled={readOnly}\n        el=\"div\"\n        icon=\"edit\"\n        onClick={() => {\n          toggleDrawer()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })}\n      />\n    ),\n    [blockDisplayName, readOnly, t, toggleDrawer],\n  )\n\n  const RemoveButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__removeButton`}\n        disabled={parentLexicalRichTextField?.admin?.readOnly || false}\n        icon=\"x\"\n        onClick={(e) => {\n          e.preventDefault()\n          removeBlock()\n        }}\n        round\n        tooltip=\"Remove Block\"\n      />\n    ),\n    [parentLexicalRichTextField?.admin?.readOnly, removeBlock],\n  )\n\n  const BlockCollapsible = useMemo(\n    () =>\n      ({\n        children,\n        editButton,\n        errorCount,\n        fieldHasErrors,\n        Label,\n        removeButton,\n      }: {\n        children?: React.ReactNode\n        editButton?: boolean\n        errorCount?: number\n        fieldHasErrors?: boolean\n        /**\n         * Override the default label with a custom label\n         */\n        Label?: React.ReactNode\n        removeButton?: boolean\n      }) => (\n        <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>\n          <Collapsible\n            className={[\n              `${baseClass}__row`,\n              fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n            ].join(' ')}\n            collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n            header={\n              <div className={`${baseClass}__block-header`}>\n                {(Label ?? CustomLabel) ? (\n                  (Label ?? CustomLabel)\n                ) : (\n                  <div>\n                    <Pill\n                      className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n                      pillStyle=\"white\"\n                    >\n                      {blockDisplayName}\n                    </Pill>\n                    <SectionTitle\n                      path=\"blockName\"\n                      readOnly={parentLexicalRichTextField?.admin?.readOnly || false}\n                    />\n                    {fieldHasErrors && (\n                      <ErrorPill count={errorCount ?? 0} i18n={i18n} withMessage />\n                    )}\n                  </div>\n                )}\n\n                <div>\n                  {(CustomBlock && editButton !== false) || (!CustomBlock && editButton) ? (\n                    <EditButton />\n                  ) : null}\n                  {removeButton !== false && editor.isEditable() ? <RemoveButton /> : null}\n                </div>\n              </div>\n            }\n            isCollapsed={isCollapsed}\n            key={0}\n            onToggle={(incomingCollapsedState) => {\n              onCollapsedChange(incomingCollapsedState)\n              setIsCollapsed(incomingCollapsedState)\n            }}\n          >\n            {children}\n          </Collapsible>\n        </div>\n      ),\n    [\n      CustomBlock,\n      CustomLabel,\n      EditButton,\n      RemoveButton,\n      blockDisplayName,\n      editor,\n      formData.blockType,\n      i18n,\n      isCollapsed,\n      onCollapsedChange,\n      parentLexicalRichTextField?.admin?.readOnly,\n    ],\n  )\n\n  const BlockDrawer = useMemo(\n    () => () => (\n      <EditDepthProvider>\n        <Drawer\n          className={''}\n          slug={drawerSlug}\n          title={t(`lexical:blocks:inlineBlocks:${formData?.id ? 'edit' : 'create'}`, {\n            label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label'),\n          })}\n        >\n          {initialState ? (\n            <>\n              <RenderFields\n                fields={clientBlock.fields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\" // See Blocks feature path for details as for why this is empty\n                parentSchemaPath={schemaFieldsPath}\n                permissions={permissions}\n                readOnly={false}\n              />\n              <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n            </>\n          ) : null}\n        </Drawer>\n      </EditDepthProvider>\n    ),\n    [\n      initialState,\n      drawerSlug,\n      blockDisplayName,\n      t,\n      clientBlock.fields,\n      schemaFieldsPath,\n      permissions,\n      // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n    ],\n  )\n\n  // Memoized Form JSX\n  const Block = useMemo(() => {\n    if (!initialState) {\n      return null\n    }\n    return (\n      <Form\n        beforeSubmit={[\n          async ({ formState }) => {\n            return await onChange({ formState, submit: true })\n          },\n        ]}\n        fields={clientBlock.fields}\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={(formState) => {\n          // THis is only called when form is submitted from drawer - usually only the case if the block has a custom Block component\n          const newData: any = reduceFieldsToValues(formState)\n          newData.blockType = formData.blockType\n          editor.update(() => {\n            const node = $getNodeByKey(nodeKey)\n            if (node && $isBlockNode(node)) {\n              node.setFields(newData)\n            }\n          })\n          toggleDrawer()\n        }}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          BlockDrawer={BlockDrawer}\n          Collapsible={BlockCollapsible}\n          CustomBlock={CustomBlock}\n          EditButton={EditButton}\n          errorCount={errorCount}\n          formSchema={clientBlock.fields}\n          initialState={initialState}\n          nodeKey={nodeKey}\n          RemoveButton={RemoveButton}\n        />\n      </Form>\n    )\n  }, [\n    BlockCollapsible,\n    BlockDrawer,\n    CustomBlock,\n    RemoveButton,\n    EditButton,\n    editor,\n    errorCount,\n    toggleDrawer,\n    clientBlock.fields,\n    // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n    initialState,\n    nodeKey,\n    onChange,\n    submitted,\n  ])\n\n  return Block\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const InlineBlockContainer: ({ children }: {
+    children: any;
+}) => React.JSX.Element | null;
+//# sourceMappingURL=InlineBlockContainer.d.ts.map

package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.d.ts.map

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

package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js

@@ -0,0 +1,28 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useInlineBlockComponentContext } from '../index.js';
+export const InlineBlockContainer = t0 => {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const {
+    InlineBlockContainer
+  } = useInlineBlockComponentContext();
+  let t1;
+  if ($[0] !== InlineBlockContainer || $[1] !== children) {
+    t1 = InlineBlockContainer ? _jsx(InlineBlockContainer, {
+      children
+    }) : null;
+    $[0] = InlineBlockContainer;
+    $[1] = children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+//# sourceMappingURL=InlineBlockContainer.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBlockContainer.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockContainer","t0","$","children","t1","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockContainer.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockContainer = ({ children }) => {\n  const { InlineBlockContainer } = useInlineBlockComponentContext()\n\n  return InlineBlockContainer ? <InlineBlockContainer>{children}</InlineBlockContainer> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM;EAAA,IAAAF,EAAY;EAC/C;IAAAD;EAAA,IAAiCD,8BAAA;EAAA,IAAAK,EAAA;EAAA,IAAAF,CAAA,QAAAF,oBAAA,IAAAE,CAAA,QAAAC,QAAA;IAE1BC,EAAA,GAAAJ,oBAAA,GAAuBK,IAAA,CAACL,oBAAA;MAAAG;IAAA,C,QAAyD;IAAAD,CAAA,MAAAF,oBAAA;IAAAE,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAjFE,EAAiF;AAAA,CAC1F","ignoreList":[]}

package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.d.ts

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

package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.d.ts.map

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

package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.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 { useInlineBlockComponentContext } from '../index.js';
+export const InlineBlockEditButton = () => {
+  const $ = _c(2);
+  const {
+    EditButton
+  } = useInlineBlockComponentContext();
+  let t0;
+  if ($[0] !== EditButton) {
+    t0 = EditButton ? _jsx(EditButton, {}) : null;
+    $[0] = EditButton;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=InlineBlockEditButton.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBlockEditButton.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockEditButton","$","EditButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockEditButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockEditButton = () => {\n  const { EditButton } = useInlineBlockComponentContext()\n\n  return EditButton ? <EditButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,qBAAA,GAAwBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EACnC;IAAAK;EAAA,IAAuBH,8BAAA;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/componentInline/components/InlineBlockLabel.d.ts

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

package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.d.ts.map

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

package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.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 { useInlineBlockComponentContext } from '../index.js';
+export const InlineBlockLabel = () => {
+  const $ = _c(2);
+  const {
+    Label
+  } = useInlineBlockComponentContext();
+  let t0;
+  if ($[0] !== Label) {
+    t0 = Label ? _jsx(Label, {}) : null;
+    $[0] = Label;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=InlineBlockLabel.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBlockLabel.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockLabel","$","Label","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockLabel.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockLabel = () => {\n  const { Label } = useInlineBlockComponentContext()\n\n  return Label ? <Label /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,gBAAA,GAAmBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAC9B;IAAAK;EAAA,IAAkBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,KAAA;IAEXC,EAAA,GAAAD,KAAA,GAAQE,IAAA,CAACF,KAAA,YAAW;IAAAD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAApBE,EAAoB;AAAA,CAC7B","ignoreList":[]}

package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.d.ts

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

package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.d.ts.map

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

package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.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 { useInlineBlockComponentContext } from '../index.js';
+export const InlineBlockRemoveButton = () => {
+  const $ = _c(2);
+  const {
+    RemoveButton
+  } = useInlineBlockComponentContext();
+  let t0;
+  if ($[0] !== RemoveButton) {
+    t0 = RemoveButton ? _jsx(RemoveButton, {}) : null;
+    $[0] = RemoveButton;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=InlineBlockRemoveButton.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBlockRemoveButton.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockRemoveButton","$","RemoveButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockRemoveButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockRemoveButton = () => {\n  const { RemoveButton } = useInlineBlockComponentContext()\n\n  return RemoveButton ? <RemoveButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,uBAAA,GAA0BA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EACrC;IAAAK;EAAA,IAAyBH,8BAAA;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/componentInline/index.d.ts

@@ -1,10 +1,22 @@
 import React from 'react';
-import type { InlineBlockFields } from '../nodes/InlineBlocksNode.js';
+import type { FormState } from 'payload';
 import './index.scss';
+import type { InlineBlockFields } from '../nodes/InlineBlocksNode.js';
 type Props = {
     readonly formData: InlineBlockFields;
-    readonly nodeKey?: string;
+    readonly nodeKey: string;
+};
+type InlineBlockComponentContextType = {
+    EditButton?: React.FC;
+    initialState: false | FormState | undefined;
+    InlineBlockContainer?: React.FC<{
+        children: React.ReactNode;
+    }>;
+    Label?: React.FC;
+    nodeKey?: string;
+    RemoveButton?: React.FC;
 };
+export declare const useInlineBlockComponentContext: () => InlineBlockComponentContextType;
 export declare const InlineBlockComponent: React.FC<Props>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/componentInline/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAoB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAKrE,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+HhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/componentInline/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAA;AAGrF,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,SAAS,CAAA;AAgC3D,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAMrE,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,+BAA+B,GAAG;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACrB,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAA;IAC3C,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAA;IAC9D,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;CACxB,CAAA;AAMD,eAAO,MAAM,8BAA8B,uCAAsD,CAAA;AAEjG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiVhD,CAAA"}

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

@@ -1,17 +1,26 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react';
 const baseClass = 'inline-block';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@lexical/utils';
 import { getTranslation } from '@payloadcms/translations';
-import { Button, RenderComponent, useTranslation } from '@payloadcms/ui';
+import { Button, Drawer, EditDepthProvider, Form, formatDrawerSlug, FormSubmit, RenderFields, ShimmerEffect, useDocumentInfo, useEditDepth, useServerFunctions, useTranslation } from '@payloadcms/ui';
+import { abortAndIgnore } from '@payloadcms/ui/shared';
 import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
+import { reduceFieldsToValues } from 'payload/shared';
+import { v4 as uuid } from 'uuid';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
 import { $isInlineBlockNode } from '../nodes/InlineBlocksNode.js';
-import { OPEN_INLINE_BLOCK_DRAWER_COMMAND } from '../plugin/commands.js';
+const InlineBlockComponentContext = /*#__PURE__*/createContext({
+  initialState: false
+});
+export const useInlineBlockComponentContext = () => {
+  return React.useContext(InlineBlockComponentContext);
+};
 export const InlineBlockComponent = props => {
   const {
     formData,
@@ -23,34 +32,58 @@ export const InlineBlockComponent = props => {
     t
   } = useTranslation();
   const {
-    field
+    fieldProps: {
+      featureClientSchemaMap,
+      initialLexicalFormState,
+      permissions,
+      readOnly,
+      schemaPath
+    },
+    uuid: uuidFromContext
   } = useEditorConfigContext();
+  const {
+    getFormState
+  } = useServerFunctions();
+  const editDepth = useEditDepth();
+  const [initialState, setInitialState] = React.useState(initialLexicalFormState?.[formData.id]?.formState);
+  const drawerSlug = formatDrawerSlug({
+    slug: `lexical-inlineBlocks-create-` + uuidFromContext,
+    depth: editDepth
+  });
+  const {
+    toggleDrawer
+  } = useLexicalDrawer(drawerSlug, true);
   const inlineBlockElemElemRef = useRef(null);
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
   const {
-    field: {
-      richTextComponentMap
-    }
-  } = useEditorConfigContext();
-  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_inline_blocks`;
-  const blocksField = richTextComponentMap.get(componentMapRenderedBlockPath)[0];
-  const clientBlock = blocksField.blocks.find(block => block.slug === formData.blockType);
+    id,
+    collectionSlug,
+    getDocPreferences,
+    globalSlug
+  } = useDocumentInfo();
+  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.${formData.blockType}`;
+  const clientSchemaMap = featureClientSchemaMap['blocks'];
+  const blocksField = clientSchemaMap[componentMapRenderedBlockPath][0];
+  const clientBlock = blocksField.blocks[0];
   const removeInlineBlock = useCallback(() => {
     editor.update(() => {
-      $getNodeByKey(nodeKey).remove();
+      $getNodeByKey(nodeKey)?.remove();
     });
   }, [editor, nodeKey]);
   const $onDelete = useCallback(event => {
-    if (isSelected && $isNodeSelection($getSelection())) {
+    const deleteSelection = $getSelection();
+    if (isSelected && $isNodeSelection(deleteSelection)) {
       event.preventDefault();
-      const node = $getNodeByKey(nodeKey);
-      if ($isInlineBlockNode(node)) {
-        node.remove();
-        return true;
-      }
+      editor.update(() => {
+        deleteSelection.getNodes().forEach(node => {
+          if ($isInlineBlockNode(node)) {
+            node.remove();
+          }
+        });
+      });
     }
     return false;
-  }, [isSelected, nodeKey]);
+  }, [editor, isSelected]);
   const onClick = useCallback(payload => {
     const event_0 = payload;
     // Check if inlineBlockElemElemRef.target or anything WITHIN inlineBlockElemElemRef.target was clicked
@@ -70,52 +103,193 @@ export const InlineBlockComponent = props => {
   useEffect(() => {
     return mergeRegister(editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW));
   }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected, onClick]);
-  const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock.slug;
-  return /*#__PURE__*/_jsxs("div", {
+  const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock?.slug;
+  const onChangeAbortControllerRef = useRef(new AbortController());
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.${clientBlock?.slug}.fields`;
+  // 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(),
+        globalSlug,
+        operation: 'update',
+        renderAllFields: true,
+        schemaPath: schemaFieldsPath,
+        signal: abortController.signal
+      });
+      if (state) {
+        setInitialState(state);
+      }
+    };
+    if (formData && !initialState) {
+      void awaitInitialState();
+    }
+    return () => {
+      abortAndIgnore(abortController);
+    };
+  }, [getFormState, schemaFieldsPath, id, formData, initialState, collectionSlug, globalSlug, getDocPreferences]);
+  /**
+  * HANDLE ONCHANGE
+  */
+  const onChange = useCallback(async ({
+    formState: prevFormState
+  }) => {
+    abortAndIgnore(onChangeAbortControllerRef.current);
+    const controller = new AbortController();
+    onChangeAbortControllerRef.current = controller;
+    const {
+      state: state_0
+    } = await getFormState({
+      id,
+      collectionSlug,
+      docPermissions: {
+        fields: true
+      },
+      docPreferences: await getDocPreferences(),
+      formState: prevFormState,
+      globalSlug,
+      operation: 'update',
+      schemaPath: schemaFieldsPath,
+      signal: controller.signal
+    });
+    if (!state_0) {
+      return prevFormState;
+    }
+    return state_0;
+  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath]);
+  // cleanup effect
+  useEffect(() => {
+    return () => {
+      abortAndIgnore(onChangeAbortControllerRef.current);
+    };
+  }, []);
+  /**
+  * HANDLE FORM SUBMIT
+  */
+  const onFormSubmit = useCallback(formState => {
+    const newData = reduceFieldsToValues(formState);
+    newData.blockType = formData.blockType;
+    editor.update(() => {
+      const node_0 = $getNodeByKey(nodeKey);
+      if (node_0 && $isInlineBlockNode(node_0)) {
+        node_0.setFields(newData);
+      }
+    });
+  }, [editor, nodeKey, formData]);
+  const CustomLabel = initialState?.['_components']?.customComponents?.BlockLabel;
+  const CustomBlock = initialState?.['_components']?.customComponents?.Block;
+  const RemoveButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
+    buttonStyle: "icon-label",
+    className: `${baseClass}__removeButton`,
+    disabled: readOnly,
+    icon: "x",
+    onClick: e => {
+      e.preventDefault();
+      removeInlineBlock();
+    },
+    round: true,
+    size: "small",
+    tooltip: t('lexical:blocks:inlineBlocks:remove', {
+      label: blockDisplayName
+    })
+  }), [blockDisplayName, readOnly, removeInlineBlock, t]);
+  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 InlineBlockContainer = useMemo(() => ({
+    children
+  }) => /*#__PURE__*/_jsx("div", {
     className: [baseClass, baseClass + '-' + formData.blockType, isSelected && `${baseClass}--selected`].filter(Boolean).join(' '),
     ref: inlineBlockElemElemRef,
-    children: [clientBlock?.admin?.components?.Label ? /*#__PURE__*/_jsx(RenderComponent, {
-      clientProps: {
-        blockKind: 'lexicalInlineBlock',
-        formData
+    children: children
+  }), [formData.blockType, isSelected]);
+  const Label = useMemo(() => {
+    if (CustomLabel) {
+      return () => CustomLabel;
+    } else {
+      return () => /*#__PURE__*/_jsx("div", {
+        children: getTranslation(clientBlock.labels.singular, i18n)
+      });
+    }
+  }, [CustomLabel, clientBlock.labels, i18n]);
+  return /*#__PURE__*/_jsxs(Form, {
+    beforeSubmit: [onChange],
+    disableValidationOnSubmit: true,
+    fields: clientBlock.fields,
+    initialState: initialState || {},
+    onChange: [onChange],
+    onSubmit: formState_0 => {
+      onFormSubmit(formState_0);
+      toggleDrawer();
+    },
+    uuid: uuid(),
+    children: [/*#__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
+      })
+    }), CustomBlock ? /*#__PURE__*/_jsx(InlineBlockComponentContext.Provider, {
+      value: {
+        EditButton,
+        initialState,
+        InlineBlockContainer,
+        Label,
+        nodeKey,
+        RemoveButton
       },
-      mappedComponent: clientBlock.admin.components.Label
-    }) : /*#__PURE__*/_jsx("div", {
-      children: getTranslation(clientBlock.labels?.singular, i18n)
-    }), editor.isEditable() && /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__actions`,
-      children: [/*#__PURE__*/_jsx(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__editButton`,
-        disabled: field?.admin?.readOnly,
-        el: "div",
-        icon: "edit",
-        onClick: () => {
-          editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {
-            fields: formData,
-            nodeKey
-          });
-        },
-        round: true,
-        size: "small",
-        tooltip: t('lexical:blocks:inlineBlocks:edit', {
-          label: blockDisplayName
-        })
-      }), /*#__PURE__*/_jsx(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__removeButton`,
-        disabled: field?.admin?.readOnly,
-        icon: "x",
-        onClick: e => {
-          e.preventDefault();
-          removeInlineBlock();
-        },
-        round: true,
-        size: "small",
-        tooltip: t('lexical:blocks:inlineBlocks:remove', {
-          label: blockDisplayName
-        })
-      })]
+      children: CustomBlock
+    }) : /*#__PURE__*/_jsxs(InlineBlockContainer, {
+      children: [initialState ? /*#__PURE__*/_jsx(Label, {}) : /*#__PURE__*/_jsx(ShimmerEffect, {
+        height: "15px",
+        width: "40px"
+      }), editor.isEditable() ? /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [/*#__PURE__*/_jsx(EditButton, {}), /*#__PURE__*/_jsx(RemoveButton, {})]
+      }) : null]
     })]
   });
 };