(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.
- 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`);