diff --git a/docs/rich-text/overview.mdx b/docs/rich-text/overview.mdx
index 2609e0491fb..2e3761f3d94 100644
--- a/docs/rich-text/overview.mdx
+++ b/docs/rich-text/overview.mdx
@@ -305,6 +305,8 @@ The Rich Text Field editor configuration has an `admin` property with the follow
| --- | --- |
| **`placeholder`** | Set this property to define a placeholder string for the field. |
| **`hideGutter`** | Set this property to `true` to hide this field's gutter within the Admin Panel. |
+| **`hideInsertParagraphAtEnd`** | Set this property to `true` to hide the "+" button that appears at the end of the editor |
+
### Disable the gutter
@@ -336,4 +338,4 @@ You can customize the placeholder (the text that appears in the editor when it's
},
}),
}
-```
\ No newline at end of file
+```
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
index d34ba628f21..014561e0460 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
@@ -100,22 +100,23 @@
&__tableAddColumns:after,
&__tableAddRows:after {
- background-image: url(../../../../../lexical/ui/icons/Add/index.svg);
- background-position: center;
- background-repeat: no-repeat;
- display: block;
- content: ' ';
+ display: flex;
+ content: '+';
+ font-size: 1.4rem;
+ border-radius: $style-radius-s;
+ justify-content: center;
+ align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
- opacity: 0.4;
+ color: var(--theme-elevation-500);
}
&__tableAddColumns:hover,
&__tableAddRows:hover {
- background-color: var(--theme-elevation-200);
+ background-color: var(--theme-elevation-150);
}
&__tableAddRows {
@@ -178,9 +179,14 @@
mix-blend-mode: screen;
}
- &__tableAddColumns:after,
- &__tableAddRows:after {
- background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
+ &__tableAddColumns,
+ &__tableAddRows {
+ background-color: var(--theme-elevation-50);
+ }
+
+ &__tableAddColumns:hover,
+ &__tableAddRows:hover {
+ background-color: var(--theme-elevation-100);
}
}
}
diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.tsx b/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
index 03f2a7c6e72..96e58be2afd 100644
--- a/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
+++ b/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
@@ -4,7 +4,13 @@ import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary.js'
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js'
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js'
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'
-import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical'
+import {
+ $createParagraphNode,
+ $getRoot,
+ BLUR_COMMAND,
+ COMMAND_PRIORITY_LOW,
+ FOCUS_COMMAND,
+} from 'lexical'
import * as React from 'react'
import { useEffect, useState } from 'react'
@@ -15,6 +21,7 @@ import { EditorPlugin } from './EditorPlugin.js'
import './LexicalEditor.scss'
import { AddBlockHandlePlugin } from './plugins/handles/AddBlockHandlePlugin/index.js'
import { DraggableBlockPlugin } from './plugins/handles/DraggableBlockPlugin/index.js'
+import { InsertParagraphAtEndPlugin } from './plugins/InsertParagraphAtEnd/index.js'
import { MarkdownShortcutPlugin } from './plugins/MarkdownShortcut/index.js'
import { SlashMenuPlugin } from './plugins/SlashMenu/index.js'
import { TextPlugin } from './plugins/TextPlugin/index.js'
@@ -104,6 +111,7 @@ export const LexicalEditor: React.FC<
}
ErrorBoundary={LexicalErrorBoundary}
/>
+
{
+ const [editor] = useLexicalComposerContext()
+ const { editorConfig } = useEditorConfigContext()
+
+ if (editorConfig?.admin?.hideInsertParagraphAtEnd) {
+ return null
+ }
+
+ const onClick = () => {
+ editor.update(() => {
+ const paragraphNode = $createParagraphNode()
+ $getRoot().append(paragraphNode)
+ paragraphNode.select()
+ })
+ }
+
+ return (
+
+ )
+}
diff --git a/packages/richtext-lexical/src/types.ts b/packages/richtext-lexical/src/types.ts
index 2b757f47786..e859d389b5e 100644
--- a/packages/richtext-lexical/src/types.ts
+++ b/packages/richtext-lexical/src/types.ts
@@ -24,6 +24,10 @@ export type LexicalFieldAdminProps = {
* Controls if the gutter (padding to the left & gray vertical line) should be hidden. @default false
*/
hideGutter?: boolean
+ /**
+ * Controls if the insert paragraph at the end button should be hidden. @default false
+ */
+ hideInsertParagraphAtEnd?: boolean
/**
* Changes the placeholder text in the editor if no content is present.
*/