From c4b69f3641887f1d53a617f454180d3ed4e75a20 Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Sat, 20 Jun 2026 13:28:25 -0400
Subject: [PATCH] fix(editor): defer render and load content per chapter for
 WebKit

---
 src/editor/Editor.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index 60d5518..8e94e3e 100644
--- a/src/editor/Editor.tsx
+++ b/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" />;
 }