@payloadcms/richtext-lexical 3.84.0 → 4.0.0-internal.38b7f1d

package/dist/features/align/client/toolbarAlignGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbarAlignGroup.d.ts","sourceRoot":"","sources":["../../../../src/features/align/client/toolbarAlignGroup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI7E,eAAO,MAAM,0BAA0B,UAAW,gBAAgB,EAAE,KAAG,YAQtE,CAAA"}
+{"version":3,"file":"toolbarAlignGroup.d.ts","sourceRoot":"","sources":["../../../../src/features/align/client/toolbarAlignGroup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI7E,eAAO,MAAM,0BAA0B,UAAW,gBAAgB,EAAE,KAAG,YAStE,CAAA"}

package/dist/features/align/client/toolbarAlignGroup.js

@@ -5,6 +5,7 @@ export const toolbarAlignGroupWithItems = items => {
   return {
     type: 'dropdown',
     ChildComponent: AlignLeftIcon,
+    iconOnly: true,
     items,
     key: 'align',
     order: 30

package/dist/features/align/client/toolbarAlignGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbarAlignGroup.js","names":["AlignLeftIcon","toolbarAlignGroupWithItems","items","type","ChildComponent","key","order"],"sources":["../../../../src/features/align/client/toolbarAlignGroup.ts"],"sourcesContent":["'use client'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../toolbars/types.js'\n\nimport { AlignLeftIcon } from '../../../lexical/ui/icons/AlignLeft/index.js'\n\nexport const toolbarAlignGroupWithItems = (items: ToolbarGroupItem[]): ToolbarGroup => {\n  return {\n    type: 'dropdown',\n    ChildComponent: AlignLeftIcon,\n    items,\n    key: 'align',\n    order: 30,\n  }\n}\n"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ;AAE9B,OAAO,MAAMC,0BAAA,GAA8BC,KAAA;EACzC,OAAO;IACLC,IAAA,EAAM;IACNC,cAAA,EAAgBJ,aAAA;IAChBE,KAAA;IACAG,GAAA,EAAK;IACLC,KAAA,EAAO;EACT;AACF","ignoreList":[]}
+{"version":3,"file":"toolbarAlignGroup.js","names":["AlignLeftIcon","toolbarAlignGroupWithItems","items","type","ChildComponent","iconOnly","key","order"],"sources":["../../../../src/features/align/client/toolbarAlignGroup.ts"],"sourcesContent":["'use client'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../toolbars/types.js'\n\nimport { AlignLeftIcon } from '../../../lexical/ui/icons/AlignLeft/index.js'\n\nexport const toolbarAlignGroupWithItems = (items: ToolbarGroupItem[]): ToolbarGroup => {\n  return {\n    type: 'dropdown',\n    ChildComponent: AlignLeftIcon,\n    iconOnly: true,\n    items,\n    key: 'align',\n    order: 30,\n  }\n}\n"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ;AAE9B,OAAO,MAAMC,0BAAA,GAA8BC,KAAA;EACzC,OAAO;IACLC,IAAA,EAAM;IACNC,cAAA,EAAgBJ,aAAA;IAChBK,QAAA,EAAU;IACVH,KAAA;IACAI,GAAA,EAAK;IACLC,KAAA,EAAO;EACT;AACF","ignoreList":[]}

package/dist/features/blockquote/server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/blockquote/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AACrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAQrE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrF,wBAAwB,CAAC,oBAAoB,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;AAE5D,eAAO,MAAM,iBAAiB,0FAwD5B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/blockquote/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AACrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAOrE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrF,wBAAwB,CAAC,oBAAoB,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;AAE5D,eAAO,MAAM,iBAAiB,0FAa5B,CAAA"}

package/dist/features/blockquote/server/index.js

@@ -1,6 +1,5 @@
 import { QuoteNode } from '@lexical/rich-text';
 import { createServerFeature } from '../../../utilities/createServerFeature.js';
-import { convertLexicalNodesToHTML } from '../../converters/lexicalToHtml_deprecated/converter/index.js';
 import { createNode } from '../../typeUtilities.js';
 import { MarkdownTransformer } from '../markdownTransformer.js';
 import { i18n } from './i18n.js';
@@ -11,44 +10,6 @@ export const BlockquoteFeature = createServerFeature({
     i18n,
     markdownTransformers: [MarkdownTransformer],
     nodes: [createNode({
-      converters: {
-        html: {
-          converter: async ({
-            converters,
-            currentDepth,
-            depth,
-            draft,
-            node,
-            overrideAccess,
-            parent,
-            req,
-            showHiddenFields
-          }) => {
-            const childrenText = await convertLexicalNodesToHTML({
-              converters,
-              currentDepth,
-              depth,
-              draft,
-              lexicalNodes: node.children,
-              overrideAccess,
-              parent: {
-                ...node,
-                parent
-              },
-              req,
-              showHiddenFields
-            });
-            const style = [node.format ? `text-align: ${node.format};` : '',
-            // the unit should be px. Do not change it to rem, em, or something else.
-            // The quantity should be 40px. Do not change it either.
-            // See rationale in
-            // https://github.com/payloadcms/payload/issues/13130#issuecomment-3058348085
-            node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : ''].filter(Boolean).join(' ');
-            return `<blockquote${style ? ` style='${style}'` : ''}>${childrenText}</blockquote>`;
-          },
-          nodeTypes: [QuoteNode.getType()]
-        }
-      },
       node: QuoteNode
     })]
   },

package/dist/features/blockquote/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["QuoteNode","createServerFeature","convertLexicalNodesToHTML","createNode","MarkdownTransformer","i18n","BlockquoteFeature","feature","ClientFeature","clientFeatureProps","markdownTransformers","nodes","converters","html","converter","currentDepth","depth","draft","node","overrideAccess","parent","req","showHiddenFields","childrenText","lexicalNodes","children","style","format","indent","filter","Boolean","join","nodeTypes","getType","key"],"sources":["../../../../src/features/blockquote/server/index.ts"],"sourcesContent":["import type { SerializedQuoteNode as _SerializedQuoteNode } from '@lexical/rich-text'\nimport type { SerializedLexicalNode } from 'lexical'\n\nimport { QuoteNode } from '@lexical/rich-text'\n\nimport type { StronglyTypedElementNode } from '../../../nodeTypes.js'\n\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { convertLexicalNodesToHTML } from '../../converters/lexicalToHtml_deprecated/converter/index.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { MarkdownTransformer } from '../markdownTransformer.js'\nimport { i18n } from './i18n.js'\n\nexport type SerializedQuoteNode<T extends SerializedLexicalNode = SerializedLexicalNode> =\n  StronglyTypedElementNode<_SerializedQuoteNode, 'quote', T>\n\nexport const BlockquoteFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#BlockquoteFeatureClient',\n    clientFeatureProps: null,\n    i18n,\n    markdownTransformers: [MarkdownTransformer],\n    nodes: [\n      createNode({\n        converters: {\n          html: {\n            converter: async ({\n              converters,\n              currentDepth,\n              depth,\n              draft,\n              node,\n              overrideAccess,\n              parent,\n              req,\n              showHiddenFields,\n            }) => {\n              const childrenText = await convertLexicalNodesToHTML({\n                converters,\n                currentDepth,\n                depth,\n                draft,\n                lexicalNodes: node.children,\n                overrideAccess,\n                parent: {\n                  ...node,\n                  parent,\n                },\n                req,\n                showHiddenFields,\n              })\n              const style = [\n                node.format ? `text-align: ${node.format};` : '',\n                // the unit should be px. Do not change it to rem, em, or something else.\n                // The quantity should be 40px. Do not change it either.\n                // See rationale in\n                // https://github.com/payloadcms/payload/issues/13130#issuecomment-3058348085\n                node.indent > 0 ? `padding-inline-start: ${node.indent * 40}px;` : '',\n              ]\n                .filter(Boolean)\n                .join(' ')\n\n              return `<blockquote${style ? ` style='${style}'` : ''}>${childrenText}</blockquote>`\n            },\n            nodeTypes: [QuoteNode.getType()],\n          },\n        },\n        node: QuoteNode,\n      }),\n    ],\n  },\n  key: 'blockquote',\n})\n"],"mappings":"AAGA,SAASA,SAAS,QAAQ;AAI1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,UAAU,QAAQ;AAC3B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,IAAI,QAAQ;AAKrB,OAAO,MAAMC,iBAAA,GAAoBL,mBAAA,CAAoB;EACnDM,OAAA,EAAS;IACPC,aAAA,EAAe;IACfC,kBAAA,EAAoB;IACpBJ,IAAA;IACAK,oBAAA,EAAsB,CAACN,mBAAA,CAAoB;IAC3CO,KAAA,EAAO,CACLR,UAAA,CAAW;MACTS,UAAA,EAAY;QACVC,IAAA,EAAM;UACJC,SAAA,EAAW,MAAAA,CAAO;YAChBF,UAAU;YACVG,YAAY;YACZC,KAAK;YACLC,KAAK;YACLC,IAAI;YACJC,cAAc;YACdC,MAAM;YACNC,GAAG;YACHC;UAAgB,CACjB;YACC,MAAMC,YAAA,GAAe,MAAMrB,yBAAA,CAA0B;cACnDU,UAAA;cACAG,YAAA;cACAC,KAAA;cACAC,KAAA;cACAO,YAAA,EAAcN,IAAA,CAAKO,QAAQ;cAC3BN,cAAA;cACAC,MAAA,EAAQ;gBACN,GAAGF,IAAI;gBACPE;cACF;cACAC,GAAA;cACAC;YACF;YACA,MAAMI,KAAA,GAAQ,CACZR,IAAA,CAAKS,MAAM,GAAG,eAAeT,IAAA,CAAKS,MAAM,GAAG,GAAG;YAC9C;YACA;YACA;YACA;YACAT,IAAA,CAAKU,MAAM,GAAG,IAAI,yBAAyBV,IAAA,CAAKU,MAAM,GAAG,OAAO,GAAG,GACpE,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;YAER,OAAO,cAAcL,KAAA,GAAQ,WAAWA,KAAA,GAAQ,GAAG,MAAMH,YAAA,eAA2B;UACtF;UACAS,SAAA,EAAW,CAAChC,SAAA,CAAUiC,OAAO;QAC/B;MACF;MACAf,IAAA,EAAMlB;IACR;EAEJ;EACAkC,GAAA,EAAK;AACP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["QuoteNode","createServerFeature","createNode","MarkdownTransformer","i18n","BlockquoteFeature","feature","ClientFeature","clientFeatureProps","markdownTransformers","nodes","node","key"],"sources":["../../../../src/features/blockquote/server/index.ts"],"sourcesContent":["import type { SerializedQuoteNode as _SerializedQuoteNode } from '@lexical/rich-text'\nimport type { SerializedLexicalNode } from 'lexical'\n\nimport { QuoteNode } from '@lexical/rich-text'\n\nimport type { StronglyTypedElementNode } from '../../../nodeTypes.js'\n\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { MarkdownTransformer } from '../markdownTransformer.js'\nimport { i18n } from './i18n.js'\n\nexport type SerializedQuoteNode<T extends SerializedLexicalNode = SerializedLexicalNode> =\n  StronglyTypedElementNode<_SerializedQuoteNode, 'quote', T>\n\nexport const BlockquoteFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#BlockquoteFeatureClient',\n    clientFeatureProps: null,\n    i18n,\n    markdownTransformers: [MarkdownTransformer],\n    nodes: [\n      createNode({\n        node: QuoteNode,\n      }),\n    ],\n  },\n  key: 'blockquote',\n})\n"],"mappings":"AAGA,SAASA,SAAS,QAAQ;AAI1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,IAAI,QAAQ;AAKrB,OAAO,MAAMC,iBAAA,GAAoBJ,mBAAA,CAAoB;EACnDK,OAAA,EAAS;IACPC,aAAA,EAAe;IACfC,kBAAA,EAAoB;IACpBJ,IAAA;IACAK,oBAAA,EAAsB,CAACN,mBAAA,CAAoB;IAC3CO,KAAA,EAAO,CACLR,UAAA,CAAW;MACTS,IAAA,EAAMX;IACR;EAEJ;EACAY,GAAA,EAAK;AACP","ignoreList":[]}

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

@@ -42,6 +42,16 @@ export type BlockCollapsibleProps = {
      * @default true
      */
     removeButton?: boolean;
+    /**
+     * Whether to show the drag handle icon
+     * @default true
+     */
+    showDragHandle?: boolean;
+    /**
+     * Whether to show the row number
+     * @default true
+     */
+    showRowNumber?: boolean;
 };
 export type BlockCollapsibleWithErrorProps = {
     errorCount?: number;

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;;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"}
+{"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;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,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.map

@@ -1 +1 @@
-{"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":[]}
+{"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   * Whether to show the drag handle icon\n   * @default true\n   */\n  showDragHandle?: boolean\n  /**\n   * Whether to show the row number\n   * @default true\n   */\n  showRowNumber?: 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;AAkF9C,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.css

@@ -0,0 +1,178 @@
+@layer payload-default {
+  .LexicalEditorTheme__block {
+    margin: var(--spacer-3) 0;
+    z-index: 1;
+    color: var(--color-text);
+
+    &[data-lexical-decorator='true'] {
+      width: auto;
+    }
+
+    .collapsible__header-wrap {
+      right: var(--spacer-4);
+    }
+  }
+
+  .LexicalEditorTheme__block__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .LexicalEditorTheme__block__row {
+    .collapsible__toggle-wrap {
+      padding-inline-start: var(--spacer-2);
+    }
+  }
+
+  .LexicalEditorTheme__block__header {
+    h3 {
+      margin: 0;
+    }
+  }
+
+  .LexicalEditorTheme__block__header-wrap {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .LexicalEditorTheme__block__heading-with-error {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .LexicalEditorTheme__block--has-no-error {
+    > .array-field__header .array-field__heading-with-error {
+      color: var(--color-text);
+    }
+  }
+
+  .LexicalEditorTheme__block--has-error {
+    > .array-field__header {
+      color: var(--color-text-danger);
+    }
+  }
+
+  .LexicalEditorTheme__block__error-pill {
+    align-self: center;
+  }
+
+  .LexicalEditorTheme__block__header-actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  .LexicalEditorTheme__block__header-action {
+    cursor: pointer;
+    margin-left: var(--spacer-1);
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+  }
+
+  .LexicalEditorTheme__block__removeButton.btn {
+    margin: 0;
+    &:hover {
+      background-color: var(--color-bg-secondary);
+    }
+  }
+
+  .LexicalEditorTheme__block__editButton.btn {
+    margin: 0;
+    width: var(--spacer-4);
+
+    &:hover {
+      background-color: var(--color-bg-secondary);
+    }
+  }
+
+  .LexicalEditorTheme__block__block-header {
+    pointer-events: none;
+  }
+
+  .LexicalEditorTheme__block__block-header * {
+    pointer-events: all;
+  }
+
+  .LexicalEditorTheme__block__block-header,
+  .LexicalEditorTheme__block__block-header > div:first-child {
+    display: flex;
+    max-width: 100%;
+    width: 100%;
+    overflow: hidden;
+    gap: var(--spacer-2);
+    align-items: center;
+    justify-content: flex-start;
+    pointer-events: none;
+
+    & > * {
+      pointer-events: all;
+    }
+  }
+
+  .LexicalEditorTheme__block__block-number {
+    flex-shrink: 0;
+    color: var(--color-text);
+  }
+
+  .LexicalEditorTheme__block__block-number {
+    flex-shrink: 0;
+  }
+
+  .LexicalEditorTheme__block__block-pill {
+    flex-shrink: 0;
+    display: block;
+    line-height: unset;
+  }
+
+  .LexicalEditorTheme__block__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .LexicalEditorTheme__block__drawer-toggler {
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    align-self: flex-start;
+
+    .btn {
+      color: var(--color-icon-tertiary);
+      margin: 0;
+
+      &:hover {
+        color: var(--color-text);
+      }
+    }
+  }
+
+  .LexicalEditorTheme__block-not-found {
+    color: var(--color-text-danger);
+  }
+
+  html[data-theme='light'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--color-text-danger);
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--color-text-danger);
+      }
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ViewMapBlockComponentProps } from '../../../../types.js';
 import type { BlockFields } from '../../server/nodes/BlocksNode.js';
-import './index.scss';
+import './index.css';
 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

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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAsCA,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,aAAa,CAAA;AAWpB,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,CAuuBxD,CAAA"}

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

@@ -4,12 +4,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
-import { Button, Collapsible, Drawer, EditDepthProvider, ErrorPill, Form, formatDrawerSlug, FormSubmit, Pill, RenderFields, SectionTitle, useConfig, useDocumentForm, useDocumentInfo, useEditDepth, useFormSubmitted, useServerFunctions, useTranslation } from '@payloadcms/ui';
+import { Button, Collapsible, Drawer, EditDepthProvider, ErrorPill, Form, formatDrawerSlug, FormSubmit, MoreIcon, Pill, Popup, PopupList, RenderFields, SectionTitle, useConfig, useDocumentForm, useDocumentInfo, useEditDepth, useFormSubmitted, useServerFunctions, useTranslation, XIcon } from '@payloadcms/ui';
 import { abortAndIgnore } from '@payloadcms/ui/shared';
-import { $getNodeByKey } from 'lexical';
+import { $getNodeByKey, $getRoot, SKIP_DOM_SELECTION_TAG } from 'lexical';
 import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
+import './index.css';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
 import { $isBlockNode } from '../nodes/BlocksNode.js';
@@ -199,6 +200,11 @@ export const BlockComponent = props => {
             newData.blockType = blockType;
             node.setFields(newData, true);
           }
+        },
+        // Without this, the outer editor's reconciler resets DOM selection
+        // back into its own root, kicking focus out of any nested richText.
+        {
+          tag: SKIP_DOM_SELECTION_TAG
         });
         setInitialState(state);
         if (!CustomLabelFromProps) {
@@ -272,6 +278,11 @@ export const BlockComponent = props => {
           newData_0.blockType = blockType;
           node_0.setFields(newData_0, true);
         }
+      },
+      // Without this, the outer editor's reconciler resets DOM selection
+      // back into its own root, kicking focus out of any nested richText.
+      {
+        tag: SKIP_DOM_SELECTION_TAG
       });
     }, 0);
     if (submit) {
@@ -301,6 +312,29 @@ export const BlockComponent = props => {
       $getNodeByKey(nodeKey)?.remove();
     });
   }, [editor, nodeKey]);
+  const [rowIndex, setRowIndex] = React.useState(0);
+  useEffect(() => {
+    const updateIndex = () => {
+      editor.getEditorState().read(() => {
+        const root = $getRoot();
+        const children = root.getChildren();
+        let blockCount = 0;
+        for (const child of children) {
+          if ($isBlockNode(child)) {
+            if (child.getKey() === nodeKey) {
+              setRowIndex(blockCount);
+              return;
+            }
+            blockCount++;
+          }
+        }
+      });
+    };
+    updateIndex();
+    return editor.registerUpdateListener(() => {
+      updateIndex();
+    });
+  }, [editor, nodeKey]);
   const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock?.slug;
   const onCollapsedChange = useCallback(changedCollapsed => {
     void getDocPreferences().then(currentDocPreferences => {
@@ -340,7 +374,7 @@ export const BlockComponent = props => {
       e_0.preventDefault();
     },
     round: true,
-    size: "small",
+    size: "medium",
     tooltip: t('lexical:blocks:inlineBlocks:edit', {
       label: blockDisplayName
     })
@@ -359,7 +393,7 @@ export const BlockComponent = props => {
   }), [baseClass, isEditable, removeBlock]);
   const BlockCollapsible = useMemo(() => ({
     Actions,
-    children,
+    children: children_0,
     className,
     collapsibleProps,
     disableBlockName,
@@ -368,18 +402,56 @@ export const BlockComponent = props => {
     fieldHasErrors,
     Label,
     Pill: CustomPill,
-    removeButton
+    removeButton,
+    showDragHandle = true,
+    showRowNumber = true
   }) => {
     return /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__container ${baseClass}-${blockType}`,
       children: /*#__PURE__*/_jsx(Collapsible, {
+        actions: typeof Actions !== 'undefined' ? Actions : isEditable ? /*#__PURE__*/_jsx(Popup, {
+          button: /*#__PURE__*/_jsx(MoreIcon, {}),
+          buttonClassName: `${baseClass}__actions-button`,
+          caret: false,
+          horizontalAlign: "right",
+          render: ({
+            close
+          }) => /*#__PURE__*/_jsxs(PopupList.ButtonGroup, {
+            buttonSize: "medium",
+            children: [(resolvedCustomBlock && editButton !== false || !resolvedCustomBlock && editButton) && /*#__PURE__*/_jsx(PopupList.Button, {
+              onClick: () => {
+                toggleDrawer();
+                close();
+              },
+              children: t('general:edit')
+            }), removeButton !== false && /*#__PURE__*/_jsxs(PopupList.Button, {
+              onClick: () => {
+                removeBlock();
+                close();
+              },
+              children: [/*#__PURE__*/_jsx(XIcon, {}), t('general:remove')]
+            })]
+          }),
+          size: "large"
+        }) : null,
         className: [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`, className].filter(Boolean).join(' '),
         collapsibleStyle: fieldHasErrors ? 'error' : 'default',
-        header: /*#__PURE__*/_jsxs("div", {
+        dragHandleProps: showDragHandle ? {
+          id: nodeKey,
+          attributes: {
+            role: 'button',
+            tabIndex: 0
+          },
+          listeners: {}
+        } : undefined,
+        header: /*#__PURE__*/_jsx("div", {
           className: `${baseClass}__block-header`,
-          children: [typeof Label !== 'undefined' ? Label : typeof resolvedCustomLabel !== 'undefined' ? resolvedCustomLabel : /*#__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, {
+            children: [showRowNumber && /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__block-number`,
+              children: String(rowIndex + 1).padStart(2, '0')
+            }), typeof CustomPill !== 'undefined' ? CustomPill : /*#__PURE__*/_jsx(Pill, {
               className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`,
               pillStyle: "white",
               size: "small",
@@ -392,12 +464,7 @@ export const BlockComponent = props => {
               i18n: i18n,
               withMessage: true
             })]
-          }), /*#__PURE__*/_jsx("div", {
-            className: `${baseClass}__block-actions`,
-            children: typeof Actions !== 'undefined' ? Actions : /*#__PURE__*/_jsxs(_Fragment, {
-              children: [resolvedCustomBlock && editButton !== false || !resolvedCustomBlock && editButton ? /*#__PURE__*/_jsx(EditButton, {}) : null, removeButton !== false && isEditable ? /*#__PURE__*/_jsx(RemoveButton, {}) : null]
-            })
-          })]
+          })
         }),
         isCollapsed: isCollapsed,
         onToggle: incomingCollapsedState => {
@@ -405,10 +472,10 @@ export const BlockComponent = props => {
           setIsCollapsed(incomingCollapsedState);
         },
         ...(collapsibleProps || {}),
-        children: children
+        children: children_0
       }, 0)
     });
-  }, [resolvedCustomBlock, resolvedCustomLabel, EditButton, RemoveButton, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, i18n, isCollapsed, onCollapsedChange, isEditable]);
+  }, [resolvedCustomBlock, resolvedCustomLabel, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, i18n, isCollapsed, onCollapsedChange, isEditable, nodeKey, removeBlock, rowIndex, t, toggleDrawer]);
   const blockID = formData?.id;
   const BlockDrawer = useMemo(() => () => /*#__PURE__*/_jsx(EditDepthProvider, {
     children: /*#__PURE__*/_jsx(Drawer, {
@@ -465,6 +532,11 @@ export const BlockComponent = props => {
             if (node_1 && $isBlockNode(node_1)) {
               node_1.setFields(newData_1, true);
             }
+          },
+          // Without this, the outer editor's reconciler resets DOM selection
+          // back into its own root, kicking focus out of any nested richText.
+          {
+            tag: SKIP_DOM_SELECTION_TAG
           });
           toggleDrawer();
         },