Some minor bugs

src-tauri/src/main.rs

@@ -9,7 +9,6 @@ extern crate objc;
 
 use std::collections::HashMap;
 use std::fs::create_dir_all;
-use std::path::Path;
 
 use http::header::{HeaderName, USER_AGENT};
 use http::{HeaderMap, HeaderValue, Method};

src-web/App.tsx

@@ -69,7 +69,7 @@ function App() {
               <Editor
                 valueKey={request.id}
                 useTemplating
-                defaultValue={request.body ?? undefined}
+                defaultValue={request.body ?? ''}
                 contentType="application/json"
                 onChange={(body) => updateRequest.mutate({ body })}
               />

src-web/components/Editor/Editor.css

@@ -119,9 +119,8 @@
     background-color: transparent;
 }
 
-.cm-editor.cm-focused .cm-activeLineGutter,
+.cm-editor.cm-focused .cm-activeLineGutter {
-.cm-editor.cm-focused .cm-activeLine {
+    color: hsl(var(--color-gray-800));
-    background-color: hsl(var(--color-gray-100)/0.3);
 }
 
 .cm-editor * {

src-web/components/Editor/Editor.tsx

@@ -57,15 +57,17 @@ export default function Editor({
       console.log('Failed to initialize Codemirror', e);
     }
     return () => view?.destroy();
-  }, [ref.current]);
+  }, [ref.current, valueKey]);
 
   // Update value when valueKey changes
-  useEffect(() => {
+  // TODO: This would be more efficient but the onChange handler gets fired on update
-    if (cm === null) return;
+  // useEffect(() => {
-    cm.view.dispatch({
+  //   if (cm === null) return;
-      changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
+  //   console.log('NEW DOC', valueKey, defaultValue);
-    });
+  //   cm.view.dispatch({
-  }, [valueKey]);
+  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
+  //   });
+  // }, [valueKey]);
 
   // Update language extension when contentType changes
   useEffect(() => {
@@ -111,31 +113,20 @@ function getExtensions({
           ),
           EditorState.transactionFilter.of(
             (tr: Transaction): TransactionSpec | TransactionSpec[] => {
-              if (!tr.isUserEvent('input.paste')) {
+              if (!tr.isUserEvent('input.paste')) return tr;
-                return tr;
-              }
 
-              // let addedNewline = false;
               const trs: TransactionSpec[] = [];
               tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
                 let insert = '';
                 for (const line of inserted) {
                   insert += line.replace('\n', '');
                 }
-                trs.push({
+                const changes = [{ from: fromB, to: toA, insert }];
-                  ...tr,
+                // Update selection now that the text has been changed
-                  selection: undefined,
+                const selection = EditorSelection.create([EditorSelection.cursor(toB - 1)], 0);
-                  changes: [{ from: fromB, to: toA, insert }],
+                trs.push({ ...tr, selection, changes });
-                });
-              });
-
-              // selection: EditorSelection.create([EditorSelection.cursor(8)], 1),
-              // console.log('TRS', trs, tr);
-              trs.push({
-                selection: EditorSelection.create([EditorSelection.cursor(8)], 1),
               });
               return trs;
-              // return addedNewline ? [] : tr;
             },
           ),
         ]
@@ -144,7 +135,7 @@ function getExtensions({
     ...(!singleLine ? [multiLineExtensions] : []),
     ...(ext ? [ext] : []),
     EditorView.updateListener.of((update) => {
-      if (typeof onChange === 'function') {
+      if (typeof onChange === 'function' && update.docChanged) {
         onChange(update.state.doc.toString());
       }
     }),