Debounce autocomplete

package-lock.json

@@ -24,11 +24,13 @@
         "@radix-ui/react-popover": "1.0.3",
         "@radix-ui/react-scroll-area": "^1.0.2",
         "@radix-ui/react-separator": "^1.0.1",
+        "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "@tanstack/react-query": "^4.24.10",
         "@tauri-apps/api": "^1.2.0",
         "classnames": "^2.3.2",
         "codemirror": "^6.0.1",
         "framer-motion": "^9.0.4",
+        "lodash": "^4.17.21",
         "parse-color": "^1.0.0",
         "parse-json": "^6.0.2",
         "react": "^18.2.0",
@@ -38,6 +40,7 @@
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.2.2",
+        "@types/lodash": "^4.14.191",
         "@types/node": "^18.7.10",
         "@types/parse-color": "^1.0.1",
         "@types/parse-json": "^4.0.0",
@@ -1934,6 +1937,35 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tailwindcss/nesting": {
+      "version": "0.0.0-insiders.565cd3e",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
+      "dependencies": {
+        "postcss-nested": "^5.0.5"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "4.24.10",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.24.10.tgz",
@@ -2181,6 +2213,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "18.13.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -3358,7 +3396,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -5270,8 +5307,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -5397,7 +5433,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -5729,8 +5764,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -5768,7 +5802,6 @@
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
       "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5896,7 +5929,6 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
       "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -6505,7 +6537,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7035,8 +7066,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-      "dev": true
     },
     "node_modules/uuid": {
       "version": "9.0.0",
@@ -8786,6 +8816,24 @@
       "dev": true,
       "optional": true
     },
+    "@tailwindcss/nesting": {
+      "version": "0.0.0-insiders.565cd3e",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
+      "requires": {
+        "postcss-nested": "^5.0.5"
+      },
+      "dependencies": {
+        "postcss-nested": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+          "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+          "requires": {
+            "postcss-selector-parser": "^6.0.6"
+          }
+        }
+      }
+    },
     "@tanstack/query-core": {
       "version": "4.24.10",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.24.10.tgz",
@@ -8912,6 +8960,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
     "@types/node": {
       "version": "18.13.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -9750,8 +9804,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-      "dev": true
     },
     "csstype": {
       "version": "3.1.1",
@@ -11170,8 +11223,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -11274,8 +11326,7 @@
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
-      "dev": true
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -11516,8 +11567,7 @@
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-      "dev": true
     },
     "picomatch": {
       "version": "2.3.1",
@@ -11546,7 +11596,6 @@
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
       "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-      "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -11606,7 +11655,6 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
       "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12017,8 +12065,7 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
-      "dev": true
     },
     "spawn-command": {
       "version": "0.0.2-1",
@@ -12404,8 +12451,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-      "dev": true
     },
     "uuid": {
       "version": "9.0.0",

package.json

@@ -31,11 +31,13 @@
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-separator": "^1.0.1",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tanstack/react-query": "^4.24.10",
     "@tauri-apps/api": "^1.2.0",
     "classnames": "^2.3.2",
     "codemirror": "^6.0.1",
     "framer-motion": "^9.0.4",
+    "lodash": "^4.17.21",
     "parse-color": "^1.0.0",
     "parse-json": "^6.0.2",
     "react": "^18.2.0",
@@ -45,6 +47,7 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.2",
+    "@types/lodash": "^4.14.191",
     "@types/node": "^18.7.10",
     "@types/parse-color": "^1.0.1",
     "@types/parse-json": "^4.0.0",

postcss.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
+    require('@tailwindcss/nesting')(require('postcss-nesting')),
     require('tailwindcss'),
     require('autoprefixer'),
-    require('postcss-nesting')
   ]
 }

src-web/components/Editor/Editor.tsx

@@ -67,7 +67,7 @@ export default function Editor({
   // Create codemirror instance when ref initializes
   useEffect(() => {
     if (ref.current === null) return;
-    console.log('INIT EDITOR');
+    // console.log('INIT EDITOR');
     let view: EditorView | null = null;
     try {
       const langHolder = new Compartment();
@@ -102,7 +102,7 @@ export default function Editor({
   // Update language extension when contentType changes
   useEffect(() => {
     if (cm === null) return;
-    console.log('UPDATE LANG');
+    // console.log('UPDATE LANG');
     const ext = getLanguageExtension({ contentType, useTemplating });
     cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
   }, [contentType]);
@@ -110,6 +110,7 @@ export default function Editor({
   return (
     <div
       ref={ref}
+      dangerouslySetInnerHTML={{ __html: '' }}
       className={classnames(
         className,
         'cm-wrapper text-base bg-background',

src-web/components/Editor/autocomplete.ts

@@ -0,0 +1,29 @@
+import { closeCompletion, startCompletion } from '@codemirror/autocomplete';
+import { EditorView } from 'codemirror';
+import { debounce } from 'lodash';
+
+/*
+ * Debounce autocomplete until user stops typing for `millis` milliseconds.
+ */
+export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
+  // TODO: Figure out how to show completion without setting context.explicit = true
+  const debouncedStartCompletion = debounce(function (view: EditorView) {
+    startCompletion(view);
+  }, millis);
+
+  return EditorView.updateListener.of(({ view, docChanged }) => {
+    // const completions = currentCompletions(view.state);
+    // const status = completionStatus(view.state);
+
+    // If the document hasn't changed, we don't need to do anything
+    if (!docChanged) return;
+
+    if (view.state.doc.length === 0) {
+      debouncedStartCompletion.cancel();
+      closeCompletion(view);
+      return;
+    }
+
+    debouncedStartCompletion(view);
+  });
+}

src-web/components/Editor/extensions.ts

@@ -33,6 +33,7 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
+import { debouncedAutocompletionDisplay } from './autocomplete';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
 
@@ -107,7 +108,8 @@ export const baseExtensions = [
   drawSelection(),
   dropCursor(),
   bracketMatching(),
-  autocompletion({ closeOnBlur: true, interactionDelay: 200 }),
+  debouncedAutocompletionDisplay({ millis: 1000 }),
+  autocompletion({ closeOnBlur: true, interactionDelay: 200, activateOnTyping: false }),
   syntaxHighlighting(myHighlightStyle),
   EditorState.allowMultipleSelections.of(true),
 ];

src-web/components/Editor/twig/completion.ts

@@ -47,6 +47,7 @@ export function completions(context: CompletionContext) {
         label: toStartOfVariable ? `${openTag}${v.name}${closeTag}` : v.name,
         apply: `${openTag}${v.name}${closeTag}`,
         type: 'variable',
+        matchLen,
       }))
       // Filter out exact matches
       .filter((o) => o.label !== toMatch.text),

src-web/components/HeaderEditor.tsx

@@ -37,7 +37,7 @@ export function HeaderEditor() {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} className="min-h-[30vh]">
       <VStack space={2}>
         {headers.map((header, i) => (
           <FormRow

src-web/components/ResponsePane.tsx

@@ -131,7 +131,7 @@ export function ResponsePane({ requestId, className }: Props) {
             ) : response?.body ? (
               <Editor
                 className="bg-gray-50 dark:!bg-gray-100"
-                valueKey={`${contentType}:${response.body}`}
+                valueKey={`${contentType}:${response.updatedAt}`}
                 defaultValue={response?.body}
                 contentType={contentType}
               />

src-web/components/Sidebar.tsx

@@ -22,7 +22,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
   const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
   const { appearance, toggleAppearance } = useTheme();
   const [open, setOpen] = useState<boolean>(false);
-  console.log('OPEN', open);
   return (
     <div
       className={classnames(className, 'w-52 bg-gray-100 h-full border-r border-gray-200')}

src-web/main.css

@@ -26,7 +26,10 @@ html, body, #root {
 }
 
 * {
-    transition: background-color var(--transition-duration), border-color var(--transition-duration);
+    transition: background-color var(--transition-duration),
+    border-color var(--transition-duration),
+    box-shadow var(--transition-duration),
+;
 }
 
 /*.hide-scrollbar {*/