diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
index 20a9819579..01c40fcc40 100644
--- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useState, useRef } from "react";
import { debounce } from "lodash";
import styled from "styled-components";
import { useScript, ScriptStatus } from "utils/hooks/useScript";
+
+import { isString } from "utils/helpers";
+
const StyledRTEditor = styled.div`
&& {
width: 100%;
@@ -24,12 +27,12 @@ export const RichtextEditorComponent = (
props: RichtextEditorComponentProps,
) => {
const status = useScript(
- "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.4.0/tinymce.min.js",
+ "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.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("");
/* eslint-disable react-hooks/exhaustive-deps */
@@ -47,9 +50,7 @@ export const RichtextEditorComponent = (
(editorContent.current.length === 0 ||
editorContent.current !== props.defaultValue)
) {
- const content = props.defaultValue
- ? props.defaultValue.replace(/\n/g, "
")
- : props.defaultValue;
+ const content = getContent();
editorInstance.setContent(content, {
format: "html",
@@ -72,9 +73,7 @@ export const RichtextEditorComponent = (
resize: false,
setup: (editor: any) => {
editor.mode.set(props.isDisabled === true ? "readonly" : "design");
- const content = props.defaultValue
- ? props.defaultValue.replace(/\n/g, "
")
- : props.defaultValue;
+ const content = getContent();
editor.setContent(content, { format: "html" });
editor
.on("Change", () => {
@@ -109,6 +108,15 @@ export const RichtextEditorComponent = (
};
}, [status]);
+ /**
+ * get content for rich text editor
+ */
+ const getContent = () => {
+ return props.defaultValue && isString(props.defaultValue)
+ ? props.defaultValue.replace(/\n/g, "
")
+ : props.defaultValue;
+ };
+
if (status !== ScriptStatus.READY) return null;
return (
diff --git a/app/client/src/utils/helpers.tsx b/app/client/src/utils/helpers.tsx
index 0ed83eb005..9c3783d39f 100644
--- a/app/client/src/utils/helpers.tsx
+++ b/app/client/src/utils/helpers.tsx
@@ -194,6 +194,17 @@ export const isNameValid = (
);
};
+/**
+ * checks if variable passed is of type string or not
+ *
+ * for e.g -> 'Pawan' -> true
+ * ['Pawan', 'Goku'] -> false
+ * { name: "Pawan"} -> false
+ */
+export const isString = (str: any) => {
+ return typeof str === "string" || str instanceof String;
+};
+
export const playOnboardingAnimation = () => {
const container: Element = document.getElementById("root") as Element;