From d19610dab649ac2c59d37df9f2bd4d0e5ba3bf22 Mon Sep 17 00:00:00 2001 From: Damien Robson Date: Wed, 15 Jan 2025 12:13:59 +0000 Subject: [PATCH] chore(text-editor): rename component to text-editor for consistency with previous implementation --- docs/using-lexical.mdx | 2 +- src/components/dialog/dialog-test.stories.tsx | 2 +- src/components/form/form-test.stories.tsx | 2 +- src/components/note/note.component.tsx | 8 +- .../rich-text-editor/components.test-pw.tsx | 14 --- src/components/rich-text-editor/index.ts | 3 - .../__internal__/constants.ts | 4 +- .../__internal__/helpers.test.ts | 0 .../__internal__/helpers.ts | 0 .../__internal__/index.ts | 0 .../AutoLinker/auto-link.component.tsx | 2 +- .../__internal__/plugins/AutoLinker/index.ts | 0 .../character-counter.component.tsx | 0 .../character-counter.style.ts | 0 .../character-counter.test.tsx | 4 +- .../plugins/CharacterCounter/index.ts | 0 .../content-editor.component.tsx | 0 .../ContentEditor/content-editor.style.ts | 0 .../ContentEditor/content-editor.test.tsx | 0 .../plugins/ContentEditor/index.ts | 0 .../__internal__/plugins/LinkMonitor/index.ts | 0 .../LinkMonitor/link-monitor.plugin.ts | 6 +- .../plugins/LinkPreviewer/index.ts | 0 .../link-previewer.component.tsx | 8 +- .../LinkPreviewer/link-previewer.style.ts | 0 .../LinkPreviewer/link-previewer.test.tsx | 0 .../__internal__/plugins/OnChange/index.ts | 0 .../plugins/OnChange/on-change.plugin.ts | 0 .../plugins/OnChange/on-change.test.tsx | 0 .../__internal__/plugins/Placeholder/index.ts | 0 .../Placeholder/placeholder.component.tsx | 0 .../plugins/Placeholder/placeholder.style.ts | 0 .../plugins/Placeholder/placeholder.test.tsx | 2 +- .../Toolbar/buttons/bold.component.tsx | 7 +- .../plugins/Toolbar/buttons/buttons.test.tsx | 0 .../plugins/Toolbar/buttons/common.ts | 0 .../plugins/Toolbar/buttons/index.ts | 0 .../Toolbar/buttons/italic.component.tsx | 7 +- .../Toolbar/buttons/list.component.tsx | 9 +- .../Toolbar/buttons/save.component.tsx | 0 .../__internal__/plugins/Toolbar/index.ts | 0 .../plugins/Toolbar/toolbar.component.tsx | 6 +- .../plugins/Toolbar/toolbar.style.ts | 0 .../plugins/Toolbar/toolbar.test.tsx | 0 .../__internal__/plugins/index.ts | 0 .../__internal__/read-only-rte.component.tsx | 7 +- .../__internal__/read-only-rte.test.tsx | 0 .../__internal__/style.css | 0 .../__snapshots__/text-editor.test.tsx.snap} | 0 .../text-editor/components.test-pw.tsx | 10 ++ src/components/text-editor/index.ts | 3 + .../text-editor-test.stories.tsx} | 20 ++-- .../text-editor.component.tsx} | 23 +++-- .../text-editor.context.ts} | 0 .../text-editor.mdx} | 94 +++++++++---------- .../text-editor.pw.tsx} | 84 ++++++++--------- .../text-editor.stories.tsx} | 89 ++++++++---------- .../text-editor.style.ts} | 4 +- .../text-editor.test.tsx} | 65 ++++++------- 59 files changed, 222 insertions(+), 263 deletions(-) delete mode 100644 src/components/rich-text-editor/components.test-pw.tsx delete mode 100644 src/components/rich-text-editor/index.ts rename src/components/{rich-text-editor => text-editor}/__internal__/constants.ts (90%) rename src/components/{rich-text-editor => text-editor}/__internal__/helpers.test.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/helpers.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/AutoLinker/auto-link.component.tsx (95%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/AutoLinker/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/CharacterCounter/character-counter.component.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/CharacterCounter/character-counter.style.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/CharacterCounter/character-counter.test.tsx (89%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/CharacterCounter/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/ContentEditor/content-editor.component.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/ContentEditor/content-editor.style.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/ContentEditor/content-editor.test.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/ContentEditor/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/LinkMonitor/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts (91%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/LinkPreviewer/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx (86%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/LinkPreviewer/link-previewer.style.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/LinkPreviewer/link-previewer.test.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/OnChange/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/OnChange/on-change.plugin.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/OnChange/on-change.test.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Placeholder/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Placeholder/placeholder.component.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Placeholder/placeholder.style.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Placeholder/placeholder.test.tsx (94%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/bold.component.tsx (88%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/buttons.test.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/common.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/italic.component.tsx (88%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/list.component.tsx (94%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/buttons/save.component.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/toolbar.component.tsx (93%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/toolbar.style.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/Toolbar/toolbar.test.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/plugins/index.ts (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/read-only-rte.component.tsx (94%) rename src/components/{rich-text-editor => text-editor}/__internal__/read-only-rte.test.tsx (100%) rename src/components/{rich-text-editor => text-editor}/__internal__/style.css (100%) rename src/components/{rich-text-editor/__snapshots__/rich-text-editor.test.tsx.snap => text-editor/__snapshots__/text-editor.test.tsx.snap} (100%) create mode 100644 src/components/text-editor/components.test-pw.tsx create mode 100644 src/components/text-editor/index.ts rename src/components/{rich-text-editor/rich-text-editor-test.stories.tsx => text-editor/text-editor-test.stories.tsx} (89%) rename src/components/{rich-text-editor/rich-text-editor.component.tsx => text-editor/text-editor.component.tsx} (93%) rename src/components/{rich-text-editor/rich-text-editor.context.ts => text-editor/text-editor.context.ts} (100%) rename src/components/{rich-text-editor/rich-text-editor.mdx => text-editor/text-editor.mdx} (76%) rename src/components/{rich-text-editor/rich-text-editor.pw.tsx => text-editor/text-editor.pw.tsx} (89%) rename src/components/{rich-text-editor/rich-text-editor.stories.tsx => text-editor/text-editor.stories.tsx} (88%) rename src/components/{rich-text-editor/rich-text-editor.style.ts => text-editor/text-editor.style.ts} (95%) rename src/components/{rich-text-editor/rich-text-editor.test.tsx => text-editor/text-editor.test.tsx} (85%) diff --git a/docs/using-lexical.mdx b/docs/using-lexical.mdx index 618222ead3..c3c70bb6ab 100644 --- a/docs/using-lexical.mdx +++ b/docs/using-lexical.mdx @@ -25,7 +25,7 @@ The following `lexical` packages are used in Carbon to provide the functionality First, import the relevant components from the `carbon-react` package: ```jsx -import TextEditor, { CreateFromHTML } from 'carbon-react/lib/components/rich-text-editor'; +import TextEditor, { CreateFromHTML } from 'carbon-react/lib/components/text-editor'; import Note from 'carbon-react/lib/components/note'; ``` diff --git a/src/components/dialog/dialog-test.stories.tsx b/src/components/dialog/dialog-test.stories.tsx index 2dd100c257..da74332550 100644 --- a/src/components/dialog/dialog-test.stories.tsx +++ b/src/components/dialog/dialog-test.stories.tsx @@ -12,7 +12,7 @@ import Icon from "../icon"; import DateInput, { DateChangeEvent } from "../date"; import { Checkbox } from "../checkbox"; import { Select, Option } from "../select"; -import TextEditor from "../rich-text-editor"; +import TextEditor from "../text-editor"; import Box from "../box"; import Typography from "../typography"; diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx index 94350338dd..a910d55eba 100644 --- a/src/components/form/form-test.stories.tsx +++ b/src/components/form/form-test.stories.tsx @@ -24,7 +24,7 @@ import InlineInputs from "../inline-inputs"; import Pager from "../pager"; import Password from "../password"; import Search, { SearchProps } from "../search"; -import TextEditor from "../rich-text-editor"; +import TextEditor from "../text-editor"; export default { title: "Form/Test", diff --git a/src/components/note/note.component.tsx b/src/components/note/note.component.tsx index 209dae5fe0..be68482288 100644 --- a/src/components/note/note.component.tsx +++ b/src/components/note/note.component.tsx @@ -12,8 +12,8 @@ import { } from "./note.style"; import StatusIcon from "./__internal__/status-icon"; import { ActionPopover } from "../action-popover"; -import ReadOnlyEditor from "../rich-text-editor/__internal__"; -import RichTextEditorContext from "../rich-text-editor/rich-text-editor.context"; +import ReadOnlyEditor from "../text-editor/__internal__"; +import TextEditorContext from "../text-editor/text-editor.context"; import LinkPreview, { LinkPreviewProps } from "../link-preview"; import Typography from "../typography"; @@ -83,7 +83,7 @@ export const Note = ({ }; return ( - + @@ -137,7 +137,7 @@ export const Note = ({ )} - + ); }; diff --git a/src/components/rich-text-editor/components.test-pw.tsx b/src/components/rich-text-editor/components.test-pw.tsx deleted file mode 100644 index ee652c63fe..0000000000 --- a/src/components/rich-text-editor/components.test-pw.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import RichTextEditor from "./rich-text-editor.component"; - -const RichTextEditorDefaultComponent = ({ ...props }) => { - return ( - - ); -}; - -export default RichTextEditorDefaultComponent; diff --git a/src/components/rich-text-editor/index.ts b/src/components/rich-text-editor/index.ts deleted file mode 100644 index 2d96e09f7e..0000000000 --- a/src/components/rich-text-editor/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default } from "./rich-text-editor.component"; -export { CreateEmpty, CreateFromHTML } from "./rich-text-editor.component"; -export type { RichTextEditorProps } from "./rich-text-editor.component"; diff --git a/src/components/rich-text-editor/__internal__/constants.ts b/src/components/text-editor/__internal__/constants.ts similarity index 90% rename from src/components/rich-text-editor/__internal__/constants.ts rename to src/components/text-editor/__internal__/constants.ts index d39c2cfbe6..99fb21d027 100644 --- a/src/components/rich-text-editor/__internal__/constants.ts +++ b/src/components/text-editor/__internal__/constants.ts @@ -20,7 +20,7 @@ const theme: EditorThemeClasses = { }; /** The available actions that can be used in the editor */ -const RichTextEditorActionTypes = { +const TextEditorActionTypes = { Bold: "bold" as TextFormatType, Italic: "italic" as TextFormatType, OrderedList: "number" as ListType, @@ -39,4 +39,4 @@ const markdownNodes = [ HorizontalRuleNode, ]; -export { COMPONENT_PREFIX, markdownNodes, RichTextEditorActionTypes, theme }; +export { COMPONENT_PREFIX, markdownNodes, TextEditorActionTypes, theme }; diff --git a/src/components/rich-text-editor/__internal__/helpers.test.ts b/src/components/text-editor/__internal__/helpers.test.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/helpers.test.ts rename to src/components/text-editor/__internal__/helpers.test.ts diff --git a/src/components/rich-text-editor/__internal__/helpers.ts b/src/components/text-editor/__internal__/helpers.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/helpers.ts rename to src/components/text-editor/__internal__/helpers.ts diff --git a/src/components/rich-text-editor/__internal__/index.ts b/src/components/text-editor/__internal__/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/index.ts rename to src/components/text-editor/__internal__/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx b/src/components/text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx similarity index 95% rename from src/components/rich-text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx rename to src/components/text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx index 1bf7a775a8..b8aafb5d3b 100644 --- a/src/components/rich-text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx +++ b/src/components/text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx @@ -1,7 +1,7 @@ /* istanbul ignore file */ /** * Owing to the nature of how this plugin runs, it is not possible to test it in isolation. - * It is tested as part of the RichTextEditor Playwright tests. + * It is tested as part of the TextEditor Playwright tests. * * The AutoLinkerPlugin component is a wrapper around the AutoLinkPlugin component provided * by Lexical. It is used to automatically convert URLs and email addresses into clickable diff --git a/src/components/rich-text-editor/__internal__/plugins/AutoLinker/index.ts b/src/components/text-editor/__internal__/plugins/AutoLinker/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/AutoLinker/index.ts rename to src/components/text-editor/__internal__/plugins/AutoLinker/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.component.tsx b/src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.component.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.component.tsx rename to src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.component.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.style.ts b/src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.style.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.style.ts rename to src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.style.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx b/src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx similarity index 89% rename from src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx rename to src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx index 1ff320f9a3..56e644dcf1 100644 --- a/src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx +++ b/src/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx @@ -1,6 +1,6 @@ /** - * The CharacterCounterPlugin component is a plugin for the RichTextEditor. It can be unit tested in isolation - * as it has no direct dependencies on the RichTextEditor component itself and the state can easily be mocked using the + * The CharacterCounterPlugin component is a plugin for the TextEditor. It can be unit tested in isolation + * as it has no direct dependencies on the TextEditor component itself and the state can easily be mocked using the * headless editor. */ import { createHeadlessEditor } from "@lexical/headless"; diff --git a/src/components/rich-text-editor/__internal__/plugins/CharacterCounter/index.ts b/src/components/text-editor/__internal__/plugins/CharacterCounter/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/CharacterCounter/index.ts rename to src/components/text-editor/__internal__/plugins/CharacterCounter/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/ContentEditor/content-editor.component.tsx b/src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/ContentEditor/content-editor.component.tsx rename to src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/ContentEditor/content-editor.style.ts b/src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/ContentEditor/content-editor.style.ts rename to src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/ContentEditor/content-editor.test.tsx b/src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.test.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/ContentEditor/content-editor.test.tsx rename to src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.test.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/ContentEditor/index.ts b/src/components/text-editor/__internal__/plugins/ContentEditor/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/ContentEditor/index.ts rename to src/components/text-editor/__internal__/plugins/ContentEditor/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/LinkMonitor/index.ts b/src/components/text-editor/__internal__/plugins/LinkMonitor/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/LinkMonitor/index.ts rename to src/components/text-editor/__internal__/plugins/LinkMonitor/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts b/src/components/text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts similarity index 91% rename from src/components/rich-text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts rename to src/components/text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts index df86246825..3e8d529227 100644 --- a/src/components/rich-text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts +++ b/src/components/text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts @@ -1,7 +1,7 @@ /* istanbul ignore file */ /** * Owing to the nature of how this plugin runs, it is not possible to test it in isolation. - * It is tested as part of the RichTextEditor Playwright tests. + * It is tested as part of the TextEditor Playwright tests. * * The purpose of this plugin is to monitor the editor for any changes that result in the * creation of AutoLinkNodes, and report these changes to the customer (e.g. to then @@ -13,13 +13,13 @@ import { AutoLinkNode } from "@lexical/link"; import { useContext, useEffect } from "react"; import { validateUrl } from "../../helpers"; -import RichTextEditorContext from "../../../rich-text-editor.context"; +import TextEditorContext from "../../../text-editor.context"; const LinkMonitorPlugin = () => { // Get the editor instance const [editor] = useLexicalComposerContext(); // Get the onLinkAdded function from the context - const { onLinkAdded } = useContext(RichTextEditorContext); + const { onLinkAdded } = useContext(TextEditorContext); useEffect(() => { // Register a mutation listener for AutoLinkNodes diff --git a/src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/index.ts b/src/components/text-editor/__internal__/plugins/LinkPreviewer/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/index.ts rename to src/components/text-editor/__internal__/plugins/LinkPreviewer/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx b/src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx similarity index 86% rename from src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx rename to src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx index a7a0c1fa6a..04c7c7837e 100644 --- a/src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx +++ b/src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx @@ -1,10 +1,10 @@ import React, { useContext } from "react"; -import StyledLinkPreviewer from "./link-previewer.style"; - -import RichTextEditorContext from "../../../rich-text-editor.context"; +import TextEditorContext from "../../../text-editor.context"; import createGuid from "../../../../../__internal__/utils/helpers/guid"; +import StyledLinkPreviewer from "./link-previewer.style"; + export interface LinkPreviewerProps { /** The active error message of the editor */ error?: string; @@ -19,7 +19,7 @@ const LinkPreviewer = ({ previews = [], warning, }: LinkPreviewerProps) => { - const { readOnly } = useContext(RichTextEditorContext); + const { readOnly } = useContext(TextEditorContext); return ( diff --git a/src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.ts b/src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.ts rename to src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.test.tsx b/src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.test.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.test.tsx rename to src/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.test.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/OnChange/index.ts b/src/components/text-editor/__internal__/plugins/OnChange/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/OnChange/index.ts rename to src/components/text-editor/__internal__/plugins/OnChange/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/OnChange/on-change.plugin.ts b/src/components/text-editor/__internal__/plugins/OnChange/on-change.plugin.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/OnChange/on-change.plugin.ts rename to src/components/text-editor/__internal__/plugins/OnChange/on-change.plugin.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/OnChange/on-change.test.tsx b/src/components/text-editor/__internal__/plugins/OnChange/on-change.test.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/OnChange/on-change.test.tsx rename to src/components/text-editor/__internal__/plugins/OnChange/on-change.test.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/Placeholder/index.ts b/src/components/text-editor/__internal__/plugins/Placeholder/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Placeholder/index.ts rename to src/components/text-editor/__internal__/plugins/Placeholder/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.component.tsx b/src/components/text-editor/__internal__/plugins/Placeholder/placeholder.component.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.component.tsx rename to src/components/text-editor/__internal__/plugins/Placeholder/placeholder.component.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.style.ts b/src/components/text-editor/__internal__/plugins/Placeholder/placeholder.style.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.style.ts rename to src/components/text-editor/__internal__/plugins/Placeholder/placeholder.style.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx b/src/components/text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx similarity index 94% rename from src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx rename to src/components/text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx index e946d28613..66d05edaa1 100644 --- a/src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx +++ b/src/components/text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx @@ -1,6 +1,6 @@ /** * Placeholder can be tested in isolation as it is a simple component with no - * depencies on the parent RichTextEditor. + * depencies on the parent TextEditor. */ import { render, screen } from "@testing-library/react"; import React from "react"; diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx similarity index 88% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx index a2c234dac0..b8a3cc2c50 100644 --- a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx +++ b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx @@ -5,7 +5,7 @@ import { FORMAT_TEXT_COMMAND } from "lexical"; import React from "react"; import { FormattingButton } from "../toolbar.style"; -import { RichTextEditorActionTypes } from "../../../constants"; +import { TextEditorActionTypes } from "../../../constants"; import useLocale from "../../../../../../hooks/__internal__/useLocale"; import { FormattingButtonProps } from "./common"; @@ -25,10 +25,7 @@ const BoldButton = ({ isActive, namespace }: FormattingButtonProps) => { if (isEditable) { // Focus the editor before dispatching the command editor.focus(); - editor.dispatchCommand( - FORMAT_TEXT_COMMAND, - RichTextEditorActionTypes.Bold, - ); + editor.dispatchCommand(FORMAT_TEXT_COMMAND, TextEditorActionTypes.Bold); } }; diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/buttons.test.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/buttons.test.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/buttons.test.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/buttons.test.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/common.ts b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/common.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/common.ts rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/common.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/index.ts b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/index.ts rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx similarity index 88% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx index ee80a1798a..4fa3dd9331 100644 --- a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx +++ b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx @@ -5,7 +5,7 @@ import React from "react"; import { FormattingButton } from "../toolbar.style"; import { FormattingButtonProps } from "./common"; -import { RichTextEditorActionTypes } from "../../../constants"; +import { TextEditorActionTypes } from "../../../constants"; import useLocale from "../../../../../../hooks/__internal__/useLocale"; // The `ItalicButton` component is a button that applies italic formatting to the selected text in the editor. @@ -23,10 +23,7 @@ const ItalicButton = ({ isActive, namespace }: FormattingButtonProps) => { if (isEditable) // Focus the editor before dispatching the command editor.focus(); - editor.dispatchCommand( - FORMAT_TEXT_COMMAND, - RichTextEditorActionTypes.Italic, - ); + editor.dispatchCommand(FORMAT_TEXT_COMMAND, TextEditorActionTypes.Italic); }; return ( diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx similarity index 94% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx index f6c988684b..29ae9c20a6 100644 --- a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx +++ b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx @@ -6,12 +6,13 @@ import { removeList, } from "@lexical/list"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; + import { COMMAND_PRIORITY_LOW } from "lexical"; + import React, { useState } from "react"; import { FormattingButton } from "../toolbar.style"; - -import { RichTextEditorActionTypes } from "../../../constants"; +import { TextEditorActionTypes } from "../../../constants"; import useLocale from "../../../../../../hooks/__internal__/useLocale"; // The `ListControls` component is a set of buttons that allow the user to insert ordered and unordered lists into the editor. @@ -28,7 +29,7 @@ const ListControls = ({ namespace }: { namespace: string }) => { editor.registerCommand( INSERT_ORDERED_LIST_COMMAND, () => { - insertList(editor, RichTextEditorActionTypes.OrderedList); + insertList(editor, TextEditorActionTypes.OrderedList); return true; }, COMMAND_PRIORITY_LOW, @@ -37,7 +38,7 @@ const ListControls = ({ namespace }: { namespace: string }) => { editor.registerCommand( INSERT_UNORDERED_LIST_COMMAND, () => { - insertList(editor, RichTextEditorActionTypes.UnorderedList); + insertList(editor, TextEditorActionTypes.UnorderedList); return true; }, COMMAND_PRIORITY_LOW, diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/save.component.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/buttons/save.component.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/save.component.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/buttons/save.component.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/index.ts b/src/components/text-editor/__internal__/plugins/Toolbar/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/index.ts rename to src/components/text-editor/__internal__/plugins/Toolbar/index.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx similarity index 93% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx index 711e466491..be374f1b6f 100644 --- a/src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx +++ b/src/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx @@ -8,7 +8,7 @@ import { FormattingButtons, CommandButtons, } from "./toolbar.style"; -import { RichTextEditorActionTypes } from "../../constants"; +import { TextEditorActionTypes } from "../../constants"; import Button from "../../../../button"; import useLocale from "../../../../../hooks/__internal__/useLocale"; @@ -41,8 +41,8 @@ const Toolbar = ({ namespace, onCancel, onSave }: ToolbarProps) => { const selection = $getSelection(); // If the selection is a range selection, update the formatting buttons if ($isRangeSelection(selection)) { - setIsBold(selection.hasFormat(RichTextEditorActionTypes.Bold)); - setIsItalic(selection.hasFormat(RichTextEditorActionTypes.Italic)); + setIsBold(selection.hasFormat(TextEditorActionTypes.Bold)); + setIsItalic(selection.hasFormat(TextEditorActionTypes.Italic)); } }, []); diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.style.ts b/src/components/text-editor/__internal__/plugins/Toolbar/toolbar.style.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.style.ts rename to src/components/text-editor/__internal__/plugins/Toolbar/toolbar.style.ts diff --git a/src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.test.tsx b/src/components/text-editor/__internal__/plugins/Toolbar/toolbar.test.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.test.tsx rename to src/components/text-editor/__internal__/plugins/Toolbar/toolbar.test.tsx diff --git a/src/components/rich-text-editor/__internal__/plugins/index.ts b/src/components/text-editor/__internal__/plugins/index.ts similarity index 100% rename from src/components/rich-text-editor/__internal__/plugins/index.ts rename to src/components/text-editor/__internal__/plugins/index.ts diff --git a/src/components/rich-text-editor/__internal__/read-only-rte.component.tsx b/src/components/text-editor/__internal__/read-only-rte.component.tsx similarity index 94% rename from src/components/rich-text-editor/__internal__/read-only-rte.component.tsx rename to src/components/text-editor/__internal__/read-only-rte.component.tsx index 22f4fbbfc9..658e1cc234 100644 --- a/src/components/rich-text-editor/__internal__/read-only-rte.component.tsx +++ b/src/components/text-editor/__internal__/read-only-rte.component.tsx @@ -6,10 +6,7 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"; import React, { useMemo } from "react"; -import { - CreateFromHTML, - RichTextEditorProps, -} from "../rich-text-editor.component"; +import { CreateFromHTML, TextEditorProps } from "../text-editor.component"; import { markdownNodes, theme } from "./constants"; const wrapLinksInAnchors = (value: string) => { @@ -47,7 +44,7 @@ const ReadOnlyEditor = ({ namespace = "carbon-rte-readonly", value, -}: Partial) => { +}: Partial) => { const initialConfig = useMemo(() => { return { namespace, diff --git a/src/components/rich-text-editor/__internal__/read-only-rte.test.tsx b/src/components/text-editor/__internal__/read-only-rte.test.tsx similarity index 100% rename from src/components/rich-text-editor/__internal__/read-only-rte.test.tsx rename to src/components/text-editor/__internal__/read-only-rte.test.tsx diff --git a/src/components/rich-text-editor/__internal__/style.css b/src/components/text-editor/__internal__/style.css similarity index 100% rename from src/components/rich-text-editor/__internal__/style.css rename to src/components/text-editor/__internal__/style.css diff --git a/src/components/rich-text-editor/__snapshots__/rich-text-editor.test.tsx.snap b/src/components/text-editor/__snapshots__/text-editor.test.tsx.snap similarity index 100% rename from src/components/rich-text-editor/__snapshots__/rich-text-editor.test.tsx.snap rename to src/components/text-editor/__snapshots__/text-editor.test.tsx.snap diff --git a/src/components/text-editor/components.test-pw.tsx b/src/components/text-editor/components.test-pw.tsx new file mode 100644 index 0000000000..4f67fdbf52 --- /dev/null +++ b/src/components/text-editor/components.test-pw.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import TextEditor from "./text-editor.component"; + +const TextEditorDefaultComponent = ({ ...props }) => { + return ( + + ); +}; + +export default TextEditorDefaultComponent; diff --git a/src/components/text-editor/index.ts b/src/components/text-editor/index.ts new file mode 100644 index 0000000000..8550a6cc11 --- /dev/null +++ b/src/components/text-editor/index.ts @@ -0,0 +1,3 @@ +export { default } from "./text-editor.component"; +export { CreateEmpty, CreateFromHTML } from "./text-editor.component"; +export type { TextEditorProps } from "./text-editor.component"; diff --git a/src/components/rich-text-editor/rich-text-editor-test.stories.tsx b/src/components/text-editor/text-editor-test.stories.tsx similarity index 89% rename from src/components/rich-text-editor/rich-text-editor-test.stories.tsx rename to src/components/text-editor/text-editor-test.stories.tsx index aca7f657a7..9d4cb5eb1c 100644 --- a/src/components/rich-text-editor/rich-text-editor-test.stories.tsx +++ b/src/components/text-editor/text-editor-test.stories.tsx @@ -2,24 +2,24 @@ import { Meta, StoryObj } from "@storybook/react"; import React, { useCallback, useEffect, useState } from "react"; -import RichTextEditor, { +import TextEditor, { CreateFromHTML, - RichTextEditorProps, -} from "./rich-text-editor.component"; + TextEditorProps, +} from "./text-editor.component"; import Box from "../box"; import Typography from "../typography"; import useDebounce from "../../hooks/__internal__/useDebounce"; import ReadOnlyEditor from "./__internal__"; -const meta: Meta = { +const meta: Meta = { title: "Text Editor/Test", - component: RichTextEditor, + component: TextEditor, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Playground: Story = { args: { @@ -27,7 +27,7 @@ export const Playground: Story = { error: "", inputHint: "", isOptional: false, - labelText: "Rich Text Editor", + labelText: "Text Editor", namespace: "carbon-storybook-rte", placeholder: "Enter text here", readOnly: false, @@ -37,7 +37,7 @@ export const Playground: Story = { }, }; -export const Functions = ({ ...props }: Partial) => { +export const Functions = ({ ...props }: Partial) => { const initialValue = `

This is a HTML example.

  1. Look, it has lists!
`; const defaultValue = CreateFromHTML(initialValue); @@ -64,8 +64,8 @@ export const Functions = ({ ...props }: Partial) => { return ( - void; @@ -96,7 +96,7 @@ export const CreateEmpty = () => { return value; }; -export const RichTextEditor = ({ +export const TextEditor = ({ characterLimit = 3000, error, inputHint, @@ -114,7 +114,7 @@ export const RichTextEditor = ({ rows, warning, value, -}: RichTextEditorProps) => { +}: TextEditorProps) => { const editorRef = useRef(undefined); const locale = useLocale(); const [editorState, setEditorState] = useState( @@ -197,7 +197,7 @@ export const RichTextEditor = ({ ); return ( - + + ); }; -const TextEditor = RichTextEditor; export default TextEditor; diff --git a/src/components/rich-text-editor/rich-text-editor.context.ts b/src/components/text-editor/text-editor.context.ts similarity index 100% rename from src/components/rich-text-editor/rich-text-editor.context.ts rename to src/components/text-editor/text-editor.context.ts diff --git a/src/components/rich-text-editor/rich-text-editor.mdx b/src/components/text-editor/text-editor.mdx similarity index 76% rename from src/components/rich-text-editor/rich-text-editor.mdx rename to src/components/text-editor/text-editor.mdx index baed266f63..88708b7883 100644 --- a/src/components/rich-text-editor/rich-text-editor.mdx +++ b/src/components/text-editor/text-editor.mdx @@ -1,11 +1,11 @@ import { Meta, ArgTypes, Canvas } from "@storybook/blocks"; -import * as RichTextEditorStories from "./rich-text-editor.stories"; +import * as TextEditorStories from "./text-editor.stories"; import TranslationKeysTable from "../../../.storybook/utils/translation-keys-table"; - + -# Rich Text Editor +# Text Editor -Provides an interactive rich text editor that allows users to format text with various styles and save the content as JSON or HTML. For further documentation on this component, please read [our documentation regarding Lexical](../?path=/docs/documentation-using-lexical--docs) +Provides an interactive Text Editor that allows users to format text with various styles and save the content as JSON or HTML. For further documentation on this component, please read [our documentation regarding Lexical](../?path=/docs/documentation-using-lexical--docs) ## Contents @@ -29,10 +29,10 @@ Provides an interactive rich text editor that allows users to format text with v ## Quick Start ```javascript -import RichTextEditor, { CreateEmpty, CreateFromHTML } from "carbon-react/lib/components/rich-text-editor"; +import TextEditor, { CreateEmpty, CreateFromHTML } from "carbon-react/lib/components/text-editor"; ``` -To use the rich text editor, import the `RichTextEditor` component. If your content is stored as HTML, you can use the `CreateFromHTML` +To use the Text Editor, import the `TextEditor` component. If your content is stored as HTML, you can use the `CreateFromHTML` function to convert it to a format that the editor can understand. If you do not work with HTML, the `CreateFromHTML` function is not required and can be omitted from the imports. The `CreateEmpty` function can be used to create an empty editor state, should you require one. @@ -40,33 +40,33 @@ and can be omitted from the imports. The `CreateEmpty` function can be used to c ### Default -All instances of the Rich Text Editor should have a label that describes the purpose of the editor; this can be set via the `labelText` property. +All instances of the Text Editor should have a label that describes the purpose of the editor; this can be set via the `labelText` property. - + ### Using CreateEmpty You can use the `CreateEmpty` function to create an empty editor state. This function should be called with no arguments, and the result should be passed to the `value` property of the editor. - + ### Default -All instances of the Rich Text Editor should have a label that describes the purpose of the editor; this can be set via the `labelText` property. +All instances of the Text Editor should have a label that describes the purpose of the editor; this can be set via the `labelText` property. - + ### Required You can set the `required` property to `true` to indicate that the content of the editor is mandatory. - + ### Optional You can set the `isOptional` property to `true` to indicate that the content of the editor is optional. - + ### Character Limit @@ -74,7 +74,7 @@ You can set the `characterLimit` property to limit the number of characters that is not a hard limit, and the user can still enter more characters than the limit. However, the editor will show a warning to indicate that the limit has been exceeded. - + ### Command Buttons @@ -84,20 +84,20 @@ Omitting the `onCancel` property will hide the `Cancel` button, whereas omitting The `onSave` function callback will be called when the user clicks the `Save` button, and contains a single argument with two values: the JSON and HTML content of the editor. The `onCancel` function callback will be called when the user clicks the `Cancel` button. - + ### onChange Handler To handle changes to the content of the editor, you can set the `onChange` property to a function. The function will be called whenever the editor state changes, and provides a string representation of the editor content. - + Please note that this function will be called frequently, so it is recommended to avoid computationally expensive operations within it. You may also wish to debounce the function to avoid excessive calls; an example of this is provided in the example below. The `useDebounce` hook is an internal utility function that is not exported from the library; you will need to provide your own implementation of this function. - + ### onSave Handler @@ -110,7 +110,7 @@ If the `onSave` property is not provided, the `Save` button will not be displaye Type into the editor and the click the **Show Data Formats** button in the example below to see the JSON and HTML content of the editor. - + ### onCancel Handler @@ -121,20 +121,20 @@ If `value` is provided, the `Cancel` button will reset the editor to the initial If the `onCancel` property is not provided, the `Cancel` button will not bedisplayed. - + ### With Error When the editor is in an error state, you can use the `error` property to display messages to the user. - + ### With Warning When the editor is in a warning state, you can use the `warning` property to display messages to the user. Exceeding the character limit will trigger a warning message automatically. - + ### With HTML As Initial Value @@ -142,20 +142,20 @@ In order to set the initial value of the editor as HTML, you can use the `Create the editor can understand. The `CreateFromHTML` function should be called with the HTML content as an argument, and the result should be passed to the `value` property of the editor. - + ### With JSON As Initial Value You can set the initial value of the editor by passing a JSON object to the `value` property. The JSON object provided should be in the format returned by the `onSave` function callback, an example of which can be seen below. - + ### Input Hint You can use the `inputHint` property to provide additional information to the user about the expected content or usage of the editor. - + ### With Row Count @@ -163,13 +163,13 @@ You can customise the height of the text editor by setting the `rows` property. determine the minimium height of the editor by multplying the number of rows provided by the height of a single row (21px). If `rows` is not provided, the editor will default to a height of `210px`, equivalent to 10 rows. - + ### With Placeholder By default, the editor will render with an empty placeholder; you can override this by setting the `placeholder` property. - + ### Link Support @@ -180,7 +180,7 @@ The editor supports adding links to text. To add a link, you can: Clicking the link will open the URL in a new tab. - + ### With Link Added Callback @@ -191,7 +191,7 @@ the previous one. Note that this usage is for demonstration purposes only; you should maintain the list of URLs added to the editor in your application state. - + ### With Link Previews @@ -199,33 +199,33 @@ You can use the `prevews` property to render previews of links added to the edit that the following examples are merely a suggested implementation; the only requirement is that the `previews` array contains one or more React JSX objects. - + You can provide more complex previews by providing custom components to the `previews` array. - + You can also provide multiple previews, and can mix and match the styles as desired. - + ### Translations -You can override the default translations for the Rich Text Editor by passing a custom locale object to the `i18nProvider`. Consult the [translation keys](#translation-keys) section for a list of available keys. +You can override the default translations for the Text Editor by passing a custom locale object to the `i18nProvider`. Consult the [translation keys](#translation-keys) section for a list of available keys. - + ### Read-Only Mode You can specify that the editor should be read-only by setting the `readOnly` property to `true`. In read-only mode, the editor will not allow any changes to be made to the content. - + ## Props -### Rich Text Editor +### Text Editor - + ## Translation keys @@ -235,77 +235,77 @@ The following keys are available to override the translations for this component { test.describe("characterLimit", () => { test(`value of 0`, async ({ mount, page }) => { - await mount(); + await mount(); const displayedLimit = await page .locator("div[data-role='pw-rte-character-limit']") @@ -121,7 +121,7 @@ test.describe("Prop tests", () => { [100, 500, 3000].forEach((characterLimit) => { test(`value of ${characterLimit}`, async ({ mount, page }) => { await mount( - , + , ); let displayedLimit = await page .locator("div[data-role='pw-rte-character-limit']") @@ -160,7 +160,7 @@ test.describe("Prop tests", () => { test.describe("inputHint", () => { test(`value of 'hint'`, async ({ mount, page }) => { - await mount(); + await mount(); const hint = await page .locator(`div[data-role='pw-rte-input-hint']`) .textContent(); @@ -168,7 +168,7 @@ test.describe("Prop tests", () => { }); test(`value not provided`, async ({ mount, page }) => { - await mount(); + await mount(); const hint = await page .locator(`div[data-role='pw-rte-input-hint']`) .count(); @@ -179,7 +179,7 @@ test.describe("Prop tests", () => { test.describe("isOptional", () => { [true, false].forEach((isOptional) => { test(`value of ${isOptional}`, async ({ mount, page }) => { - await mount(); + await mount(); const content = await page.evaluate( "window.getComputedStyle(document.getElementById('label-container-pw-rte-label'), '::after').getPropertyValue('content')", ); @@ -189,9 +189,9 @@ test.describe("Prop tests", () => { }); test.describe("labelText", () => { - [{ value: "Rich Text Editor" }].forEach(({ value }) => { + [{ value: "Text Editor" }].forEach(({ value }) => { test(`value of ${value}`, async ({ mount, page }) => { - await mount(); + await mount(); const editorLabel = await page .locator("label[data-element='label']") .textContent(); @@ -203,9 +203,7 @@ test.describe("Prop tests", () => { test.describe("placeholder", () => { [undefined, "Enter text here"].forEach((placeholder) => { test(`value of ${placeholder}`, async ({ mount, page }) => { - await mount( - , - ); + await mount(); const displayedPlaceholder = await page .locator("div[data-role='pw-rte-placeholder']") .textContent(); @@ -220,7 +218,7 @@ test.describe("Prop tests", () => { Sage, Carbon, ]; - await mount(); + await mount(); expect(await page.locator("a").count()).toBe(2); }); @@ -239,7 +237,7 @@ test.describe("Prop tests", () => { for (let i = 0; i < 10; i++) { previews.push(samplePreview(i)); } - await mount(); + await mount(); expect(await page.locator("div[data-role='preview']").count()).toBe(10); }); }); @@ -247,7 +245,7 @@ test.describe("Prop tests", () => { test.describe("required", () => { [true, false].forEach((required) => { test(`value of ${required}`, async ({ mount, page }) => { - await mount(); + await mount(); const content = await page.evaluate( "window.getComputedStyle(document.getElementById('pw-rte-label'), '::after').getPropertyValue('content')", ); @@ -261,7 +259,7 @@ test.describe("Prop tests", () => { mount, page, }) => { - await mount(); + await mount(); const defaultText = await page.locator("p").textContent(); expect(defaultText).toBe("Sample text with some formatting applied."); @@ -297,7 +295,7 @@ test.describe("Functionality tests", () => { page, }) => { await mount( - {}} />, @@ -321,7 +319,7 @@ test.describe("Functionality tests", () => { }) => { let callbackFired = false; await mount( - { callbackFired = true; }} @@ -339,7 +337,7 @@ test.describe("Functionality tests", () => { let _htmlString = null; let _json = null; await mount( - { _htmlString = htmlString; @@ -401,7 +399,7 @@ test.describe("Functionality tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.selectText(); const boldButton = await page.locator( @@ -420,7 +418,7 @@ test.describe("Functionality tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.selectText(); const italicButton = await page.locator( @@ -439,7 +437,7 @@ test.describe("Functionality tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.selectText(); const orderedListButton = await page.locator( @@ -458,7 +456,7 @@ test.describe("Functionality tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.selectText(); const unorderedListButton = await page.locator( @@ -481,7 +479,7 @@ test.describe("Events tests", () => { }) => { let _link = null; await mount( - { _link = link; }} @@ -505,9 +503,7 @@ test.describe("Events tests", () => { test.describe("Shortcut keys", () => { test.describe("Bold", () => { test("pressing Meta + B toggles bold text", async ({ mount, page }) => { - await mount( - , - ); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.selectText(); await page.keyboard.press("ControlOrMeta+B"); @@ -520,7 +516,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); await textbox.pressSequentially("**", { delay: 100 }); @@ -534,9 +530,7 @@ test.describe("Events tests", () => { test.describe("Italic", () => { test("pressing Meta + I toggles italic text", async ({ mount, page }) => { - await mount( - , - ); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.selectText(); await page.keyboard.press("ControlOrMeta+I"); @@ -549,7 +543,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); await textbox.pressSequentially("*", { delay: 100 }); @@ -566,9 +560,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount( - , - ); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); await textbox.press("Home"); @@ -587,7 +579,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); await textbox.press("Home"); @@ -605,7 +597,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); await textbox.pressSequentially(">", { delay: 100 }); @@ -626,7 +618,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); expect(await page.locator(tag).count()).toBe(0); @@ -644,7 +636,7 @@ test.describe("Events tests", () => { mount, page, }) => { - await mount(); + await mount(); const textbox = await page.locator("div[role='textbox']"); await textbox.click(); await textbox.pressSequentially("[Link text](https://www.sage.com)", { @@ -658,7 +650,7 @@ test.describe("Events tests", () => { test.describe("Styling tests", () => { test.describe("error", () => { test(`value of 'Error message'`, async ({ mount, page }) => { - await mount(); + await mount(); const displayedError = await page .locator("div[data-role='pw-rte-validation-message']") .textContent(); @@ -686,7 +678,7 @@ test.describe("Styling tests", () => { }); test(`value not provided`, async ({ mount, page }) => { - await mount(); + await mount(); const displayedError = await page .locator("div[data-role='pw-rte-validation-message']") .count(); @@ -707,7 +699,7 @@ test.describe("Styling tests", () => { mount, page, }) => { - await mount(); + await mount(); await expect( await page.locator("div[data-role='pw-rte-editable']"), ).toHaveCSS("min-height", `${expectedHeight}px`); @@ -717,7 +709,7 @@ test.describe("Styling tests", () => { test.describe("warning", () => { test(`value of 'Warning message'`, async ({ mount, page }) => { - await mount(); + await mount(); const displayedWarning = await page .locator("div[data-role='pw-rte-validation-message']") .textContent(); @@ -745,7 +737,7 @@ test.describe("Styling tests", () => { }); test(`value not provided`, async ({ mount, page }) => { - await mount(); + await mount(); const displayedWarning = await page .locator("div[data-role='pw-rte-validation-message']") .count(); @@ -756,7 +748,7 @@ test.describe("Styling tests", () => { test.describe("Accessibility tests", () => { test(`should pass for default component`, async ({ mount, page }) => { - await mount(); + await mount(); await checkAccessibility(page); }); @@ -765,7 +757,7 @@ test.describe("Accessibility tests", () => { mount, page, }) => { - await mount(); + await mount(); await checkAccessibility(page); }); @@ -774,7 +766,7 @@ test.describe("Accessibility tests", () => { mount, page, }) => { - await mount(); + await mount(); await checkAccessibility(page); }); diff --git a/src/components/rich-text-editor/rich-text-editor.stories.tsx b/src/components/text-editor/text-editor.stories.tsx similarity index 88% rename from src/components/rich-text-editor/rich-text-editor.stories.tsx rename to src/components/text-editor/text-editor.stories.tsx index 6164af2ef8..71856e23ed 100644 --- a/src/components/rich-text-editor/rich-text-editor.stories.tsx +++ b/src/components/text-editor/text-editor.stories.tsx @@ -12,10 +12,10 @@ import Typography from "../typography"; import useDebounce from "../../hooks/__internal__/useDebounce"; import enGB from "../../locales/en-gb"; -import RichTextEditor, { +import TextEditor, { CreateEmpty, CreateFromHTML, -} from "./rich-text-editor.component"; +} from "./text-editor.component"; import { SaveCallbackProps } from "./__internal__/plugins/Toolbar/buttons/save.component"; import generateStyledSystemProps from "../../../.storybook/utils/styled-system-props"; @@ -23,47 +23,47 @@ const styledSystemProps = generateStyledSystemProps({ margin: true, }); -const meta: Meta = { +const meta: Meta = { title: "Text Editor", - component: RichTextEditor, + component: TextEditor, argTypes: { ...styledSystemProps, }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = () => { - return ; + return ; }; Default.storyName = "Default"; export const UsingCreateEmpty: Story = () => { const value = CreateEmpty(); - return ; + return ; }; UsingCreateEmpty.storyName = "Using CreateEmpty"; export const Required: Story = () => { - return ; + return ; }; Required.storyName = "Required"; export const Optional: Story = () => { - return ; + return ; }; Optional.storyName = "Optional"; export const CharacterLimit: Story = () => { - return ; + return ; }; CharacterLimit.storyName = "Character Limit"; export const CommandButtons: Story = () => { return ( - alert("Cancelled")} onSave={(values) => alert(values)} /> @@ -75,7 +75,7 @@ export const OnChange: Story = () => { const [state, setState] = React.useState(undefined); return ( <> - +
Content: {state || "No content"}
); @@ -92,7 +92,7 @@ export const OnChangeDebounced: Story = () => { return ( <> - +
Content: {state || "No content"}
); @@ -108,8 +108,8 @@ export const OnSave: Story = () => { return ( <> <> - setData({ htmlString, json })} /> @@ -199,30 +199,22 @@ export const onCancel: Story = () => { }; const value = JSON.stringify(initialValue); return ( - {}} - /> + {}} /> ); }; onCancel.storyName = "onCancel Handler"; export const WithError: Story = () => { return ( - + ); }; WithError.storyName = "Error"; export const WithWarning: Story = () => { return ( - @@ -233,7 +225,7 @@ WithWarning.storyName = "Warning"; export const WithHTMLValue: Story = () => { const initialValue = `

This is a HTML example.

  1. Look, it has lists!
`; const value = CreateFromHTML(initialValue); - return ; + return ; }; WithHTMLValue.storyName = "HTML As Initial Value"; @@ -306,14 +298,14 @@ export const WithJSONValue: Story = () => { }, }; const value = JSON.stringify(initialValue); - return ; + return ; }; WithJSONValue.storyName = "JSON As Initial Value"; export const InputHint: Story = () => { return ( - ); @@ -321,14 +313,14 @@ export const InputHint: Story = () => { InputHint.storyName = "Input Hint"; export const Rows: Story = () => { - return ; + return ; }; Rows.storyName = "Row Count"; export const WithPlaceholder: Story = () => { return ( - ); @@ -357,9 +349,9 @@ export const WithCustomTranslations: Story = () => { }, }} > - {}} onSave={() => {}} /> @@ -371,7 +363,7 @@ WithCustomTranslations.storyName = "Translations"; export const Links: Story = () => { const defaultHTML = `Carbon`; const value = CreateFromHTML(defaultHTML); - return ; + return ; }; Links.storyName = "Link Support"; @@ -387,10 +379,7 @@ export const WithLinkAddedCallback: Story = () => { return ( <> - + Link: {options.url || "No link added"}
@@ -416,11 +405,7 @@ export const WithLinkPreviews: Story = () => { return ( <> - + ); }; @@ -453,8 +438,8 @@ export const WithComplexLinkPreviews: Story = () => { return ( <> - @@ -499,8 +484,8 @@ export const WithMultipleLinkPreviews: Story = () => { return ( <> - @@ -512,6 +497,6 @@ WithMultipleLinkPreviews.storyName = "Multiple Link Previews"; export const ReadOnly: Story = () => { const initialValue = `

This is a HTML example.

`; const value = CreateFromHTML(initialValue); - return ; + return ; }; ReadOnly.storyName = "Read-Only Mode"; diff --git a/src/components/rich-text-editor/rich-text-editor.style.ts b/src/components/text-editor/text-editor.style.ts similarity index 95% rename from src/components/rich-text-editor/rich-text-editor.style.ts rename to src/components/text-editor/text-editor.style.ts index 157905091f..22d3eacba5 100644 --- a/src/components/rich-text-editor/rich-text-editor.style.ts +++ b/src/components/text-editor/text-editor.style.ts @@ -17,7 +17,7 @@ interface StyledEditorToolbarWrapperProps { focused?: boolean; } -export const StyledRichTextEditor = styled(Box)` +export const StyledTextEditor = styled(Box)` position: relative; `; @@ -88,4 +88,4 @@ export const StyledValidationMessage = styled.div` `} `; -export default StyledRichTextEditor; +export default StyledTextEditor; diff --git a/src/components/rich-text-editor/rich-text-editor.test.tsx b/src/components/text-editor/text-editor.test.tsx similarity index 85% rename from src/components/rich-text-editor/rich-text-editor.test.tsx rename to src/components/text-editor/text-editor.test.tsx index e1237ab0f9..1703c35806 100644 --- a/src/components/rich-text-editor/rich-text-editor.test.tsx +++ b/src/components/text-editor/text-editor.test.tsx @@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event"; import React from "react"; -import RichTextEditor, { CreateEmpty, CreateFromHTML } from "."; +import TextEditor, { CreateEmpty, CreateFromHTML } from "."; import { COMPONENT_PREFIX } from "./__internal__/constants"; /** @@ -56,9 +56,9 @@ test("rendering and basic functionality", async () => { const mockSave = jest.fn(); const value = JSON.stringify(initialValue); - // render the RichTextEditor component + // render the TextEditor component render( - mockCancel()} onSave={() => mockSave()} @@ -165,18 +165,16 @@ test("rendering and basic functionality", async () => { }); test("input hint renders correctly when inputHint prop is provided", () => { - // render the RichTextEditor component with an input hint - render( - , - ); + // render the TextEditor component with an input hint + render(); // expect the input hint to be rendered expect(screen.getByText("This is an input hint")).toBeInTheDocument(); }); test("character limit renders correctly when characterLimit prop is provided", () => { - // render the RichTextEditor component with a character limit - render(); + // render the TextEditor component with a character limit + render(); // expect the character counter to be rendered const characterCounter = screen.getByTestId( @@ -187,8 +185,8 @@ test("character limit renders correctly when characterLimit prop is provided", ( }); test("character limit is not rendered when characterLimit prop is provided with a value of 0", () => { - // render the RichTextEditor component with a character limit - render(); + // render the TextEditor component with a character limit + render(); // expect the character counter to be rendered const characterCounter = screen.queryByTestId( @@ -198,8 +196,8 @@ test("character limit is not rendered when characterLimit prop is provided with }); test("required prop renders correctly when required prop is provided", () => { - // render the RichTextEditor component with the required prop - render(); + // render the TextEditor component with the required prop + render(); const label = screen.getByText("Example"); // expect the required indicator to be rendered @@ -209,8 +207,8 @@ test("required prop renders correctly when required prop is provided", () => { }); test("optional prop renders correctly when optional prop is provided", () => { - // render the RichTextEditor component with the optional prop - render(); + // render the TextEditor component with the optional prop + render(); const label = screen.getByTestId("label-container"); @@ -221,12 +219,9 @@ test("optional prop renders correctly when optional prop is provided", () => { }); test("placeholder prop renders correctly when placeholder prop is provided", () => { - // render the RichTextEditor component with a placeholder + // render the TextEditor component with a placeholder render( - , + , ); // expect the placeholder to be rendered @@ -234,8 +229,8 @@ test("placeholder prop renders correctly when placeholder prop is provided", () }); test("rows prop renders correctly when rows prop is provided", () => { - // render the RichTextEditor component with a rows prop - render(); + // render the TextEditor component with a rows prop + render(); // expect the editor to have the correct number of rows const editor = screen.getByTestId(`${COMPONENT_PREFIX}-editable`); @@ -243,8 +238,8 @@ test("rows prop renders correctly when rows prop is provided", () => { }); test("validation renders correctly when error prop is provided", () => { - // render the RichTextEditor component with an error - render(); + // render the TextEditor component with an error + render(); const errorMessage = screen.getByText("This is an error"); @@ -254,8 +249,8 @@ test("validation renders correctly when error prop is provided", () => { }); test("validation renders correctly when warning prop is provided", () => { - // render the RichTextEditor component with an error - render(); + // render the TextEditor component with an error + render(); const warningMessage = screen.getByText("This is a warning"); @@ -268,8 +263,8 @@ test("serialisation of editor", async () => { const user = userEvent.setup(); const mockSave = jest.fn(); render( - mockSave(values)} value={JSON.stringify(initialValue)} />, @@ -291,14 +286,14 @@ test("valid data is parsed when HTML is passed into the CreateFromHTML function" test("valid state is created when the CreateEmpty function is called", async () => { const value = CreateEmpty(); expect(value).toMatchSnapshot(); - render(); + render(); expect(screen.getByRole("textbox")).toBeInTheDocument(); expect(screen.getByRole("textbox")).toHaveTextContent(""); }); test("previews are rendered correctly if provided", () => { const previews = [
Preview 1
]; - render(); + render(); const preview = screen.getByText("Preview 1"); @@ -307,7 +302,7 @@ test("previews are rendered correctly if provided", () => { }); test("no previews are rendered if the prop is not provided", () => { - render(); + render(); const preview = screen.queryByText("Preview 1"); @@ -321,9 +316,9 @@ test("should reset the content to the default if the Cancel button is pressed", const mockSave = jest.fn(); const value = JSON.stringify(initialValue); - // render the RichTextEditor component + // render the TextEditor component render( - mockCancel()} onSave={() => mockSave()} @@ -348,8 +343,8 @@ test("should reset the content to the default if the Cancel button is pressed", }); test("readOnly prop renders correctly when readOnly prop is provided", () => { - // render the RichTextEditor component with the readOnly prop - render(); + // render the TextEditor component with the readOnly prop + render(); // expect the editor to be read-only const editor = screen.getByTestId(`${COMPONENT_PREFIX}-editable`);