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. */