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) => {
-  return (
-    <div className='inputMain'>
-      <EditorProvider
-        slotBefore={<MenuBar />}
-        extensions={[StarterKit, Link]}
-        content={content}
-        onUpdate={({ editor }) => {
+  const editor = useEditor({
+    extensions: [StarterKit, Link],
+    onUpdate: ({ editor }) => {
       // Update the state when the editor content changes
       updateContent(editor.getHTML())
-        }}
-      ></EditorProvider>
+    },
+    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'>
+      {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) {