Better editor updating

src-tauri/src/main.rs

@@ -76,7 +76,7 @@ async fn send_request(
     headers.insert("x-foo-bar", HeaderValue::from_static("hi mom"));
     headers.insert(
         HeaderName::from_static("x-api-key"),
-        HeaderValue::from_static("123-123-123"),
+        HeaderValue::from_str(models::generate_id("x").as_str()).expect("Failed to create header"),
     );
 
     let m = Method::from_bytes(req.method.to_uppercase().as_bytes()).unwrap();

src-tauri/src/models.rs

@@ -306,7 +306,7 @@ pub async fn delete_all_responses(
     Ok(())
 }
 
-fn generate_id(prefix: &str) -> String {
+pub fn generate_id(prefix: &str) -> String {
     format!(
         "{prefix}_{}",
         Alphanumeric.sample_string(&mut rand::thread_rng(), 10)

src-web/components/Editor/Editor.tsx

@@ -1,14 +1,15 @@
 import './Editor.css';
-import { HTMLAttributes, useEffect, useMemo, useRef } from 'react';
+import { HTMLAttributes, useEffect, useMemo, useRef, useState } from 'react';
 import { EditorView } from 'codemirror';
-import { baseExtensions, multiLineExtensions, syntaxExtension } from './extensions';
-import { EditorState, Transaction, EditorSelection } from '@codemirror/state';
+import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
 import type { TransactionSpec } from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, Transaction } from '@codemirror/state';
 import classnames from 'classnames';
 import { autocompletion } from '@codemirror/autocomplete';
 
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   contentType: string;
+  valueKey?: string;
   useTemplating?: boolean;
   onChange?: (value: string) => void;
   onSubmit?: () => void;
@@ -17,6 +18,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
 
 export default function Editor({
   contentType,
+  valueKey,
   useTemplating,
   defaultValue,
   onChange,
@@ -25,9 +27,74 @@ export default function Editor({
   singleLine,
   ...props
 }: Props) {
+  const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
-  const extensions = useMemo(() => {
-    const ext = syntaxExtension({ contentType, useTemplating });
+  const extensions = useMemo(
+    () => getExtensions({ onSubmit, singleLine, onChange, contentType, useTemplating }),
+    [contentType],
+  );
+
+  const newState = (langHolder: Compartment) => {
+    const langExt = getLanguageExtension({ contentType, useTemplating });
+    return EditorState.create({
+      doc: `${defaultValue ?? ''}`,
+      extensions: [...extensions, langHolder.of(langExt)],
+    });
+  };
+
+  // Create codemirror instance when ref initializes
+  useEffect(() => {
+    if (ref.current === null) return;
+    let view: EditorView | null = null;
+    try {
+      const langHolder = new Compartment();
+      view = new EditorView({
+        state: newState(langHolder),
+        parent: ref.current,
+      });
+      setCm({ view, langHolder });
+    } catch (e) {
+      console.log('Failed to initialize Codemirror', e);
+    }
+    return () => view?.destroy();
+  }, [ref.current]);
+
+  // Update value when valueKey changes
+  useEffect(() => {
+    if (cm === null) return;
+    cm.view.dispatch({
+      changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
+    });
+  }, [valueKey]);
+
+  // Update language extension when contentType changes
+  useEffect(() => {
+    if (cm === null) return;
+    const ext = getLanguageExtension({ contentType, useTemplating });
+    cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
+  }, [contentType]);
+
+  return (
+    <div
+      ref={ref}
+      className={classnames(
+        className,
+        'cm-wrapper text-base',
+        singleLine ? 'cm-singleline' : 'cm-multiline',
+      )}
+      {...props}
+    />
+  );
+}
+
+function getExtensions({
+  singleLine,
+  onChange,
+  onSubmit,
+  contentType,
+  useTemplating,
+}: Pick<Props, 'singleLine' | 'onChange' | 'onSubmit' | 'contentType' | 'useTemplating'>) {
+  const ext = getLanguageExtension({ contentType, useTemplating });
   return [
     autocompletion(),
     ...(singleLine
@@ -46,7 +113,6 @@ export default function Editor({
               if (!tr.isUserEvent('input.paste')) {
                 return tr;
               }
-                console.log('GOT PASTE', tr);
 
               // let addedNewline = false;
               const trs: TransactionSpec[] = [];
@@ -83,35 +149,4 @@ export default function Editor({
       }
     }),
   ];
-  }, [contentType]);
-
-  useEffect(() => {
-    if (ref.current === null) return;
-
-    let view: EditorView;
-    try {
-      view = new EditorView({
-        state: EditorState.create({
-          doc: `${defaultValue ?? ''}`,
-          extensions: extensions,
-        }),
-        parent: ref.current,
-      });
-    } catch (e) {
-      console.log(e);
-    }
-    return () => view?.destroy();
-  }, [ref.current]);
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        className,
-        'cm-wrapper text-base',
-        singleLine ? 'cm-singleline' : 'cm-multiline',
-      )}
-      {...props}
-    />
-  );
 }

src-web/components/Editor/extensions.ts

@@ -88,7 +88,7 @@ const syntaxExtensions: Record<string, { base: LanguageSupport; ext: any[] }> =
   url: { base: url(), ext: [] },
 };
 
-export function syntaxExtension({
+export function getLanguageExtension({
   contentType,
   useTemplating,
 }: {

src-web/components/ResponsePane.tsx

@@ -101,7 +101,7 @@ export function ResponsePane({ requestId, error }: Props) {
                 />
               ) : response?.body ? (
                 <Editor
-                  key={response.body}
+                  valueKey={response.id}
                   defaultValue={response?.body}
                   contentType={contentType}
                 />