chore(text-editor): rename component to text-editor for consistency w…

…ith previous implementation

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';
 ```
 

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";

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",

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 (
-    <RichTextEditorContext.Provider value={{ onLinkAdded, readOnly: true }}>
+    <TextEditorContext.Provider value={{ onLinkAdded, readOnly: true }}>
       <StyledNote width={width} {...rest} data-component="note">
         <StyledNoteMain>
           <StyledNoteContent>
@@ -137,7 +137,7 @@ export const Note = ({
           </StyledNoteContent>
         )}
       </StyledNote>
-    </RichTextEditorContext.Provider>
+    </TextEditorContext.Provider>
   );
 };
 

src/components/rich-text-editor/__internal__/constants.ts → 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 };

src/components/rich-text-editor/__internal__/plugins/AutoLinker/auto-link.component.tsx → 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

src/components/rich-text-editor/__internal__/plugins/CharacterCounter/character-counter.test.tsx → 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";

src/components/rich-text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.ts → 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

src/components/rich-text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.tsx → 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 (
     <StyledLinkPreviewer error={error} readOnly={readOnly} warning={warning}>

src/components/rich-text-editor/__internal__/plugins/Placeholder/placeholder.test.tsx → 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";

src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx → 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);
     }
   };
 

src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx → 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 (

src/components/rich-text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx → 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,

src/components/rich-text-editor/__internal__/plugins/Toolbar/toolbar.component.tsx → 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));
     }
   }, []);
 

src/components/rich-text-editor/__internal__/read-only-rte.component.tsx → 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<RichTextEditorProps>) => {
+}: Partial<TextEditorProps>) => {
   const initialConfig = useMemo(() => {
     return {
       namespace,

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 (
+    <TextEditor labelText="Playwright Example" namespace="pw-rte" {...props} />
+  );
+};
+
+export default TextEditorDefaultComponent;

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";

src/components/rich-text-editor/rich-text-editor-test.stories.tsx → src/components/text-editor/text-editor-test.stories.tsx

@@ -2,32 +2,32 @@
 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<typeof RichTextEditor> = {
+const meta: Meta<typeof TextEditor> = {
   title: "Text Editor/Test",
-  component: RichTextEditor,
+  component: TextEditor,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof RichTextEditor>;
+type Story = StoryObj<typeof TextEditor>;
 
 export const Playground: Story = {
   args: {
     characterLimit: 3000,
     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<RichTextEditorProps>) => {
+export const Functions = ({ ...props }: Partial<TextEditorProps>) => {
   const initialValue = `<p dir="ltr"><span style="white-space: pre-wrap;">This is a HTML example.</span></p><ol><li value="1"><span style="white-space: pre-wrap;">Look, it has lists!</span></li></ol>`;
   const defaultValue = CreateFromHTML(initialValue);
 
@@ -64,8 +64,8 @@ export const Functions = ({ ...props }: Partial<RichTextEditorProps>) => {
 
   return (
     <Box p={1}>
-      <RichTextEditor
-        labelText="Rich Text Editor"
+      <TextEditor
+        labelText="Text Editor"
         {...props}
         onCancel={handleCancel}
         onChange={handleChange}