From 6757f7d45971423c95e5acc29462c20896b752a4 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Mon, 13 Jan 2025 12:08:00 -0700 Subject: [PATCH] feat(richtext-lexical): add new paragraph button below the editor (#10530) Fixes https://github.com/payloadcms/payload/issues/10448 https://github.com/user-attachments/assets/dfcd4ab6-8e41-4a1b-b642-876a0737d9ae --- docs/rich-text/overview.mdx | 4 +- .../client/plugins/TablePlugin/index.scss | 26 +++++---- .../src/lexical/LexicalEditor.tsx | 10 +++- .../plugins/InsertParagraphAtEnd/index.scss | 54 +++++++++++++++++++ .../plugins/InsertParagraphAtEnd/index.tsx | 36 +++++++++++++ packages/richtext-lexical/src/types.ts | 4 ++ 6 files changed, 122 insertions(+), 12 deletions(-) create mode 100644 packages/richtext-lexical/src/lexical/plugins/InsertParagraphAtEnd/index.scss create mode 100644 packages/richtext-lexical/src/lexical/plugins/InsertParagraphAtEnd/index.tsx diff --git a/docs/rich-text/overview.mdx b/docs/rich-text/overview.mdx index 2609e0491f..2e3761f3d9 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 d34ba628f2..014561e046 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 03f2a7c6e7..96e58be2af 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 2b757f4778..e859d389b5 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. */