diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
index c602b8051f..694d23eb2d 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
@@ -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,
diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
index 52e6ccf46f..20a9819579 100644
--- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
@@ -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, "
")
- : props.defaultValue;
- editorInstance.setContent(content, {
- format: "html",
- });
- }, 200);
+ const content = props.defaultValue
+ ? props.defaultValue.replace(/\n/g, "
")
+ : 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, "
")
- : props.defaultValue;
- editor.setContent(content, { format: "html" });
- }, 300);
+ const content = props.defaultValue
+ ? props.defaultValue.replace(/\n/g, "
")
+ : 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",