@payloadcms/richtext-lexical 3.59.1 → 3.60.0-canary.1

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

@@ -1,19 +1,56 @@
+import type { CollapsibleProps } from '@payloadcms/ui/elements/Collapsible';
 import type { ClientField, FormState } from 'payload';
 import React from 'react';
-type Props = {
+export type BlockCollapsibleProps = {
+    /**
+     * Replace the top-right portion of the header that renders the Edit and Remove buttons with custom content.
+     * If this property is provided, the `removeButton` and `editButton` properties are ignored.
+     */
+    Actions?: React.ReactNode;
+    children?: React.ReactNode;
+    /**
+     * Additional className to the collapsible wrapper
+     */
+    className?: string;
+    /**
+     * Props to pass to the underlying Collapsible component. You could use this to override the `Header` entirely, for example.
+     */
+    collapsibleProps?: Partial<CollapsibleProps>;
+    /**
+     * Whether to disable rendering the block name field in the header Label
+     * @default false
+     */
+    disableBlockName?: boolean;
+    /**
+     * Whether to show the Edit button
+     * If `Actions` is provided, this property is ignored.
+     * @default true
+     */
+    editButton?: boolean;
+    /**
+     * Replace the default Label component with a custom Label
+     */
+    Label?: React.ReactNode;
+    /**
+     * Replace the default Pill component component that's rendered within the default Label component with a custom Pill.
+     * This property has no effect if you provide a custom Label component via the `Label` property.
+     */
+    Pill?: React.ReactNode;
+    /**
+     * Whether to show the Remove button
+     * If `Actions` is provided, this property is ignored.
+     * @default true
+     */
+    removeButton?: boolean;
+};
+export type BlockCollapsibleWithErrorProps = {
+    errorCount?: number;
+    fieldHasErrors?: boolean;
+} & BlockCollapsibleProps;
+export type BlockContentProps = {
     baseClass: string;
     BlockDrawer: React.FC;
-    Collapsible: React.FC<{
-        children?: React.ReactNode;
-        editButton?: boolean;
-        errorCount?: number;
-        fieldHasErrors?: boolean;
-        /**
-         * Override the default label with a custom label
-         */
-        Label?: React.ReactNode;
-        removeButton?: boolean;
-    }>;
+    Collapsible: React.FC<BlockCollapsibleWithErrorProps>;
     CustomBlock: React.ReactNode;
     EditButton: React.FC;
     errorCount: number;
@@ -23,26 +60,14 @@ type Props = {
     RemoveButton: React.FC;
 };
 type BlockComponentContextType = {
-    BlockCollapsible?: React.FC<{
-        children?: React.ReactNode;
-        editButton?: boolean;
-        /**
-         * Override the default label with a custom label
-         */
-        Label?: React.ReactNode;
-        removeButton?: boolean;
-    }>;
-    EditButton?: React.FC;
-    initialState: false | FormState | undefined;
-    nodeKey?: string;
-    RemoveButton?: React.FC;
-};
+    BlockCollapsible: React.FC<BlockCollapsibleProps>;
+} & Omit<BlockContentProps, 'Collapsible'>;
 export declare const useBlockComponentContext: () => BlockComponentContextType;
 /**
  * The actual content of the Block. This should be INSIDE a Form component,
  * scoped to the block. All format operations in here are thus scoped to the block's form, and
  * not the whole document.
  */
-export declare const BlockContent: React.FC<Props>;
+export declare const BlockContent: React.FC<BlockContentProps>;
 export {};
 //# sourceMappingURL=BlockContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlockContent.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/BlockContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGrD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,KAAK,CAAC,EAAE,CAAA;IACrB,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,cAAc,CAAC,EAAE,OAAO,CAAA;QACxB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACvB,YAAY,CAAC,EAAE,OAAO,CAAA;KACvB,CAAC,CAAA;IACF,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,EAAE,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,WAAW,EAAE,CAAA;IACzB,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAA;IAE3C,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,KAAK,CAAC,EAAE,CAAA;CACvB,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACvB,YAAY,CAAC,EAAE,OAAO,CAAA;KACvB,CAAC,CAAA;IACF,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACrB,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAA;IAE3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;CACxB,CAAA;AAMD,eAAO,MAAM,wBAAwB,iCAAyC,CAAA;AAE9E;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmExC,CAAA"}
+{"version":3,"file":"BlockContent.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/BlockContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIrD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAC5C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,qBAAqB,CAAA;AAEzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,KAAK,CAAC,EAAE,CAAA;IACrB,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAAC,CAAA;IACrD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,EAAE,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,WAAW,EAAE,CAAA;IACzB,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAA;IAE3C,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,KAAK,CAAC,EAAE,CAAA;CACvB,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAA;CAClD,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAA;AAe1C,eAAO,MAAM,wBAAwB,iCAAyC,CAAA;AAE9E;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6CpD,CAAA"}

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

@@ -2,10 +2,20 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { RenderFields, useFormSubmitted } from '@payloadcms/ui';
 import React, { createContext, useMemo } from 'react';
 const BlockComponentContext = /*#__PURE__*/createContext({
-  initialState: false
+  baseClass: 'lexical-block',
+  BlockCollapsible: () => null,
+  BlockDrawer: () => null,
+  CustomBlock: null,
+  EditButton: () => null,
+  errorCount: 0,
+  formSchema: [],
+  initialState: false,
+  nodeKey: '',
+  RemoveButton: () => null
 });
 export const useBlockComponentContext = () => React.use(BlockComponentContext);
 /**
@@ -14,30 +24,34 @@ export const useBlockComponentContext = () => React.use(BlockComponentContext);
  * not the whole document.
  */
 export const BlockContent = props => {
-  const $ = _c(13);
+  const $ = _c(4);
   const {
-    BlockDrawer,
     Collapsible,
+    ...contextProps
+  } = props;
+  const {
+    BlockDrawer,
     CustomBlock,
-    EditButton,
     errorCount,
-    formSchema,
-    initialState,
-    nodeKey,
-    RemoveButton
-  } = props;
+    formSchema
+  } = contextProps;
   const hasSubmitted = useFormSubmitted();
   const fieldHasErrors = hasSubmitted && errorCount > 0;
+  const isEditable = useLexicalEditable();
   let t0;
   if ($[0] !== Collapsible || $[1] !== errorCount || $[2] !== fieldHasErrors) {
-    t0 = props_0 => _jsx(Collapsible, {
-      editButton: props_0.editButton,
-      errorCount,
-      fieldHasErrors,
-      Label: props_0.Label,
-      removeButton: props_0.removeButton,
-      children: props_0.children
-    });
+    t0 = props_0 => {
+      const {
+        children,
+        ...rest
+      } = props_0;
+      return _jsx(Collapsible, {
+        errorCount,
+        fieldHasErrors,
+        ...rest,
+        children
+      });
+    };
     $[0] = Collapsible;
     $[1] = errorCount;
     $[2] = fieldHasErrors;
@@ -46,39 +60,22 @@ export const BlockContent = props => {
     t0 = $[3];
   }
   const CollapsibleWithErrorProps = t0;
-  let t1;
-  if ($[4] !== BlockDrawer || $[5] !== CollapsibleWithErrorProps || $[6] !== CustomBlock || $[7] !== EditButton || $[8] !== RemoveButton || $[9] !== formSchema || $[10] !== initialState || $[11] !== nodeKey) {
-    t1 = CustomBlock ? _jsxs(BlockComponentContext, {
-      value: {
-        BlockCollapsible: CollapsibleWithErrorProps,
-        EditButton,
-        initialState,
-        nodeKey,
-        RemoveButton
-      },
-      children: [CustomBlock, _jsx(BlockDrawer, {})]
-    }) : _jsx(CollapsibleWithErrorProps, {
-      children: _jsx(RenderFields, {
-        fields: formSchema,
-        forceRender: true,
-        parentIndexPath: "",
-        parentPath: "",
-        parentSchemaPath: "",
-        permissions: true
-      })
-    });
-    $[4] = BlockDrawer;
-    $[5] = CollapsibleWithErrorProps;
-    $[6] = CustomBlock;
-    $[7] = EditButton;
-    $[8] = RemoveButton;
-    $[9] = formSchema;
-    $[10] = initialState;
-    $[11] = nodeKey;
-    $[12] = t1;
-  } else {
-    t1 = $[12];
-  }
-  return t1;
+  return CustomBlock ? _jsxs(BlockComponentContext, {
+    value: {
+      ...contextProps,
+      BlockCollapsible: CollapsibleWithErrorProps
+    },
+    children: [CustomBlock, _jsx(BlockDrawer, {})]
+  }) : _jsx(CollapsibleWithErrorProps, {
+    children: _jsx(RenderFields, {
+      fields: formSchema,
+      forceRender: true,
+      parentIndexPath: "",
+      parentPath: "",
+      parentSchemaPath: "",
+      permissions: true,
+      readOnly: !isEditable
+    })
+  });
 };
 //# sourceMappingURL=BlockContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlockContent.js","names":["c","_c","RenderFields","useFormSubmitted","React","createContext","useMemo","BlockComponentContext","initialState","useBlockComponentContext","use","BlockContent","props","$","BlockDrawer","Collapsible","CustomBlock","EditButton","errorCount","formSchema","nodeKey","RemoveButton","hasSubmitted","fieldHasErrors","t0","props_0","_jsx","editButton","Label","removeButton","children","CollapsibleWithErrorProps","t1","_jsxs","value","BlockCollapsible","fields","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../../../src/features/blocks/client/component/BlockContent.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FormState } from 'payload'\n\nimport { RenderFields, useFormSubmitted } from '@payloadcms/ui'\nimport React, { createContext, useMemo } from 'react'\n\ntype Props = {\n  baseClass: string\n  BlockDrawer: React.FC\n  Collapsible: React.FC<{\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  CustomBlock: React.ReactNode\n  EditButton: React.FC\n  errorCount: number\n  formSchema: ClientField[]\n  initialState: false | FormState | undefined\n\n  nodeKey: string\n  RemoveButton: React.FC\n}\n\ntype BlockComponentContextType = {\n  BlockCollapsible?: React.FC<{\n    children?: React.ReactNode\n    editButton?: boolean\n    /**\n     * Override the default label with a custom label\n     */\n    Label?: React.ReactNode\n    removeButton?: boolean\n  }>\n  EditButton?: React.FC\n  initialState: false | FormState | undefined\n\n  nodeKey?: string\n  RemoveButton?: React.FC\n}\n\nconst BlockComponentContext = createContext<BlockComponentContextType>({\n  initialState: false,\n})\n\nexport const useBlockComponentContext = () => React.use(BlockComponentContext)\n\n/**\n * The actual content of the Block. This should be INSIDE a Form component,\n * scoped to the block. All format operations in here are thus scoped to the block's form, and\n * not the whole document.\n */\nexport const BlockContent: React.FC<Props> = (props) => {\n  const {\n    BlockDrawer,\n    Collapsible,\n    CustomBlock,\n    EditButton,\n    errorCount,\n    formSchema,\n    initialState,\n    nodeKey,\n    RemoveButton,\n  } = props\n\n  const hasSubmitted = useFormSubmitted()\n\n  const fieldHasErrors = hasSubmitted && errorCount > 0\n\n  const CollapsibleWithErrorProps = useMemo(\n    () =>\n      (props: {\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      }) => (\n        <Collapsible\n          editButton={props.editButton}\n          errorCount={errorCount}\n          fieldHasErrors={fieldHasErrors}\n          Label={props.Label}\n          removeButton={props.removeButton}\n        >\n          {props.children}\n        </Collapsible>\n      ),\n    [Collapsible, fieldHasErrors, errorCount],\n  )\n\n  return CustomBlock ? (\n    <BlockComponentContext\n      value={{\n        BlockCollapsible: CollapsibleWithErrorProps,\n        EditButton,\n        initialState,\n        nodeKey,\n        RemoveButton,\n      }}\n    >\n      {CustomBlock}\n      <BlockDrawer />\n    </BlockComponentContext>\n  ) : (\n    <CollapsibleWithErrorProps>\n      <RenderFields\n        fields={formSchema}\n        forceRender={true}\n        parentIndexPath=\"\"\n        parentPath={''}\n        parentSchemaPath=\"\"\n        permissions={true}\n      />\n    </CollapsibleWithErrorProps>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,EAAEC,gBAAgB,QAAQ;AAC/C,OAAOC,KAAA,IAASC,aAAa,EAAEC,OAAO,QAAQ;AA2C9C,MAAMC,qBAAA,gBAAwBF,aAAA,CAAyC;EACrEG,YAAA,EAAc;AAChB;AAEA,OAAO,MAAMC,wBAAA,GAA2BA,CAAA,KAAML,KAAA,CAAMM,GAAG,CAACH,qBAAA;AAExD;;;;;AAKA,OAAO,MAAMI,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAC3C;IAAAa,WAAA;IAAAC,WAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAX,YAAA;IAAAY,OAAA;IAAAC;EAAA,IAUIT,KAAA;EAEJ,MAAAU,YAAA,GAAqBnB,gBAAA;EAErB,MAAAoB,cAAA,GAAuBD,YAAA,IAAgBJ,UAAA,IAAa;EAAA,IAAAM,EAAA;EAAA,IAAAX,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAK,UAAA,IAAAL,CAAA,QAAAU,cAAA;IAIhDC,EAAA,GAAAC,OAAA,IAUEC,IAAA,CAACX,WAAA;MAAAY,UAAA,EACaf,OAAA,CAAAe,UAAA;MAAAT,UAAA;MAAAK,cAAA;MAAAK,KAAA,EAGLhB,OAAA,CAAAgB,KAAA;MAAAC,YAAA,EACOjB,OAAA,CAAAiB,YAAA;MAAAC,QAAA,EAEblB,OAAA,CAAAkB;IAAA,C;;;;;;;;EAnBT,MAAAC,yBAAA,GAEIP,E;EAoBuC,IAAAQ,EAAA;EAAA,IAAAnB,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAkB,yBAAA,IAAAlB,CAAA,QAAAG,WAAA,IAAAH,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAQ,YAAA,IAAAR,CAAA,QAAAM,UAAA,IAAAN,CAAA,SAAAL,YAAA,IAAAK,CAAA,SAAAO,OAAA;IAGpCY,EAAA,GAAAhB,WAAA,GACLiB,KAAA,CAAA1B,qBAAA;MAAA2B,KAAA;QAAAC,gBAAA,EAEsBJ,yBAAA;QAAAd,UAAA;QAAAT,YAAA;QAAAY,OAAA;QAAAC;MAAA;MAAAS,QAAA,GAOnBd,WAAA,EACDU,IAAA,CAACZ,WAAA;IAAA,C,IAGHY,IAAA,CAACK,yBAAA;MAAAD,QAAA,EACCJ,IAAA,CAAAxB,YAAA;QAAAkC,MAAA,EACUjB,UAAA;QAAAkB,WAAA;QAAAC,eAAA,EAEQ;QAAAC,UAAA,EACJ;QAAAC,gBAAA,EACK;QAAAC,WAAA;MAAA,C;;;;;;;;;;;;;;SApBhBT,E;CAyBT","ignoreList":[]}
+{"version":3,"file":"BlockContent.js","names":["c","_c","useLexicalEditable","RenderFields","useFormSubmitted","React","createContext","useMemo","BlockComponentContext","baseClass","BlockCollapsible","BlockDrawer","CustomBlock","EditButton","errorCount","formSchema","initialState","nodeKey","RemoveButton","useBlockComponentContext","use","BlockContent","props","$","Collapsible","contextProps","hasSubmitted","fieldHasErrors","isEditable","t0","props_0","children","rest","_jsx","CollapsibleWithErrorProps","_jsxs","value","fields","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"sources":["../../../../../src/features/blocks/client/component/BlockContent.tsx"],"sourcesContent":["'use client'\nimport type { CollapsibleProps } from '@payloadcms/ui/elements/Collapsible'\nimport type { ClientField, FormState } from 'payload'\n\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { RenderFields, useFormSubmitted } from '@payloadcms/ui'\nimport React, { createContext, useMemo } from 'react'\n\nexport type BlockCollapsibleProps = {\n  /**\n   * Replace the top-right portion of the header that renders the Edit and Remove buttons with custom content.\n   * If this property is provided, the `removeButton` and `editButton` properties are ignored.\n   */\n  Actions?: React.ReactNode\n  children?: React.ReactNode\n  /**\n   * Additional className to the collapsible wrapper\n   */\n  className?: string\n  /**\n   * Props to pass to the underlying Collapsible component. You could use this to override the `Header` entirely, for example.\n   */\n  collapsibleProps?: Partial<CollapsibleProps>\n  /**\n   * Whether to disable rendering the block name field in the header Label\n   * @default false\n   */\n  disableBlockName?: boolean\n  /**\n   * Whether to show the Edit button\n   * If `Actions` is provided, this property is ignored.\n   * @default true\n   */\n  editButton?: boolean\n  /**\n   * Replace the default Label component with a custom Label\n   */\n  Label?: React.ReactNode\n  /**\n   * Replace the default Pill component component that's rendered within the default Label component with a custom Pill.\n   * This property has no effect if you provide a custom Label component via the `Label` property.\n   */\n  Pill?: React.ReactNode\n  /**\n   * Whether to show the Remove button\n   * If `Actions` is provided, this property is ignored.\n   * @default true\n   */\n  removeButton?: boolean\n}\n\nexport type BlockCollapsibleWithErrorProps = {\n  errorCount?: number\n  fieldHasErrors?: boolean\n} & BlockCollapsibleProps\n\nexport type BlockContentProps = {\n  baseClass: string\n  BlockDrawer: React.FC\n  Collapsible: React.FC<BlockCollapsibleWithErrorProps>\n  CustomBlock: React.ReactNode\n  EditButton: React.FC\n  errorCount: number\n  formSchema: ClientField[]\n  initialState: false | FormState | undefined\n\n  nodeKey: string\n  RemoveButton: React.FC\n}\n\ntype BlockComponentContextType = {\n  BlockCollapsible: React.FC<BlockCollapsibleProps>\n} & Omit<BlockContentProps, 'Collapsible'>\n\nconst BlockComponentContext = createContext<BlockComponentContextType>({\n  baseClass: 'lexical-block',\n  BlockCollapsible: () => null,\n  BlockDrawer: () => null,\n  CustomBlock: null,\n  EditButton: () => null,\n  errorCount: 0,\n  formSchema: [],\n  initialState: false,\n  nodeKey: '',\n  RemoveButton: () => null,\n})\n\nexport const useBlockComponentContext = () => React.use(BlockComponentContext)\n\n/**\n * The actual content of the Block. This should be INSIDE a Form component,\n * scoped to the block. All format operations in here are thus scoped to the block's form, and\n * not the whole document.\n */\nexport const BlockContent: React.FC<BlockContentProps> = (props) => {\n  const { Collapsible, ...contextProps } = props\n\n  const { BlockDrawer, CustomBlock, errorCount, formSchema } = contextProps\n\n  const hasSubmitted = useFormSubmitted()\n\n  const fieldHasErrors = hasSubmitted && errorCount > 0\n  const isEditable = useLexicalEditable()\n\n  const CollapsibleWithErrorProps = useMemo(\n    () => (props: BlockCollapsibleProps) => {\n      const { children, ...rest } = props\n      return (\n        <Collapsible errorCount={errorCount} fieldHasErrors={fieldHasErrors} {...rest}>\n          {children}\n        </Collapsible>\n      )\n    },\n    [Collapsible, fieldHasErrors, errorCount],\n  )\n\n  return CustomBlock ? (\n    <BlockComponentContext\n      value={{\n        ...contextProps,\n        BlockCollapsible: CollapsibleWithErrorProps,\n      }}\n    >\n      {CustomBlock}\n      <BlockDrawer />\n    </BlockComponentContext>\n  ) : (\n    <CollapsibleWithErrorProps>\n      <RenderFields\n        fields={formSchema}\n        forceRender={true}\n        parentIndexPath=\"\"\n        parentPath={''}\n        parentSchemaPath=\"\"\n        permissions={true}\n        readOnly={!isEditable}\n      />\n    </CollapsibleWithErrorProps>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,kBAAkB,QAAQ;AACnC,SAASC,YAAY,EAAEC,gBAAgB,QAAQ;AAC/C,OAAOC,KAAA,IAASC,aAAa,EAAEC,OAAO,QAAQ;AAoE9C,MAAMC,qBAAA,gBAAwBF,aAAA,CAAyC;EACrEG,SAAA,EAAW;EACXC,gBAAA,EAAkBA,CAAA,KAAM;EACxBC,WAAA,EAAaA,CAAA,KAAM;EACnBC,WAAA,EAAa;EACbC,UAAA,EAAYA,CAAA,KAAM;EAClBC,UAAA,EAAY;EACZC,UAAA,EAAY,EAAE;EACdC,YAAA,EAAc;EACdC,OAAA,EAAS;EACTC,YAAA,EAAcA,CAAA,KAAM;AACtB;AAEA,OAAO,MAAMC,wBAAA,GAA2BA,CAAA,KAAMd,KAAA,CAAMe,GAAG,CAACZ,qBAAA;AAExD;;;;;AAKA,OAAO,MAAMa,YAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAtB,EAAA;EACvD;IAAAuB,WAAA;IAAA,GAAAC;EAAA,IAAyCH,KAAA;EAEzC;IAAAX,WAAA;IAAAC,WAAA;IAAAE,UAAA;IAAAC;EAAA,IAA6DU,YAAA;EAE7D,MAAAC,YAAA,GAAqBtB,gBAAA;EAErB,MAAAuB,cAAA,GAAuBD,YAAA,IAAgBZ,UAAA,IAAa;EACpD,MAAAc,UAAA,GAAmB1B,kBAAA;EAAA,IAAA2B,EAAA;EAAA,IAAAN,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAT,UAAA,IAAAS,CAAA,QAAAI,cAAA;IAGXE,EAAA,GAAAC,OAAA;MACJ;QAAAC,QAAA;QAAA,GAAAC;MAAA,IAA8BV,OAAA;MAAA,OAE5BW,IAAA,CAACT,WAAA;QAAAV,UAAA;QAAAa,cAAA;QAAA,GAAwEK,IAAI;QAAAD;MAAA,C;;IAIjFR,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAT,UAAA;IAAAS,CAAA,MAAAI,cAAA;IAAAJ,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EARF,MAAAW,yBAAA,GACQL,EAON;EACyC,OAGpCjB,WAAA,GACLuB,KAAA,CAAA3B,qBAAA;IAAA4B,KAAA;MAAA,GAEOX,YAAY;MAAAf,gBAAA,EACGwB;IAAA;IAAAH,QAAA,GAGnBnB,WAAA,EACDqB,IAAA,CAACtB,WAAA;EAAA,C,IAGHsB,IAAA,CAACC,yBAAA;IAAAH,QAAA,EACCE,IAAA,CAAA9B,YAAA;MAAAkC,MAAA,EACUtB,UAAA;MAAAuB,WAAA;MAAAC,eAAA,EAEQ;MAAAC,UAAA,EACJ;MAAAC,gBAAA,EACK;MAAAC,WAAA;MAAAC,QAAA,GAENf;IAAA,C;;CAInB","ignoreList":[]}

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

@@ -1,11 +1,4 @@
 import React from 'react';
-export declare const BlockCollapsible: React.FC<{
-    children?: React.ReactNode;
-    editButton?: boolean;
-    /**
-     * Override the default label with a custom label
-     */
-    Label?: React.ReactNode;
-    removeButton?: boolean;
-}>;
+import { type BlockCollapsibleProps } from '../BlockContent.js';
+export declare const BlockCollapsible: React.FC<BlockCollapsibleProps>;
 //# sourceMappingURL=BlockCollapsible.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlockCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/component/components/BlockCollapsible.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAQA,CAAA"}
+{"version":3,"file":"BlockCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/component/components/BlockCollapsible.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,KAAK,qBAAqB,EAA4B,MAAM,oBAAoB,CAAA;AAEzF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAK5D,CAAA"}

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

@@ -1,37 +1,19 @@
 '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);
+export const BlockCollapsible = props => {
   const {
     children,
-    editButton,
-    Label,
-    removeButton
-  } = t0;
+    ...rest
+  } = props;
   const {
     BlockCollapsible
   } = useBlockComponentContext();
-  let t1;
-  if ($[0] !== BlockCollapsible || $[1] !== Label || $[2] !== children || $[3] !== editButton || $[4] !== removeButton) {
-    t1 = BlockCollapsible ? _jsx(BlockCollapsible, {
-      editButton,
-      Label,
-      removeButton,
-      children
-    }) : null;
-    $[0] = BlockCollapsible;
-    $[1] = Label;
-    $[2] = children;
-    $[3] = editButton;
-    $[4] = removeButton;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  return t1;
+  return BlockCollapsible ? _jsx(BlockCollapsible, {
+    ...rest,
+    children
+  }) : null;
 };
 //# sourceMappingURL=BlockCollapsible.js.map

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

@@ -1 +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,QAAAG,KAAA,IAAAH,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAI,YAAA;IAEtBC,EAAA,GAAAP,gBAAA,GACLQ,IAAA,CAACR,gBAAA;MAAAI,UAAA;MAAAC,KAAA;MAAAC,YAAA;MAAAH;IAAA,C,QAGC;IAAAD,CAAA,MAAAF,gBAAA;IAAAE,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAE,UAAA;IAAAF,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAA,OAJGK,EAIH;AAAA,CACN","ignoreList":[]}
+{"version":3,"file":"BlockCollapsible.js","names":["React","useBlockComponentContext","BlockCollapsible","props","children","rest","_jsx"],"sources":["../../../../../../src/features/blocks/client/component/components/BlockCollapsible.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { type BlockCollapsibleProps, useBlockComponentContext } from '../BlockContent.js'\n\nexport const BlockCollapsible: React.FC<BlockCollapsibleProps> = (props) => {\n  const { children, ...rest } = props\n  const { BlockCollapsible } = useBlockComponentContext()\n\n  return BlockCollapsible ? <BlockCollapsible {...rest}>{children}</BlockCollapsible> : null\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAAqCC,wBAAwB,QAAQ;AAErE,OAAO,MAAMC,gBAAA,GAAoDC,KAAA;EAC/D;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAA8BF,KAAA;EAC9B;IAAAD;EAAA,IAA6BD,wBAAA;EAAA,OAEtBC,gBAAA,GAAmBI,IAAA,CAACJ,gBAAA;IAAA,GAAqBG,IAAI;IAAAD;EAAA,C,QAAkC;AAAA,CACxF","ignoreList":[]}

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":"AAwBA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAetE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAInE,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GAAG;IACX;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,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,CAiiB1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAgBtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAGnE,OAAO,cAAc,CAAA;AAMrB,KAAK,KAAK,GAAG;IACX;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,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,CAijB1C,CAAA"}

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

@@ -7,6 +7,7 @@ import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 const baseClass = 'lexical-block';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
 import { $getNodeByKey } from 'lexical';
 import { v4 as uuid } from 'uuid';
@@ -32,8 +33,6 @@ export const BlockComponent = props => {
       featureClientSchemaMap,
       field: parentLexicalRichTextField,
       initialLexicalFormState,
-      permissions,
-      readOnly,
       schemaPath
     },
     uuid: uuidFromContext
@@ -62,10 +61,12 @@ export const BlockComponent = props => {
     setDocFieldPreferences
   } = useDocumentInfo();
   const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
+  const blockType = formData.blockType;
   const {
     getFormState
   } = useServerFunctions();
-  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}.fields`;
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}.fields`;
   const [initialState, setInitialState] = React.useState(() => {
     return initialLexicalFormState?.[formData.id]?.formState ? {
       ...initialLexicalFormState?.[formData.id]?.formState,
@@ -91,10 +92,10 @@ export const BlockComponent = props => {
   }, [cacheBuster]);
   const [CustomLabel, setCustomLabel] = React.useState(
   // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
-  initialState?.['_components']?.customComponents?.BlockLabel);
+  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);
+  initialState?.['_components']?.customComponents?.Block ?? undefined);
   // Initial state for newly created blocks
   useEffect(() => {
     const abortController = new AbortController();
@@ -118,6 +119,7 @@ export const BlockComponent = props => {
         globalSlug,
         initialBlockData: formData,
         operation: 'update',
+        readOnly: !isEditable,
         renderAllFields: true,
         schemaPath: schemaFieldsPath,
         signal: abortController.signal
@@ -135,13 +137,13 @@ export const BlockComponent = props => {
           const node = $getNodeByKey(nodeKey);
           if (node && $isBlockNode(node)) {
             const newData = newFormStateData;
-            newData.blockType = formData.blockType;
+            newData.blockType = blockType;
             node.setFields(newData, true);
           }
         });
         setInitialState(state);
-        setCustomLabel(state._components?.customComponents?.BlockLabel);
-        setCustomBlock(state._components?.customComponents?.Block);
+        setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined);
+        setCustomBlock(state._components?.customComponents?.Block ?? undefined);
       }
     };
     if (formData && !initialState) {
@@ -150,9 +152,9 @@ export const BlockComponent = props => {
     return () => {
       abortAndIgnore(abortController);
     };
-  }, [getFormState, schemaFieldsPath, id, formData, editor, nodeKey, initialState, collectionSlug, globalSlug, getDocPreferences, parentDocumentFields]);
+  }, [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.${formData.blockType}`;
+  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];
@@ -181,6 +183,7 @@ export const BlockComponent = props => {
       globalSlug,
       initialBlockFormState: prevFormState,
       operation: 'update',
+      readOnly: !isEditable,
       renderAllFields: submit ? true : false,
       schemaPath: schemaFieldsPath,
       signal: controller.signal
@@ -199,14 +202,14 @@ export const BlockComponent = props => {
         const node_0 = $getNodeByKey(nodeKey);
         if (node_0 && $isBlockNode(node_0)) {
           const newData_0 = newFormStateData_0;
-          newData_0.blockType = formData.blockType;
+          newData_0.blockType = blockType;
           node_0.setFields(newData_0, true);
         }
       });
     }, 0);
     if (submit) {
-      setCustomLabel(newFormState._components?.customComponents?.BlockLabel);
-      setCustomBlock(newFormState._components?.customComponents?.Block);
+      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) {
@@ -216,7 +219,7 @@ export const BlockComponent = props => {
       setErrorCount(rowErrorCount);
     }
     return newFormState;
-  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, formData.blockType, parentDocumentFields, editor, nodeKey]);
+  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, blockType, parentDocumentFields, isEditable, editor, nodeKey]);
   useEffect(() => {
     return () => {
       abortAndIgnore(onChangeAbortControllerRef.current);
@@ -251,7 +254,7 @@ export const BlockComponent = props => {
   const EditButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
     buttonStyle: "icon-label",
     className: `${baseClass}__editButton`,
-    disabled: readOnly,
+    disabled: !isEditable,
     el: "button",
     icon: "edit",
     onClick: e => {
@@ -270,11 +273,11 @@ export const BlockComponent = props => {
     tooltip: t('lexical:blocks:inlineBlocks:edit', {
       label: blockDisplayName
     })
-  }), [blockDisplayName, readOnly, t, toggleDrawer]);
+  }), [blockDisplayName, t, isEditable, toggleDrawer]);
   const RemoveButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
     buttonStyle: "icon-label",
     className: `${baseClass}__removeButton`,
-    disabled: parentLexicalRichTextField?.admin?.readOnly || false,
+    disabled: !isEditable,
     icon: "x",
     onClick: e_1 => {
       e_1.preventDefault();
@@ -282,53 +285,65 @@ export const BlockComponent = props => {
     },
     round: true,
     tooltip: "Remove Block"
-  }), [parentLexicalRichTextField?.admin?.readOnly, removeBlock]);
+  }), [isEditable, removeBlock]);
   const BlockCollapsible = useMemo(() => ({
+    Actions,
     children,
+    className,
+    collapsibleProps,
     disableBlockName,
     editButton,
     errorCount: errorCount_0,
     fieldHasErrors,
     Label,
+    Pill: CustomPill,
     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",
-            size: "small",
-            children: blockDisplayName ?? formData?.blockType
-          }), !disableBlockName && !clientBlock?.admin?.disableBlockName && /*#__PURE__*/_jsx(SectionTitle, {
-            path: "blockName",
-            readOnly: parentLexicalRichTextField?.admin?.readOnly || false
-          }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
-            count: errorCount_0 ?? 0,
-            i18n: i18n,
-            withMessage: true
+  }) => {
+    return /*#__PURE__*/_jsx("div", {
+      className: baseClass + ' ' + 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]
+            })
           })]
-        }), /*#__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, clientBlock?.admin?.disableBlockName, editor, formData.blockType, i18n, isCollapsed, onCollapsedChange, parentLexicalRichTextField?.admin?.readOnly]);
+        }),
+        isCollapsed: isCollapsed,
+        onToggle: incomingCollapsedState => {
+          onCollapsedChange(incomingCollapsedState);
+          setIsCollapsed(incomingCollapsedState);
+        },
+        ...(collapsibleProps || {}),
+        children: children
+      }, 0)
+    });
+  }, [CustomBlock, CustomLabel, EditButton, RemoveButton, blockDisplayName, 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:${formData?.id ? 'edit' : 'create'}`, {
+      title: t(`lexical:blocks:inlineBlocks:${blockID ? 'edit' : 'create'}`, {
         label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label')
       }),
       children: initialState ? /*#__PURE__*/_jsxs(_Fragment, {
@@ -341,14 +356,14 @@ export const BlockComponent = props => {
 
           parentSchemaPath: schemaFieldsPath,
           permissions: true,
-          readOnly: false
+          readOnly: !isEditable
         }), /*#__PURE__*/_jsx(FormSubmit, {
           programmaticSubmit: true,
           children: t('fields:saveChanges')
         })]
       }) : null
     })
-  }), [initialState, drawerSlug, blockDisplayName, t, clientBlock?.fields, schemaFieldsPath, permissions]);
+  }), [initialState, drawerSlug, blockID, blockDisplayName, t, isEditable, clientBlock?.fields, schemaFieldsPath]);
   // Memoized Form JSX
   const Block = useMemo(() => {
     if (!initialState) {
@@ -370,7 +385,7 @@ export const BlockComponent = props => {
       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 = formData.blockType;
+        newData_1.blockType = blockType;
         editor.update(() => {
           const node_1 = $getNodeByKey(nodeKey);
           if (node_1 && $isBlockNode(node_1)) {
@@ -394,7 +409,7 @@ export const BlockComponent = props => {
         RemoveButton: RemoveButton
       })
     });
-  }, [BlockCollapsible, BlockDrawer, CustomBlock, clientBlock?.fields, RemoveButton, EditButton, editor, errorCount, toggleDrawer, clientBlock?.fields,
+  }, [BlockCollapsible, BlockDrawer, CustomBlock, blockType, 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]);
   if (!clientBlock) {
@@ -403,7 +418,7 @@ export const BlockComponent = props => {
       fieldHasErrors: true,
       children: /*#__PURE__*/_jsxs("div", {
         className: "lexical-block-not-found",
-        children: ["Error: Block '", formData.blockType, "' not found in the config but exists in the lexical data"]
+        children: ["Error: Block '", blockType, "' not found in the config but exists in the lexical data"]
       })
     });
   }