Update App.tsx to use editorView and compartments for line numbers and editable state

src/App.tsx

@@ -369,24 +369,36 @@ export default function App() {
 
 
   useEffect(() => {
-    const textarea = textareaRef.current;
+    const view = editorViewRef.current;
-    if (!textarea) return;
+    if (!view) return;
-    if (showLineNumbersActive && !markdownPreview) {
+    const extensions = showLineNumbersActive
-      appendLineNumbers(textarea);
+      ? [lineNumbers(), highlightActiveLineGutter()]
-    } else {
+      : [];
-      removeLineNumbers(textarea);
+    view.dispatch({
-    }
+      effects: lineNumbersCompartmentRef.current.reconfigure(extensions)
-    return () => {
+    });
-      removeLineNumbers(textarea);
+  }, [showLineNumbersActive]);
-    };
-  }, [markdownPreview, showLineNumbersActive]);
 
   useEffect(() => {
-    if (!showLineNumbersActive || markdownPreview) return;
+    const view = editorViewRef.current;
-    const textarea = textareaRef.current;
+    if (!view) return;
-    if (!textarea) return;
+    view.dispatch({
-    refreshLineNumbers(textarea);
+      effects: editableCompartmentRef.current.reconfigure(
-  }, [body, markdownPreview, showLineNumbersActive]);
+        EditorView.editable.of(!isViewingHistory && !markdownPreview)
+      )
+    });
+  }, [isViewingHistory, markdownPreview]);
+
+  useEffect(() => {
+    const view = editorViewRef.current;
+    if (!view) return;
+    if (body === editorValueRef.current) return;
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: body },
+      annotations: Transaction.addToHistory.of(false)
+    });
+    editorValueRef.current = body;
+  }, [body]);
 
 
   const refreshTexts = useCallback(async () => {