Move create request and fix slow HTML highlighting

src-web/components/Sidebar.tsx

@@ -22,6 +22,7 @@ import { DropMarker } from './DropMarker';
 import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
 import { IconButton } from './core/IconButton';
+import { useCreateRequest } from '../hooks/useCreateRequest';
 
 interface Props {
   className?: string;
@@ -33,6 +34,7 @@ enum ItemTypes {
 
 export const Sidebar = memo(function Sidebar({ className }: Props) {
   const { hidden } = useSidebarHidden();
+  const createRequest = useCreateRequest({ navigateAfter: true });
   const sidebarRef = useRef<HTMLDivElement>(null);
   const activeRequestId = useActiveRequestId();
   const activeEnvironmentId = useActiveEnvironmentId();
@@ -156,13 +158,18 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
           'h-full relative grid grid-rows-[auto_minmax(0,1fr)_auto]',
         )}
       >
-        <HStack className="mt-1 mb-2 pt-1 mx-2" justifyContent="between" alignItems="center" space={1}>
+        <HStack
+          className="mt-1 mb-2 pt-1 mx-2"
+          justifyContent="between"
+          alignItems="center"
+          space={1}
+        >
           <WorkspaceActionsDropdown
             forDropdown={false}
             className="text-left mb-0"
             justify="start"
           />
-          <IconButton size="sm" icon="plusCircle" title="Create Request" />
+          <IconButton size="sm" icon="plusCircle" title="Create Request" onClick={() => createRequest.mutate({})} />
         </HStack>
         <VStack
           as="ul"

src-web/components/SidebarActions.tsx

@@ -1,37 +1,17 @@
-import { memo, useCallback } from 'react';
-import { useCreateRequest } from '../hooks/useCreateRequest';
+import { memo } from 'react';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
-import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { IconButton } from './core/IconButton';
 
 export const SidebarActions = memo(function SidebarActions() {
   const { hidden, toggle } = useSidebarHidden();
-  const createRequest = useCreateRequest({ navigateAfter: true });
-
-  const handleCreateRequest = useCallback(() => {
-    createRequest.mutate({});
-  }, [createRequest]);
-
-  useListenToTauriEvent('new_request', () => {
-    createRequest.mutate({});
-  });
 
   return (
-    <>
-      <IconButton
-        onClick={toggle}
-        className="pointer-events-auto"
-        size="sm"
-        title="Show sidebar"
-        icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
-      />
-      <IconButton
-        onClick={handleCreateRequest}
-        className="pointer-events-auto"
-        size="sm"
-        title="Show sidebar"
-        icon="plusCircle"
-      />
-    </>
+    <IconButton
+      onClick={toggle}
+      className="pointer-events-auto"
+      size="sm"
+      title="Show sidebar"
+      icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
+    />
   );
 });

src-web/components/core/Editor/extensions.ts

@@ -5,7 +5,6 @@ import {
   completionKeymap,
 } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
@@ -87,7 +86,7 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
   'application/graphql': graphqlLanguageSupport(),
   'application/json': json(),
   'application/javascript': javascript(),
-  'text/html': html(),
+  'text/html': xml(), // HTML as xml because HTML is oddly slow
   'application/xml': xml(),
   'text/xml': xml(),
   url: url(),
@@ -98,14 +97,17 @@ export function getLanguageExtension({
   useTemplating = false,
   environment,
   autocomplete,
-}: { environment: Environment | null } & Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
+}: { environment: Environment | null } & Pick<
+  EditorProps,
+  'contentType' | 'useTemplating' | 'autocomplete'
+>) {
   const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
   if (justContentType === 'application/graphql') {
     return graphql();
   }
   const base = syntaxExtensions[justContentType] ?? text();
   if (!useTemplating) {
-    return base ? base : [];
+    return base;
   }
 
   return twig(base, environment, autocomplete);