Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

use editor init event intead of setup to check if initialised (#2622)

Browse Source
This commit is contained in:
Rishabh Saxena 2021-01-20 11:00:53 +05:30 committed by GitHub
parent d4990683c6
commit d2dfd75a0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
View File

@ -31,6 +31,15 @@ describe("RichTextEditor Widget Functionality", function() {
"This is a Heading",
);
// validate after reload
cy.reload(true);
cy.wait(2000);
cy.validateHTMLText(
formWidgetsPage.richTextEditorWidget,
"h1",
"This is a Heading",
);
cy.PublishtheApp();
cy.validateHTMLText(
publishPage.richTextEditorWidget,

35
app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
View File

@ -27,6 +27,8 @@ export const RichtextEditorComponent = (
"https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.4.0/tinymce.min.js",
);
const [isEditorInitialised, setIsEditorInitialised] = useState(false);
const [editorInstance, setEditorInstance] = useState(null as any);
/* Using editorContent as a variable to save editor content locally to verify against new content*/
const editorContent = useRef("");
@ -37,7 +39,7 @@ export const RichtextEditorComponent = (
props.isDisabled === true ? "readonly" : "design",
);
}
}, [props.isDisabled, editorInstance, status]);
}, [props.isDisabled, editorInstance, isEditorInitialised]);
useEffect(() => {
if (
@ -45,16 +47,15 @@ export const RichtextEditorComponent = (
(editorContent.current.length === 0 ||
editorContent.current !== props.defaultValue)
) {
setTimeout(() => {
const content = props.defaultValue
? props.defaultValue.replace(/\n/g, "<br/>")
: props.defaultValue;
editorInstance.setContent(content, {
format: "html",
});
}, 200);
const content = props.defaultValue
? props.defaultValue.replace(/\n/g, "<br/>")
: props.defaultValue;
editorInstance.setContent(content, {
format: "html",
});
}
}, [props.defaultValue, editorInstance, status]);
}, [props.defaultValue, editorInstance, isEditorInitialised]);
useEffect(() => {
if (status !== ScriptStatus.READY) return;
const onChange = debounce((content: string) => {
@ -71,13 +72,10 @@ export const RichtextEditorComponent = (
resize: false,
setup: (editor: any) => {
editor.mode.set(props.isDisabled === true ? "readonly" : "design");
// Without timeout default value is not set on browser refresh.
setTimeout(() => {
const content = props.defaultValue
? props.defaultValue.replace(/\n/g, "<br/>")
: props.defaultValue;
editor.setContent(content, { format: "html" });
}, 300);
const content = props.defaultValue
? props.defaultValue.replace(/\n/g, "<br/>")
: props.defaultValue;
editor.setContent(content, { format: "html" });
editor
.on("Change", () => {
onChange(editor.getContent());
@ -92,6 +90,9 @@ export const RichtextEditorComponent = (
onChange(editor.getContent());
});
setEditorInstance(editor);
editor.on("init", () => {
setIsEditorInitialised(true);
});
},
plugins: [
"advlist autolink lists link image charmap print preview anchor",