From d714079c1cb9d45774f8672d71825bfd6c06e104 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Tue, 24 Oct 2023 19:53:43 +0530
Subject: [PATCH] fixed editor mounting with custom hook

---
 .../editor/core/src/ui/hooks/useEditor.tsx    | 56 ++++++++++++-------
 .../core/src/ui/hooks/useReadOnlyEditor.tsx   | 25 +++++++--
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/packages/editor/core/src/ui/hooks/useEditor.tsx b/packages/editor/core/src/ui/hooks/useEditor.tsx
index 837700915..08444cff0 100644
--- a/packages/editor/core/src/ui/hooks/useEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@@ -1,18 +1,22 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import { useImperativeHandle, useRef, MutableRefObject } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { DeleteImage } from '../../types/delete-image';
+import {
+  useImperativeHandle,
+  useRef,
+  MutableRefObject,
+  useEffect,
+} from "react";
+import { DeleteImage } from "../../types/delete-image";
 import { CoreEditorProps } from "../props";
 import { CoreEditorExtensions } from "../extensions";
-import { EditorProps } from '@tiptap/pm/view';
+import { EditorProps } from "@tiptap/pm/view";
 import { getTrimmedHTML } from "../../lib/utils";
 import { UploadImage } from "../../types/upload-image";
 
-const DEBOUNCE_DELAY = 1500;
-
 interface CustomEditorProps {
   uploadFile: UploadImage;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   value: string;
   deleteFile: DeleteImage;
@@ -23,26 +27,44 @@ interface CustomEditorProps {
   forwardedRef?: any;
 }
 
-export const useEditor = ({ uploadFile, deleteFile, editorProps = {}, value, extensions = [], onChange, setIsSubmitting, debouncedUpdatesEnabled, forwardedRef, setShouldShowAlert, }: CustomEditorProps) => {
+export const useEditor = ({
+  uploadFile,
+  deleteFile,
+  editorProps = {},
+  value,
+  extensions = [],
+  onChange,
+  setIsSubmitting,
+  forwardedRef,
+  setShouldShowAlert,
+}: CustomEditorProps) => {
   const editor = useCustomEditor({
     editorProps: {
       ...CoreEditorProps(uploadFile, setIsSubmitting),
       ...editorProps,
     },
     extensions: [...CoreEditorExtensions(deleteFile), ...extensions],
-    content: (typeof value === "string" && value.trim() !== "") ? value : "<p></p>",
+    content:
+      typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
     onUpdate: async ({ editor }) => {
       // for instant feedback loop
       setIsSubmitting?.("submitting");
       setShouldShowAlert?.(true);
-      if (debouncedUpdatesEnabled) {
-        debouncedUpdates({ onChange: onChange, editor });
-      } else {
-        onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
-      }
+      onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
     },
   });
 
+  const hasIntiliazedContent = useRef(false);
+
+  useEffect(() => {
+    if (editor && value!=="" && !hasIntiliazedContent.current) {
+      editor.commands.setContent(
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      );
+      hasIntiliazedContent.current = true;
+    }
+  }, [value]);
+
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
 
@@ -55,12 +77,6 @@ export const useEditor = ({ uploadFile, deleteFile, editorProps = {}, value, ext
     },
   }));
 
-  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
-    if (onChange) {
-      onChange(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
-    }
-  }, DEBOUNCE_DELAY);
-
   if (!editor) {
     return null;
   }
diff --git a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
index 3e32c5044..d9f51fb61 100644
--- a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
@@ -1,8 +1,8 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import { useImperativeHandle, useRef, MutableRefObject } from "react";
+import { useImperativeHandle, useRef, MutableRefObject, useEffect } from "react";
 import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
 import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
-import { EditorProps } from '@tiptap/pm/view';
+import { EditorProps } from "@tiptap/pm/view";
 
 interface CustomReadOnlyEditorProps {
   value: string;
@@ -11,10 +11,16 @@ interface CustomReadOnlyEditorProps {
   editorProps?: EditorProps;
 }
 
-export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {} }: CustomReadOnlyEditorProps) => {
+export const useReadOnlyEditor = ({
+  value,
+  forwardedRef,
+  extensions = [],
+  editorProps = {},
+}: CustomReadOnlyEditorProps) => {
   const editor = useCustomEditor({
     editable: false,
-    content: (typeof value === "string" && value.trim() !== "") ? value : "<p></p>",
+    content:
+      typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
     editorProps: {
       ...CoreReadOnlyEditorProps,
       ...editorProps,
@@ -22,6 +28,16 @@ export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editor
     extensions: [...CoreReadOnlyEditorExtensions, ...extensions],
   });
 
+  const hasIntiliazedContent = useRef(false);
+
+  useEffect(() => {
+    if (editor && !value && !hasIntiliazedContent.current) {
+      console.log("setting content");
+      editor.commands.setContent(value);
+      hasIntiliazedContent.current = true;
+    }
+  }, [value]);
+
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
 
@@ -34,7 +50,6 @@ export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editor
     },
   }));
 
-
   if (!editor) {
     return null;
   }