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