@payloadcms/richtext-lexical 3.83.0-internal.06ac84e → 3.83.0-internal.86b7bfb

package/dist/exports/client/internal-client.d.ts

@@ -0,0 +1,3 @@
+export { BlockContent, useBlockComponentContext, } from '../../features/blocks/client/component/BlockContent.js';
+export { BlockComponent } from '../../features/blocks/client/component/index.js';
+//# sourceMappingURL=internal-client.d.ts.map

package/dist/exports/client/internal-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-client.d.ts","sourceRoot":"","sources":["../../../src/exports/client/internal-client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,wBAAwB,GACzB,MAAM,wDAAwD,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAA"}

package/dist/exports/react/index.d.ts

@@ -1,3 +1,4 @@
+export type { BlockComponentContextType } from '../../features/blocks/client/component/BlockContent.js';
 export { type JSXConvertersFunction, RichText, } from '../../features/converters/lexicalToJSX/Component/index.js';
 export { BlockquoteJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/blockquote.js';
 export { HeadingJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/heading.js';
@@ -12,5 +13,6 @@ export { TextJSXConverter } from '../../features/converters/lexicalToJSX/convert
 export { UploadJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/upload.js';
 export { defaultJSXConverters } from '../../features/converters/lexicalToJSX/converter/defaultConverters.js';
 export { convertLexicalNodesToJSX } from '../../features/converters/lexicalToJSX/converter/index.js';
-export type { JSXConverter, JSXConverters, SerializedLexicalNodeWithParent, } from '../../features/converters/lexicalToJSX/converter/types.js';
+export type { JSXConverter, JSXConverterArgs, JSXConverters, SerializedLexicalNodeWithParent, } from '../../features/converters/lexicalToJSX/converter/types.js';
+export type { ViewMapBlockComponentProps, ViewMapBlockEditorProps, ViewMapBlockJSXConverterProps, } from '../../types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/exports/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/exports/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,qBAAqB,EAC1B,QAAQ,GACT,MAAM,2DAA2D,CAAA;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2EAA2E,CAAA;AAClH,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAA;AAC5G,OAAO,EAAE,0BAA0B,EAAE,MAAM,+EAA+E,CAAA;AAC1H,OAAO,EAAE,qBAAqB,EAAE,MAAM,0EAA0E,CAAA;AAChH,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAA;AACtG,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAA;AACtG,OAAO,EAAE,qBAAqB,EAAE,MAAM,0EAA0E,CAAA;AAChH,OAAO,EAAE,eAAe,EAAE,MAAM,oEAAoE,CAAA;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAA;AAExG,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAA;AAEtG,OAAO,EAAE,kBAAkB,EAAE,MAAM,uEAAuE,CAAA;AAC1G,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAA;AAC5G,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAA;AACpG,YAAY,EACV,YAAY,EACZ,aAAa,EACb,+BAA+B,GAChC,MAAM,2DAA2D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/exports/react/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAA;AACvG,OAAO,EACL,KAAK,qBAAqB,EAC1B,QAAQ,GACT,MAAM,2DAA2D,CAAA;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2EAA2E,CAAA;AAClH,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAA;AAC5G,OAAO,EAAE,0BAA0B,EAAE,MAAM,+EAA+E,CAAA;AAC1H,OAAO,EAAE,qBAAqB,EAAE,MAAM,0EAA0E,CAAA;AAChH,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAA;AACtG,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAA;AACtG,OAAO,EAAE,qBAAqB,EAAE,MAAM,0EAA0E,CAAA;AAChH,OAAO,EAAE,eAAe,EAAE,MAAM,oEAAoE,CAAA;AAEpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAA;AAExG,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAA;AACtG,OAAO,EAAE,kBAAkB,EAAE,MAAM,uEAAuE,CAAA;AAC1G,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAA;AAC5G,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAA;AAEpG,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,+BAA+B,GAChC,MAAM,2DAA2D,CAAA;AAGlE,YAAY,EACV,0BAA0B,EAC1B,uBAAuB,EACvB,6BAA6B,GAC9B,MAAM,gBAAgB,CAAA"}

package/dist/exports/react/index.js

@@ -1,3 +1,4 @@
+// Export block context type for typing custom Block components
 export { RichText } from '../../features/converters/lexicalToJSX/Component/index.js';
 export { BlockquoteJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/blockquote.js';
 export { HeadingJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/heading.js';

package/dist/exports/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["RichText","BlockquoteJSXConverter","HeadingJSXConverter","HorizontalRuleJSXConverter","LinebreakJSXConverter","LinkJSXConverter","ListJSXConverter","ParagraphJSXConverter","TabJSXConverter","TableJSXConverter","TextJSXConverter","UploadJSXConverter","defaultJSXConverters","convertLexicalNodesToJSX"],"sources":["../../../src/exports/react/index.ts"],"sourcesContent":["export {\n  type JSXConvertersFunction,\n  RichText,\n} from '../../features/converters/lexicalToJSX/Component/index.js'\nexport { BlockquoteJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/blockquote.js'\nexport { HeadingJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/heading.js'\nexport { HorizontalRuleJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/horizontalRule.js'\nexport { LinebreakJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/linebreak.js'\nexport { LinkJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/link.js'\nexport { ListJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/list.js'\nexport { ParagraphJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/paragraph.js'\nexport { TabJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/tab.js'\nexport { TableJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/table.js'\n\nexport { TextJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/text.js'\n\nexport { UploadJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/upload.js'\nexport { defaultJSXConverters } from '../../features/converters/lexicalToJSX/converter/defaultConverters.js'\nexport { convertLexicalNodesToJSX } from '../../features/converters/lexicalToJSX/converter/index.js'\nexport type {\n  JSXConverter,\n  JSXConverters,\n  SerializedLexicalNodeWithParent,\n} from '../../features/converters/lexicalToJSX/converter/types.js'\n"],"mappings":"AAAA,SAEEA,QAAQ,QACH;AACP,SAASC,sBAAsB,QAAQ;AACvC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,qBAAqB,QAAQ;AACtC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,SAASC,iBAAiB,QAAQ;AAElC,SAASC,gBAAgB,QAAQ;AAEjC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,wBAAwB,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["RichText","BlockquoteJSXConverter","HeadingJSXConverter","HorizontalRuleJSXConverter","LinebreakJSXConverter","LinkJSXConverter","ListJSXConverter","ParagraphJSXConverter","TabJSXConverter","TableJSXConverter","TextJSXConverter","UploadJSXConverter","defaultJSXConverters","convertLexicalNodesToJSX"],"sources":["../../../src/exports/react/index.ts"],"sourcesContent":["// Export block context type for typing custom Block components\nexport type { BlockComponentContextType } from '../../features/blocks/client/component/BlockContent.js'\nexport {\n  type JSXConvertersFunction,\n  RichText,\n} from '../../features/converters/lexicalToJSX/Component/index.js'\nexport { BlockquoteJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/blockquote.js'\nexport { HeadingJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/heading.js'\nexport { HorizontalRuleJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/horizontalRule.js'\nexport { LinebreakJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/linebreak.js'\nexport { LinkJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/link.js'\nexport { ListJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/list.js'\nexport { ParagraphJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/paragraph.js'\nexport { TabJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/tab.js'\n\nexport { TableJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/table.js'\n\nexport { TextJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/text.js'\nexport { UploadJSXConverter } from '../../features/converters/lexicalToJSX/converter/converters/upload.js'\nexport { defaultJSXConverters } from '../../features/converters/lexicalToJSX/converter/defaultConverters.js'\nexport { convertLexicalNodesToJSX } from '../../features/converters/lexicalToJSX/converter/index.js'\n\nexport type {\n  JSXConverter,\n  JSXConverterArgs,\n  JSXConverters,\n  SerializedLexicalNodeWithParent,\n} from '../../features/converters/lexicalToJSX/converter/types.js'\n\n// Export view map block props for typing custom Block components\nexport type {\n  ViewMapBlockComponentProps,\n  ViewMapBlockEditorProps,\n  ViewMapBlockJSXConverterProps,\n} from '../../types.js'\n"],"mappings":"AAAA;AAEA,SAEEA,QAAQ,QACH;AACP,SAASC,sBAAsB,QAAQ;AACvC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,qBAAqB,QAAQ;AACtC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAEhC,SAASC,iBAAiB,QAAQ;AAElC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,wBAAwB,QAAQ","ignoreList":[]}

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

@@ -51,7 +51,11 @@ export type BlockContentProps = {
     baseClass: string;
     BlockDrawer: React.FC;
     Collapsible: React.FC<BlockCollapsibleWithErrorProps>;
-    CustomBlock: React.ReactNode;
+    /**
+     * Custom block component (pre-rendered ReactNode).
+     */
+    CustomBlock?: React.ReactNode;
+    CustomLabel: React.ReactNode;
     EditButton: React.FC;
     errorCount: number;
     formSchema: ClientField[];
@@ -59,9 +63,9 @@ export type BlockContentProps = {
     nodeKey: string;
     RemoveButton: React.FC;
 };
-type BlockComponentContextType = {
+export type BlockComponentContextType = {
     BlockCollapsible: React.FC<BlockCollapsibleProps>;
-} & Omit<BlockContentProps, 'Collapsible'>;
+} & Omit<BlockContentProps, 'Collapsible' | 'CustomBlock' | 'CustomLabel'>;
 export declare const useBlockComponentContext: () => BlockComponentContextType;
 /**
  * The actual content of the Block. This should be INSIDE a Form component,
@@ -69,5 +73,4 @@ export declare const useBlockComponentContext: () => BlockComponentContextType;
  * not the whole document.
  */
 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,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"}
+{"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;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,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,MAAM,MAAM,yBAAyB,GAAG;IACtC,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAA;CAClD,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,aAAa,GAAG,aAAa,CAAC,CAAA;AAc1E,eAAO,MAAM,wBAAwB,iCAAyC,CAAA;AAE9E;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8CpD,CAAA"}

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

@@ -9,7 +9,6 @@ const BlockComponentContext = /*#__PURE__*/createContext({
   baseClass: 'LexicalEditorTheme__block',
   BlockCollapsible: () => null,
   BlockDrawer: () => null,
-  CustomBlock: null,
   EditButton: () => null,
   errorCount: 0,
   formSchema: [],
@@ -27,11 +26,12 @@ export const BlockContent = props => {
   const $ = _c(4);
   const {
     Collapsible,
+    CustomBlock,
+    CustomLabel,
     ...contextProps
   } = props;
   const {
     BlockDrawer,
-    CustomBlock,
     errorCount,
     formSchema
   } = contextProps;
@@ -40,11 +40,11 @@ export const BlockContent = props => {
   const isEditable = useLexicalEditable();
   let t0;
   if ($[0] !== Collapsible || $[1] !== errorCount || $[2] !== fieldHasErrors) {
-    t0 = props_0 => {
+    t0 = collapsibleProps => {
       const {
         children,
         ...rest
-      } = props_0;
+      } = collapsibleProps;
       return _jsx(Collapsible, {
         errorCount,
         fieldHasErrors,
@@ -60,11 +60,12 @@ export const BlockContent = props => {
     t0 = $[3];
   }
   const CollapsibleWithErrorProps = t0;
+  const blockContextValue = {
+    ...contextProps,
+    BlockCollapsible: CollapsibleWithErrorProps
+  };
   return CustomBlock ? _jsxs(BlockComponentContext, {
-    value: {
-      ...contextProps,
-      BlockCollapsible: CollapsibleWithErrorProps
-    },
+    value: blockContextValue,
     children: [CustomBlock, _jsx(BlockDrawer, {})]
   }) : _jsx(CollapsibleWithErrorProps, {
     children: _jsx(RenderFields, {

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

@@ -1 +1 @@
-{"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: 'LexicalEditorTheme__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":[]}
+{"version":3,"file":"BlockContent.js","names":["c","_c","useLexicalEditable","RenderFields","useFormSubmitted","React","createContext","useMemo","BlockComponentContext","baseClass","BlockCollapsible","BlockDrawer","EditButton","errorCount","formSchema","initialState","nodeKey","RemoveButton","useBlockComponentContext","use","BlockContent","props","$","Collapsible","CustomBlock","CustomLabel","contextProps","hasSubmitted","fieldHasErrors","isEditable","t0","collapsibleProps","children","rest","_jsx","CollapsibleWithErrorProps","blockContextValue","_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  /**\n   * Custom block component (pre-rendered ReactNode).\n   */\n  CustomBlock?: React.ReactNode\n  CustomLabel: 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\nexport type BlockComponentContextType = {\n  BlockCollapsible: React.FC<BlockCollapsibleProps>\n} & Omit<BlockContentProps, 'Collapsible' | 'CustomBlock' | 'CustomLabel'>\n\nconst BlockComponentContext = createContext<BlockComponentContextType>({\n  baseClass: 'LexicalEditorTheme__block',\n  BlockCollapsible: () => null,\n  BlockDrawer: () => 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, CustomBlock, CustomLabel, ...contextProps } = props\n\n  const { BlockDrawer, 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    () => (collapsibleProps: BlockCollapsibleProps) => {\n      const { children, ...rest } = collapsibleProps\n      return (\n        <Collapsible errorCount={errorCount} fieldHasErrors={fieldHasErrors} {...rest}>\n          {children}\n        </Collapsible>\n      )\n    },\n    [Collapsible, fieldHasErrors, errorCount],\n  )\n\n  const blockContextValue: BlockComponentContextType = {\n    ...contextProps,\n    BlockCollapsible: CollapsibleWithErrorProps,\n  }\n\n  // Provide context for useBlockComponentContext() hook\n  return CustomBlock ? (\n    <BlockComponentContext value={blockContextValue}>\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;AAwE9C,MAAMC,qBAAA,gBAAwBF,aAAA,CAAyC;EACrEG,SAAA,EAAW;EACXC,gBAAA,EAAkBA,CAAA,KAAM;EACxBC,WAAA,EAAaA,CAAA,KAAM;EACnBC,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,KAAMb,KAAA,CAAMc,GAAG,CAACX,qBAAA;AAExD;;;;;AAKA,OAAO,MAAMY,YAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EACvD;IAAAsB,WAAA;IAAAC,WAAA;IAAAC,WAAA;IAAA,GAAAC;EAAA,IAAmEL,KAAA;EAEnE;IAAAV,WAAA;IAAAE,UAAA;IAAAC;EAAA,IAAgDY,YAAA;EAEhD,MAAAC,YAAA,GAAqBvB,gBAAA;EAErB,MAAAwB,cAAA,GAAuBD,YAAA,IAAgBd,UAAA,IAAa;EACpD,MAAAgB,UAAA,GAAmB3B,kBAAA;EAAA,IAAA4B,EAAA;EAAA,IAAAR,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAT,UAAA,IAAAS,CAAA,QAAAM,cAAA;IAGXE,EAAA,GAAAC,gBAAA;MACJ;QAAAC,QAAA;QAAA,GAAAC;MAAA,IAA8BF,gBAAA;MAAA,OAE5BG,IAAA,CAACX,WAAA;QAAAV,UAAA;QAAAe,cAAA;QAAA,GAAwEK,IAAI;QAAAD;MAAA,C;;IAIjFV,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAT,UAAA;IAAAS,CAAA,MAAAM,cAAA;IAAAN,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EARF,MAAAa,yBAAA,GACQL,EAON;EAIF,MAAAM,iBAAA;IAAA,GACKV,YAAY;IAAAhB,gBAAA,EACGyB;EAAA;EACpB,OAGOX,WAAA,GACLa,KAAA,CAAA7B,qBAAA;IAAA8B,KAAA,EAA8BF,iBAAA;IAAAJ,QAAA,GAC3BR,WAAA,EACDU,IAAA,CAACvB,WAAA;EAAA,C,IAGHuB,IAAA,CAACC,yBAAA;IAAAH,QAAA,EACCE,IAAA,CAAA/B,YAAA;MAAAoC,MAAA,EACUzB,UAAA;MAAA0B,WAAA;MAAAC,eAAA,EAEQ;MAAAC,UAAA,EACJ;MAAAC,gBAAA,EACK;MAAAC,WAAA;MAAAC,QAAA,GAENhB;IAAA,C;;CAInB","ignoreList":[]}

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import type { ViewMapBlockComponentProps } from '../../../../types.js';
 import type { BlockFields } from '../../server/nodes/BlocksNode.js';
 import './index.scss';
-type Props = {
+export type BlockComponentProps<TFormData extends Record<string, unknown> = BlockFields> = {
     /**
      * Can be modified by the node in order to trigger the re-fetch of the initial state based on the
      * formData. This is useful when node.setFields() is explicitly called from outside of the form - in
@@ -9,9 +10,24 @@ type Props = {
      */
     readonly cacheBuster: number;
     readonly className: string;
-    readonly formData: BlockFields;
+    /**
+     * Custom block component from view map
+     * Will be rendered with useBlockComponentContext hook.
+     */
+    readonly CustomBlock?: React.FC<ViewMapBlockComponentProps>;
+    /**
+     * Custom block label from view map
+     * Will be rendered with useBlockComponentContext hook.
+     */
+    readonly CustomLabel?: React.FC<ViewMapBlockComponentProps>;
+    /**
+     * The block's form data (field values).
+     */
+    readonly formData: TFormData;
+    /**
+     * The unique key identifying this block node in the current editor instance.
+     */
     readonly nodeKey: string;
 };
-export declare const BlockComponent: React.FC<Props>;
-export {};
+export declare const BlockComponent: React.FC<BlockComponentProps>;
 //# sourceMappingURL=index.d.ts.map

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":"AAkCA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAGtE,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,SAAS,EAAE,MAAM,CAAA;IAC1B,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,CA0kB1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAEnE,OAAO,cAAc,CAAA;AAWrB,MAAM,MAAM,mBAAmB,CAAC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,IAAI;IACzF;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;IAC3D;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;IAC3D;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmpBxD,CAAA"}

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

@@ -13,12 +13,14 @@ import { v4 as uuid } from 'uuid';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
 import { $isBlockNode } from '../nodes/BlocksNode.js';
-import { BlockContent } from './BlockContent.js';
+import { BlockContent, useBlockComponentContext } from './BlockContent.js';
 import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
 export const BlockComponent = props => {
   const {
     cacheBuster,
     className: baseClass,
+    CustomBlock: CustomBlockFromProps,
+    CustomLabel: CustomLabelFromProps,
     formData,
     nodeKey
   } = props;
@@ -101,12 +103,54 @@ export const BlockComponent = props => {
       hasMounted.current = true;
     }
   }, [cacheBuster]);
-  const [CustomLabel, setCustomLabel] = React.useState(
-  // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
-  initialState?.['_components']?.customComponents?.BlockLabel ?? undefined);
-  const [CustomBlock, setCustomBlock] = React.useState(
-  // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
-  initialState?.['_components']?.customComponents?.Block ?? undefined);
+  const [formUuid] = React.useState(() => uuid());
+  // Server-rendered custom components (from admin.components, NOT viewMap).
+  // When viewMap components exist (CustomBlockFromProps/CustomLabelFromProps),
+  // we render them directly with formData instead, so these states are unused.
+  const [CustomLabel, setCustomLabel] = React.useState(() => {
+    if (CustomLabelFromProps) {
+      return undefined;
+    }
+    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
+    return initialState?.['_components']?.customComponents?.BlockLabel ?? undefined;
+  });
+  const [CustomBlock, setCustomBlock] = React.useState(() => {
+    if (CustomBlockFromProps) {
+      return undefined;
+    }
+    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
+    return initialState?.['_components']?.customComponents?.Block ?? undefined;
+  });
+  // When viewMap components exist, render directly with formData (always current from
+  // the lexical node). When they don't, fall back to server-rendered state.
+  const resolvedCustomBlock = useMemo(() => {
+    if (CustomBlockFromProps) {
+      return /*#__PURE__*/_jsx(CustomBlockFromProps, {
+        className: baseClass,
+        formData: formData,
+        isEditor: true,
+        isJSXConverter: false,
+        nodeKey: nodeKey,
+        // eslint-disable-next-line react-compiler/react-compiler -- intentionally passed as a prop for custom block components to call
+        useBlockComponentContext: useBlockComponentContext
+      });
+    }
+    return CustomBlock;
+  }, [CustomBlockFromProps, baseClass, formData, nodeKey, CustomBlock]);
+  const resolvedCustomLabel = useMemo(() => {
+    if (CustomLabelFromProps) {
+      return /*#__PURE__*/_jsx(CustomLabelFromProps, {
+        className: baseClass,
+        formData: formData,
+        isEditor: true,
+        isJSXConverter: false,
+        nodeKey: nodeKey,
+        // eslint-disable-next-line react-compiler/react-compiler -- intentionally passed as a prop for custom block components to call
+        useBlockComponentContext: useBlockComponentContext
+      });
+    }
+    return CustomLabel;
+  }, [CustomLabelFromProps, baseClass, formData, nodeKey, CustomLabel]);
   // Initial state for newly created blocks
   useEffect(() => {
     const abortController = new AbortController();
@@ -157,8 +201,12 @@ export const BlockComponent = props => {
           }
         });
         setInitialState(state);
-        setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined);
-        setCustomBlock(state._components?.customComponents?.Block ?? undefined);
+        if (!CustomLabelFromProps) {
+          setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined);
+        }
+        if (!CustomBlockFromProps) {
+          setCustomBlock(state._components?.customComponents?.Block ?? undefined);
+        }
       }
     };
     if (formData && !initialState) {
@@ -167,7 +215,7 @@ export const BlockComponent = props => {
     return () => {
       abortAndIgnore(abortController);
     };
-  }, [getFormState, schemaFieldsPath, isEditable, id, formData, editor, nodeKey, initialState, collectionSlug, globalSlug, getDocPreferences, parentDocumentFields, blockType]);
+  }, [getFormState, schemaFieldsPath, isEditable, id, CustomLabelFromProps, CustomBlockFromProps, formData, editor, nodeKey, initialState, collectionSlug, globalSlug, getDocPreferences, parentDocumentFields, blockType]);
   const [isCollapsed, setIsCollapsed] = React.useState(initialLexicalFormState?.[formData.id]?.collapsed ?? false);
   const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`;
   const clientSchemaMap = featureClientSchemaMap['blocks'];
@@ -227,8 +275,12 @@ export const BlockComponent = props => {
       });
     }, 0);
     if (submit) {
-      setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined);
-      setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined);
+      if (!CustomLabelFromProps) {
+        setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined);
+      }
+      if (!CustomBlockFromProps) {
+        setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined);
+      }
       let rowErrorCount = 0;
       for (const formField of Object.values(newFormState)) {
         if (formField?.valid === false) {
@@ -238,7 +290,7 @@ export const BlockComponent = props => {
       setErrorCount(rowErrorCount);
     }
     return newFormState;
-  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, blockType, parentDocumentFields, isEditable, editor, nodeKey]);
+  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, blockType, parentDocumentFields, isEditable, editor, nodeKey, CustomBlockFromProps, CustomLabelFromProps]);
   useEffect(() => {
     return () => {
       abortAndIgnore(onChangeAbortControllerRef.current);
@@ -325,7 +377,7 @@ export const BlockComponent = props => {
         collapsibleStyle: fieldHasErrors ? 'error' : 'default',
         header: /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__block-header`,
-          children: [typeof Label !== 'undefined' ? Label : typeof CustomLabel !== 'undefined' ? CustomLabel : /*#__PURE__*/_jsxs("div", {
+          children: [typeof Label !== 'undefined' ? Label : typeof resolvedCustomLabel !== 'undefined' ? resolvedCustomLabel : /*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__block-label`,
             children: [typeof CustomPill !== 'undefined' ? CustomPill : /*#__PURE__*/_jsx(Pill, {
               className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`,
@@ -343,7 +395,7 @@ export const BlockComponent = props => {
           }), /*#__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]
+              children: [resolvedCustomBlock && editButton !== false || !resolvedCustomBlock && editButton ? /*#__PURE__*/_jsx(EditButton, {}) : null, removeButton !== false && isEditable ? /*#__PURE__*/_jsx(RemoveButton, {}) : null]
             })
           })]
         }),
@@ -356,7 +408,7 @@ export const BlockComponent = props => {
         children: children
       }, 0)
     });
-  }, [CustomBlock, CustomLabel, EditButton, RemoveButton, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, i18n, isCollapsed, onCollapsedChange, isEditable]);
+  }, [resolvedCustomBlock, resolvedCustomLabel, EditButton, RemoveButton, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, i18n, isCollapsed, onCollapsedChange, isEditable]);
   const blockID = formData?.id;
   const BlockDrawer = useMemo(() => () => /*#__PURE__*/_jsx(EditDepthProvider, {
     children: /*#__PURE__*/_jsx(Drawer, {
@@ -386,49 +438,54 @@ export const BlockComponent = props => {
     if (!initialState) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Form, {
-      beforeSubmit: [async ({
-        formState
-      }) => {
-        // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
-        return await onChange({
-          formState,
-          submit: true
-        });
-      }],
-      el: "div",
-      fields: clientBlock?.fields ?? [],
-      initialState: initialState,
-      onChange: [onChange],
-      onSubmit: (formState_0, newData_1) => {
-        // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
-        newData_1.blockType = blockType;
-        editor.update(() => {
-          const node_1 = $getNodeByKey(nodeKey);
-          if (node_1 && $isBlockNode(node_1)) {
-            node_1.setFields(newData_1, true);
-          }
-        });
-        toggleDrawer();
+    return /*#__PURE__*/_jsx("div", {
+      "data-block-drawer-slug": drawerSlug,
+      style: {
+        display: 'contents'
       },
-      submitted: submitted,
-      uuid: uuid(),
-      children: /*#__PURE__*/_jsx(BlockContent, {
-        baseClass: baseClass,
-        BlockDrawer: BlockDrawer,
-        Collapsible: BlockCollapsible,
-        CustomBlock: CustomBlock,
-        EditButton: EditButton,
-        errorCount: errorCount,
-        formSchema: clientBlock?.fields ?? [],
+      children: /*#__PURE__*/_jsx(Form, {
+        beforeSubmit: [async ({
+          formState
+        }) => {
+          // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
+          return await onChange({
+            formState,
+            submit: true
+          });
+        }],
+        el: "div",
+        fields: clientBlock?.fields ?? [],
         initialState: initialState,
-        nodeKey: nodeKey,
-        RemoveButton: RemoveButton
+        onChange: [onChange],
+        onSubmit: (formState_0, newData_1) => {
+          // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
+          newData_1.blockType = blockType;
+          editor.update(() => {
+            const node_1 = $getNodeByKey(nodeKey);
+            if (node_1 && $isBlockNode(node_1)) {
+              node_1.setFields(newData_1, true);
+            }
+          });
+          toggleDrawer();
+        },
+        submitted: submitted,
+        uuid: formUuid,
+        children: /*#__PURE__*/_jsx(BlockContent, {
+          baseClass: baseClass,
+          BlockDrawer: BlockDrawer,
+          Collapsible: BlockCollapsible,
+          CustomBlock: resolvedCustomBlock,
+          CustomLabel: resolvedCustomLabel,
+          EditButton: EditButton,
+          errorCount: errorCount,
+          formSchema: clientBlock?.fields ?? [],
+          initialState: initialState,
+          nodeKey: nodeKey,
+          RemoveButton: RemoveButton
+        })
       })
     });
-  }, [BlockCollapsible, BlockDrawer, CustomBlock, blockType, RemoveButton, EditButton, baseClass, editor, errorCount, toggleDrawer, clientBlock?.fields,
-  // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
-  initialState, nodeKey, onChange, submitted]);
+  }, [BlockCollapsible, BlockDrawer, resolvedCustomBlock, resolvedCustomLabel, blockType, drawerSlug, RemoveButton, EditButton, baseClass, editor, errorCount, toggleDrawer, clientBlock?.fields, formUuid, initialState, nodeKey, onChange, submitted]);
   if (!clientBlock) {
     return /*#__PURE__*/_jsx(BlockCollapsible, {
       disableBlockName: true,