update rich text editor version + add check for string in editor value (#2966)

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>

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, "<br/>")
-        : 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, "<br/>")
-          : 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, "<br/>")
+      : props.defaultValue;
+  };
+
   if (status !== ScriptStatus.READY) return null;
 
   return (

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;