fix(editor): defer render and load content per chapter for WebKit

src/editor/Editor.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { EditorContent, useEditor, type Editor as TiptapEditor } from "@tiptap/react";
 import type { JSONContent } from "@tiptap/core";
 import { editorExtensions } from "./extensions";
@@ -11,20 +11,25 @@ interface EditorProps {
 }
 
 export function Editor({ chapterId, content, onChange, onReady }: EditorProps) {
-  const editor = useEditor(
-    {
-      extensions: editorExtensions,
-      content,
-      autofocus: "start",
-      editorProps: { attributes: { class: "prose" } },
-      onUpdate: ({ editor }) => onChange(editor.getJSON()),
-    },
-    [chapterId]
-  );
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const editor = useEditor({
+    extensions: editorExtensions,
+    content,
+    immediatelyRender: false,
+    editorProps: { attributes: { class: "prose" } },
+    onUpdate: ({ editor }) => onChangeRef.current(editor.getJSON()),
+  });
 
   useEffect(() => {
     onReady(editor);
   }, [editor, onReady]);
 
+  useEffect(() => {
+    if (editor) editor.commands.setContent(content, { emitUpdate: false });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chapterId, editor]);
+
   return <EditorContent editor={editor} className="editor-host" />;
 }