From 1e98b16c144fbada407a31092fc37270574459a5 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Wed, 28 Aug 2024 22:57:26 +0500
Subject: [PATCH] fix: reset body field in mod form when route changes

---
 src/components/Inputs.tsx | 45 ++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/Inputs.tsx b/src/components/Inputs.tsx
index a94be5f..737d884 100644
--- a/src/components/Inputs.tsx
+++ b/src/components/Inputs.tsx
@@ -1,7 +1,7 @@
 import Link from '@tiptap/extension-link'
-import { EditorProvider, useCurrentEditor } from '@tiptap/react'
+import { Editor, EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
+import React, { useEffect } from 'react'
 import '../styles/styles.css'
 import '../styles/tiptap.scss'
 
@@ -112,28 +112,39 @@ type RichTextEditorProps = {
 }
 
 const RichTextEditor = ({ content, updateContent }: RichTextEditorProps) => {
+  const editor = useEditor({
+    extensions: [StarterKit, Link],
+    onUpdate: ({ editor }) => {
+      // Update the state when the editor content changes
+      updateContent(editor.getHTML())
+    },
+    content
+  })
+
+  // Update editor content when the `content` prop changes
+  useEffect(() => {
+    if (editor && editor.getHTML() !== content) {
+      editor.commands.setContent(content, false)
+    }
+  }, [content, editor])
+
   return (
     <div className='inputMain'>
-      <EditorProvider
-        slotBefore={<MenuBar />}
-        extensions={[StarterKit, Link]}
-        content={content}
-        onUpdate={({ editor }) => {
-          // Update the state when the editor content changes
-          updateContent(editor.getHTML())
-        }}
-      ></EditorProvider>
+      {editor && (
+        <>
+          <MenuBar editor={editor} />
+          <EditorContent editor={editor} />
+        </>
+      )}
     </div>
   )
 }
 
-const MenuBar = () => {
-  const { editor } = useCurrentEditor()
-
-  if (!editor) {
-    return null
-  }
+type MenuBarProps = {
+  editor: Editor
+}
 
+const MenuBar = ({ editor }: MenuBarProps) => {
   const setLink = () => {
     const url = prompt('URL')
     if (url) {