Refactor editor to update better

src-web/components/AppRouter.tsx

@@ -0,0 +1,13 @@
+import { Router } from 'preact-router';
+import { Workspaces } from '../pages/Workspaces';
+import { Workspace } from '../Workspace';
+
+export function AppRouter() {
+  return (
+    <Router>
+      <Workspaces path="/" />
+      <Workspace path="/workspaces/:workspaceId" />
+      <Workspace path="/workspaces/:workspaceId/requests/:requestId" />
+    </Router>
+  );
+}

src-web/components/Button.tsx

@@ -25,6 +25,7 @@ export type ButtonProps = {
   children?: ComponentChildren;
   disabled?: boolean;
   title?: string;
+  tabIndex?: number;
 };
 
 export const Button = forwardRef(function Button(
@@ -35,7 +36,6 @@ export const Button = forwardRef(function Button(
     color,
     justify = 'center',
     size = 'md',
-    type = 'button',
     ...props
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>,
@@ -43,7 +43,6 @@ export const Button = forwardRef(function Button(
   return (
     <button
       ref={ref}
-      type={type}
       className={classnames(
         className,
         'outline-none',

src-web/components/ButtonLink.tsx

@@ -11,7 +11,7 @@ export function ButtonLink({ href, className, ...buttonProps }: Props) {
   const linkProps = { href };
   return (
     <Link {...linkProps}>
-      <Button className={classnames(className, 'w-full')} {...buttonProps} />
+      <Button className={classnames(className, 'w-full')} tabIndex={-1} {...buttonProps} />
     </Link>
   );
 }

src-web/components/Editor/Editor.css

@@ -12,10 +12,6 @@
             outline: none !important;
         }
 
-        .cm-selectionBackground {
-            @apply bg-gray-300;
-        }
-
         .cm-line {
             @apply text-gray-900 pl-1 pr-1.5;
         }
@@ -24,6 +20,15 @@
             @apply text-placeholder;
         }
 
+        /* Don't show selection on blurred input */
+        .cm-selectionBackground {
+            @apply bg-transparent;
+        }
+        &.cm-focused .cm-selectionBackground {
+            @apply bg-gray-400;
+        }
+
+        /* Style gutters */
         .cm-gutters {
             @apply border-0 text-gray-500/60;
 

src-web/components/Editor/Editor.tsx

@@ -1,15 +1,15 @@
 import { defaultKeymap } from '@codemirror/commands';
-import { useUnmount } from 'react-use';
 import { Compartment, EditorState } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import './Editor.css';
+import { useUnmount } from 'react-use';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
 import { singleLineExt } from './singleLine';
 
-export interface EditorProps {
+export interface _EditorProps {
   id?: string;
   readOnly?: boolean;
   className?: string;
@@ -24,7 +24,7 @@ export interface EditorProps {
   singleLine?: boolean;
 }
 
-export function Editor({
+export function _Editor({
   readOnly,
   heightMode,
   contentType,
@@ -35,16 +35,27 @@ export function Editor({
   onChange,
   className,
   singleLine,
-}: EditorProps) {
-  const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
-  const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
+}: _EditorProps) {
+  console.log('ROUTERss');
+  const cm = useRef<{ view: EditorView; langHolder: Compartment } | null>(null);
 
-  // Unmount editor when component unmounts
-  useUnmount(() => cm?.view.destroy());
+  // Unmount the editor
+  useUnmount(() => {
+    cm.current?.view.destroy();
+    cm.current = null;
+  });
 
+  // Update language extension when contentType changes
+  useEffect(() => {
+    if (cm.current === null) return;
+    const { view, langHolder } = cm.current;
+    const ext = getLanguageExtension({ contentType, useTemplating });
+    view.dispatch({ effects: langHolder.reconfigure(ext) });
+  }, [contentType]);
+
+  // Initialize the editor
   const initDivRef = (el: HTMLDivElement | null) => {
-    setDivRef(el);
-    if (divRef !== null || el === null) return;
+    if (el === null || cm.current !== null) return;
 
     try {
       const langHolder = new Compartment();
@@ -54,7 +65,7 @@ export function Editor({
         extensions: [
           langHolder.of(langExt),
           ...getExtensions({
-            container: divRef,
+            container: el,
             readOnly,
             placeholder,
             singleLine,
@@ -64,28 +75,15 @@ export function Editor({
           }),
         ],
       });
-      let newView;
-      if (cm) {
-        newView = cm.view;
-        newView.setState(state);
-      } else {
-        newView = new EditorView({ state, parent: el });
-      }
-      setCm({ view: newView, langHolder });
+      const view = new EditorView({ state, parent: el });
+      cm.current = { view, langHolder };
       syncGutterBg({ parent: el, className });
-      if (autoFocus && newView) newView.focus();
+      if (autoFocus) view.focus();
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
     }
   };
 
-  // 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={initDivRef}
@@ -109,7 +107,7 @@ function getExtensions({
   contentType,
   useTemplating,
 }: Pick<
-  EditorProps,
+  _EditorProps,
   'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
 > & { container: HTMLDivElement | null }) {
   const ext = getLanguageExtension({ contentType, useTemplating });
@@ -148,17 +146,6 @@ function getExtensions({
         ]
       : []),
 
-    // Clear selection on blur
-    EditorView.domEventHandlers({
-      blur: (e, view) => {
-        // Clear selection on blur. Must do on next tick or updating selection
-        // will keep the editor focused
-        setTimeout(() => {
-          view.dispatch({ selection: { anchor: 0, head: 0 } }, { userEvent: 'blur' });
-        });
-      },
-    }),
-
     // Handle onChange
     EditorView.updateListener.of((update) => {
       if (typeof onChange === 'function' && update.docChanged) {

src-web/components/Editor/index.tsx

@@ -0,0 +1,6 @@
+import { memo } from 'react';
+import { _Editor } from './Editor';
+import type { _EditorProps } from './Editor';
+
+export type EditorProps = _EditorProps;
+export const Editor = memo(_Editor);

src-web/components/HeaderEditor.tsx

@@ -93,12 +93,7 @@ function FormRow({
         label="Name"
         placeholder="name"
         defaultValue={pair.header.name}
-        onChange={(name) =>
-          onChange({
-            id: pair.id,
-            header: { name },
-          })
-        }
+        onChange={(name) => onChange({ id: pair.id, header: { name } })}
       />
       <Input
         hideLabel
@@ -107,12 +102,7 @@ function FormRow({
         useEditor={{ useTemplating: true }}
         placeholder="value"
         defaultValue={pair.header.value}
-        onChange={(value) =>
-          onChange({
-            id: pair.id,
-            header: { value },
-          })
-        }
+        onChange={(value) => onChange({ id: pair.id, header: { value } })}
       />
       {onDelete && <IconButton icon="trash" onClick={() => onDelete(pair)} className="w-auto" />}
     </div>

src-web/components/Input.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import type { ComponentChildren } from 'preact';
-import type { EditorProps } from './Editor/Editor';
-import { Editor } from './Editor/Editor';
+import type { EditorProps } from './Editor';
+import { Editor } from './Editor';
 import { HStack, VStack } from './Stacks';
 
 interface Props {

src-web/components/RequestPane.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { useRequestUpdate, useSendRequest } from '../hooks/useRequest';
 import type { HttpRequest } from '../lib/models';
-import { Editor } from './Editor/Editor';
+import { Editor } from './Editor';
 import { HeaderEditor } from './HeaderEditor';
 import { TabContent, Tabs } from './Tabs';
 import { UrlBar } from './UrlBar';
@@ -27,9 +27,7 @@ export function RequestPane({ fullHeight, request, className }: Props) {
           onUrlChange={(url) => updateRequest.mutate({ url })}
           sendRequest={sendRequest.mutate}
         />
-        {/*<Divider />*/}
       </div>
-      {/*<Divider className="mb-2" />*/}
       <Tabs
         tabs={[
           { value: 'body', label: 'JSON' },

src-web/components/ResponsePane.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
 import { Dropdown } from './Dropdown';
-import { Editor } from './Editor/Editor';
+import { Editor } from './Editor';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 import { HStack } from './Stacks';

src-web/components/Sidebar.tsx

@@ -1,7 +1,6 @@
 import classnames from 'classnames';
-import React, { useState } from 'react';
 import { useRequestCreate } from '../hooks/useRequest';
-import useTheme from '../hooks/useTheme';
+import { useTheme } from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
 import { ButtonLink } from './ButtonLink';
 import { IconButton } from './IconButton';