diff --git a/app/client/package.json b/app/client/package.json
index c80e72ef41..5647b5ce7a 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -18,7 +18,6 @@
"@optimizely/optimizely-sdk": "^4.0.0",
"@sentry/browser": "^5.6.3",
"@sentry/webpack-plugin": "^1.10.0",
- "@tinymce/tinymce-react": "^3.5.0",
"@types/chance": "^1.0.7",
"@types/fontfaceobserver": "^0.0.6",
"@types/lodash": "^4.14.120",
@@ -182,4 +181,4 @@
"pre-commit": "lint-staged"
}
}
-}
+}
\ No newline at end of file
diff --git a/app/client/public/index.html b/app/client/public/index.html
index 8e5b30f1d7..d19be4efda 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -4,7 +4,7 @@
-
+
Appsmith
+
+
diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
index 7b47f61088..5f7ad041cc 100644
--- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Editor } from "@tinymce/tinymce-react";
+import React, { useEffect, useState } from "react";
+import { debounce } from "lodash";
import styled from "styled-components";
const StyledRTEditor = styled.div`
&& {
@@ -22,26 +22,66 @@ export interface RichtextEditorComponentProps {
export const RichtextEditorComponent = (
props: RichtextEditorComponentProps,
) => {
+ const [editorInstance, setEditorInstance] = useState(null as any);
+ useEffect(() => {
+ if (editorInstance !== null) {
+ editorInstance.mode.set(
+ props.isDisabled === true ? "readonly" : "design",
+ );
+ }
+ }, [props.isDisabled]);
+
+ useEffect(() => {
+ if (editorInstance !== null) {
+ editorInstance.setContent(props.defaultValue, { format: "html" });
+ }
+ }, [props.defaultValue]);
+ useEffect(() => {
+ const onChange = debounce(props.onValueChange, 200);
+ (window as any).tinyMCE.init({
+ height: "100%",
+ selector: `textarea#${props.widgetId}`,
+ menubar: false,
+ branding: false,
+ resize: false,
+ setup: (editor: any) => {
+ editor.mode.set(props.isDisabled === true ? "readonly" : "design");
+ // Without timeout default value is not set on browser refresh.
+ setTimeout(() => {
+ editor.setContent(props.defaultValue, { format: "html" });
+ }, 300);
+ editor
+ .on("Change", () => {
+ onChange(editor.getContent());
+ })
+ .on("Undo", () => {
+ onChange(editor.getContent());
+ })
+ .on("Redo", () => {
+ onChange(editor.getContent());
+ })
+ .on("KeyUp", () => {
+ // console.log("change: ", editor.getContent())
+ onChange(editor.getContent());
+ });
+ setEditorInstance(editor);
+ },
+ plugins: [
+ "advlist autolink lists link image charmap print preview anchor",
+ "searchreplace visualblocks code fullscreen",
+ "insertdatetime media table paste code help",
+ ],
+ toolbar:
+ "undo redo | formatselect | bold italic backcolor forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+ });
+
+ return () => {
+ editorInstance !== null && editorInstance.destroy();
+ };
+ }, []);
return (
- props.onValueChange(content)}
- />
+
);
};
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index f1d89731dc..7d869a50cb 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -1925,12 +1925,6 @@
"@svgr/plugin-svgo" "^4.3.1"
loader-utils "^1.2.3"
-"@tinymce/tinymce-react@^3.5.0":
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.5.0.tgz#5017be56aeab1077f09d3f74a386883e5524a33f"
- dependencies:
- prop-types "^15.6.2"
-
"@types/algoliasearch-helper@*":
version "2.26.1"
resolved "https://registry.yarnpkg.com/@types/algoliasearch-helper/-/algoliasearch-helper-2.26.1.tgz#60cf377e7cb4bd9a55f7eba35182792763230a24"