diff --git a/packages/richtext-lexical/src/field/features/Blocks/component/BlockContent.tsx b/packages/richtext-lexical/src/field/features/Blocks/component/BlockContent.tsx index c3cc9f790..e43c5919a 100644 --- a/packages/richtext-lexical/src/field/features/Blocks/component/BlockContent.tsx +++ b/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) => { }) }, [editor, nodeKey, collapsed]) + const removeBlock = useCallback(() => { + editor.update(() => { + $getNodeByKey(nodeKey).remove() + }) + }, [editor, nodeKey]) + return ( = (props) => { collapsibleStyle={false ? 'error' : 'default'} header={
- - {getTranslation(block.labels.singular, i18n)} - - - {fieldHasErrors && } +
+ + {getTranslation(block.labels.singular, i18n)} + + + {fieldHasErrors && } +
+
} key={0} diff --git a/packages/richtext-lexical/src/field/features/Blocks/component/index.scss b/packages/richtext-lexical/src/field/features/Blocks/component/index.scss index 8d1ac7121..5ec7d454d 100644 --- a/packages/richtext-lexical/src/field/features/Blocks/component/index.scss +++ b/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 {