diff --git a/src/components/RichTextEditor/RichTextEditor.stories.tsx b/src/components/RichTextEditor/RichTextEditor.stories.tsx index e250f5496..9ae532917 100644 --- a/src/components/RichTextEditor/RichTextEditor.stories.tsx +++ b/src/components/RichTextEditor/RichTextEditor.stories.tsx @@ -7,6 +7,7 @@ import React from "react"; import * as fixtures from "./fixtures.json"; import { RichTextEditorProps } from "./RichTextEditor"; +import RichTextEditorContent from "./RichTextEditorContent"; export const data: OutputData = fixtures.richTextEditor; @@ -25,4 +26,5 @@ storiesOf("Generics / Rich text editor", module) .addDecorator(Decorator) .add("default", () => ) .add("disabled", () => ) - .add("error", () => ); + .add("error", () => ) + .add("static", () => ); diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx index 6d76f983e..ed3ae99d7 100644 --- a/src/components/RichTextEditor/RichTextEditor.tsx +++ b/src/components/RichTextEditor/RichTextEditor.tsx @@ -6,6 +6,7 @@ import React from "react"; import { RichTextEditorContentProps, tools } from "./RichTextEditorContent"; import useStyles from "./styles"; +import { clean } from "./utils"; export type RichTextEditorChange = (data: OutputData) => void; export interface RichTextEditorProps extends RichTextEditorContentProps { @@ -33,12 +34,11 @@ const RichTextEditor: React.FC = ({ const editor = React.useRef(); const editorContainer = React.useRef(); const togglePromiseQueue = React.useRef(PromiseQueue()); // used to await subsequent toggle invocations - const initialMount = React.useRef(true); React.useEffect( () => { if (data !== undefined && !editor.current) { - const editorjs = new EditorJS({ + editor.current = new EditorJS({ data, holder: editorContainer.current, logLevel: "ERROR" as LogLevels, @@ -51,21 +51,16 @@ const RichTextEditor: React.FC = ({ // const undo = new Undo({ editor }); // undo.initialize(data); - editor.current = editorjs; - if (onReady) { onReady(); } }, - readOnly: disabled, tools }); } return () => { - if (editor.current) { - editor.current.destroy(); - } + clean(editor.current); editor.current = null; }; }, @@ -96,11 +91,7 @@ const RichTextEditor: React.FC = ({ } }; - if (!initialMount.current) { - toggle(); - } else { - initialMount.current = false; - } + toggle(); }, [disabled]); return ( diff --git a/src/components/RichTextEditor/RichTextEditorContent.tsx b/src/components/RichTextEditor/RichTextEditorContent.tsx index acdf68b15..08fdd90ff 100644 --- a/src/components/RichTextEditor/RichTextEditorContent.tsx +++ b/src/components/RichTextEditor/RichTextEditorContent.tsx @@ -15,6 +15,7 @@ import createGenericInlineTool from "editorjs-inline-tool"; import React from "react"; import useStyles from "./styles"; +import { clean } from "./utils"; export interface RichTextEditorContentProps { className?: string; @@ -85,9 +86,7 @@ const RichTextEditorContent: React.FC = ({ } return () => { - if (editor.current) { - editor.current.destroy(); - } + clean(editor.current); editor.current = null; }; }, @@ -97,7 +96,7 @@ const RichTextEditorContent: React.FC = ({ return (
); diff --git a/src/components/RichTextEditor/styles.ts b/src/components/RichTextEditor/styles.ts index f16c939f8..726e9e66a 100644 --- a/src/components/RichTextEditor/styles.ts +++ b/src/components/RichTextEditor/styles.ts @@ -102,10 +102,15 @@ const useStyles = makeStyles( boxShadow: `inset 0px 0px 0 2px ${theme.palette.primary.main}` }, rootDisabled: { - ...theme.overrides.MuiOutlinedInput.root["&$disabled"]["& fieldset"] + ...theme.overrides.MuiOutlinedInput.root["&$disabled"]["& fieldset"], + background: theme.palette.background.default, + color: theme.palette.saleor.main[4] }, rootError: { borderColor: theme.palette.error.main + }, + rootStatic: { + fontSize: theme.typography.body1.fontSize } }; }, diff --git a/src/components/RichTextEditor/utils.ts b/src/components/RichTextEditor/utils.ts new file mode 100644 index 000000000..41b33ba4f --- /dev/null +++ b/src/components/RichTextEditor/utils.ts @@ -0,0 +1,9 @@ +import EditorJS from "@editorjs/editorjs"; + +export async function clean(editor: EditorJS) { + if (editor) { + // Prevents race conditions + await editor.isReady; + editor.destroy(); + } +} diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index df6008c7b..dabfbff7a 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -13151,6 +13151,25 @@ exports[`Storyshots Generics / Rich text editor error 1`] = `
`; +exports[`Storyshots Generics / Rich text editor static 1`] = ` +
+
+
+
+
+
+
+`; + exports[`Storyshots Generics / Save filter tab default 1`] = `
void; @@ -12,7 +16,7 @@ function useRichText(opts: { useEffect(() => { if (opts.initial === null) { - data.current = { blocks: [] }; + data.current = emptyContent; setLoaded(true); return; }