Move create request and fix slow HTML highlighting

package-lock.json

@@ -8,17 +8,12 @@
       "name": "yaak-app",
       "version": "0.0.0",
       "dependencies": {
-        "@codemirror/autocomplete": "6.2.0",
         "@codemirror/commands": "^6.2.1",
-        "@codemirror/lang-html": "^6.4.2",
         "@codemirror/lang-javascript": "^6.1.4",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-xml": "^6.0.2",
-        "@codemirror/language": "6.2.1",
+        "@codemirror/language": "^6.6.0",
-        "@codemirror/lint": "6.2.1",
         "@codemirror/search": "^6.2.3",
-        "@codemirror/state": "6.2.0",
-        "@codemirror/view": "6.2.1",
         "@lezer/generator": "^1.2.2",
         "@lezer/highlight": "^1.1.3",
         "@lezer/lr": "^1.3.3",
@@ -32,7 +27,7 @@
         "@tauri-apps/api": "^1.5.1",
         "buffer": "^6.0.3",
         "classnames": "^2.3.2",
-        "cm6-graphql": "^0.0.10",
+        "cm6-graphql": "^0.0.9",
         "codemirror": "^6.0.1",
         "focus-trap-react": "^10.1.1",
         "format-graphql": "^1.4.0",
@@ -50,7 +45,7 @@
       },
       "devDependencies": {
         "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-        "@tauri-apps/cli": "^1.5.6",
+        "@tauri-apps/cli": "^1.5.4",
         "@types/node": "^18.7.10",
         "@types/papaparse": "^5.3.7",
         "@types/parse-color": "^1.0.1",
@@ -498,57 +493,6 @@
         "@lezer/common": "^1.1.0"
       }
     },
-    "node_modules/@codemirror/lang-css": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
-      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@lezer/common": "^1.0.2",
-        "@lezer/css": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/lang-html": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.6.tgz",
-      "integrity": "sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/lang-css": "^6.0.0",
-        "@codemirror/lang-javascript": "^6.0.0",
-        "@codemirror/language": "^6.4.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.17.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/css": "^1.1.0",
-        "@lezer/html": "^1.3.0"
-      }
-    },
-    "node_modules/@codemirror/lang-html/node_modules/@codemirror/language": {
-      "version": "6.9.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
-      "integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.1.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
-    "node_modules/@codemirror/lang-html/node_modules/@codemirror/view": {
-      "version": "6.21.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.4.tgz",
-      "integrity": "sha512-WKVZ7nvN0lwWPfAf05WxWqTpwjC8YN3q5goj3CsSig7//DD81LULgOx3nBegqpqP0iygBqRmW8z0KSc2QTAdAg==",
-      "dependencies": {
-        "@codemirror/state": "^6.1.4",
-        "style-mod": "^4.1.0",
-        "w3c-keyname": "^2.2.4"
-      }
-    },
     "node_modules/@codemirror/lang-javascript": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz",
@@ -563,19 +507,6 @@
         "@lezer/javascript": "^1.0.0"
       }
     },
-    "node_modules/@codemirror/lang-javascript/node_modules/@codemirror/language": {
-      "version": "6.9.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
-      "integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.1.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
     "node_modules/@codemirror/lang-javascript/node_modules/@codemirror/view": {
       "version": "6.21.4",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.4.tgz",
@@ -607,7 +538,7 @@
         "@lezer/xml": "^1.0.0"
       }
     },
-    "node_modules/@codemirror/lang-xml/node_modules/@codemirror/language": {
+    "node_modules/@codemirror/language": {
       "version": "6.9.2",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
       "integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
@@ -620,19 +551,6 @@
         "style-mod": "^4.0.0"
       }
     },
-    "node_modules/@codemirror/language": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
-      "integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
     "node_modules/@codemirror/lint": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.1.tgz",
@@ -1220,15 +1138,6 @@
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.0.tgz",
       "integrity": "sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw=="
     },
-    "node_modules/@lezer/css": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.3.tgz",
-      "integrity": "sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==",
-      "dependencies": {
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
     "node_modules/@lezer/generator": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@lezer/generator/-/generator-1.5.1.tgz",
@@ -1249,16 +1158,6 @@
         "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@lezer/html": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.6.tgz",
-      "integrity": "sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==",
-      "dependencies": {
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
     "node_modules/@lezer/javascript": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.8.tgz",
@@ -3293,18 +3192,18 @@
       }
     },
     "node_modules/cm6-graphql": {
-      "version": "0.0.10",
+      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/cm6-graphql/-/cm6-graphql-0.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/cm6-graphql/-/cm6-graphql-0.0.9.tgz",
-      "integrity": "sha512-Phn+SBjpRkPFysVwTTY5JiuEX0U59czifVrfyu5CXwz7/Se7UTodA0C5+vdAPjWI2Z+7bMIXTfqGDaTGM5MmZw==",
+      "integrity": "sha512-MhdQMuVGwnyEk3I1BiLhpMEhOC7sTxmbq205cjdDtHysB0EtNLBoccy+7+h/+So90otjwJcSaty6vwp22WN6kw==",
       "dependencies": {
-        "graphql-language-service": "^5.2.0"
+        "graphql-language-service": "^5.1.7"
       },
       "peerDependencies": {
-        "@codemirror/autocomplete": "6.2.0",
+        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/language": "6.2.1",
+        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "6.2.1",
+        "@codemirror/lint": "^6.0.0",
-        "@codemirror/state": "6.2.0",
+        "@codemirror/state": "^6.1.0",
-        "@codemirror/view": "6.2.1",
+        "@codemirror/view": "^6.1.2",
         "@lezer/highlight": "^1.0.0",
         "graphql": "^16.5.0"
       }

package.json

@@ -17,17 +17,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "6.2.0",
     "@codemirror/commands": "^6.2.1",
-    "@codemirror/lang-html": "^6.4.2",
     "@codemirror/lang-javascript": "^6.1.4",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.0.2",
-    "@codemirror/language": "6.2.1",
+    "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "6.2.1",
     "@codemirror/search": "^6.2.3",
-    "@codemirror/state": "6.2.0",
-    "@codemirror/view": "6.2.1",
     "@lezer/generator": "^1.2.2",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.3.3",
@@ -41,7 +36,7 @@
     "@tauri-apps/api": "^1.5.1",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "cm6-graphql": "^0.0.10",
+    "cm6-graphql": "^0.0.9",
     "codemirror": "^6.0.1",
     "focus-trap-react": "^10.1.1",
     "format-graphql": "^1.4.0",
@@ -58,7 +53,6 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^3.1.0",
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tauri-apps/cli": "^1.5.4",
     "@types/node": "^18.7.10",
@@ -70,6 +64,7 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",

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 { memo } from 'react';
-import { useCreateRequest } from '../hooks/useCreateRequest';
 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
-      <IconButton
+      onClick={toggle}
-        onClick={toggle}
+      className="pointer-events-auto"
-        className="pointer-events-auto"
+      size="sm"
-        size="sm"
+      title="Show sidebar"
-        title="Show sidebar"
+      icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
-        icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
+    />
-      />
-      <IconButton
-        onClick={handleCreateRequest}
-        className="pointer-events-auto"
-        size="sm"
-        title="Show sidebar"
-        icon="plusCircle"
-      />
-    </>
   );
 });

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);