feat(richtext-lexical): remove button for block

packages/richtext-lexical/src/field/features/Blocks/component/BlockContent.tsx

@@ -2,7 +2,7 @@ import type { Block, Data } from 'payload/types'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { $getNodeByKey } from 'lexical'
-import { ErrorPill, Pill } from 'payload/components'
+import { Button, ErrorPill, Pill } from 'payload/components'
 import { Collapsible } from 'payload/components/elements'
 import { SectionTitle } from 'payload/components/fields/Blocks'
 import { RenderFields, createNestedFieldPath, useFormSubmitted } from 'payload/components/forms'
@@ -68,6 +68,12 @@ export const BlockContent: React.FC<Props> = (props) => {
     })
   }, [editor, nodeKey, collapsed])
 
+  const removeBlock = useCallback(() => {
+    editor.update(() => {
+      $getNodeByKey(nodeKey).remove()
+    })
+  }, [editor, nodeKey])
+
   return (
     <React.Fragment>
       <Collapsible
@@ -76,6 +82,7 @@ export const BlockContent: React.FC<Props> = (props) => {
         collapsibleStyle={false ? 'error' : 'default'}
         header={
           <div className={`${baseClass}__block-header`}>
+            <div>
               <Pill
                 className={`${baseClass}__block-pill ${baseClass}__block-pill-${fields?.data?.blockType}`}
                 pillStyle="white"
@@ -85,6 +92,19 @@ export const BlockContent: React.FC<Props> = (props) => {
               <SectionTitle path={`${path}blockName`} readOnly={field?.admin?.readOnly} />
               {fieldHasErrors && <ErrorPill count={childErrorPathsCount} withMessage />}
             </div>
+            <Button
+              buttonStyle="icon-label"
+              className={`${baseClass}__removeButton`}
+              disabled={field?.admin?.readOnly}
+              icon="x"
+              onClick={(e) => {
+                e.preventDefault()
+                removeBlock()
+              }}
+              round
+              tooltip="Remove Block"
+            />
+          </div>
         }
         key={0}
         onToggle={(collapsed) => {

packages/richtext-lexical/src/field/features/Blocks/component/index.scss

@@ -63,11 +63,32 @@
     }
   }
 
+  .collapsible {
+    &__header-wrap {
+      //  Make more space for the block header (default right: is base(3)) so that the remove button aligns nicely to the right
+      right: base(1.5);
+    }
+  }
+
+  &__removeButton {
+    margin: 0;
+  }
+
   &__block-header {
-    display: inline-flex;
+    pointer-events: none;
+  }
+
+  &__block-header * {
+    pointer-events: all;
+  }
+
+  &__block-header,
+  &__block-header div {
+    display: flex;
     max-width: 100%;
     overflow: hidden;
     gap: base(0.375);
+    justify-content: space-between;
   }
 
   &__block-number {