Fix empty rich text editor not loading (#1904)

* Fix empty rich text editor not loading

* Fix static rich text font size

* Add cleanup function

* Update snapshots
This commit is contained in:
Dominik Żegleń 2022-03-16 11:09:12 +01:00 committed by GitHub
parent ac4a219023
commit 5304eeecc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 20 deletions

View file

@ -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", () => <RichTextEditor {...props} />)
.add("disabled", () => <RichTextEditor {...props} disabled={true} />)
.add("error", () => <RichTextEditor {...props} error={true} />);
.add("error", () => <RichTextEditor {...props} error={true} />)
.add("static", () => <RichTextEditorContent {...props} />);

View file

@ -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<RichTextEditorProps> = ({
const editor = React.useRef<EditorJS>();
const editorContainer = React.useRef<HTMLDivElement>();
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<RichTextEditorProps> = ({
// 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<RichTextEditorProps> = ({
}
};
if (!initialMount.current) {
toggle();
} else {
initialMount.current = false;
}
toggle();
}, [disabled]);
return (

View file

@ -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<RichTextEditorContentProps> = ({
}
return () => {
if (editor.current) {
editor.current.destroy();
}
clean(editor.current);
editor.current = null;
};
},
@ -97,7 +96,7 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
return (
<div
className={classNames(classes.editor, className)}
className={classNames(classes.editor, classes.rootStatic, className)}
ref={editorContainer}
/>
);

View file

@ -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
}
};
},

View file

@ -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();
}
}

View file

@ -13151,6 +13151,25 @@ exports[`Storyshots Generics / Rich text editor error 1`] = `
</div>
`;
exports[`Storyshots Generics / Rich text editor static 1`] = `
<div
style="padding:24px"
>
<div
class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
style="margin:auto;overflow:visible;position:relative;width:400px"
>
<div
class="MuiCardContent-root-id"
>
<div
class="RichTextEditor-editor-id RichTextEditor-rootStatic-id"
/>
</div>
</div>
</div>
`;
exports[`Storyshots Generics / Save filter tab default 1`] = `
<div
style="padding:24px"

View file

@ -3,6 +3,10 @@ import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
import isEqual from "lodash/isEqual";
import { MutableRefObject, useEffect, useRef, useState } from "react";
const emptyContent: OutputData = {
blocks: []
};
function useRichText(opts: {
initial: string | null;
triggerChange: () => void;
@ -12,7 +16,7 @@ function useRichText(opts: {
useEffect(() => {
if (opts.initial === null) {
data.current = { blocks: [] };
data.current = emptyContent;
setLoaded(true);
return;
}