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
+      {editor && (
-        slotBefore={<MenuBar />}
+        <>
-        extensions={[StarterKit, Link]}
+          <MenuBar editor={editor} />
-        content={content}
+          <EditorContent editor={editor} />
-        onUpdate={({ editor }) => {
+        </>
-          // Update the state when the editor content changes
+      )}
-          updateContent(editor.getHTML())
-        }}
-      ></EditorProvider>
     </div>
   )
 }
 
-const MenuBar = () => {
+type MenuBarProps = {
-  const { editor } = useCurrentEditor()
+  editor: Editor
-
+}
-  if (!editor) {
-    return null
-  }
 
+const MenuBar = ({ editor }: MenuBarProps) => {
   const setLink = () => {
     const url = prompt('URL')
     if (url) {