From e83dbc2e5c86b12db9680a28414e81ac3c1b4cfb Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 5 Nov 2021 00:33:15 +0530
Subject: [PATCH 01/23] feat: early codemirror v6 implementation

---
 .../components/http/PreRequestScript.vue      |   2 +-
 .../helpers/editor/codemirror.ts              | 114 +++++++-
 packages/hoppscotch-app/package.json          |   8 +
 pnpm-lock.yaml                                | 246 +++++++++++++++++-
 4 files changed, 365 insertions(+), 5 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index b4b34aeee..2d75b9f20 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -86,7 +86,7 @@ import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
 import snippets from "~/helpers/preRequestScriptSnippets"
 import "codemirror/mode/javascript/javascript"
-import { useCodemirror } from "~/helpers/editor/codemirror"
+import { useNewCodemirror as useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
 
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 7319c7413..4a13ad69b 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -26,8 +26,15 @@ import "codemirror/addon/dialog/dialog"
 import "codemirror/addon/selection/active-line"
 
 import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
-import { LinterDefinition } from "./linting/linter"
+
+import { EditorState, Compartment, StateField } from "@codemirror/state"
+import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import { defaultKeymap } from "@codemirror/commands"
+import { basicSetup } from "@codemirror/basic-setup"
+import { javascript } from "@codemirror/lang-javascript"
+import { onBeforeUnmount } from "@vue/runtime-dom"
 import { Completer } from "./completion"
+import { LinterDefinition } from "./linting/linter"
 
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
@@ -213,3 +220,108 @@ export function useCodemirror(
     cursor,
   }
 }
+
+const getEditorLanguage = (mode: string) => {
+  if (mode === "application/javascript") {
+    return javascript()
+  } else {
+    return StateField.define({
+      create() {
+        return null
+      },
+      update() {},
+    })
+  }
+}
+
+export function useNewCodemirror(
+  el: Ref<any | null>,
+  value: Ref<string>,
+  options: CodeMirrorOptions
+): { cursor: Ref<{ line: number; ch: number }> } {
+  const language = new Compartment()
+
+  const cursor = ref({
+    line: 0,
+    ch: 0,
+  })
+  const cachedValue = ref(value.value)
+
+  const state = EditorState.create({
+    doc: value.value,
+    extensions: [
+      basicSetup,
+      ViewPlugin.fromClass(
+        class {
+          update(update: ViewUpdate) {
+            if (update.selectionSet) {
+              const cursorPos = update.state.selection.main.head
+
+              const line = update.state.doc.lineAt(cursorPos)
+
+              cursor.value = {
+                line: line.number,
+                ch: cursorPos - line.from + 1,
+              }
+            }
+
+            if (update.docChanged) {
+              // Expensive on big files ?
+              cachedValue.value = update.state.doc
+                .toJSON()
+                .join(update.state.lineBreak)
+              value.value = cachedValue.value
+            }
+          }
+        }
+      ),
+      language.of(
+        getEditorLanguage((options.extendedEditorConfig.mode as any) ?? "")
+      ),
+      keymap.of(defaultKeymap),
+    ],
+  })
+
+  const view = ref<EditorView>()
+
+  onMounted(() => {
+    view.value = new EditorView({
+      state,
+      parent: el.value,
+    })
+  })
+
+  onBeforeUnmount(() => {
+    if (view.value) view.value.destroy()
+  })
+
+  watch(el, (newEl) => {
+    if (view.value) {
+      view.value.destroy()
+      view.value = undefined
+    }
+
+    if (newEl) {
+      view.value = new EditorView({
+        state,
+        parent: newEl,
+      })
+    }
+  })
+
+  watch(value, (newVal) => {
+    if (cachedValue.value !== newVal) {
+      state.update({
+        changes: {
+          from: 0,
+          to: state.doc.length,
+          insert: newVal,
+        },
+      })
+    }
+  })
+
+  return {
+    cursor,
+  }
+}
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index c71e00839..a408c0911 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -34,6 +34,14 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
+    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/lang-javascript": "^0.19.2",
+    "@codemirror/language": "^0.19.3",
+    "@codemirror/state": "^0.19.3",
+    "@codemirror/text": "^0.19.5",
+    "@codemirror/view": "^0.19.12",
     "@hoppscotch/js-sandbox": "workspace:^1.0.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.29.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0fc2a4c0a..93511d933 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,14 @@ importers:
       '@apollo/client': ^3.4.16
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
+      '@codemirror/basic-setup': ^0.19.0
+      '@codemirror/commands': ^0.19.5
+      '@codemirror/gutter': ^0.19.4
+      '@codemirror/lang-javascript': ^0.19.2
+      '@codemirror/language': ^0.19.3
+      '@codemirror/state': ^0.19.3
+      '@codemirror/text': ^0.19.5
+      '@codemirror/view': ^0.19.12
       '@graphql-codegen/add': ^3.1.0
       '@graphql-codegen/cli': 2.2.2
       '@graphql-codegen/typed-document-node': ^2.2.0
@@ -125,6 +133,14 @@ importers:
       yargs-parser: ^20.2.9
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
+      '@codemirror/basic-setup': 0.19.0
+      '@codemirror/commands': 0.19.5
+      '@codemirror/gutter': 0.19.4
+      '@codemirror/lang-javascript': 0.19.2
+      '@codemirror/language': 0.19.3
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
       '@hoppscotch/js-sandbox': link:../hoppscotch-js-sandbox
       '@nuxtjs/axios': 5.13.6
       '@nuxtjs/composition-api': 0.29.3_nuxt@2.15.8
@@ -1693,6 +1709,202 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
+  /@codemirror/autocomplete/0.19.4:
+    resolution: {integrity: sha512-Wuuf4xZ9opIpUwMvxFMknC1C202qtTx1q5bS1GuMnTK4lBYoG+tekpAqlLBF3x6fEe2+fw6dRLwYTigtCuS7pQ==}
+    dependencies:
+      '@codemirror/language': 0.19.3
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/tooltip': 0.19.4
+      '@codemirror/view': 0.19.12
+      '@lezer/common': 0.15.7
+    dev: false
+
+  /@codemirror/basic-setup/0.19.0:
+    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
+    dependencies:
+      '@codemirror/autocomplete': 0.19.4
+      '@codemirror/closebrackets': 0.19.0
+      '@codemirror/commands': 0.19.5
+      '@codemirror/comment': 0.19.0
+      '@codemirror/fold': 0.19.1
+      '@codemirror/gutter': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/history': 0.19.0
+      '@codemirror/language': 0.19.3
+      '@codemirror/lint': 0.19.2
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/rectangular-selection': 0.19.1
+      '@codemirror/search': 0.19.2
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/closebrackets/0.19.0:
+    resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
+    dependencies:
+      '@codemirror/language': 0.19.3
+      '@codemirror/rangeset': 0.19.1
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/commands/0.19.5:
+    resolution: {integrity: sha512-8PZOtx7d/GbKhFYA88zs2wINDtaUgj3pEjLYScKTd/Vsyw8qOp86tJQQNnMFTRZj/ISQl9Lbg3aAmHvroMqspw==}
+    dependencies:
+      '@codemirror/language': 0.19.3
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
+      '@lezer/common': 0.15.7
+    dev: false
+
+  /@codemirror/comment/0.19.0:
+    resolution: {integrity: sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/fold/0.19.1:
+    resolution: {integrity: sha512-3GwQpxgv03urb8BPBvX1JSjl+uMXKqngRG6qHZXSM2FefxFKvTuyL44MCb35aodtfKjGwoxizk+7b6CbAOLyOw==}
+    dependencies:
+      '@codemirror/gutter': 0.19.4
+      '@codemirror/language': 0.19.3
+      '@codemirror/rangeset': 0.19.1
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/gutter/0.19.4:
+    resolution: {integrity: sha512-zcDtGafuzLs9mvSBqHVuLNbS4UpHBo1+DRY6NtZfC31bV8abDxOPgokq2+6UsVPQp+RA1LgmPHatp4gOYSM+cA==}
+    dependencies:
+      '@codemirror/rangeset': 0.19.1
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/highlight/0.19.6:
+    resolution: {integrity: sha512-+eibu6on9quY8uN3xJ/n3rH+YIDLlpX7YulVmFvqAIz/ukRQ5tWaBmB7fMixHmnmRIRBRZgB8rNtonuMwZSAHQ==}
+    dependencies:
+      '@codemirror/language': 0.19.3
+      '@codemirror/rangeset': 0.19.1
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+      '@lezer/common': 0.15.7
+      style-mod: 4.0.0
+    dev: false
+
+  /@codemirror/history/0.19.0:
+    resolution: {integrity: sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/lang-javascript/0.19.2:
+    resolution: {integrity: sha512-qNFjCSTWOTZ/KusoVx3CxjmNS37DrhVoVO9E1IkrIMVC3tkk8Hs2eA6HNMxT4VGp5O+0yBmf1DE2o5QQSMs0jg==}
+    dependencies:
+      '@codemirror/autocomplete': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/language': 0.19.3
+      '@codemirror/lint': 0.19.2
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+      '@lezer/javascript': 0.15.0
+    dev: false
+
+  /@codemirror/language/0.19.3:
+    resolution: {integrity: sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
+      '@lezer/common': 0.15.7
+      '@lezer/lr': 0.15.4
+    dev: false
+
+  /@codemirror/lint/0.19.2:
+    resolution: {integrity: sha512-477qvXWwuf24YsBi1DzjrGyzM+qfPe5L4xEHGxQTGOMq6R0+QAFKppOJsxN3y7gzDpLrZSYZdhJzWevOuliZQg==}
+    dependencies:
+      '@codemirror/panel': 0.19.0
+      '@codemirror/state': 0.19.3
+      '@codemirror/tooltip': 0.19.4
+      '@codemirror/view': 0.19.12
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/matchbrackets/0.19.3:
+    resolution: {integrity: sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==}
+    dependencies:
+      '@codemirror/language': 0.19.3
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+      '@lezer/common': 0.15.7
+    dev: false
+
+  /@codemirror/panel/0.19.0:
+    resolution: {integrity: sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/rangeset/0.19.1:
+    resolution: {integrity: sha512-WaKTEw8JB/3QFlQzpdgRoklopcWvG8O/Xp+rxxOfFKYTaeaejpY/tjpyBBg+Ea65Ka3m7+pPp9d5j/oR2rd9NA==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+    dev: false
+
+  /@codemirror/rectangular-selection/0.19.1:
+    resolution: {integrity: sha512-9ElnqOg3mpZIWe0prPRd1SZ48Q9QB3bR8Aocq8UtjboJSUG8ABhRrbuTZMW/rMqpBPSjVpCe9xkCCkEQMYQVmw==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/search/0.19.2:
+    resolution: {integrity: sha512-TrRxUxyJ/a7HXtUvMZhgkOUbKE1xO33UhXjn1XACEHKWhgovw1vEeEEti9dZejN8/QOOFJed39InUxmp7oQ8HA==}
+    dependencies:
+      '@codemirror/panel': 0.19.0
+      '@codemirror/rangeset': 0.19.1
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      '@codemirror/view': 0.19.12
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/state/0.19.3:
+    resolution: {integrity: sha512-mMCOQWB4Kua/XPYRsY95IwX+uDcoD+n4G0FTDi0jNJHYoyWTkPpHjT6zt6mfl4kpqwqBJ8/WQBuztvpstblvvQ==}
+    dependencies:
+      '@codemirror/text': 0.19.5
+    dev: false
+
+  /@codemirror/text/0.19.5:
+    resolution: {integrity: sha512-Syu5Xc7tZzeUAM/y4fETkT0zgGr48rDG+w4U38bPwSIUr+L9S/7w2wDE1WGNzjaZPz12F6gb1gxWiSTg9ocLow==}
+    dev: false
+
+  /@codemirror/tooltip/0.19.4:
+    resolution: {integrity: sha512-DTv6SOzjw8LbHdTd2FszpIkQCUKRl0dqh1pWqawR31Lu/ZCz1nOiOY1sxkiEZVXMTFg44V0Uff0YlY6mTVK2DQ==}
+    dependencies:
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
+  /@codemirror/view/0.19.12:
+    resolution: {integrity: sha512-nvgqUaIGaRfCwpa/BI83SsOOenEoxBp6PlXBdw+jSfxgYGAYIdB3kuPzExPixZemvu7+ZoJRO2iEjCKigLIOaA==}
+    dependencies:
+      '@codemirror/rangeset': 0.19.1
+      '@codemirror/state': 0.19.3
+      '@codemirror/text': 0.19.5
+      style-mod: 4.0.0
+      w3c-keyname: 2.2.4
+    dev: false
+
   /@commitlint/cli/14.1.0:
     resolution: {integrity: sha512-Orq62jkl9qAGvjFqhehtAqjGY/duJ8hIRPPIHmGR2jIB96D4VTmazS3ZvqJz2Q9kKr61mLAk/171zm0FVzQCYA==}
     engines: {node: '>=v12'}
@@ -3468,6 +3680,22 @@ packages:
     resolution: {integrity: sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==}
     dev: false
 
+  /@lezer/common/0.15.7:
+    resolution: {integrity: sha512-Rw8TDJnBzZnkyzIXs1Tmmd241FrBLJBj8gkdy3y0joGFb8Z4I/joKEsR+gv1pb13o1TMsZxm3fmP+d/wPt2CTQ==}
+    dev: false
+
+  /@lezer/javascript/0.15.0:
+    resolution: {integrity: sha512-euFjbbyYmxpBls9FyBAKnGLEjaMFqfHvhfueA7M1PitZdieHu8KSblutmcwjpWKIV4eH4uElMZO2cPVe0aFxXA==}
+    dependencies:
+      '@lezer/lr': 0.15.4
+    dev: false
+
+  /@lezer/lr/0.15.4:
+    resolution: {integrity: sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==}
+    dependencies:
+      '@lezer/common': 0.15.7
+    dev: false
+
   /@microsoft/fetch-event-source/2.0.1:
     resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
     dev: false
@@ -3668,8 +3896,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27267095.2166661:
-    resolution: {integrity: sha512-o4qijroMtFMBDWHWEyKkZXUuqy6RfWK/OCn1vEuT0xaEh1frVJl6kbBVOYrnKr6Od1yk2bHD24huCp8nF7cGEw==}
+  /@nuxt/kit-edge/3.0.0-27267163.9b8d44d:
+    resolution: {integrity: sha512-Skw7Es5w+tCDX0K0oB/aX6OzyZ8zEFq3aUasv5rGjQlztAv/BtvBHEK1kprP2nR7xiXKMpyUphMOy3qFtHamfg==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -7974,6 +8202,10 @@ packages:
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: false
+
   /cross-fetch/3.0.6:
     resolution: {integrity: sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==}
     dependencies:
@@ -13788,7 +14020,7 @@ packages:
   /nuxt-windicss/2.0.11:
     resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267095.2166661
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267163.9b8d44d
       defu: 5.0.0
       h3: 0.3.3
       listhen: 0.2.5
@@ -16800,6 +17032,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /style-mod/4.0.0:
+    resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
+    dev: false
+
   /style-resources-loader/1.4.1_webpack@4.46.0:
     resolution: {integrity: sha512-UaAoQXq20relw6B633z4QZDxDyW7gevTt1e0y3MZtzdZfnvB90UL658czAgNc609Y7Kn5ErdthK9bSVhnykBUA==}
     engines: {node: '>=8.9'}
@@ -18436,6 +18672,10 @@ packages:
       browser-process-hrtime: 1.0.0
     dev: true
 
+  /w3c-keyname/2.2.4:
+    resolution: {integrity: sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==}
+    dev: false
+
   /w3c-xmlserializer/2.0.0:
     resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
     engines: {node: '>=10'}

From 7c65da4cf32c9a1109978a0f96e2b028d08d44dc Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 6 Nov 2021 15:12:35 +0530
Subject: [PATCH 02/23] feat: cm 6 json mode + readonly + cursor update

---
 .../lenses/renderers/JSONLensRenderer.vue     |  2 +-
 .../helpers/editor/codemirror.ts              | 64 +++++++++++++++++--
 packages/hoppscotch-app/package.json          |  1 +
 pnpm-lock.yaml                                | 22 ++++++-
 4 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index db00a34f2..5551fa66a 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -145,7 +145,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
-import { useCodemirror } from "~/helpers/editor/codemirror"
+import { useNewCodemirror as useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import "codemirror/mode/javascript/javascript"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 4a13ad69b..e4d5d2235 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -27,12 +27,20 @@ import "codemirror/addon/selection/active-line"
 
 import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 
-import { EditorState, Compartment, StateField } from "@codemirror/state"
+import {
+  EditorState,
+  Compartment,
+  StateField,
+  EditorSelection,
+  TransactionSpec,
+} from "@codemirror/state"
 import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view"
 import { defaultKeymap } from "@codemirror/commands"
 import { basicSetup } from "@codemirror/basic-setup"
 import { javascript } from "@codemirror/lang-javascript"
+import { json } from "@codemirror/lang-json"
 import { onBeforeUnmount } from "@vue/runtime-dom"
+import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 
@@ -222,7 +230,9 @@ export function useCodemirror(
 }
 
 const getEditorLanguage = (mode: string) => {
-  if (mode === "application/javascript") {
+  if (isJSONContentType(mode)) {
+    return json()
+  } else if (mode === "application/javascript") {
     return javascript()
   } else {
     return StateField.define({
@@ -241,6 +251,10 @@ export function useNewCodemirror(
 ): { cursor: Ref<{ line: number; ch: number }> } {
   const language = new Compartment()
 
+  const cachedCursor = ref({
+    line: 0,
+    ch: 0,
+  })
   const cursor = ref({
     line: 0,
     ch: 0,
@@ -259,14 +273,19 @@ export function useNewCodemirror(
 
               const line = update.state.doc.lineAt(cursorPos)
 
+              cachedCursor.value = {
+                line: line.number - 1,
+                ch: cursorPos - line.from,
+              }
+
               cursor.value = {
-                line: line.number,
-                ch: cursorPos - line.from + 1,
+                line: cachedCursor.value.line,
+                ch: cachedCursor.value.ch,
               }
             }
-
             if (update.docChanged) {
               // Expensive on big files ?
+              console.log("doc change")
               cachedValue.value = update.state.doc
                 .toJSON()
                 .join(update.state.lineBreak)
@@ -275,6 +294,7 @@ export function useNewCodemirror(
           }
         }
       ),
+      EditorState.changeFilter.of(() => !options.extendedEditorConfig.readOnly),
       language.of(
         getEditorLanguage((options.extendedEditorConfig.mode as any) ?? "")
       ),
@@ -284,6 +304,9 @@ export function useNewCodemirror(
 
   const view = ref<EditorView>()
 
+  const dispatch = (t: TransactionSpec) =>
+    view.value ? view.value.dispatch(t) : state.update(t)
+
   onMounted(() => {
     view.value = new EditorView({
       state,
@@ -295,6 +318,35 @@ export function useNewCodemirror(
     if (view.value) view.value.destroy()
   })
 
+  watch(cursor, (newPos) => {
+    if (
+      cachedCursor.value.line !== newPos.line ||
+      cachedCursor.value.ch !== newPos.ch
+    ) {
+      const line = state.doc.line(newPos.line + 1)
+      const selUpdate = EditorSelection.cursor(line.from + newPos.ch - 1)
+
+      view.value?.focus()
+
+      dispatch({
+        scrollIntoView: true,
+        selection: selUpdate,
+        effects: EditorView.scrollTo.of(selUpdate),
+      })
+    }
+  })
+
+  watch(
+    () => options.extendedEditorConfig.mode,
+    (newMode) => {
+      dispatch({
+        effects: language.reconfigure(
+          getEditorLanguage((newMode as any) ?? "")
+        ),
+      })
+    }
+  )
+
   watch(el, (newEl) => {
     if (view.value) {
       view.value.destroy()
@@ -311,7 +363,7 @@ export function useNewCodemirror(
 
   watch(value, (newVal) => {
     if (cachedValue.value !== newVal) {
-      state.update({
+      dispatch({
         changes: {
           from: 0,
           to: state.doc.length,
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index a408c0911..e2e10af32 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -38,6 +38,7 @@
     "@codemirror/commands": "^0.19.5",
     "@codemirror/gutter": "^0.19.4",
     "@codemirror/lang-javascript": "^0.19.2",
+    "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93511d933..47ca7b22c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,7 @@ importers:
       '@codemirror/commands': ^0.19.5
       '@codemirror/gutter': ^0.19.4
       '@codemirror/lang-javascript': ^0.19.2
+      '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.3
       '@codemirror/state': ^0.19.3
       '@codemirror/text': ^0.19.5
@@ -137,6 +138,7 @@ importers:
       '@codemirror/commands': 0.19.5
       '@codemirror/gutter': 0.19.4
       '@codemirror/lang-javascript': 0.19.2
+      '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.3
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
@@ -1817,6 +1819,14 @@ packages:
       '@lezer/javascript': 0.15.0
     dev: false
 
+  /@codemirror/lang-json/0.19.1:
+    resolution: {integrity: sha512-66K5TT9HO0ODtpjY+3Ub6t3r0OB1d27P+Kl5oygk4tDavHUBpsyHTJRFw/CdeRM2VwjbpBfctGm/cTrSthFDZg==}
+    dependencies:
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/language': 0.19.3
+      '@lezer/json': 0.15.0
+    dev: false
+
   /@codemirror/language/0.19.3:
     resolution: {integrity: sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==}
     dependencies:
@@ -3690,6 +3700,12 @@ packages:
       '@lezer/lr': 0.15.4
     dev: false
 
+  /@lezer/json/0.15.0:
+    resolution: {integrity: sha512-OsMjjBkTkeQ15iMCu5U1OiBubRC4V9Wm03zdIlUgNZ20aUPx5DWDRqUc5wG41JXVSj7Lxmo+idlFCfBBdxB8sw==}
+    dependencies:
+      '@lezer/lr': 0.15.4
+    dev: false
+
   /@lezer/lr/0.15.4:
     resolution: {integrity: sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==}
     dependencies:
@@ -3896,8 +3912,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27267163.9b8d44d:
-    resolution: {integrity: sha512-Skw7Es5w+tCDX0K0oB/aX6OzyZ8zEFq3aUasv5rGjQlztAv/BtvBHEK1kprP2nR7xiXKMpyUphMOy3qFtHamfg==}
+  /@nuxt/kit-edge/3.0.0-27267816.6bd7186:
+    resolution: {integrity: sha512-OCinQR1TBeZmgU61of/YM55JvY+3emO6D4BwfTNYe8KwqIpynYcrZJxlxAYRYZKzqfZhtqLnD1B8DJ1f2b6thQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -14020,7 +14036,7 @@ packages:
   /nuxt-windicss/2.0.11:
     resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267163.9b8d44d
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267816.6bd7186
       defu: 5.0.0
       h3: 0.3.3
       listhen: 0.2.5

From fe7192ae61e07130bc6329af449329824d1e2d07 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 8 Nov 2021 14:32:17 +0530
Subject: [PATCH 03/23] feat: add line wrapping

---
 .../hoppscotch-app/helpers/editor/codemirror.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index e4d5d2235..403add752 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -250,6 +250,7 @@ export function useNewCodemirror(
   options: CodeMirrorOptions
 ): { cursor: Ref<{ line: number; ch: number }> } {
   const language = new Compartment()
+  const lineWrapping = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -298,6 +299,11 @@ export function useNewCodemirror(
       language.of(
         getEditorLanguage((options.extendedEditorConfig.mode as any) ?? "")
       ),
+      lineWrapping.of(
+        options.extendedEditorConfig.lineWrapping
+          ? [EditorView.lineWrapping]
+          : []
+      ),
       keymap.of(defaultKeymap),
     ],
   })
@@ -336,6 +342,17 @@ export function useNewCodemirror(
     }
   })
 
+  watch(
+    () => options.extendedEditorConfig.lineWrapping,
+    (newMode) => {
+      dispatch({
+        effects: lineWrapping.reconfigure(
+          newMode ? [EditorView.lineWrapping] : []
+        ),
+      })
+    }
+  )
+
   watch(
     () => options.extendedEditorConfig.mode,
     (newMode) => {

From 8f166b8b3ffe6f92cc5d1c0f3e70bf89a136e61b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 8 Nov 2021 15:21:09 +0530
Subject: [PATCH 04/23] feat: add linting cm6

---
 .../helpers/editor/codemirror.ts              | 83 ++++++++++++++-----
 packages/hoppscotch-app/package.json          |  1 +
 pnpm-lock.yaml                                | 14 ++--
 3 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 403add752..0ae6fb63d 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -30,16 +30,20 @@ import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 import {
   EditorState,
   Compartment,
-  StateField,
   EditorSelection,
   TransactionSpec,
+  Extension,
 } from "@codemirror/state"
 import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view"
 import { defaultKeymap } from "@codemirror/commands"
 import { basicSetup } from "@codemirror/basic-setup"
-import { javascript } from "@codemirror/lang-javascript"
-import { json } from "@codemirror/lang-json"
+import { javascriptLanguage } from "@codemirror/lang-javascript"
+import { Language, LanguageSupport } from "@codemirror/language"
+import { linter } from "@codemirror/lint"
+import { jsonLanguage } from "@codemirror/lang-json"
 import { onBeforeUnmount } from "@vue/runtime-dom"
+import { pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
@@ -229,21 +233,56 @@ export function useCodemirror(
   }
 }
 
-const getEditorLanguage = (mode: string) => {
-  if (isJSONContentType(mode)) {
-    return json()
-  } else if (mode === "application/javascript") {
-    return javascript()
-  } else {
-    return StateField.define({
-      create() {
-        return null
-      },
-      update() {},
+const hoppLinterExt = (hoppLinter: LinterDefinition): Extension => {
+  return linter(async (view) => {
+    // Requires full document scan, hence expensive on big files, force disable on big files ?
+    const linterResult = await hoppLinter(
+      view.state.doc.toJSON().join(view.state.lineBreak)
+    )
+
+    return linterResult.map((result) => {
+      const startPos =
+        view.state.doc.line(result.from.line + 1).from + result.from.ch
+      const endPos = view.state.doc.line(result.to.line + 1).from + result.to.ch
+
+      return {
+        from: startPos,
+        to: endPos,
+        message: result.message,
+        severity: result.severity,
+      }
     })
-  }
+  })
 }
 
+const hoppLang = (
+  language: Language,
+  linter?: LinterDefinition | undefined
+) => {
+  return new LanguageSupport(language, linter ? [hoppLinterExt(linter)] : [])
+}
+
+const getLanguage = (langMime: string): Language | null => {
+  if (isJSONContentType(langMime)) {
+    return jsonLanguage
+  } else if (langMime === "application/javascript") {
+    return javascriptLanguage
+  }
+
+  // None matched, so return null
+  return null
+}
+
+const getEditorLanguage = (
+  langMime: string,
+  linter: LinterDefinition | undefined
+): Extension =>
+  pipe(
+    O.fromNullable(getLanguage(langMime)),
+    O.map((lang) => hoppLang(lang, linter)),
+    O.getOrElseW(() => [])
+  )
+
 export function useNewCodemirror(
   el: Ref<any | null>,
   value: Ref<string>,
@@ -297,7 +336,10 @@ export function useNewCodemirror(
       ),
       EditorState.changeFilter.of(() => !options.extendedEditorConfig.readOnly),
       language.of(
-        getEditorLanguage((options.extendedEditorConfig.mode as any) ?? "")
+        getEditorLanguage(
+          (options.extendedEditorConfig.mode as any) ?? "",
+          options.linter ?? undefined
+        )
       ),
       lineWrapping.of(
         options.extendedEditorConfig.lineWrapping
@@ -354,11 +396,14 @@ export function useNewCodemirror(
   )
 
   watch(
-    () => options.extendedEditorConfig.mode,
-    (newMode) => {
+    () => [options.extendedEditorConfig.mode, options.linter],
+    () => {
       dispatch({
         effects: language.reconfigure(
-          getEditorLanguage((newMode as any) ?? "")
+          getEditorLanguage(
+            (options.extendedEditorConfig.mode as any) ?? "",
+            options.linter ?? undefined
+          )
         ),
       })
     }
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index e2e10af32..43f53fec1 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -40,6 +40,7 @@
     "@codemirror/lang-javascript": "^0.19.2",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
+    "@codemirror/lint": "^0.19.2",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47ca7b22c..b98b58718 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,7 @@ importers:
       '@codemirror/lang-javascript': ^0.19.2
       '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.3
+      '@codemirror/lint': ^0.19.2
       '@codemirror/state': ^0.19.3
       '@codemirror/text': ^0.19.5
       '@codemirror/view': ^0.19.12
@@ -140,6 +141,7 @@ importers:
       '@codemirror/lang-javascript': 0.19.2
       '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.3
+      '@codemirror/lint': 0.19.2
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/view': 0.19.12
@@ -3912,8 +3914,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27267816.6bd7186:
-    resolution: {integrity: sha512-OCinQR1TBeZmgU61of/YM55JvY+3emO6D4BwfTNYe8KwqIpynYcrZJxlxAYRYZKzqfZhtqLnD1B8DJ1f2b6thQ==}
+  /@nuxt/kit-edge/3.0.0-27268729.5b8e10f:
+    resolution: {integrity: sha512-m7bzSe8NRuR7ZcZqKwBQfOb1y3AlmGIiNMibZVO4r0ggIfT4fmkzVwfdZm+oWNhOYlZET7Kyk08rSjwShENukQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -3934,7 +3936,7 @@ packages:
       std-env: 3.0.0
       ufo: 0.7.9
       unctx: 1.0.2
-      untyped: 0.2.11
+      untyped: 0.2.12
     dev: true
 
   /@nuxt/loading-screen/2.0.4:
@@ -14036,7 +14038,7 @@ packages:
   /nuxt-windicss/2.0.11:
     resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267816.6bd7186
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27268729.5b8e10f
       defu: 5.0.0
       h3: 0.3.3
       listhen: 0.2.5
@@ -18167,8 +18169,8 @@ packages:
       has-value: 0.3.1
       isobject: 3.0.1
 
-  /untyped/0.2.11:
-    resolution: {integrity: sha512-KVNcu9jB+mlnQJiunAzmqpnnn9R+yniT+AkOk9ZgCIsThwh0nlP6wO+O7mJjHM7Y2yplEu3v6NNtRvb82+uGxw==}
+  /untyped/0.2.12:
+    resolution: {integrity: sha512-mdMpwUHnJUQDpEmuByMuLxYdrPVlA98a1/b8MgoFoasR5tJTfsNbhAPfceAgFqMd/E05427T7MXgJGqdtDF/bQ==}
     dev: true
 
   /upath/1.2.0:

From 564cce24627439c4566b0d04f769dd63825ff88a Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 8 Nov 2021 16:33:36 +0530
Subject: [PATCH 05/23] feat: autocomplete cm6

---
 .../helpers/editor/codemirror.ts              | 56 ++++++++++++++++---
 packages/hoppscotch-app/package.json          |  1 +
 pnpm-lock.yaml                                |  2 +
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 0ae6fb63d..c5d8a5d07 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -41,6 +41,7 @@ import { javascriptLanguage } from "@codemirror/lang-javascript"
 import { Language, LanguageSupport } from "@codemirror/language"
 import { linter } from "@codemirror/lint"
 import { jsonLanguage } from "@codemirror/lang-json"
+import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { onBeforeUnmount } from "@vue/runtime-dom"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
@@ -233,6 +234,34 @@ export function useCodemirror(
   }
 }
 
+const hoppCompleterExt = (completer: Completer): Extension => {
+  return autocompletion({
+    override: [
+      async (context) => {
+        // Expensive operation! Disable on bigger files ?
+        const text = context.state.doc.toJSON().join(context.state.lineBreak)
+
+        const line = context.state.doc.lineAt(context.pos).from
+        const ch = context.pos - line
+
+        const result = await completer(text, { line, ch })
+
+        // Use more completion features ?
+        const completions =
+          result?.completions.map<Completion>((comp) => ({
+            label: comp.text,
+            detail: comp.meta,
+          })) ?? []
+
+        return {
+          from: context.state.wordAt(context.pos)?.from ?? context.pos,
+          options: completions,
+        }
+      },
+    ],
+  })
+}
+
 const hoppLinterExt = (hoppLinter: LinterDefinition): Extension => {
   return linter(async (view) => {
     // Requires full document scan, hence expensive on big files, force disable on big files ?
@@ -257,9 +286,15 @@ const hoppLinterExt = (hoppLinter: LinterDefinition): Extension => {
 
 const hoppLang = (
   language: Language,
-  linter?: LinterDefinition | undefined
+  linter?: LinterDefinition | undefined,
+  completer?: Completer | undefined
 ) => {
-  return new LanguageSupport(language, linter ? [hoppLinterExt(linter)] : [])
+  const exts: Extension[] = []
+
+  if (linter) exts.push(hoppLinterExt(linter))
+  if (completer) exts.push(hoppCompleterExt(completer))
+
+  return new LanguageSupport(language, exts)
 }
 
 const getLanguage = (langMime: string): Language | null => {
@@ -275,11 +310,12 @@ const getLanguage = (langMime: string): Language | null => {
 
 const getEditorLanguage = (
   langMime: string,
-  linter: LinterDefinition | undefined
+  linter: LinterDefinition | undefined,
+  completer: Completer | undefined
 ): Extension =>
   pipe(
     O.fromNullable(getLanguage(langMime)),
-    O.map((lang) => hoppLang(lang, linter)),
+    O.map((lang) => hoppLang(lang, linter, completer)),
     O.getOrElseW(() => [])
   )
 
@@ -338,7 +374,8 @@ export function useNewCodemirror(
       language.of(
         getEditorLanguage(
           (options.extendedEditorConfig.mode as any) ?? "",
-          options.linter ?? undefined
+          options.linter ?? undefined,
+          options.completer ?? undefined
         )
       ),
       lineWrapping.of(
@@ -396,13 +433,18 @@ export function useNewCodemirror(
   )
 
   watch(
-    () => [options.extendedEditorConfig.mode, options.linter],
+    () => [
+      options.extendedEditorConfig.mode,
+      options.linter,
+      options.completer,
+    ],
     () => {
       dispatch({
         effects: language.reconfigure(
           getEditorLanguage(
             (options.extendedEditorConfig.mode as any) ?? "",
-            options.linter ?? undefined
+            options.linter ?? undefined,
+            options.completer ?? undefined
           )
         ),
       })
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 43f53fec1..5fb794e4b 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
+    "@codemirror/autocomplete": "^0.19.4",
     "@codemirror/basic-setup": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
     "@codemirror/gutter": "^0.19.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b98b58718..a00e0c481 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ importers:
       '@apollo/client': ^3.4.16
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
+      '@codemirror/autocomplete': ^0.19.4
       '@codemirror/basic-setup': ^0.19.0
       '@codemirror/commands': ^0.19.5
       '@codemirror/gutter': ^0.19.4
@@ -135,6 +136,7 @@ importers:
       yargs-parser: ^20.2.9
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
+      '@codemirror/autocomplete': 0.19.4
       '@codemirror/basic-setup': 0.19.0
       '@codemirror/commands': 0.19.5
       '@codemirror/gutter': 0.19.4

From be6c802745457ff3ab5be59109dfac34251c06b5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 8 Nov 2021 17:42:34 +0530
Subject: [PATCH 06/23] feat: init base theme for codemirror

---
 .../helpers/editor/codemirror.ts              |  2 ++
 .../helpers/editor/themes/baseTheme.ts        | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index c5d8a5d07..491db2ca6 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -48,6 +48,7 @@ import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
+import baseTheme from "./themes/baseTheme"
 
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
@@ -341,6 +342,7 @@ export function useNewCodemirror(
     doc: value.value,
     extensions: [
       basicSetup,
+      baseTheme,
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
new file mode 100644
index 000000000..190cf8d77
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -0,0 +1,22 @@
+import { EditorView } from "@codemirror/view"
+
+const baseTheme = EditorView.theme({
+  "&": {
+    fontSize: "var(--body-font-size)",
+  },
+  ".cm-content": {
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+  },
+  ".cm-gutters": {
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+    borderColor: "var(--divider-light-color)",
+  },
+  ".cm-lineNumbers": {
+    minWidth: "3em",
+    color: "var(--secondary-light-color)",
+  },
+})
+
+export default baseTheme

From 9b297ba882205d144be801fefe35837218fd3c83 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 9 Nov 2021 14:35:20 +0530
Subject: [PATCH 07/23] feat: implement reactive theming

---
 .../helpers/editor/codemirror.ts              | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 491db2ca6..62500d358 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -49,6 +49,7 @@ import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import baseTheme from "./themes/baseTheme"
+import { HoppBgColor } from "~/newstore/settings"
 
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
@@ -320,13 +321,24 @@ const getEditorLanguage = (
     O.getOrElseW(() => [])
   )
 
+const getThemeExt = (mode: HoppBgColor) => {
+  // TODO: Implement more themes here
+  switch (mode) {
+    default:
+      return baseTheme
+  }
+}
+
 export function useNewCodemirror(
   el: Ref<any | null>,
   value: Ref<string>,
   options: CodeMirrorOptions
 ): { cursor: Ref<{ line: number; ch: number }> } {
+  const { $colorMode } = useContext() as any
+
   const language = new Compartment()
   const lineWrapping = new Compartment()
+  const theming = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -342,7 +354,7 @@ export function useNewCodemirror(
     doc: value.value,
     extensions: [
       basicSetup,
-      baseTheme,
+      theming.of(getThemeExt($colorMode.value)),
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
@@ -453,6 +465,15 @@ export function useNewCodemirror(
     }
   )
 
+  watch(
+    () => $colorMode.value,
+    (newVal) => {
+      dispatch({
+        effects: theming.reconfigure(getThemeExt(newVal)),
+      })
+    }
+  )
+
   watch(el, (newEl) => {
     if (view.value) {
       view.value.destroy()

From 13bd831c5fe6c9545b4d8aafb7167def6bbda0f0 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 9 Nov 2021 18:43:29 +0530
Subject: [PATCH 08/23] refactor: init codemirror theming support

---
 .../helpers/editor/codemirror.ts              | 101 +++++++++++--
 .../helpers/editor/themes/baseTheme.ts        |  25 +---
 .../helpers/editor/themes/blackTheme.ts       | 122 +++++++++++++++
 .../helpers/editor/themes/darkTheme.ts        | 122 +++++++++++++++
 .../helpers/editor/themes/lightTheme.ts       | 140 ++++++++++++++++++
 packages/hoppscotch-app/package.json          |   9 +-
 pnpm-lock.yaml                                |  50 +++----
 7 files changed, 508 insertions(+), 61 deletions(-)
 create mode 100644 packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
 create mode 100644 packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
 create mode 100644 packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 62500d358..a5d90417b 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -25,30 +25,54 @@ import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
 import "codemirror/addon/selection/active-line"
 
-import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
-
 import {
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+} from "@codemirror/view"
+import {
+  Extension,
   EditorState,
   Compartment,
   EditorSelection,
   TransactionSpec,
-  Extension,
 } from "@codemirror/state"
-import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import { history, historyKeymap } from "@codemirror/history"
+import { foldKeymap } from "@codemirror/fold"
+import { indentOnInput, Language, LanguageSupport } from "@codemirror/language"
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
 import { defaultKeymap } from "@codemirror/commands"
-import { basicSetup } from "@codemirror/basic-setup"
+import { bracketMatching } from "@codemirror/matchbrackets"
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import {
+  completionKeymap,
+  Completion,
+  autocompletion,
+} from "@codemirror/autocomplete"
+import { commentKeymap } from "@codemirror/comment"
+import { rectangularSelection } from "@codemirror/rectangular-selection"
+import { defaultHighlightStyle } from "@codemirror/highlight"
+import { lintKeymap, linter } from "@codemirror/lint"
+
+import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
+
 import { javascriptLanguage } from "@codemirror/lang-javascript"
-import { Language, LanguageSupport } from "@codemirror/language"
-import { linter } from "@codemirror/lint"
 import { jsonLanguage } from "@codemirror/lang-json"
-import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { onBeforeUnmount } from "@vue/runtime-dom"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import baseTheme from "./themes/baseTheme"
+import { baseThemeFoldStyle } from "./themes/baseTheme"
+import { darkTheme, darkHighlightStyle } from "./themes/darkTheme"
+import { lightTheme, lightHighlightStyle } from "./themes/lightTheme"
+import { blackTheme, blackHighlightStyle } from "./themes/blackTheme"
 import { HoppBgColor } from "~/newstore/settings"
 
 type CodeMirrorOptions = {
@@ -236,6 +260,34 @@ export function useCodemirror(
   }
 }
 
+export const basicSetup: Extension = [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  baseThemeFoldStyle,
+  drawSelection(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  defaultHighlightStyle.fallback,
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...commentKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+]
+
 const hoppCompleterExt = (completer: Completer): Extension => {
   return autocompletion({
     override: [
@@ -321,11 +373,29 @@ const getEditorLanguage = (
     O.getOrElseW(() => [])
   )
 
-const getThemeExt = (mode: HoppBgColor) => {
-  // TODO: Implement more themes here
+const getHightlightMode = (mode: HoppBgColor): Extension => {
   switch (mode) {
+    case "light":
+      return lightHighlightStyle
+    case "dark":
+      return darkHighlightStyle
+    case "black":
+      return blackHighlightStyle
     default:
-      return baseTheme
+      return darkHighlightStyle
+  }
+}
+
+const getThemeExt = (mode: HoppBgColor): Extension => {
+  switch (mode) {
+    case "dark":
+      return darkTheme
+    case "black":
+      return blackTheme
+    case "light":
+      return lightTheme
+    case "system":
+      return darkTheme
   }
 }
 
@@ -339,6 +409,7 @@ export function useNewCodemirror(
   const language = new Compartment()
   const lineWrapping = new Compartment()
   const theming = new Compartment()
+  const highlightStyle = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -355,6 +426,7 @@ export function useNewCodemirror(
     extensions: [
       basicSetup,
       theming.of(getThemeExt($colorMode.value)),
+      highlightStyle.of(getHightlightMode($colorMode.value)),
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
@@ -469,7 +541,10 @@ export function useNewCodemirror(
     () => $colorMode.value,
     (newVal) => {
       dispatch({
-        effects: theming.reconfigure(getThemeExt(newVal)),
+        effects: [
+          theming.reconfigure(getThemeExt(newVal)),
+          highlightStyle.reconfigure(getHightlightMode(newVal)),
+        ],
       })
     }
   )
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 190cf8d77..c758492d4 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -1,22 +1,9 @@
-import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { foldGutter } from "@codemirror/fold"
 
-const baseTheme = EditorView.theme({
-  "&": {
-    fontSize: "var(--body-font-size)",
-  },
-  ".cm-content": {
-    fontFamily: "var(--font-mono)",
-    backgroundColor: "var(--primary-color)",
-  },
-  ".cm-gutters": {
-    fontFamily: "var(--font-mono)",
-    backgroundColor: "var(--primary-color)",
-    borderColor: "var(--divider-light-color)",
-  },
-  ".cm-lineNumbers": {
-    minWidth: "3em",
-    color: "var(--secondary-light-color)",
-  },
+export const baseThemeFoldStyle = foldGutter({
+  openText: "▾",
+  closedText: "▸",
 })
 
-export default baseTheme
+export const baseTheme: Extension = [baseThemeFoldStyle]
diff --git a/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
new file mode 100644
index 000000000..52d921314
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
@@ -0,0 +1,122 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
+
+const chalky = "#e5c07b"
+const coral = "#e06c75"
+const cyan = "#56b6c2"
+const invalid = "#ffffff"
+const ivory = "#abb2bf"
+const stone = "#7d8799"
+const malibu = "#61afef"
+const sage = "#98c379"
+const whiskey = "#d19a66"
+const violet = "#c678dd"
+
+export const blackTheme = EditorView.theme(
+  {
+    "&": {
+      fontSize: "var(--body-font-size)",
+    },
+    ".cm-content": {
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+    ".cm-gutters": {
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--primary-dark-color)",
+    },
+  },
+  {
+    dark: true,
+  }
+)
+
+export const blackHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+export const blackMode: Extension = [blackTheme, blackHighlightStyle]
diff --git a/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
new file mode 100644
index 000000000..bd251c8d4
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
@@ -0,0 +1,122 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
+
+const chalky = "#e5c07b"
+const coral = "#e06c75"
+const cyan = "#56b6c2"
+const invalid = "#ffffff"
+const ivory = "#abb2bf"
+const stone = "#7d8799"
+const malibu = "#61afef"
+const sage = "#98c379"
+const whiskey = "#d19a66"
+const violet = "#c678dd"
+
+export const darkTheme = EditorView.theme(
+  {
+    "&": {
+      fontSize: "var(--body-font-size)",
+    },
+    ".cm-content": {
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+    ".cm-gutters": {
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--primary-dark-color)",
+    },
+  },
+  {
+    dark: true,
+  }
+)
+
+export const darkHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+export const darkMode: Extension = [darkTheme, darkHighlightStyle]
diff --git a/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
new file mode 100644
index 000000000..ab8a90f19
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
@@ -0,0 +1,140 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
+
+const chalky = "#e5c07b"
+const coral = "#e06c75"
+const cyan = "#56b6c2"
+const invalid = "#ffffff"
+const ivory = "#abb2bf"
+const stone = "#7d8799"
+const malibu = "#61afef"
+const sage = "#98c379"
+const whiskey = "#d19a66"
+const violet = "#c678dd"
+const darkBackground = "#21252b"
+const highlightBackground = "#2c313a"
+const background = "#282c34"
+const tooltipBackground = "#353a42"
+const selection = "#3E4451"
+const cursor = "#528bff"
+
+export const lightTheme = EditorView.theme(
+  {
+    "&": {
+      color: ivory,
+      backgroundColor: background,
+    },
+
+    ".cm-content": {
+      caretColor: cursor,
+    },
+
+    "&.cm-focused .cm-cursor": { borderLeftColor: cursor },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: selection },
+
+    ".cm-panels": { backgroundColor: darkBackground, color: ivory },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": {
+      backgroundColor: "#6199ff2f",
+    },
+
+    ".cm-activeLine": { backgroundColor: highlightBackground },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+
+    ".cm-gutters": {
+      backgroundColor: background,
+      color: stone,
+      border: "none",
+    },
+
+    ".cm-activeLineGutter": {
+      backgroundColor: highlightBackground,
+    },
+
+    ".cm-foldPlaceholder": {
+      backgroundColor: "transparent",
+      border: "none",
+      color: "#ddd",
+    },
+
+    ".cm-tooltip": {
+      border: "none",
+      backgroundColor: tooltipBackground,
+    },
+    ".cm-tooltip .cm-tooltip-arrow:before": {
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent",
+    },
+    ".cm-tooltip .cm-tooltip-arrow:after": {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    ".cm-tooltip-autocomplete": {
+      "& > ul > li[aria-selected]": {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true }
+)
+
+export const lightHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+export const lightMode: Extension = [lightHighlightStyle, lightHighlightStyle]
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 5fb794e4b..aa9742b04 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -35,13 +35,20 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@codemirror/autocomplete": "^0.19.4",
-    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/closebrackets": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/fold": "^0.19.1",
     "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/history": "^0.19.0",
     "@codemirror/lang-javascript": "^0.19.2",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
     "@codemirror/lint": "^0.19.2",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a00e0c481..29b3728a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,13 +21,20 @@ importers:
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
       '@codemirror/autocomplete': ^0.19.4
-      '@codemirror/basic-setup': ^0.19.0
+      '@codemirror/closebrackets': ^0.19.0
       '@codemirror/commands': ^0.19.5
+      '@codemirror/comment': ^0.19.0
+      '@codemirror/fold': ^0.19.1
       '@codemirror/gutter': ^0.19.4
+      '@codemirror/highlight': ^0.19.6
+      '@codemirror/history': ^0.19.0
       '@codemirror/lang-javascript': ^0.19.2
       '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.3
       '@codemirror/lint': ^0.19.2
+      '@codemirror/matchbrackets': ^0.19.3
+      '@codemirror/rectangular-selection': ^0.19.1
+      '@codemirror/search': ^0.19.2
       '@codemirror/state': ^0.19.3
       '@codemirror/text': ^0.19.5
       '@codemirror/view': ^0.19.12
@@ -137,13 +144,20 @@ importers:
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
       '@codemirror/autocomplete': 0.19.4
-      '@codemirror/basic-setup': 0.19.0
+      '@codemirror/closebrackets': 0.19.0
       '@codemirror/commands': 0.19.5
+      '@codemirror/comment': 0.19.0
+      '@codemirror/fold': 0.19.1
       '@codemirror/gutter': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/history': 0.19.0
       '@codemirror/lang-javascript': 0.19.2
       '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.3
       '@codemirror/lint': 0.19.2
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/rectangular-selection': 0.19.1
+      '@codemirror/search': 0.19.2
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/view': 0.19.12
@@ -1726,26 +1740,6 @@ packages:
       '@lezer/common': 0.15.7
     dev: false
 
-  /@codemirror/basic-setup/0.19.0:
-    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
-    dependencies:
-      '@codemirror/autocomplete': 0.19.4
-      '@codemirror/closebrackets': 0.19.0
-      '@codemirror/commands': 0.19.5
-      '@codemirror/comment': 0.19.0
-      '@codemirror/fold': 0.19.1
-      '@codemirror/gutter': 0.19.4
-      '@codemirror/highlight': 0.19.6
-      '@codemirror/history': 0.19.0
-      '@codemirror/language': 0.19.3
-      '@codemirror/lint': 0.19.2
-      '@codemirror/matchbrackets': 0.19.3
-      '@codemirror/rectangular-selection': 0.19.1
-      '@codemirror/search': 0.19.2
-      '@codemirror/state': 0.19.3
-      '@codemirror/view': 0.19.12
-    dev: false
-
   /@codemirror/closebrackets/0.19.0:
     resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
     dependencies:
@@ -3916,8 +3910,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27268729.5b8e10f:
-    resolution: {integrity: sha512-m7bzSe8NRuR7ZcZqKwBQfOb1y3AlmGIiNMibZVO4r0ggIfT4fmkzVwfdZm+oWNhOYlZET7Kyk08rSjwShENukQ==}
+  /@nuxt/kit-edge/3.0.0-27274229.29599f0:
+    resolution: {integrity: sha512-8GyQaBXQh6RelLe5ahXBTZWugaBYKd3cESc+GqxoHlFVy0i2HqZkUggFShDEoT7FCckzfGHTZF5uV04k87D73w==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -3935,7 +3929,7 @@ packages:
       rc9: 1.2.0
       scule: 0.2.1
       semver: 7.3.5
-      std-env: 3.0.0
+      std-env: 3.0.1
       ufo: 0.7.9
       unctx: 1.0.2
       untyped: 0.2.12
@@ -14040,7 +14034,7 @@ packages:
   /nuxt-windicss/2.0.11:
     resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27268729.5b8e10f
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27274229.29599f0
       defu: 5.0.0
       h3: 0.3.3
       listhen: 0.2.5
@@ -16867,8 +16861,8 @@ packages:
       ci-info: 3.2.0
     dev: false
 
-  /std-env/3.0.0:
-    resolution: {integrity: sha512-GoFEqAGzhaexp/T01rIiLOK9LHa6HmVwEUyeU4cwdSnOhfxpw9IMeAFi44SHWbCErEs29qEh7vAOUbtUmoycjA==}
+  /std-env/3.0.1:
+    resolution: {integrity: sha512-mC1Ps9l77/97qeOZc+HrOL7TIaOboHqMZ24dGVQrlxFcpPpfCHpH+qfUT7Dz+6mlG8+JPA1KfBQo19iC/+Ngcw==}
     dev: true
 
   /stream-browserify/2.0.2:

From d538d722d7dc5466c4e8cc2e6b48dc6b01a47648 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 9 Nov 2021 20:28:10 +0530
Subject: [PATCH 09/23] fix: light theme

---
 .../helpers/editor/themes/lightTheme.ts       | 86 +++++++------------
 1 file changed, 33 insertions(+), 53 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
index ab8a90f19..1cd45214c 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
@@ -12,84 +12,64 @@ const malibu = "#61afef"
 const sage = "#98c379"
 const whiskey = "#d19a66"
 const violet = "#c678dd"
-const darkBackground = "#21252b"
-const highlightBackground = "#2c313a"
-const background = "#282c34"
-const tooltipBackground = "#353a42"
-const selection = "#3E4451"
-const cursor = "#528bff"
 
 export const lightTheme = EditorView.theme(
   {
     "&": {
-      color: ivory,
-      backgroundColor: background,
+      fontSize: "var(--body-font-size)",
     },
-
     ".cm-content": {
-      caretColor: cursor,
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
     },
-
-    "&.cm-focused .cm-cursor": { borderLeftColor: cursor },
     "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: selection },
-
-    ".cm-panels": { backgroundColor: darkBackground, color: ivory },
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
     ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
     ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
 
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
     ".cm-searchMatch": {
       backgroundColor: "#72a1ff59",
       outline: "1px solid #457dff",
     },
-    ".cm-searchMatch.cm-searchMatch-selected": {
-      backgroundColor: "#6199ff2f",
-    },
-
-    ".cm-activeLine": { backgroundColor: highlightBackground },
     ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
       backgroundColor: "#bad0f847",
       outline: "1px solid #515a6b",
     },
-
     ".cm-gutters": {
-      backgroundColor: background,
-      color: stone,
-      border: "none",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
     },
-
     ".cm-activeLineGutter": {
-      backgroundColor: highlightBackground,
-    },
-
-    ".cm-foldPlaceholder": {
-      backgroundColor: "transparent",
-      border: "none",
-      color: "#ddd",
-    },
-
-    ".cm-tooltip": {
-      border: "none",
-      backgroundColor: tooltipBackground,
-    },
-    ".cm-tooltip .cm-tooltip-arrow:before": {
-      borderTopColor: "transparent",
-      borderBottomColor: "transparent",
-    },
-    ".cm-tooltip .cm-tooltip-arrow:after": {
-      borderTopColor: tooltipBackground,
-      borderBottomColor: tooltipBackground,
-    },
-    ".cm-tooltip-autocomplete": {
-      "& > ul > li[aria-selected]": {
-        backgroundColor: highlightBackground,
-        color: ivory,
-      },
+      backgroundColor: "var(--primary-dark-color)",
     },
   },
-  { dark: true }
+  { dark: false }
 )
 
 export const lightHighlightStyle = HighlightStyle.define([

From 6b70a39f02a09b7377999c5b790111676a550b26 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 9 Nov 2021 22:05:39 +0530
Subject: [PATCH 10/23] feat: css variable on themes

---
 .../hoppscotch-app/assets/scss/themes.scss    |  46 ++++++
 .../helpers/editor/codemirror.ts              | 110 +-------------
 .../helpers/editor/themes/baseTheme.ts        | 137 +++++++++++++++++-
 .../helpers/editor/themes/blackTheme.ts       | 122 ----------------
 .../helpers/editor/themes/darkTheme.ts        | 122 ----------------
 .../helpers/editor/themes/lightTheme.ts       | 120 ---------------
 packages/hoppscotch-app/package.json          |   9 +-
 pnpm-lock.yaml                                |  38 +++--
 8 files changed, 210 insertions(+), 494 deletions(-)
 delete mode 100644 packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
 delete mode 100644 packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
 delete mode 100644 packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 4d240d691..b5262593f 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -52,6 +52,48 @@
   --editor-theme: "twilight";
 }
 
+@mixin dark-editor-theme {
+  --editor-type-color: theme("colors.gray.800");
+  --editor-name-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.gray.600");
+  --editor-invalid-color: theme("colors.red.500");
+  --editor-separator-color: theme("colors.gray.500");
+  --editor-meta-color: theme("colors.gray.500");
+  --editor-variable-color: theme("colors.gray.500");
+  --editor-link-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.blue.500");
+  --editor-keyword-color: theme("colors.blue.500");
+}
+
+@mixin light-editor-theme {
+  --editor-type-color: theme("colors.gray.800");
+  --editor-name-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.gray.600");
+  --editor-invalid-color: theme("colors.red.500");
+  --editor-separator-color: theme("colors.gray.500");
+  --editor-meta-color: theme("colors.gray.500");
+  --editor-variable-color: theme("colors.gray.500");
+  --editor-link-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.blue.500");
+  --editor-keyword-color: theme("colors.blue.500");
+}
+
+@mixin black-editor-theme {
+  --editor-type-color: theme("colors.gray.800");
+  --editor-name-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.gray.600");
+  --editor-invalid-color: theme("colors.red.500");
+  --editor-separator-color: theme("colors.gray.500");
+  --editor-meta-color: theme("colors.gray.500");
+  --editor-variable-color: theme("colors.gray.500");
+  --editor-link-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.blue.500");
+  --editor-keyword-color: theme("colors.blue.500");
+}
+
 @mixin green-theme {
   --accent-color: theme("colors.green.500");
   --accent-light-color: theme("colors.green.400");
@@ -146,18 +188,22 @@
   @include base-theme;
   @include dark-theme;
   @include green-theme;
+  @include dark-editor-theme;
 }
 
 :root.light {
   @include light-theme;
+  @include light-editor-theme;
 }
 
 :root.dark {
   @include dark-theme;
+  @include dark-editor-theme;
 }
 
 :root.black {
   @include black-theme;
+  @include black-editor-theme;
 }
 
 :root[data-accent="blue"] {
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index a5d90417b..62a755f76 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -25,15 +25,7 @@ import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
 import "codemirror/addon/selection/active-line"
 
-import {
-  keymap,
-  highlightSpecialChars,
-  drawSelection,
-  highlightActiveLine,
-  EditorView,
-  ViewPlugin,
-  ViewUpdate,
-} from "@codemirror/view"
+import { keymap, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
 import {
   Extension,
   EditorState,
@@ -41,23 +33,11 @@ import {
   EditorSelection,
   TransactionSpec,
 } from "@codemirror/state"
-import { history, historyKeymap } from "@codemirror/history"
-import { foldKeymap } from "@codemirror/fold"
-import { indentOnInput, Language, LanguageSupport } from "@codemirror/language"
-import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
+import { Language, LanguageSupport } from "@codemirror/language"
 import { defaultKeymap } from "@codemirror/commands"
-import { bracketMatching } from "@codemirror/matchbrackets"
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
-import {
-  completionKeymap,
-  Completion,
-  autocompletion,
-} from "@codemirror/autocomplete"
-import { commentKeymap } from "@codemirror/comment"
-import { rectangularSelection } from "@codemirror/rectangular-selection"
-import { defaultHighlightStyle } from "@codemirror/highlight"
-import { lintKeymap, linter } from "@codemirror/lint"
+import { basicSetup } from "@codemirror/basic-setup"
+import { Completion, autocompletion } from "@codemirror/autocomplete"
+import { linter } from "@codemirror/lint"
 
 import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 
@@ -69,11 +49,7 @@ import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import { baseThemeFoldStyle } from "./themes/baseTheme"
-import { darkTheme, darkHighlightStyle } from "./themes/darkTheme"
-import { lightTheme, lightHighlightStyle } from "./themes/lightTheme"
-import { blackTheme, blackHighlightStyle } from "./themes/blackTheme"
-import { HoppBgColor } from "~/newstore/settings"
+import { baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
@@ -260,34 +236,6 @@ export function useCodemirror(
   }
 }
 
-export const basicSetup: Extension = [
-  lineNumbers(),
-  highlightActiveLineGutter(),
-  highlightSpecialChars(),
-  history(),
-  baseThemeFoldStyle,
-  drawSelection(),
-  EditorState.allowMultipleSelections.of(true),
-  indentOnInput(),
-  defaultHighlightStyle.fallback,
-  bracketMatching(),
-  closeBrackets(),
-  autocompletion(),
-  rectangularSelection(),
-  highlightActiveLine(),
-  highlightSelectionMatches(),
-  keymap.of([
-    ...closeBracketsKeymap,
-    ...defaultKeymap,
-    ...searchKeymap,
-    ...historyKeymap,
-    ...foldKeymap,
-    ...commentKeymap,
-    ...completionKeymap,
-    ...lintKeymap,
-  ]),
-]
-
 const hoppCompleterExt = (completer: Completer): Extension => {
   return autocompletion({
     override: [
@@ -373,43 +321,13 @@ const getEditorLanguage = (
     O.getOrElseW(() => [])
   )
 
-const getHightlightMode = (mode: HoppBgColor): Extension => {
-  switch (mode) {
-    case "light":
-      return lightHighlightStyle
-    case "dark":
-      return darkHighlightStyle
-    case "black":
-      return blackHighlightStyle
-    default:
-      return darkHighlightStyle
-  }
-}
-
-const getThemeExt = (mode: HoppBgColor): Extension => {
-  switch (mode) {
-    case "dark":
-      return darkTheme
-    case "black":
-      return blackTheme
-    case "light":
-      return lightTheme
-    case "system":
-      return darkTheme
-  }
-}
-
 export function useNewCodemirror(
   el: Ref<any | null>,
   value: Ref<string>,
   options: CodeMirrorOptions
 ): { cursor: Ref<{ line: number; ch: number }> } {
-  const { $colorMode } = useContext() as any
-
   const language = new Compartment()
   const lineWrapping = new Compartment()
-  const theming = new Compartment()
-  const highlightStyle = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -425,8 +343,8 @@ export function useNewCodemirror(
     doc: value.value,
     extensions: [
       basicSetup,
-      theming.of(getThemeExt($colorMode.value)),
-      highlightStyle.of(getHightlightMode($colorMode.value)),
+      baseTheme,
+      baseHighlightStyle,
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
@@ -537,18 +455,6 @@ export function useNewCodemirror(
     }
   )
 
-  watch(
-    () => $colorMode.value,
-    (newVal) => {
-      dispatch({
-        effects: [
-          theming.reconfigure(getThemeExt(newVal)),
-          highlightStyle.reconfigure(getHightlightMode(newVal)),
-        ],
-      })
-    }
-  )
-
   watch(el, (newEl) => {
     if (view.value) {
       view.value.destroy()
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index c758492d4..e92bf0168 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -1,9 +1,138 @@
-import { Extension } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
 import { foldGutter } from "@codemirror/fold"
 
-export const baseThemeFoldStyle = foldGutter({
+export const baseTheme = EditorView.theme(
+  {
+    "&": {
+      fontSize: "var(--body-font-size)",
+    },
+    ".cm-content": {
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+    ".cm-searchMatch": {
+      backgroundColor: "var(--accent-light-color)",
+      outline: "1px solid var(--accent-dark-color)",
+    },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+    ".cm-gutters": {
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--primary-dark-color)",
+    },
+  },
+  {
+    dark: !!"var(--editor-dark-mode)",
+  }
+)
+
+const editorTypeColor = "var(--editor-type-color)"
+const editorNameColor = "var(--editor-name-color)"
+const editorOperatorColor = "var(--editor-operator-color)"
+const editorInvalidColor = "var(--editor-invalid-color)"
+const editorSeparatorColor = "var(--editor-separator-color)"
+const editorMetaColor = "var(--editor-meta-color)"
+const editorVariableColor = "var(--editor-variable-color)"
+const editorLinkColor = "var(--editor-link-color)"
+const editorProcessColor = "var(--editor-process-color)"
+const editorConstantColor = "var(--editor-constant-color)"
+const editorKeywordColor = "var(--editor-keyword-color)"
+
+export const baseHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: editorKeywordColor },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: editorNameColor,
+  },
+  {
+    tag: [t.function(t.variableName), t.labelName],
+    color: editorVariableColor,
+  },
+  {
+    tag: [t.color, t.constant(t.name), t.standard(t.name)],
+    color: editorConstantColor,
+  },
+  { tag: [t.definition(t.name), t.separator], color: editorSeparatorColor },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: editorTypeColor,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: editorOperatorColor,
+  },
+  { tag: [t.meta, t.comment], color: editorMetaColor },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: editorLinkColor, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: editorNameColor },
+  {
+    tag: [t.atom, t.bool, t.special(t.variableName)],
+    color: editorConstantColor,
+  },
+  {
+    tag: [t.processingInstruction, t.string, t.inserted],
+    color: editorProcessColor,
+  },
+  { tag: t.invalid, color: editorInvalidColor },
+])
+
+export const baseFoldStyle = foldGutter({
   openText: "▾",
   closedText: "▸",
 })
-
-export const baseTheme: Extension = [baseThemeFoldStyle]
diff --git a/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
deleted file mode 100644
index 52d921314..000000000
--- a/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-
-const chalky = "#e5c07b"
-const coral = "#e06c75"
-const cyan = "#56b6c2"
-const invalid = "#ffffff"
-const ivory = "#abb2bf"
-const stone = "#7d8799"
-const malibu = "#61afef"
-const sage = "#98c379"
-const whiskey = "#d19a66"
-const violet = "#c678dd"
-
-export const blackTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
-  },
-  {
-    dark: true,
-  }
-)
-
-export const blackHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.number,
-      t.changed,
-      t.annotation,
-      t.modifier,
-      t.self,
-      t.namespace,
-    ],
-    color: chalky,
-  },
-  {
-    tag: [
-      t.operator,
-      t.operatorKeyword,
-      t.url,
-      t.escape,
-      t.regexp,
-      t.link,
-      t.special(t.string),
-    ],
-    color: cyan,
-  },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: "bold" },
-  { tag: t.emphasis, fontStyle: "italic" },
-  { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.link, color: stone, textDecoration: "underline" },
-  { tag: t.heading, fontWeight: "bold", color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-])
-
-export const blackMode: Extension = [blackTheme, blackHighlightStyle]
diff --git a/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
deleted file mode 100644
index bd251c8d4..000000000
--- a/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-
-const chalky = "#e5c07b"
-const coral = "#e06c75"
-const cyan = "#56b6c2"
-const invalid = "#ffffff"
-const ivory = "#abb2bf"
-const stone = "#7d8799"
-const malibu = "#61afef"
-const sage = "#98c379"
-const whiskey = "#d19a66"
-const violet = "#c678dd"
-
-export const darkTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
-  },
-  {
-    dark: true,
-  }
-)
-
-export const darkHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.number,
-      t.changed,
-      t.annotation,
-      t.modifier,
-      t.self,
-      t.namespace,
-    ],
-    color: chalky,
-  },
-  {
-    tag: [
-      t.operator,
-      t.operatorKeyword,
-      t.url,
-      t.escape,
-      t.regexp,
-      t.link,
-      t.special(t.string),
-    ],
-    color: cyan,
-  },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: "bold" },
-  { tag: t.emphasis, fontStyle: "italic" },
-  { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.link, color: stone, textDecoration: "underline" },
-  { tag: t.heading, fontWeight: "bold", color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-])
-
-export const darkMode: Extension = [darkTheme, darkHighlightStyle]
diff --git a/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
deleted file mode 100644
index 1cd45214c..000000000
--- a/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-
-const chalky = "#e5c07b"
-const coral = "#e06c75"
-const cyan = "#56b6c2"
-const invalid = "#ffffff"
-const ivory = "#abb2bf"
-const stone = "#7d8799"
-const malibu = "#61afef"
-const sage = "#98c379"
-const whiskey = "#d19a66"
-const violet = "#c678dd"
-
-export const lightTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
-  },
-  { dark: false }
-)
-
-export const lightHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.number,
-      t.changed,
-      t.annotation,
-      t.modifier,
-      t.self,
-      t.namespace,
-    ],
-    color: chalky,
-  },
-  {
-    tag: [
-      t.operator,
-      t.operatorKeyword,
-      t.url,
-      t.escape,
-      t.regexp,
-      t.link,
-      t.special(t.string),
-    ],
-    color: cyan,
-  },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: "bold" },
-  { tag: t.emphasis, fontStyle: "italic" },
-  { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.link, color: stone, textDecoration: "underline" },
-  { tag: t.heading, fontWeight: "bold", color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-])
-
-export const lightMode: Extension = [lightHighlightStyle, lightHighlightStyle]
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index aa9742b04..5fb794e4b 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -35,20 +35,13 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@codemirror/autocomplete": "^0.19.4",
-    "@codemirror/closebrackets": "^0.19.0",
+    "@codemirror/basic-setup": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
-    "@codemirror/comment": "^0.19.0",
-    "@codemirror/fold": "^0.19.1",
     "@codemirror/gutter": "^0.19.4",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
     "@codemirror/lang-javascript": "^0.19.2",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
     "@codemirror/lint": "^0.19.2",
-    "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.2",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 29b3728a7..0b70e12bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,20 +21,13 @@ importers:
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
       '@codemirror/autocomplete': ^0.19.4
-      '@codemirror/closebrackets': ^0.19.0
+      '@codemirror/basic-setup': ^0.19.0
       '@codemirror/commands': ^0.19.5
-      '@codemirror/comment': ^0.19.0
-      '@codemirror/fold': ^0.19.1
       '@codemirror/gutter': ^0.19.4
-      '@codemirror/highlight': ^0.19.6
-      '@codemirror/history': ^0.19.0
       '@codemirror/lang-javascript': ^0.19.2
       '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.3
       '@codemirror/lint': ^0.19.2
-      '@codemirror/matchbrackets': ^0.19.3
-      '@codemirror/rectangular-selection': ^0.19.1
-      '@codemirror/search': ^0.19.2
       '@codemirror/state': ^0.19.3
       '@codemirror/text': ^0.19.5
       '@codemirror/view': ^0.19.12
@@ -144,20 +137,13 @@ importers:
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
       '@codemirror/autocomplete': 0.19.4
-      '@codemirror/closebrackets': 0.19.0
+      '@codemirror/basic-setup': 0.19.0
       '@codemirror/commands': 0.19.5
-      '@codemirror/comment': 0.19.0
-      '@codemirror/fold': 0.19.1
       '@codemirror/gutter': 0.19.4
-      '@codemirror/highlight': 0.19.6
-      '@codemirror/history': 0.19.0
       '@codemirror/lang-javascript': 0.19.2
       '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.3
       '@codemirror/lint': 0.19.2
-      '@codemirror/matchbrackets': 0.19.3
-      '@codemirror/rectangular-selection': 0.19.1
-      '@codemirror/search': 0.19.2
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/view': 0.19.12
@@ -1740,6 +1726,26 @@ packages:
       '@lezer/common': 0.15.7
     dev: false
 
+  /@codemirror/basic-setup/0.19.0:
+    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
+    dependencies:
+      '@codemirror/autocomplete': 0.19.4
+      '@codemirror/closebrackets': 0.19.0
+      '@codemirror/commands': 0.19.5
+      '@codemirror/comment': 0.19.0
+      '@codemirror/fold': 0.19.1
+      '@codemirror/gutter': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/history': 0.19.0
+      '@codemirror/language': 0.19.3
+      '@codemirror/lint': 0.19.2
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/rectangular-selection': 0.19.1
+      '@codemirror/search': 0.19.2
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
   /@codemirror/closebrackets/0.19.0:
     resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
     dependencies:

From 7de8e6be5ea366b1d4ee93f590df84547255511b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 9 Nov 2021 22:26:53 +0530
Subject: [PATCH 11/23] refactor: updated editot theme colors

---
 .../hoppscotch-app/assets/scss/themes.scss    |  10 +-
 .../helpers/editor/themes/baseTheme.ts        | 116 +++++++++---------
 2 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index b5262593f..9b12f5927 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -54,35 +54,35 @@
 
 @mixin dark-editor-theme {
   --editor-type-color: theme("colors.gray.800");
-  --editor-name-color: theme("colors.gray.600");
+  --editor-name-color: theme("colors.blue.500");
   --editor-operator-color: theme("colors.gray.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
   --editor-variable-color: theme("colors.gray.500");
   --editor-link-color: theme("colors.blue.500");
-  --editor-process-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.gray.400");
   --editor-constant-color: theme("colors.blue.500");
   --editor-keyword-color: theme("colors.blue.500");
 }
 
 @mixin light-editor-theme {
   --editor-type-color: theme("colors.gray.800");
-  --editor-name-color: theme("colors.gray.600");
+  --editor-name-color: theme("colors.red.600");
   --editor-operator-color: theme("colors.gray.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
   --editor-variable-color: theme("colors.gray.500");
   --editor-link-color: theme("colors.blue.500");
-  --editor-process-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.600");
   --editor-constant-color: theme("colors.blue.500");
   --editor-keyword-color: theme("colors.blue.500");
 }
 
 @mixin black-editor-theme {
   --editor-type-color: theme("colors.gray.800");
-  --editor-name-color: theme("colors.gray.600");
+  --editor-name-color: theme("colors.gray.400");
   --editor-operator-color: theme("colors.gray.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index e92bf0168..c1f5b15e2 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -2,66 +2,64 @@ import { EditorView } from "@codemirror/view"
 import { HighlightStyle, tags as t } from "@codemirror/highlight"
 import { foldGutter } from "@codemirror/fold"
 
-export const baseTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "var(--accent-light-color)",
-      outline: "1px solid var(--accent-dark-color)",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
+export const baseTheme = EditorView.theme({
+  "&": {
+    fontSize: "var(--body-font-size)",
   },
-  {
-    dark: !!"var(--editor-dark-mode)",
-  }
-)
+  ".cm-content": {
+    caretColor: "var(--secondary-light-color)",
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+  },
+  "&.cm-focused .cm-cursor": {
+    borderLeftColor: "var(--secondary-light-color)",
+  },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+    { backgroundColor: "var(--primary-light-color)" },
+  ".cm-panels": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-panels.cm-panels-top": {
+    borderBottom: "1px solid var(--divider-light-color)",
+  },
+  ".cm-panels.cm-panels-bottom": {
+    borderTop: "1px solid var(--divider-light-color)",
+  },
+  ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+  ".cm-searchMatch": {
+    backgroundColor: "var(--accent-light-color)",
+    outline: "1px solid var(--accent-dark-color)",
+  },
+  ".cm-selectionMatch": { backgroundColor: "var(--accent-color)" },
+  "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+    backgroundColor: "var(--accent-dark-color)",
+    outline: "1px solid var(--accent-dark-color)",
+  },
+  ".cm-gutters": {
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+    borderColor: "var(--divider-light-color)",
+  },
+  ".cm-lineNumbers": {
+    minWidth: "3em",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-foldGutter": {
+    minWidth: "2em",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-foldGutter .cm-gutterElement": {
+    textAlign: "center",
+  },
+  ".cm-line": {
+    paddingLeft: "0.5em",
+    paddingRight: "0.5em",
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "var(--primary-dark-color)",
+  },
+})
 
 const editorTypeColor = "var(--editor-type-color)"
 const editorNameColor = "var(--editor-name-color)"

From a9bca8e1f87bc8c8b01f502568637970de831853 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 10 Nov 2021 01:16:08 +0530
Subject: [PATCH 12/23] feat: initial graphql language definition

---
 packages/codemirror-lang-graphql/.gitignore   |   5 +
 packages/codemirror-lang-graphql/.npmignore   |   5 +
 packages/codemirror-lang-graphql/README.md    |   1 +
 packages/codemirror-lang-graphql/package.json |  32 ++
 .../codemirror-lang-graphql/rollup.config.js  |  12 +
 packages/codemirror-lang-graphql/src/index.ts |  35 ++
 .../src/syntax.grammar                        | 368 ++++++++++++++++++
 .../codemirror-lang-graphql/test/cases.txt    |   1 +
 packages/codemirror-lang-graphql/test/test.js |  17 +
 .../codemirror-lang-graphql/tsconfig.json     |  11 +
 .../components/graphql/RequestOptions.vue     |   2 +-
 .../helpers/editor/codemirror.ts              |   3 +
 packages/hoppscotch-app/package.json          |   1 +
 pnpm-lock.yaml                                | 284 +++++++++++++-
 14 files changed, 769 insertions(+), 8 deletions(-)
 create mode 100644 packages/codemirror-lang-graphql/.gitignore
 create mode 100644 packages/codemirror-lang-graphql/.npmignore
 create mode 100644 packages/codemirror-lang-graphql/README.md
 create mode 100644 packages/codemirror-lang-graphql/package.json
 create mode 100644 packages/codemirror-lang-graphql/rollup.config.js
 create mode 100644 packages/codemirror-lang-graphql/src/index.ts
 create mode 100644 packages/codemirror-lang-graphql/src/syntax.grammar
 create mode 100644 packages/codemirror-lang-graphql/test/cases.txt
 create mode 100644 packages/codemirror-lang-graphql/test/test.js
 create mode 100644 packages/codemirror-lang-graphql/tsconfig.json

diff --git a/packages/codemirror-lang-graphql/.gitignore b/packages/codemirror-lang-graphql/.gitignore
new file mode 100644
index 000000000..a97c46617
--- /dev/null
+++ b/packages/codemirror-lang-graphql/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+package-lock.json
+/dist
+/src/*.js
+/src/*.d.ts
diff --git a/packages/codemirror-lang-graphql/.npmignore b/packages/codemirror-lang-graphql/.npmignore
new file mode 100644
index 000000000..9bd97602d
--- /dev/null
+++ b/packages/codemirror-lang-graphql/.npmignore
@@ -0,0 +1,5 @@
+/src
+/test
+/node_modules
+rollup.config.js
+tsconfig.json
diff --git a/packages/codemirror-lang-graphql/README.md b/packages/codemirror-lang-graphql/README.md
new file mode 100644
index 000000000..613036ca4
--- /dev/null
+++ b/packages/codemirror-lang-graphql/README.md
@@ -0,0 +1 @@
+A [CodeMirror 6](https://codemirror.net/6) language plugin for GraphQL
\ No newline at end of file
diff --git a/packages/codemirror-lang-graphql/package.json b/packages/codemirror-lang-graphql/package.json
new file mode 100644
index 000000000..c147de81b
--- /dev/null
+++ b/packages/codemirror-lang-graphql/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@hoppscotch/codemirror-lang-graphql",
+  "version": "0.1.0",
+  "description": "GraphQL language support for CodeMirror",
+  "scripts": {
+    "test": "mocha test/test.js",
+    "prepare": "rollup -c"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@codemirror/highlight": "^0.19.0",
+    "@codemirror/language": "^0.19.0",
+    "@lezer/lr": "^0.15.0"
+  },
+  "devDependencies": {
+    "@lezer/generator": "^0.15.0",
+    "mocha": "^9.0.1",
+    "rollup": "^2.35.1",
+    "rollup-plugin-dts": "^3.0.2",
+    "rollup-plugin-ts": "^1.4.0",
+    "typescript": "^4.3.4"
+  },
+  "license": "MIT"
+}
diff --git a/packages/codemirror-lang-graphql/rollup.config.js b/packages/codemirror-lang-graphql/rollup.config.js
new file mode 100644
index 000000000..d8d87c181
--- /dev/null
+++ b/packages/codemirror-lang-graphql/rollup.config.js
@@ -0,0 +1,12 @@
+import typescript from "rollup-plugin-ts"
+import {lezer} from "@lezer/generator/rollup"
+
+export default {
+  input: "src/index.ts",
+  external: id => id != "tslib" && !/^(\.?\/|\w:)/.test(id),
+  output: [
+    {file: "dist/index.cjs", format: "cjs"},
+    {dir: "./dist", format: "es"}
+  ],
+  plugins: [lezer(), typescript()]
+}
diff --git a/packages/codemirror-lang-graphql/src/index.ts b/packages/codemirror-lang-graphql/src/index.ts
new file mode 100644
index 000000000..f889a9b67
--- /dev/null
+++ b/packages/codemirror-lang-graphql/src/index.ts
@@ -0,0 +1,35 @@
+import {parser} from "./syntax.grammar"
+import {LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent} from "@codemirror/language"
+import {styleTags, tags as t} from "@codemirror/highlight"
+
+export const GQLLanguage = LRLanguage.define({
+  parser: parser.configure({
+    props: [
+      indentNodeProp.add({
+        Application: delimitedIndent({closing: ")", align: false})
+      }),
+      foldNodeProp.add({
+        Application: foldInside
+      }),
+      styleTags({
+        Name: t.propertyName,
+        OperationType: t.keyword,
+        BooleanValue: t.bool,
+        StringValue: t.string,
+        IntValue: t.number,
+        FloatValue: t.number,
+        NullValue: t.null,
+        ObjectValue: t.brace,
+        Comment: t.lineComment,
+      })
+    ]
+  }),
+  languageData: {
+    commentTokens: { line: "#" },
+    closeBrackets: { brackets: ["(", "[", "{", '"', '"""'] }
+  }
+})
+
+export function GQL() {
+  return new LanguageSupport(GQLLanguage)
+}
diff --git a/packages/codemirror-lang-graphql/src/syntax.grammar b/packages/codemirror-lang-graphql/src/syntax.grammar
new file mode 100644
index 000000000..42f25a51a
--- /dev/null
+++ b/packages/codemirror-lang-graphql/src/syntax.grammar
@@ -0,0 +1,368 @@
+@top SourceFile {
+  Document
+}
+
+@precedence {
+  fieldDef @right,
+  typeDef @right
+}
+
+Document {
+  Definition+
+}
+
+Definition {
+  ExecutableDefinition |
+  TypeSystemDefinition |
+  TypeSystemExtension
+}
+
+ExecutableDefinition {
+  OperationDefinition |
+  FragmentDefinition
+}
+
+TypeSystemDefinition {
+  SchemaDefinition |
+  TypeDefinition |
+  DirectiveDefinition
+}
+
+TypeSystemExtension {
+  SchemaExtension |
+  TypeExtension
+}
+
+SchemaDefinition {
+  Description? @specialize<Name, "schema"> Directives? "{" RootOperationTypeDefinition+ "}"
+}
+
+SchemaExtension {
+  @specialize<Name, "extend"> @specialize<Name, "schema"> Directives? "{" RootOperationTypeDefinition "}"
+}
+
+TypeExtension {
+  ScalarTypeExtension |
+  ObjectTypeExtension |
+  InterfaceTypeExtension |
+  UnionTypeExtension |
+  EnumTypeExtension |
+  InputObjectTypeExtension
+}
+
+ScalarTypeExtension {
+  @specialize<Name, "extend"> @specialize<Name, "scalar"> Name Directives
+}
+
+ObjectTypeExtension /* precedence: right 0 */ {
+  @specialize<Name, "extend"> @specialize<Name, "type"> Name ImplementsInterfaces? Directives? !typeDef FieldsDefinition |
+  @specialize<Name, "extend"> @specialize<Name, "type"> Name ImplementsInterfaces? Directives?
+}
+
+InterfaceTypeExtension /* precedence: right 0 */ {
+  @specialize<Name, "extend"> @specialize<Name, "interface"> Name ImplementsInterfaces? Directives? FieldsDefinition |
+  @specialize<Name, "extend"> @specialize<Name, "interface"> Name ImplementsInterfaces? Directives?
+}
+
+UnionTypeExtension /* precedence: right 0 */ {
+  @specialize<Name, "extend"> @specialize<Name, "union"> Name Directives? UnionMemberTypes |
+  @specialize<Name, "extend"> @specialize<Name, "union"> Name Directives?
+}
+
+EnumTypeExtension /* precedence: right 0 */ {
+  @specialize<Name, "extend"> @specialize<Name, "enum"> Name Directives? !typeDef EnumValuesDefinition |
+  @specialize<Name, "extend"> @specialize<Name, "enum"> Name Directives?
+}
+
+InputObjectTypeExtension /* precedence: right 0 */ {
+  @specialize<Name, "extend"> @specialize<Name, "input"> Name Directives? InputFieldsDefinition+ |
+  @specialize<Name, "extend"> @specialize<Name, "input"> Name Directives?
+}
+
+InputFieldsDefinition {
+  !fieldDef "{" InputValueDefinition+ "}"
+}
+
+EnumValuesDefinition {
+  !fieldDef "{" EnumValueDefinition+ "}"
+}
+
+EnumValueDefinition {
+  Description? EnumValue Directives?
+}
+
+ImplementsInterfaces {
+  ImplementsInterfaces "&" NamedType |
+  @specialize<Name, "implements"> "&"? NamedType
+}
+
+FieldsDefinition {
+  !fieldDef "{" FieldDefinition+ "}"
+}
+
+FieldDefinition {
+  Description? Name ArgumentsDefinition? ":" Type Directives?
+}
+
+ArgumentsDefinition {
+  "(" InputValueDefinition+ ")"
+}
+
+InputValueDefinition {
+  Description? Name ":" Type DefaultValue? Directives?
+}
+
+DefaultValue {
+  "=" Value
+}
+
+UnionMemberTypes {
+  UnionMemberTypes "|" NamedType |
+  "=" "|"? NamedType
+}
+
+RootOperationTypeDefinition {
+  OperationType ":" NamedType
+}
+
+OperationDefinition {
+  SelectionSet |
+  OperationType Name? VariableDefinitions? Directives? SelectionSet
+}
+
+TypeDefinition {
+  ScalarTypeDefinition |
+  ObjectTypeDefinition |
+  InterfaceTypeDefinition |
+  UnionTypeDefinition |
+  EnumTypeDefinition |
+  InputObjectTypeDefinition
+}
+
+ScalarTypeDefinition /* precedence: right 0 */ {
+  Description? @specialize<Name, "scalar"> Name Directives?
+}
+
+ObjectTypeDefinition /* precedence: right 0 */ {
+  Description? @specialize<Name, "type"> Name ImplementsInterfaces? Directives? FieldsDefinition?
+}
+
+InterfaceTypeDefinition /* precedence: right 0 */ {
+  Description? @specialize<Name, "interface"> Name ImplementsInterfaces? Directives? FieldsDefinition?
+}
+
+UnionTypeDefinition /* precedence: right 0 */ {
+  Description? @specialize<Name, "union"> Name Directives? UnionMemberTypes?
+}
+
+EnumTypeDefinition /* precedence: right 0 */ {
+  Description? @specialize<Name, "enum"> Name Directives? !typeDef EnumValuesDefinition?
+}
+
+InputObjectTypeDefinition /* precedence: right 0 */ {
+  Description? @specialize<Name, "input"> Name Directives? !typeDef InputFieldsDefinition?
+}
+
+VariableDefinitions {
+  "(" VariableDefinition+ ")"
+}
+
+VariableDefinition {
+  Variable ":" Type DefaultValue? Directives? Comma?
+}
+
+SelectionSet {
+  "{" Selection+ "}"
+}
+
+Selection {
+  Field |
+  InlineFragment |
+  FragmentSpread
+}
+
+Field {
+  Alias? Name Arguments? Directive? SelectionSet?
+}
+
+Alias {
+  Name ":"
+}
+
+Arguments {
+  "(" Argument+ ")"
+}
+
+Argument {
+  Name ":" Value
+}
+
+Value {
+  Variable |
+  StringValue |
+  IntValue |
+  FloatValue |
+  BooleanValue |
+  NullValue |
+  EnumValue |
+  ListValue |
+  ObjectValue
+}
+
+Variable {
+  "$" Name
+}
+
+EnumValue {
+  Name
+}
+
+ListValue {
+  "[" Value* "]"
+}
+
+ObjectValue {
+  "{" ObjectField* "}"
+}
+
+ObjectField {
+  Name ":" Value Comma?
+}
+
+FragmentSpread {
+  "..." FragmentName Directives?
+}
+
+FragmentDefinition {
+  @specialize<Name, "fragment"> FragmentName TypeCondition Directives? SelectionSet
+}
+
+FragmentName {
+  Name
+}
+
+InlineFragment {
+  "..." TypeCondition? Directives? SelectionSet
+}
+
+TypeCondition {
+  @specialize<Name, "on"> NamedType
+}
+
+Directives {
+  Directive+
+}
+
+Directive {
+  "@" Name Arguments?
+}
+
+DirectiveDefinition /* precedence: right 1 */ {
+  Description? @specialize<Name, "directive"> "@" Name ArgumentsDefinition? @specialize<Name, "repeatable"> ? @specialize<Name, "on"> DirectiveLocations
+}
+
+DirectiveLocations {
+  DirectiveLocations "|" DirectiveLocation |
+  "|"? DirectiveLocation
+}
+
+DirectiveLocation {
+  ExecutableDirectiveLocation |
+  TypeSystemDirectiveLocation
+}
+
+Type {
+  NamedType |
+  ListType |
+  NonNullType
+}
+
+NamedType {
+  Name
+}
+
+ListType {
+  "[" Type "]"
+}
+
+NonNullType {
+  NamedType "!" |
+  ListType "!"
+}
+
+Description {
+  StringValue
+}
+
+OperationType {
+  @specialize<Name, "query"> 
+  | @specialize<Name, "mutation"> 
+  | @specialize<Name, "subscription">
+}
+
+BooleanValue {
+  @specialize<Name, "true">
+  | @specialize<Name, "false">
+}
+
+NullValue {
+  @specialize<Name, "null">
+}
+
+ExecutableDirectiveLocation {
+  @specialize<Name, "QUERY">
+  | @specialize<Name, "MUTATION">
+  | @specialize<Name, "SUBSCRIPTION">
+  | @specialize<Name, "FIELD"> 
+  | @specialize<Name, "FRAGMENT_DEFINITION">
+  | @specialize<Name, "FRAGMENT_SPREAD">
+  | @specialize<Name, "INLINE_FRAGMENT">
+  | @specialize<Name, "VARIABLE_DEFINITION">
+}
+
+TypeSystemDirectiveLocation {
+  @specialize<Name, "SCHEMA">
+  | @specialize<Name, "SCALAR">
+  | @specialize<Name, "OBJECT">
+  | @specialize<Name, "FIELD_DEFINITION">
+  | @specialize<Name, "ARGUMENT_DEFINITION">
+  | @specialize<Name, "INTERFACE">
+  | @specialize<Name, "UNION">
+  | @specialize<Name, "ENUM">
+  | @specialize<Name, "ENUM_VALUE">
+  | @specialize<Name, "INPUT_OBJECT">
+  | @specialize<Name, "INPUT_FIELD_DEFINITION">
+}
+
+@skip { Whitespace | Comment }
+
+@tokens {
+  Whitespace {
+    std.whitespace
+  }
+  StringValue {
+    "\"\"\"" (!["] | "\\n" | "\"" "\""? !["])* "\"\"\"" | "\"" !["\\\n]* "\""
+  }
+  IntValue {
+    "-"? "0"
+    | "-"? std.digit+
+  }
+
+  FloatValue {
+    IntValue ("." std.digit+ | ("e" | "E") IntValue+) 
+  }
+
+  @precedence { IntValue, FloatValue }
+
+  Name {
+    $[_A-Za-z] $[_0-9A-Za-z]*
+  }
+  Comment {
+    "#" ![\n]*
+  }
+  Comma {
+    ","
+  }
+}
+
+@detectDelim
\ No newline at end of file
diff --git a/packages/codemirror-lang-graphql/test/cases.txt b/packages/codemirror-lang-graphql/test/cases.txt
new file mode 100644
index 000000000..0cc3621e7
--- /dev/null
+++ b/packages/codemirror-lang-graphql/test/cases.txt
@@ -0,0 +1 @@
+# TODO: Write Lezer Tests
\ No newline at end of file
diff --git a/packages/codemirror-lang-graphql/test/test.js b/packages/codemirror-lang-graphql/test/test.js
new file mode 100644
index 000000000..5011a420b
--- /dev/null
+++ b/packages/codemirror-lang-graphql/test/test.js
@@ -0,0 +1,17 @@
+import {GQLLanguage} from "../dist/index.js"
+import {fileTests} from "lezer-generator/dist/test"
+
+import * as fs from "fs"
+import * as path from "path"
+import { fileURLToPath } from 'url';
+let caseDir = path.dirname(fileURLToPath(import.meta.url))
+
+for (let file of fs.readdirSync(caseDir)) {
+  if (!/\.txt$/.test(file)) continue
+
+  let name = /^[^\.]*/.exec(file)[0]
+  describe(name, () => {
+    for (let {name, run} of fileTests(fs.readFileSync(path.join(caseDir, file), "utf8"), file))
+      it(name, () => run(GQLLanguage.parser))
+  })
+}
diff --git a/packages/codemirror-lang-graphql/tsconfig.json b/packages/codemirror-lang-graphql/tsconfig.json
new file mode 100644
index 000000000..d87615219
--- /dev/null
+++ b/packages/codemirror-lang-graphql/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es6",
+    "module": "es2020",
+    "newLine": "lf",
+    "declaration": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/*.ts"]
+}
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 782a6158b..77c751e38 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -307,7 +307,7 @@ import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
 import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
-import { useCodemirror } from "~/helpers/editor/codemirror"
+import { useNewCodemirror as useCodemirror } from "~/helpers/editor/codemirror"
 import "codemirror/mode/javascript/javascript"
 import "~/helpers/editor/modes/graphql"
 import jsonLinter from "~/helpers/editor/linting/json"
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 62a755f76..ac59e6ea0 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -43,6 +43,7 @@ import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 
 import { javascriptLanguage } from "@codemirror/lang-javascript"
 import { jsonLanguage } from "@codemirror/lang-json"
+import { GQLLanguage } from "@hoppscotch/codemirror-lang-graphql"
 import { onBeforeUnmount } from "@vue/runtime-dom"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
@@ -304,6 +305,8 @@ const getLanguage = (langMime: string): Language | null => {
     return jsonLanguage
   } else if (langMime === "application/javascript") {
     return javascriptLanguage
+  } else if (langMime === "graphql") {
+    return GQLLanguage
   }
 
   // None matched, so return null
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 5fb794e4b..30a2df3c3 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -45,6 +45,7 @@
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",
+    "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
     "@hoppscotch/js-sandbox": "workspace:^1.0.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.29.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b70e12bf..8a1450980 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,29 @@ importers:
       '@commitlint/cli': 14.1.0
       '@commitlint/config-conventional': 14.1.0
 
+  packages/codemirror-lang-graphql:
+    specifiers:
+      '@codemirror/highlight': ^0.19.0
+      '@codemirror/language': ^0.19.0
+      '@lezer/generator': ^0.15.0
+      '@lezer/lr': ^0.15.0
+      mocha: ^9.0.1
+      rollup: ^2.35.1
+      rollup-plugin-dts: ^3.0.2
+      rollup-plugin-ts: ^1.4.0
+      typescript: ^4.3.4
+    dependencies:
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/language': 0.19.3
+      '@lezer/lr': 0.15.4
+    devDependencies:
+      '@lezer/generator': 0.15.2
+      mocha: 9.1.3
+      rollup: 2.59.0
+      rollup-plugin-dts: 3.0.2_rollup@2.59.0+typescript@4.4.4
+      rollup-plugin-ts: 1.4.7_rollup@2.59.0+typescript@4.4.4
+      typescript: 4.4.4
+
   packages/hoppscotch-app:
     specifiers:
       '@apollo/client': ^3.4.16
@@ -39,6 +62,7 @@ importers:
       '@graphql-codegen/typescript-urql-graphcache': ^2.2.0
       '@graphql-codegen/urql-introspection': ^2.1.0
       '@graphql-typed-document-node/core': ^3.1.0
+      '@hoppscotch/codemirror-lang-graphql': workspace:^0.1.0
       '@hoppscotch/js-sandbox': workspace:^1.0.0
       '@nuxt/types': ^2.15.8
       '@nuxt/typescript-build': ^2.1.0
@@ -147,6 +171,7 @@ importers:
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/view': 0.19.12
+      '@hoppscotch/codemirror-lang-graphql': link:../codemirror-lang-graphql
       '@hoppscotch/js-sandbox': link:../hoppscotch-js-sandbox
       '@nuxtjs/axios': 5.13.6
       '@nuxtjs/composition-api': 0.29.3_nuxt@2.15.8
@@ -1446,7 +1471,6 @@ packages:
       semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@babel/plugin-transform-shorthand-properties/7.16.0_@babel+core@7.16.0:
     resolution: {integrity: sha512-iVb1mTcD8fuhSv3k99+5tlXu5N0v8/DPm2mO3WACLG6al1CGZH7v09HJyUb1TtYl/Z+KrM6pHSIJdZxP5A+xow==}
@@ -3696,7 +3720,14 @@ packages:
 
   /@lezer/common/0.15.7:
     resolution: {integrity: sha512-Rw8TDJnBzZnkyzIXs1Tmmd241FrBLJBj8gkdy3y0joGFb8Z4I/joKEsR+gv1pb13o1TMsZxm3fmP+d/wPt2CTQ==}
-    dev: false
+
+  /@lezer/generator/0.15.2:
+    resolution: {integrity: sha512-nxY6TTj0ZAcAvg1zEeaZnt1xODdyPhD0lTaPOgcGOVFHhwwx0Oz7CxZB7Rh+xRCXFr5kJWDtM1uXPp80UZjhAg==}
+    hasBin: true
+    dependencies:
+      '@lezer/common': 0.15.7
+      '@lezer/lr': 0.15.4
+    dev: true
 
   /@lezer/javascript/0.15.0:
     resolution: {integrity: sha512-euFjbbyYmxpBls9FyBAKnGLEjaMFqfHvhfueA7M1PitZdieHu8KSblutmcwjpWKIV4eH4uElMZO2cPVe0aFxXA==}
@@ -3714,7 +3745,10 @@ packages:
     resolution: {integrity: sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==}
     dependencies:
       '@lezer/common': 0.15.7
-    dev: false
+
+  /@mdn/browser-compat-data/4.0.9:
+    resolution: {integrity: sha512-6Viqyrqpb7fVXJ5VoIIu5UdQR9ftk1kvh4X40FQhy5IOFnawQ38CpEZw34ZPOtpVed72W27m3gRSJo+4qAFuqA==}
+    dev: true
 
   /@microsoft/fetch-event-source/2.0.1:
     resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
@@ -5067,6 +5101,10 @@ packages:
     resolution: {integrity: sha512-+5haRZ9uzI7rYqzDznXgkuacqb6LJhAti8mzZKWxIXn/WEtvB+GHVJ7AuMwcN1HMvXOSJcrvA6PPoYHYOYYebA==}
     dev: false
 
+  /@types/node/15.14.9:
+    resolution: {integrity: sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==}
+    dev: true
+
   /@types/node/16.11.6:
     resolution: {integrity: sha512-ua7PgUoeQFjmWPcoo9khiPum3Pd60k4/2ZGXt18sm2Slk0W0xZTqt5Y0Ny1NyBiN1EVQ/+FaF9NcY4Qe6rwk5w==}
 
@@ -5074,6 +5112,10 @@ packages:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
+  /@types/object-path/0.11.1:
+    resolution: {integrity: sha512-219LSCO9HPcoXcRTC6DbCs0FRhZgBnEMzf16RRqkT40WbkKx3mOeQuz3e2XqbfhOz/AHfbru0kzB1n1RCAsIIg==}
+    dev: true
+
   /@types/optimize-css-assets-webpack-plugin/5.0.3:
     resolution: {integrity: sha512-PJgbI4KplJfyxKWVrBbEL+rePEBqeozJRMT0mBL3ynhvngASBV/XJ+BneLuJN74RjjMzO0gA5ns80mgubQdZAA==}
     dependencies:
@@ -5130,6 +5172,10 @@ packages:
       '@types/node': 12.20.36
     dev: false
 
+  /@types/semver/7.3.9:
+    resolution: {integrity: sha512-L/TMpyURfBkf+o/526Zb6kd/tchUP3iBDEPjqjb+U2MAJhVRxxrmr2fwpe08E7QsV7YLcpq0tUaQ9O9x97ZIxQ==}
+    dev: true
+
   /@types/serve-static/1.13.9:
     resolution: {integrity: sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==}
     dependencies:
@@ -5189,6 +5235,10 @@ packages:
   /@types/throttle-debounce/2.1.0:
     resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
 
+  /@types/ua-parser-js/0.7.36:
+    resolution: {integrity: sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==}
+    dev: true
+
   /@types/uglify-js/3.13.1:
     resolution: {integrity: sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==}
     dependencies:
@@ -5393,6 +5443,10 @@ packages:
       eslint-visitor-keys: 3.0.0
     dev: true
 
+  /@ungap/promise-all-settled/1.1.2:
+    resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==}
+    dev: true
+
   /@urql/core/2.3.4_graphql@15.7.2:
     resolution: {integrity: sha512-KXeR55ONqkTZ2gwNgyFGJEGRp1/jEnyqkFjEguknnG6GFaikAwAX0TMijKcX6ZQ4qE59cDtVEtSbqpVkd9XNmA==}
     peerDependencies:
@@ -5739,6 +5793,11 @@ packages:
       '@xtuc/long': 4.2.2
     dev: false
 
+  /@wessberg/stringutil/1.0.19:
+    resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==}
+    engines: {node: '>=8.0.0'}
+    dev: true
+
   /@windicss/config/1.4.12:
     resolution: {integrity: sha512-+ckfkRoWC8wia5o7iCyDmydiJEkjX6lVEb6a2QVPI9WQ9Mi7hqfgOoStijOsEn0wIz95FDiOfVe5aSb1V4jEtw==}
     dependencies:
@@ -7122,6 +7181,10 @@ packages:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
 
+  /browser-stdout/1.3.1:
+    resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==}
+    dev: true
+
   /browserify-aes/1.2.0:
     resolution: {integrity: sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==}
     dependencies:
@@ -7177,6 +7240,34 @@ packages:
       pako: 1.0.11
     dev: false
 
+  /browserslist-generator/1.0.64:
+    resolution: {integrity: sha512-70g7RMq7eKVc2NnvybDtF+G6A6vVnF5fLXJ3qQqiquDb5t8O2OWUzux0F2/+Z7Cix9ZR1NdTfaAQl9AZyCB3Dw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      '@mdn/browser-compat-data': 4.0.9
+      '@types/object-path': 0.11.1
+      '@types/semver': 7.3.9
+      '@types/ua-parser-js': 0.7.36
+      browserslist: 4.17.1
+      caniuse-lite: 1.0.30001274
+      isbot: 3.3.3
+      object-path: 0.11.8
+      semver: 7.3.5
+      ua-parser-js: 0.7.31
+    dev: true
+
+  /browserslist/4.17.1:
+    resolution: {integrity: sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001274
+      electron-to-chromium: 1.3.886
+      escalade: 3.1.1
+      nanocolors: 0.1.12
+      node-releases: 1.1.77
+    dev: true
+
   /browserslist/4.17.5:
     resolution: {integrity: sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -7925,6 +8016,16 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
+  /compatfactory/0.0.9_typescript@4.4.4:
+    resolution: {integrity: sha512-WzoRZSBtsC5TT2J+MZNlo4Qpssf7ofSaRJUT3hN8nNeGilKOnTjR707k+hUU7QhVbyg3cmfWJlabTfMZgZtvEA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      typescript: '>=3.x || >= 4.x'
+    dependencies:
+      helpertypes: 0.0.4
+      typescript: 4.4.4
+    dev: true
+
   /component-bind/1.0.0:
     resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
     dev: false
@@ -8264,6 +8365,13 @@ packages:
       undici: 4.9.5
     dev: true
 
+  /crosspath/0.0.9:
+    resolution: {integrity: sha512-lhDiWhqHk1IQ0BiGN9/Ji7qEr9LwCG8taDCTgihII/6b91my+GvTNXDB7eKh/FySz488tkt2IboqBJTSZtc4Fw==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@types/node': 15.14.9
+    dev: true
+
   /crypto-browserify/3.12.0:
     resolution: {integrity: sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==}
     dependencies:
@@ -8601,7 +8709,6 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 8.1.1
-    dev: false
 
   /decamelize-keys/1.1.0:
     resolution: {integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=}
@@ -8615,6 +8722,11 @@ packages:
     resolution: {integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=}
     engines: {node: '>=0.10.0'}
 
+  /decamelize/4.0.0:
+    resolution: {integrity: sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==}
+    engines: {node: '>=10'}
+    dev: true
+
   /decimal.js/10.3.1:
     resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
     dev: true
@@ -8789,6 +8901,11 @@ packages:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
+  /diff/5.0.0:
+    resolution: {integrity: sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
   /diffie-hellman/5.0.3:
     resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
     dependencies:
@@ -10478,7 +10595,6 @@ packages:
       minimatch: 3.0.4
       once: 1.4.0
       path-is-absolute: 1.0.1
-    dev: false
 
   /glob/7.2.0:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
@@ -10852,6 +10968,11 @@ packages:
     engines: {node: '>= 10.x'}
     dev: false
 
+  /growl/1.10.5:
+    resolution: {integrity: sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==}
+    engines: {node: '>=4.x'}
+    dev: true
+
   /gzip-size/6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -11020,6 +11141,11 @@ packages:
       capital-case: 1.0.4
       tslib: 2.3.1
 
+  /helpertypes/0.0.4:
+    resolution: {integrity: sha512-q8f29R4Rdw9n5L4vGmUR8Ld6CXbxPxA7Xrcs4vto3K6w0LSF13TnWSm67uDrZRulf3t/ZHKCfeZ0qIletxSEow==}
+    engines: {node: '>=10.0.0'}
+    dev: true
+
   /hex-color-regex/1.1.0:
     resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==}
     dev: false
@@ -11792,6 +11918,11 @@ packages:
     resolution: {integrity: sha1-caUMhCnfync8kqOQpKA7OfzVHT4=}
     engines: {node: '>=0.10.0'}
 
+  /is-plain-obj/2.1.0:
+    resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /is-plain-obj/3.0.0:
     resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
     engines: {node: '>=10'}
@@ -11950,6 +12081,11 @@ packages:
     resolution: {integrity: sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=}
     dev: false
 
+  /isbot/3.3.3:
+    resolution: {integrity: sha512-a3HFPPsvtLroqpuTHHJTaUpPHUO0vjPbptJDzJYkymRvOI8tugWM6zE2oq22w5VOq4A5hrX+YRS7VdIPAgWLfw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /isexe/2.0.0:
     resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
 
@@ -13672,6 +13808,37 @@ packages:
     resolution: {integrity: sha512-+5DdpxP48PpfV/FcP4j/8TREPycnROCg0hX1nmD6aoZ2lD4FpZI4sxWG6l6YpUktXi/vckj8NaAl3DVQSkIn3w==}
     dev: true
 
+  /mocha/9.1.3:
+    resolution: {integrity: sha512-Xcpl9FqXOAYqI3j79pEtHBBnQgVXIhpULjGQa7DVb0Po+VzmSIK9kanAiWLHoRR/dbZ2qpdPshuXr8l1VaHCzw==}
+    engines: {node: '>= 12.0.0'}
+    hasBin: true
+    dependencies:
+      '@ungap/promise-all-settled': 1.1.2
+      ansi-colors: 4.1.1
+      browser-stdout: 1.3.1
+      chokidar: 3.5.2
+      debug: 4.3.2_supports-color@8.1.1
+      diff: 5.0.0
+      escape-string-regexp: 4.0.0
+      find-up: 5.0.0
+      glob: 7.1.7
+      growl: 1.10.5
+      he: 1.2.0
+      js-yaml: 4.1.0
+      log-symbols: 4.1.0
+      minimatch: 3.0.4
+      ms: 2.1.3
+      nanoid: 3.1.25
+      serialize-javascript: 6.0.0
+      strip-json-comments: 3.1.1
+      supports-color: 8.1.1
+      which: 2.0.2
+      workerpool: 6.1.5
+      yargs: 16.2.0
+      yargs-parser: 20.2.4
+      yargs-unparser: 2.0.0
+    dev: true
+
   /moment/2.29.1:
     resolution: {integrity: sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==}
     dev: false
@@ -13739,6 +13906,16 @@ packages:
     dev: false
     optional: true
 
+  /nanocolors/0.1.12:
+    resolution: {integrity: sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==}
+    dev: true
+
+  /nanoid/3.1.25:
+    resolution: {integrity: sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
   /nanoid/3.1.30:
     resolution: {integrity: sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -13880,6 +14057,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /node-releases/1.1.77:
+    resolution: {integrity: sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==}
+    dev: true
+
   /node-releases/2.0.1:
     resolution: {integrity: sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==}
 
@@ -14112,7 +14293,6 @@ packages:
   /object-path/0.11.8:
     resolution: {integrity: sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==}
     engines: {node: '>= 10.12.0'}
-    dev: false
 
   /object-treeify/1.1.33:
     resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
@@ -15687,7 +15867,6 @@ packages:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: false
 
   /randomfill/1.0.4:
     resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
@@ -16135,6 +16314,62 @@ packages:
       sprintf-js: 1.1.2
     dev: false
 
+  /rollup-plugin-dts/3.0.2_rollup@2.59.0+typescript@4.4.4:
+    resolution: {integrity: sha512-hswlsdWu/x7k5pXzaLP6OvKRKcx8Bzprksz9i9mUe72zvt8LvqAb/AZpzs6FkLgmyRaN8B6rUQOVtzA3yEt9Yw==}
+    engines: {node: '>=v12.22.1'}
+    peerDependencies:
+      rollup: ^2.48.0
+      typescript: ^4.2.4
+    dependencies:
+      magic-string: 0.25.7
+      rollup: 2.59.0
+      typescript: 4.4.4
+    optionalDependencies:
+      '@babel/code-frame': 7.16.0
+    dev: true
+
+  /rollup-plugin-ts/1.4.7_rollup@2.59.0+typescript@4.4.4:
+    resolution: {integrity: sha512-Qvmu8GVQ1+F4wcfr+S9iWVcG2PCLZMZ85ZpCZm5zTFmX2Z7hLbXePOWuReWO+7/fS3F1ysUzj/smFYQd026Juw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      rollup: '>=1.x || >=2.x'
+      typescript: '>=3.2.x || >= 4.x'
+    dependencies:
+      '@babel/core': 7.16.0
+      '@babel/plugin-proposal-async-generator-functions': 7.16.0_@babel+core@7.16.0
+      '@babel/plugin-proposal-json-strings': 7.16.0_@babel+core@7.16.0
+      '@babel/plugin-proposal-object-rest-spread': 7.16.0_@babel+core@7.16.0
+      '@babel/plugin-proposal-optional-catch-binding': 7.16.0_@babel+core@7.16.0
+      '@babel/plugin-proposal-unicode-property-regex': 7.16.0_@babel+core@7.16.0
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.16.0
+      '@babel/plugin-transform-runtime': 7.16.0_@babel+core@7.16.0
+      '@babel/preset-env': 7.16.0_@babel+core@7.16.0
+      '@babel/runtime': 7.16.0
+      '@rollup/pluginutils': 4.1.1
+      '@types/babel__core': 7.1.16
+      '@wessberg/stringutil': 1.0.19
+      browserslist: 4.17.5
+      browserslist-generator: 1.0.64
+      chalk: 4.1.2
+      compatfactory: 0.0.9_typescript@4.4.4
+      crosspath: 0.0.9
+      magic-string: 0.25.7
+      rollup: 2.59.0
+      ts-clone-node: 0.3.28_typescript@4.4.4
+      tslib: 2.3.1
+      typescript: 4.4.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /rollup/2.59.0:
+    resolution: {integrity: sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /run-async/2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -16402,6 +16637,12 @@ packages:
       randombytes: 2.1.0
     dev: false
 
+  /serialize-javascript/6.0.0:
+    resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
   /serve-placeholder/1.2.4:
     resolution: {integrity: sha512-jWD9cZXLcr4vHTTL5KEPIUBUYyOWN/z6v/tn0l6XxFhi9iqV3Fc5Y1aFeduUyz+cx8sALzGCUczkPfeOlrq9jg==}
     dependencies:
@@ -17713,6 +17954,16 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /ts-clone-node/0.3.28_typescript@4.4.4:
+    resolution: {integrity: sha512-NHNYN/memcKz+9QDSO6+7r4QtlFQSV2lOWG1yZFWWO/3KrmRFdariuvgdwonvRMaKEuWScAk3ucPm3m312u4JQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      typescript: ^3.x || ^4.x
+    dependencies:
+      compatfactory: 0.0.9_typescript@4.4.4
+      typescript: 4.4.4
+    dev: true
+
   /ts-invariant/0.3.3:
     resolution: {integrity: sha512-UReOKsrJFGC9tUblgSRWo+BsVNbEd77Cl6WiV/XpMlkifXwNIJbknViCucHvVZkXSC/mcWeRnIGdY7uprcwvdQ==}
     dependencies:
@@ -18996,6 +19247,10 @@ packages:
       schema-utils: 3.1.1
     dev: true
 
+  /workerpool/6.1.5:
+    resolution: {integrity: sha512-XdKkCK0Zqc6w3iTxLckiuJ81tiD/o5rBE/m+nXpRCB+/Sq4DqkfXZ/x0jW02DG1tGsfUGXbTJyZDP+eu67haSw==}
+    dev: true
+
   /wrap-ansi/3.0.1:
     resolution: {integrity: sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=}
     engines: {node: '>=4'}
@@ -19189,10 +19444,25 @@ packages:
       camelcase: 5.3.1
       decamelize: 1.2.0
 
+  /yargs-parser/20.2.4:
+    resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
 
+  /yargs-unparser/2.0.0:
+    resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==}
+    engines: {node: '>=10'}
+    dependencies:
+      camelcase: 6.2.0
+      decamelize: 4.0.0
+      flat: 5.0.2
+      is-plain-obj: 2.1.0
+    dev: true
+
   /yargs/15.4.1:
     resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
     engines: {node: '>=8'}

From a967100be85a31b8d91df0291cedd0740750aa8e Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 10 Nov 2021 13:53:10 +0530
Subject: [PATCH 13/23] feat: more syntax hightlight colors

---
 .../hoppscotch-app/assets/scss/themes.scss    | 36 +++++++++----------
 .../helpers/editor/themes/baseTheme.ts        | 26 +++++++++++---
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 9b12f5927..077e5b5a3 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -53,45 +53,45 @@
 }
 
 @mixin dark-editor-theme {
-  --editor-type-color: theme("colors.gray.800");
+  --editor-type-color: theme("colors.purple.800");
   --editor-name-color: theme("colors.blue.500");
-  --editor-operator-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.indigo.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.gray.500");
-  --editor-link-color: theme("colors.blue.500");
+  --editor-variable-color: theme("colors.green.500");
+  --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.gray.400");
-  --editor-constant-color: theme("colors.blue.500");
-  --editor-keyword-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.indigo.500");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin light-editor-theme {
-  --editor-type-color: theme("colors.gray.800");
+  --editor-type-color: theme("colors.purple.800");
   --editor-name-color: theme("colors.red.600");
-  --editor-operator-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.indigo.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.gray.500");
-  --editor-link-color: theme("colors.blue.500");
+  --editor-variable-color: theme("colors.green.500");
+  --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.blue.600");
-  --editor-constant-color: theme("colors.blue.500");
-  --editor-keyword-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.indigo.500");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin black-editor-theme {
-  --editor-type-color: theme("colors.gray.800");
+  --editor-type-color: theme("colors.purple.800");
   --editor-name-color: theme("colors.gray.400");
-  --editor-operator-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.indigo.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.gray.500");
-  --editor-link-color: theme("colors.blue.500");
+  --editor-variable-color: theme("colors.green.500");
+  --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.blue.500");
-  --editor-constant-color: theme("colors.blue.500");
-  --editor-keyword-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.indigo.500");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin green-theme {
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index c1f5b15e2..7d6dd5224 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -11,13 +11,16 @@ export const baseTheme = EditorView.theme({
     fontFamily: "var(--font-mono)",
     backgroundColor: "var(--primary-color)",
   },
-  "&.cm-focused .cm-cursor": {
+  ".cm-focused .cm-cursor": {
     borderLeftColor: "var(--secondary-light-color)",
   },
-  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-    { backgroundColor: "var(--primary-light-color)" },
+  ".cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content::selection, .cm-line::selection":
+    {
+      backgroundColor: "var(--accent-dark-color)!important",
+      color: "var(--secondary-dark-color)",
+    },
   ".cm-panels": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
   },
   ".cm-panels.cm-panels-top": {
@@ -26,13 +29,23 @@ export const baseTheme = EditorView.theme({
   ".cm-panels.cm-panels-bottom": {
     borderTop: "1px solid var(--divider-light-color)",
   },
+  ".cm-textfield": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-button": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+    backgroundImage: "none",
+    border: "none",
+  },
   ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
   ".cm-searchMatch": {
     backgroundColor: "var(--accent-light-color)",
     outline: "1px solid var(--accent-dark-color)",
   },
   ".cm-selectionMatch": { backgroundColor: "var(--accent-color)" },
-  "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+  ".cm-focused .cm-matchingBracket, .cm-focused .cm-nonmatchingBracket": {
     backgroundColor: "var(--accent-dark-color)",
     outline: "1px solid var(--accent-dark-color)",
   },
@@ -59,6 +72,9 @@ export const baseTheme = EditorView.theme({
   ".cm-activeLineGutter": {
     backgroundColor: "var(--primary-dark-color)",
   },
+  ".cm-scroller::-webkit-scrollbar": {
+    display: "none",
+  },
 })
 
 const editorTypeColor = "var(--editor-type-color)"

From 245b8a6e3c80510987e5dca99c854fc6bf4efb76 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 10 Nov 2021 14:31:00 +0530
Subject: [PATCH 14/23] fix: compiling issues for codemirror-lang-graphql

---
 packages/codemirror-lang-graphql/.gitignore                | 1 -
 packages/codemirror-lang-graphql/rollup.config.js          | 2 +-
 .../codemirror-lang-graphql/src/{index.ts => index.js}     | 0
 packages/codemirror-lang-graphql/src/syntax.grammar        | 2 +-
 packages/codemirror-lang-graphql/tsconfig.json             | 7 ++++---
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/codemirror-lang-graphql/src/{index.ts => index.js} (100%)

diff --git a/packages/codemirror-lang-graphql/.gitignore b/packages/codemirror-lang-graphql/.gitignore
index a97c46617..0ef473202 100644
--- a/packages/codemirror-lang-graphql/.gitignore
+++ b/packages/codemirror-lang-graphql/.gitignore
@@ -1,5 +1,4 @@
 /node_modules
 package-lock.json
 /dist
-/src/*.js
 /src/*.d.ts
diff --git a/packages/codemirror-lang-graphql/rollup.config.js b/packages/codemirror-lang-graphql/rollup.config.js
index d8d87c181..f4367e403 100644
--- a/packages/codemirror-lang-graphql/rollup.config.js
+++ b/packages/codemirror-lang-graphql/rollup.config.js
@@ -2,7 +2,7 @@ import typescript from "rollup-plugin-ts"
 import {lezer} from "@lezer/generator/rollup"
 
 export default {
-  input: "src/index.ts",
+  input: "src/index.js",
   external: id => id != "tslib" && !/^(\.?\/|\w:)/.test(id),
   output: [
     {file: "dist/index.cjs", format: "cjs"},
diff --git a/packages/codemirror-lang-graphql/src/index.ts b/packages/codemirror-lang-graphql/src/index.js
similarity index 100%
rename from packages/codemirror-lang-graphql/src/index.ts
rename to packages/codemirror-lang-graphql/src/index.js
diff --git a/packages/codemirror-lang-graphql/src/syntax.grammar b/packages/codemirror-lang-graphql/src/syntax.grammar
index 42f25a51a..6417271f0 100644
--- a/packages/codemirror-lang-graphql/src/syntax.grammar
+++ b/packages/codemirror-lang-graphql/src/syntax.grammar
@@ -338,7 +338,7 @@ TypeSystemDirectiveLocation {
 
 @tokens {
   Whitespace {
-    std.whitespace
+    std.whitespace+
   }
   StringValue {
     "\"\"\"" (!["] | "\\n" | "\"" "\""? !["])* "\"\"\"" | "\"" !["\\\n]* "\""
diff --git a/packages/codemirror-lang-graphql/tsconfig.json b/packages/codemirror-lang-graphql/tsconfig.json
index d87615219..d91b09866 100644
--- a/packages/codemirror-lang-graphql/tsconfig.json
+++ b/packages/codemirror-lang-graphql/tsconfig.json
@@ -5,7 +5,8 @@
     "module": "es2020",
     "newLine": "lf",
     "declaration": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "allowJs": true,
   },
-  "include": ["src/*.ts"]
-}
+  "include": ["src/*"]
+}
\ No newline at end of file

From 8f6cf07e82f13b57f2904d8f823e72660730caa8 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 10 Nov 2021 16:27:12 +0530
Subject: [PATCH 15/23] feat: more syntax hightlight colors

---
 .../hoppscotch-app/assets/scss/themes.scss    | 42 +++++++++----------
 .../helpers/editor/themes/baseTheme.ts        | 23 +++++-----
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 077e5b5a3..db587efd1 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -53,45 +53,45 @@
 }
 
 @mixin dark-editor-theme {
-  --editor-type-color: theme("colors.purple.800");
+  --editor-type-color: theme("colors.purple.500");
   --editor-name-color: theme("colors.blue.500");
-  --editor-operator-color: theme("colors.indigo.600");
+  --editor-operator-color: theme("colors.indigo.500");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
   --editor-variable-color: theme("colors.green.500");
   --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.gray.400");
-  --editor-constant-color: theme("colors.indigo.500");
+  --editor-constant-color: theme("colors.fuchsia.500");
   --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin light-editor-theme {
-  --editor-type-color: theme("colors.purple.800");
+  --editor-type-color: theme("colors.purple.600");
   --editor-name-color: theme("colors.red.600");
   --editor-operator-color: theme("colors.indigo.600");
-  --editor-invalid-color: theme("colors.red.500");
-  --editor-separator-color: theme("colors.gray.500");
-  --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.green.500");
-  --editor-link-color: theme("colors.cyan.500");
+  --editor-invalid-color: theme("colors.red.600");
+  --editor-separator-color: theme("colors.gray.600");
+  --editor-meta-color: theme("colors.gray.600");
+  --editor-variable-color: theme("colors.green.600");
+  --editor-link-color: theme("colors.cyan.600");
   --editor-process-color: theme("colors.blue.600");
-  --editor-constant-color: theme("colors.indigo.500");
-  --editor-keyword-color: theme("colors.pink.500");
+  --editor-constant-color: theme("colors.fuchsia.600");
+  --editor-keyword-color: theme("colors.pink.600");
 }
 
 @mixin black-editor-theme {
-  --editor-type-color: theme("colors.purple.800");
+  --editor-type-color: theme("colors.purple.400");
   --editor-name-color: theme("colors.gray.400");
-  --editor-operator-color: theme("colors.indigo.600");
-  --editor-invalid-color: theme("colors.red.500");
-  --editor-separator-color: theme("colors.gray.500");
-  --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.green.500");
-  --editor-link-color: theme("colors.cyan.500");
-  --editor-process-color: theme("colors.blue.500");
-  --editor-constant-color: theme("colors.indigo.500");
-  --editor-keyword-color: theme("colors.pink.500");
+  --editor-operator-color: theme("colors.indigo.400");
+  --editor-invalid-color: theme("colors.red.400");
+  --editor-separator-color: theme("colors.gray.400");
+  --editor-meta-color: theme("colors.gray.400");
+  --editor-variable-color: theme("colors.green.400");
+  --editor-link-color: theme("colors.cyan.400");
+  --editor-process-color: theme("colors.blue.400");
+  --editor-constant-color: theme("colors.fuchsia.400");
+  --editor-keyword-color: theme("colors.pink.400");
 }
 
 @mixin green-theme {
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 7d6dd5224..46c9e7e9d 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -11,14 +11,13 @@ export const baseTheme = EditorView.theme({
     fontFamily: "var(--font-mono)",
     backgroundColor: "var(--primary-color)",
   },
-  ".cm-focused .cm-cursor": {
-    borderLeftColor: "var(--secondary-light-color)",
+  ".cm-cursor": {
+    borderColor: "var(--secondary-color)",
+  },
+  ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
+    backgroundColor: "var(--accent-dark-color)",
+    color: "var(--accent-contrast-color)",
   },
-  ".cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content::selection, .cm-line::selection":
-    {
-      backgroundColor: "var(--accent-dark-color)!important",
-      color: "var(--secondary-dark-color)",
-    },
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
@@ -41,14 +40,15 @@ export const baseTheme = EditorView.theme({
   },
   ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
   ".cm-searchMatch": {
-    backgroundColor: "var(--accent-light-color)",
     outline: "1px solid var(--accent-dark-color)",
   },
-  ".cm-selectionMatch": { backgroundColor: "var(--accent-color)" },
-  ".cm-focused .cm-matchingBracket, .cm-focused .cm-nonmatchingBracket": {
-    backgroundColor: "var(--accent-dark-color)",
+  ".cm-selectionMatch": {
     outline: "1px solid var(--accent-dark-color)",
   },
+  ".cm-matchingBracket, .cm-nonmatchingBracket": {
+    backgroundColor: "var(--accent-dark-color)",
+    color: "var(--accent-contrast-color)",
+  },
   ".cm-gutters": {
     fontFamily: "var(--font-mono)",
     backgroundColor: "var(--primary-color)",
@@ -68,6 +68,7 @@ export const baseTheme = EditorView.theme({
   ".cm-line": {
     paddingLeft: "0.5em",
     paddingRight: "0.5em",
+    color: "var(--secondary-dark-color)",
   },
   ".cm-activeLineGutter": {
     backgroundColor: "var(--primary-dark-color)",

From 7d7f628f6e9b71c9ea7ec94c853f12821302c2c2 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 10 Nov 2021 14:31:00 +0530
Subject: [PATCH 16/23] fix: compiling issues for codemirror-lang-graphql

---
 .../components/graphql/RequestOptions.vue     |   4 +-
 .../components/graphql/Sidebar.vue            |   1 -
 .../components/http/ImportCurl.vue            |   1 -
 .../components/http/Parameters.vue            |   1 -
 .../components/http/PreRequestScript.vue      |   3 +-
 .../components/http/RawBody.vue               |   5 -
 .../hoppscotch-app/components/http/Tests.vue  |   1 -
 .../lenses/renderers/HTMLLensRenderer.vue     |   4 -
 .../lenses/renderers/JSONLensRenderer.vue     |   3 +-
 .../lenses/renderers/XMLLensRenderer.vue      |   1 -
 .../helpers/editor/codemirror.ts              | 221 +-----------------
 .../helpers/editor/modes/graphql.ts           |  80 -------
 packages/hoppscotch-app/package.json          |   2 -
 pnpm-lock.yaml                                |  12 -
 14 files changed, 14 insertions(+), 325 deletions(-)
 delete mode 100644 packages/hoppscotch-app/helpers/editor/modes/graphql.ts

diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 77c751e38..5da0357d6 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -307,9 +307,7 @@ import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
 import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
-import { useNewCodemirror as useCodemirror } from "~/helpers/editor/codemirror"
-import "codemirror/mode/javascript/javascript"
-import "~/helpers/editor/modes/graphql"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
 import queryCompleter from "~/helpers/editor/completion/gqlQuery"
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index a23186cdf..78e8351ea 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -252,7 +252,6 @@ import {
   setGQLURL,
   setGQLVariables,
 } from "~/newstore/GQLSession"
-import "~/helpers/editor/modes/graphql"
 
 function isTextFoundInGraphqlFieldObject(
   text: string,
diff --git a/packages/hoppscotch-app/components/http/ImportCurl.vue b/packages/hoppscotch-app/components/http/ImportCurl.vue
index ba7a2cc58..393d1868e 100644
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -30,7 +30,6 @@ import {
   makeRESTRequest,
 } from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
-import "codemirror/mode/shell/shell"
 
 const {
   $toast,
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index a6cc22265..0135a5a3b 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -175,7 +175,6 @@ import {
   deleteAllRESTParams,
   setRESTParams,
 } from "~/newstore/RESTSession"
-import "codemirror/mode/yaml/yaml"
 
 const {
   $toast,
diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index 2d75b9f20..50d153eef 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -85,8 +85,7 @@
 import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
 import snippets from "~/helpers/preRequestScriptSnippets"
-import "codemirror/mode/javascript/javascript"
-import { useNewCodemirror as useCodemirror } from "~/helpers/editor/codemirror"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
 
diff --git a/packages/hoppscotch-app/components/http/RawBody.vue b/packages/hoppscotch-app/components/http/RawBody.vue
index b11ef8dc6..b5f335038 100644
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -72,11 +72,6 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { pluckRef } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
-import "codemirror/mode/yaml/yaml"
-import "codemirror/mode/xml/xml"
-import "codemirror/mode/css/css"
-import "codemirror/mode/htmlmixed/htmlmixed"
-import "codemirror/mode/javascript/javascript"
 
 const props = defineProps<{
   contentType: string
diff --git a/packages/hoppscotch-app/components/http/Tests.vue b/packages/hoppscotch-app/components/http/Tests.vue
index 5f8d06b00..d51d2a0ba 100644
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -85,7 +85,6 @@
 import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
-import "codemirror/mode/javascript/javascript"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/testScript"
 import completer from "~/helpers/editor/completion/testScript"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
index 87178b1de..c7f2a251b 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
@@ -66,10 +66,6 @@
 import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import "codemirror/mode/xml/xml"
-import "codemirror/mode/javascript/javascript"
-import "codemirror/mode/css/css"
-import "codemirror/mode/htmlmixed/htmlmixed"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
 const props = defineProps<{
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 5551fa66a..994b3e183 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -145,9 +145,8 @@
 
 <script setup lang="ts">
 import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
-import { useNewCodemirror as useCodemirror } from "~/helpers/editor/codemirror"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import "codemirror/mode/javascript/javascript"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
 import { getJSONOutlineAtPos } from "~/helpers/newOutline"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
index bc409c0a0..bc36d7a63 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
@@ -51,7 +51,6 @@
 import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import "codemirror/mode/xml/xml"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
 const props = defineProps<{
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index ac59e6ea0..0f751e4d8 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -1,30 +1,3 @@
-import CodeMirror from "codemirror"
-
-import "codemirror-theme-github/theme/github.css"
-import "codemirror/theme/base16-dark.css"
-import "codemirror/theme/tomorrow-night-bright.css"
-
-import "codemirror/lib/codemirror.css"
-import "codemirror/addon/lint/lint.css"
-import "codemirror/addon/dialog/dialog.css"
-import "codemirror/addon/hint/show-hint.css"
-
-import "codemirror/addon/fold/foldgutter.css"
-import "codemirror/addon/fold/foldgutter"
-import "codemirror/addon/fold/brace-fold"
-import "codemirror/addon/fold/comment-fold"
-import "codemirror/addon/fold/indent-fold"
-import "codemirror/addon/display/autorefresh"
-import "codemirror/addon/lint/lint"
-import "codemirror/addon/hint/show-hint"
-import "codemirror/addon/display/placeholder"
-import "codemirror/addon/edit/closebrackets"
-import "codemirror/addon/search/search"
-import "codemirror/addon/search/searchcursor"
-import "codemirror/addon/search/jump-to-line"
-import "codemirror/addon/dialog/dialog"
-import "codemirror/addon/selection/active-line"
-
 import { keymap, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
 import {
   Extension,
@@ -39,7 +12,7 @@ import { basicSetup } from "@codemirror/basic-setup"
 import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { linter } from "@codemirror/lint"
 
-import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
+import { watch, onMounted, ref, Ref } from "@nuxtjs/composition-api"
 
 import { javascriptLanguage } from "@codemirror/lang-javascript"
 import { jsonLanguage } from "@codemirror/lang-json"
@@ -52,191 +25,19 @@ import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import { baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 
+type ExtendedEditorConfig = {
+  mode: string
+  placeholder: string
+  readOnly: boolean
+  lineWrapping: boolean
+}
+
 type CodeMirrorOptions = {
-  extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
+  extendedEditorConfig: Partial<ExtendedEditorConfig>
   linter: LinterDefinition | null
   completer: Completer | null
 }
 
-const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
-  autoRefresh: true,
-  lineNumbers: true,
-  foldGutter: true,
-  autoCloseBrackets: true,
-  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-  extraKeys: {
-    "Ctrl-Space": "autocomplete",
-  },
-  viewportMargin: Infinity,
-  styleActiveLine: true,
-}
-
-/**
- * A Vue composable to mount and use Codemirror
- *
- * NOTE: Make sure to import all the necessary Codemirror modules,
- * as this function doesn't import any other than the core
- * @param el Reference to the dom node to attach to
- * @param value Reference to value to read/write to
- * @param options CodeMirror options to pass
- */
-export function useCodemirror(
-  el: Ref<any | null>,
-  value: Ref<string>,
-  options: CodeMirrorOptions
-): { cm: Ref<CodeMirror.Position | null>; cursor: Ref<CodeMirror.Position> } {
-  const { $colorMode } = useContext() as any
-
-  const cm = ref<CodeMirror.Editor | null>(null)
-  const cursor = ref<CodeMirror.Position>({ line: 0, ch: 0 })
-
-  const updateEditorConfig = () => {
-    Object.keys(options.extendedEditorConfig).forEach((key) => {
-      // Only update options which need updating
-      if (
-        cm.value &&
-        cm.value?.getOption(key as any) !==
-          (options.extendedEditorConfig as any)[key]
-      ) {
-        cm.value?.setOption(
-          key as any,
-          (options.extendedEditorConfig as any)[key]
-        )
-      }
-    })
-  }
-
-  const updateLinterConfig = () => {
-    if (options.linter) {
-      cm.value?.setOption("lint", options.linter)
-    }
-  }
-
-  const updateCompleterConfig = () => {
-    if (options.completer) {
-      cm.value?.setOption("hintOptions", {
-        completeSingle: false,
-        hint: async (editor: CodeMirror.Editor) => {
-          const pos = editor.getCursor()
-          const text = editor.getValue()
-
-          const token = editor.getTokenAt(pos)
-          // It's not a word token, so, just increment to skip to next
-          if (token.string.toUpperCase() === token.string.toLowerCase())
-            token.start += 1
-
-          const result = await options.completer!(text, pos)
-
-          if (!result) return null
-
-          return <CodeMirror.Hints>{
-            from: { line: pos.line, ch: token.start },
-            to: { line: pos.line, ch: token.end },
-            list: result.completions
-              .sort((a, b) => a.score - b.score)
-              .map((x) => x.text),
-          }
-        },
-      })
-    }
-  }
-
-  const initialize = () => {
-    if (!el.value) return
-
-    cm.value = CodeMirror(el.value!, DEFAULT_EDITOR_CONFIG)
-
-    cm.value.setValue(value.value)
-
-    setTheme()
-    updateEditorConfig()
-    updateLinterConfig()
-    updateCompleterConfig()
-
-    cm.value.on("change", (instance) => {
-      // External update propagation (via watchers) should be ignored
-      if (instance.getValue() !== value.value) {
-        value.value = instance.getValue()
-      }
-    })
-
-    cm.value.on("cursorActivity", (instance) => {
-      cursor.value = instance.getCursor()
-    })
-  }
-
-  // Boot-up CodeMirror, set the value and listeners
-  onMounted(() => {
-    initialize()
-  })
-
-  // Reinitialize if the target ref updates
-  watch(el, () => {
-    if (cm.value) {
-      const parent = cm.value.getWrapperElement()
-      parent.remove()
-      cm.value = null
-    }
-    initialize()
-  })
-
-  const setTheme = () => {
-    if (cm.value) {
-      cm.value?.setOption("theme", getThemeName($colorMode.value))
-    }
-  }
-
-  const getThemeName = (mode: string) => {
-    switch (mode) {
-      case "system":
-        return "default"
-      case "light":
-        return "github"
-      case "dark":
-        return "base16-dark"
-      case "black":
-        return "tomorrow-night-bright"
-      default:
-        return "default"
-    }
-  }
-
-  // If the editor properties are reactive, watch for updates
-  watch(() => options.extendedEditorConfig, updateEditorConfig, {
-    immediate: true,
-    deep: true,
-  })
-  watch(() => options.linter, updateLinterConfig, { immediate: true })
-  watch(() => options.completer, updateCompleterConfig, { immediate: true })
-
-  // Watch value updates
-  watch(value, (newVal) => {
-    // Check if we are mounted
-    if (cm.value) {
-      // Don't do anything on internal updates
-      if (cm.value.getValue() !== newVal) {
-        cm.value.setValue(newVal)
-      }
-    }
-  })
-
-  // Push cursor updates
-  watch(cursor, (value) => {
-    if (value !== cm.value?.getCursor()) {
-      cm.value?.focus()
-      cm.value?.setCursor(value)
-    }
-  })
-
-  // Watch color mode updates and update theme
-  watch(() => $colorMode.value, setTheme)
-
-  return {
-    cm,
-    cursor,
-  }
-}
-
 const hoppCompleterExt = (completer: Completer): Extension => {
   return autocompletion({
     override: [
@@ -324,7 +125,7 @@ const getEditorLanguage = (
     O.getOrElseW(() => [])
   )
 
-export function useNewCodemirror(
+export function useCodemirror(
   el: Ref<any | null>,
   value: Ref<string>,
   options: CodeMirrorOptions
@@ -380,7 +181,7 @@ export function useNewCodemirror(
       EditorState.changeFilter.of(() => !options.extendedEditorConfig.readOnly),
       language.of(
         getEditorLanguage(
-          (options.extendedEditorConfig.mode as any) ?? "",
+          options.extendedEditorConfig.mode ?? "",
           options.linter ?? undefined,
           options.completer ?? undefined
         )
diff --git a/packages/hoppscotch-app/helpers/editor/modes/graphql.ts b/packages/hoppscotch-app/helpers/editor/modes/graphql.ts
deleted file mode 100644
index 2c4949882..000000000
--- a/packages/hoppscotch-app/helpers/editor/modes/graphql.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors
- *  All rights reserved.
- *
- *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant
- *  of patent rights can be found in the PATENTS file in the same directory.
- */
-
-import CodeMirror from "codemirror"
-import {
-  LexRules,
-  ParseRules,
-  isIgnored,
-  onlineParser,
-  State,
-} from "graphql-language-service-parser"
-
-/**
- * The GraphQL mode is defined as a tokenizer along with a list of rules, each
- * of which is either a function or an array.
- *
- *   * Function: Provided a token and the stream, returns an expected next step.
- *   * Array: A list of steps to take in order.
- *
- * A step is either another rule, or a terminal description of a token. If it
- * is a rule, that rule is pushed onto the stack and the parsing continues from
- * that point.
- *
- * If it is a terminal description, the token is checked against it using a
- * `match` function. If the match is successful, the token is colored and the
- * rule is stepped forward. If the match is unsuccessful, the remainder of the
- * rule is skipped and the previous rule is advanced.
- *
- * This parsing algorithm allows for incremental online parsing within various
- * levels of the syntax tree and results in a structured `state` linked-list
- * which contains the relevant information to produce valuable typeaheads.
- */
-CodeMirror.defineMode("graphql", (config) => {
-  const parser = onlineParser({
-    eatWhitespace: (stream) => stream.eatWhile(isIgnored),
-    lexRules: LexRules,
-    parseRules: ParseRules,
-    editorConfig: { tabSize: 2 },
-  })
-
-  return {
-    config,
-    startState: parser.startState,
-    token: parser.token as unknown as CodeMirror.Mode<any>["token"], // TODO: Check if the types are indeed compatible
-    indent,
-    electricInput: /^\s*[})\]]/,
-    fold: "brace",
-    lineComment: "#",
-    closeBrackets: {
-      pairs: '()[]{}""',
-      explode: "()[]{}",
-    },
-  }
-})
-
-// Seems the electricInput type in @types/codemirror is wrong (i.e it is written as electricinput instead of electricInput)
-function indent(
-  this: CodeMirror.Mode<any> & {
-    electricInput?: RegExp
-    config?: CodeMirror.EditorConfiguration
-  },
-  state: State,
-  textAfter: string
-) {
-  const levels = state.levels
-  // If there is no stack of levels, use the current level.
-  // Otherwise, use the top level, pre-emptively dedenting for close braces.
-  const level =
-    !levels || levels.length === 0
-      ? state.indentLevel
-      : levels[levels.length - 1] -
-        (this.electricInput?.test(textAfter) ? 1 : 0)
-  return (level || 0) * (this.config?.indentUnit || 0)
-}
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 30a2df3c3..cc1232e36 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -60,8 +60,6 @@
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
     "axios": "^0.24.0",
-    "codemirror": "^5.63.3",
-    "codemirror-theme-github": "^1.0.0",
     "core-js": "^3.19.1",
     "esprima": "^4.0.1",
     "firebase": "^9.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a1450980..3fb2cb83f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -99,8 +99,6 @@ importers:
       axios: ^0.24.0
       babel-core: ^7.0.0-bridge.0
       babel-jest: ^27.3.1
-      codemirror: ^5.63.3
-      codemirror-theme-github: ^1.0.0
       core-js: ^3.19.1
       eslint: ^8.1.0
       eslint-config-prettier: ^8.3.0
@@ -186,8 +184,6 @@ importers:
       acorn: 8.5.0
       acorn-walk: 8.2.0
       axios: 0.24.0
-      codemirror: 5.63.3
-      codemirror-theme-github: 1.0.0
       core-js: 3.19.1
       esprima: 4.0.1
       firebase: 9.2.0
@@ -7915,14 +7911,6 @@ packages:
     resolution: {integrity: sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=}
     engines: {node: '>=0.10.0'}
 
-  /codemirror-theme-github/1.0.0:
-    resolution: {integrity: sha512-suheFec2wlI4klyqn61MOFXjjrKPZiNY7d2py0OvTd5Z+7AsNxoGKDaS/HI59y7EAG1SkkXW/JQ1Rt2gDMxHfA==}
-    dev: false
-
-  /codemirror/5.63.3:
-    resolution: {integrity: sha512-1C+LELr+5grgJYqwZKqxrcbPsHFHapVaVAloBsFBASbpLnQqLw1U8yXJ3gT5D+rhxIiSpo+kTqN+hQ+9ialIXw==}
-    dev: false
-
   /collect-v8-coverage/1.0.1:
     resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
     dev: true

From 103ef8ee0dc5bc5eb57753a5523990e3a2a6b606 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 12 Nov 2021 07:05:34 +0530
Subject: [PATCH 17/23] fix: remove basic-setup and drawSelection on codemirror
 instance to resolve ::selection property

---
 .../hoppscotch-app/assets/scss/styles.scss    |  7 +-
 .../helpers/editor/codemirror.ts              |  3 +-
 .../helpers/editor/themes/baseTheme.ts        | 64 ++++++++++++++++---
 packages/hoppscotch-app/package.json          |  9 ++-
 pnpm-lock.yaml                                | 52 +++++++--------
 5 files changed, 93 insertions(+), 42 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index a576933f6..7dcacc465 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -31,8 +31,11 @@
 }
 
 ::selection {
-  @apply bg-accent;
-  @apply text-accentContrast;
+  @apply bg-divider;
+}
+
+.cm-focused {
+  @apply !outline-none;
 }
 
 input::placeholder,
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 0f751e4d8..270a823e7 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -8,7 +8,6 @@ import {
 } from "@codemirror/state"
 import { Language, LanguageSupport } from "@codemirror/language"
 import { defaultKeymap } from "@codemirror/commands"
-import { basicSetup } from "@codemirror/basic-setup"
 import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { linter } from "@codemirror/lint"
 
@@ -23,7 +22,7 @@ import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import { baseTheme, baseHighlightStyle } from "./themes/baseTheme"
+import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 
 type ExtendedEditorConfig = {
   mode: string
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 46c9e7e9d..a52fa1f57 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -1,6 +1,28 @@
-import { EditorView } from "@codemirror/view"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-import { foldGutter } from "@codemirror/fold"
+import {
+  EditorView,
+  keymap,
+  highlightSpecialChars,
+  highlightActiveLine,
+} from "@codemirror/view"
+import {
+  HighlightStyle,
+  tags as t,
+  defaultHighlightStyle,
+} from "@codemirror/highlight"
+import { foldKeymap, foldGutter } from "@codemirror/fold"
+
+import { Extension, EditorState } from "@codemirror/state"
+import { history, historyKeymap } from "@codemirror/history"
+import { indentOnInput } from "@codemirror/language"
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
+import { defaultKeymap } from "@codemirror/commands"
+import { bracketMatching } from "@codemirror/matchbrackets"
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
+import { commentKeymap } from "@codemirror/comment"
+import { rectangularSelection } from "@codemirror/rectangular-selection"
+import { lintKeymap } from "@codemirror/lint"
 
 export const baseTheme = EditorView.theme({
   "&": {
@@ -15,8 +37,7 @@ export const baseTheme = EditorView.theme({
     borderColor: "var(--secondary-color)",
   },
   ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
-    backgroundColor: "var(--accent-dark-color)",
-    color: "var(--accent-contrast-color)",
+    backgroundColor: "var(--divider-color)",
   },
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
@@ -46,8 +67,8 @@ export const baseTheme = EditorView.theme({
     outline: "1px solid var(--accent-dark-color)",
   },
   ".cm-matchingBracket, .cm-nonmatchingBracket": {
-    backgroundColor: "var(--accent-dark-color)",
-    color: "var(--accent-contrast-color)",
+    backgroundColor: "var(--divider-color)",
+    outline: "1px solid var(--accent-dark-color)",
   },
   ".cm-gutters": {
     fontFamily: "var(--font-mono)",
@@ -147,7 +168,34 @@ export const baseHighlightStyle = HighlightStyle.define([
   { tag: t.invalid, color: editorInvalidColor },
 ])
 
-export const baseFoldStyle = foldGutter({
+const baseFoldStyle = foldGutter({
   openText: "▾",
   closedText: "▸",
 })
+
+export const basicSetup: Extension = [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  baseFoldStyle,
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  defaultHighlightStyle.fallback,
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...commentKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+]
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index cc1232e36..369914de6 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -35,13 +35,20 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@codemirror/autocomplete": "^0.19.4",
-    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/closebrackets": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/fold": "^0.19.1",
     "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.0",
+    "@codemirror/history": "^0.19.0",
     "@codemirror/lang-javascript": "^0.19.2",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
     "@codemirror/lint": "^0.19.2",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3fb2cb83f..818ffe559 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,13 +44,20 @@ importers:
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
       '@codemirror/autocomplete': ^0.19.4
-      '@codemirror/basic-setup': ^0.19.0
+      '@codemirror/closebrackets': ^0.19.0
       '@codemirror/commands': ^0.19.5
+      '@codemirror/comment': ^0.19.0
+      '@codemirror/fold': ^0.19.1
       '@codemirror/gutter': ^0.19.4
+      '@codemirror/highlight': ^0.19.0
+      '@codemirror/history': ^0.19.0
       '@codemirror/lang-javascript': ^0.19.2
       '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.3
       '@codemirror/lint': ^0.19.2
+      '@codemirror/matchbrackets': ^0.19.3
+      '@codemirror/rectangular-selection': ^0.19.1
+      '@codemirror/search': ^0.19.2
       '@codemirror/state': ^0.19.3
       '@codemirror/text': ^0.19.5
       '@codemirror/view': ^0.19.12
@@ -159,13 +166,20 @@ importers:
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
       '@codemirror/autocomplete': 0.19.4
-      '@codemirror/basic-setup': 0.19.0
+      '@codemirror/closebrackets': 0.19.0
       '@codemirror/commands': 0.19.5
+      '@codemirror/comment': 0.19.0
+      '@codemirror/fold': 0.19.1
       '@codemirror/gutter': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/history': 0.19.0
       '@codemirror/lang-javascript': 0.19.2
       '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.3
       '@codemirror/lint': 0.19.2
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/rectangular-selection': 0.19.1
+      '@codemirror/search': 0.19.2
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/view': 0.19.12
@@ -1746,26 +1760,6 @@ packages:
       '@lezer/common': 0.15.7
     dev: false
 
-  /@codemirror/basic-setup/0.19.0:
-    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
-    dependencies:
-      '@codemirror/autocomplete': 0.19.4
-      '@codemirror/closebrackets': 0.19.0
-      '@codemirror/commands': 0.19.5
-      '@codemirror/comment': 0.19.0
-      '@codemirror/fold': 0.19.1
-      '@codemirror/gutter': 0.19.4
-      '@codemirror/highlight': 0.19.6
-      '@codemirror/history': 0.19.0
-      '@codemirror/language': 0.19.3
-      '@codemirror/lint': 0.19.2
-      '@codemirror/matchbrackets': 0.19.3
-      '@codemirror/rectangular-selection': 0.19.1
-      '@codemirror/search': 0.19.2
-      '@codemirror/state': 0.19.3
-      '@codemirror/view': 0.19.12
-    dev: false
-
   /@codemirror/closebrackets/0.19.0:
     resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
     dependencies:
@@ -3946,8 +3940,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27274229.29599f0:
-    resolution: {integrity: sha512-8GyQaBXQh6RelLe5ahXBTZWugaBYKd3cESc+GqxoHlFVy0i2HqZkUggFShDEoT7FCckzfGHTZF5uV04k87D73w==}
+  /@nuxt/kit-edge/3.0.0-27277498.850ef69:
+    resolution: {integrity: sha512-nlRbNf0wZwIuDzUs20AE9O4bE1rcIv3yaA/oYFhqUlXumiEDqHPmiuDAL5Trbe+E3Ut7EmZxgrcwUgQ0zQ8fuQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -3959,7 +3953,7 @@ packages:
       hookable: 5.0.0
       jiti: 1.12.9
       lodash.template: 4.5.0
-      mlly: 0.3.12
+      mlly: 0.3.13
       pathe: 0.2.0
       pkg-types: 0.3.1
       rc9: 1.2.0
@@ -13792,8 +13786,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  /mlly/0.3.12:
-    resolution: {integrity: sha512-+5DdpxP48PpfV/FcP4j/8TREPycnROCg0hX1nmD6aoZ2lD4FpZI4sxWG6l6YpUktXi/vckj8NaAl3DVQSkIn3w==}
+  /mlly/0.3.13:
+    resolution: {integrity: sha512-EXpbSPqSQLR9NEdB25uoyIYLSUvAqDEI7wUeM1HwXHsPF5Gx7cP7kuby5Mz2LfCPxBrgMnbcyPhcTCJRTQ+uvA==}
     dev: true
 
   /mocha/9.1.3:
@@ -14209,7 +14203,7 @@ packages:
   /nuxt-windicss/2.0.11:
     resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27274229.29599f0
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27277498.850ef69
       defu: 5.0.0
       h3: 0.3.3
       listhen: 0.2.5
@@ -14794,7 +14788,7 @@ packages:
     resolution: {integrity: sha512-BjECNgz/tsyqg0/T4Z/U7WbFQXUT24nfkxPbALcrk/uHVeZf9MrGG4tfvYtu+jsrHCFMseLQ6woQddDEBATw3A==}
     dependencies:
       jsonc-parser: 3.0.0
-      mlly: 0.3.12
+      mlly: 0.3.13
       pathe: 0.2.0
     dev: true
 

From ca40cc5271a59dea1c4575c6b8777b079852d7c1 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 12 Nov 2021 17:54:34 +0530
Subject: [PATCH 18/23] feat: fix reactivity issues in graphql

---
 .../helpers/editor/codemirror.ts              | 221 +++++++++---------
 1 file changed, 113 insertions(+), 108 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 270a823e7..9804f2b69 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -4,19 +4,23 @@ import {
   EditorState,
   Compartment,
   EditorSelection,
-  TransactionSpec,
 } from "@codemirror/state"
 import { Language, LanguageSupport } from "@codemirror/language"
 import { defaultKeymap } from "@codemirror/commands"
 import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { linter } from "@codemirror/lint"
 
-import { watch, onMounted, ref, Ref } from "@nuxtjs/composition-api"
+import {
+  watch,
+  ref,
+  Ref,
+  onMounted,
+  onBeforeUnmount,
+} from "@nuxtjs/composition-api"
 
 import { javascriptLanguage } from "@codemirror/lang-javascript"
 import { jsonLanguage } from "@codemirror/lang-json"
 import { GQLLanguage } from "@hoppscotch/codemirror-lang-graphql"
-import { onBeforeUnmount } from "@vue/runtime-dom"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
@@ -140,105 +144,101 @@ export function useCodemirror(
     line: 0,
     ch: 0,
   })
+
   const cachedValue = ref(value.value)
 
-  const state = EditorState.create({
-    doc: value.value,
-    extensions: [
-      basicSetup,
-      baseTheme,
-      baseHighlightStyle,
-      ViewPlugin.fromClass(
-        class {
-          update(update: ViewUpdate) {
-            if (update.selectionSet) {
-              const cursorPos = update.state.selection.main.head
-
-              const line = update.state.doc.lineAt(cursorPos)
-
-              cachedCursor.value = {
-                line: line.number - 1,
-                ch: cursorPos - line.from,
-              }
-
-              cursor.value = {
-                line: cachedCursor.value.line,
-                ch: cachedCursor.value.ch,
-              }
-            }
-            if (update.docChanged) {
-              // Expensive on big files ?
-              console.log("doc change")
-              cachedValue.value = update.state.doc
-                .toJSON()
-                .join(update.state.lineBreak)
-              value.value = cachedValue.value
-            }
-          }
-        }
-      ),
-      EditorState.changeFilter.of(() => !options.extendedEditorConfig.readOnly),
-      language.of(
-        getEditorLanguage(
-          options.extendedEditorConfig.mode ?? "",
-          options.linter ?? undefined,
-          options.completer ?? undefined
-        )
-      ),
-      lineWrapping.of(
-        options.extendedEditorConfig.lineWrapping
-          ? [EditorView.lineWrapping]
-          : []
-      ),
-      keymap.of(defaultKeymap),
-    ],
-  })
-
   const view = ref<EditorView>()
 
-  const dispatch = (t: TransactionSpec) =>
-    view.value ? view.value.dispatch(t) : state.update(t)
+  const initView = (el: any) => {
+    view.value = new EditorView({
+      parent: el,
+      state: EditorState.create({
+        doc: value.value,
+        extensions: [
+          basicSetup,
+          baseTheme,
+          baseHighlightStyle,
+          ViewPlugin.fromClass(
+            class {
+              update(update: ViewUpdate) {
+                if (update.selectionSet) {
+                  const cursorPos = update.state.selection.main.head
+
+                  const line = update.state.doc.lineAt(cursorPos)
+
+                  cachedCursor.value = {
+                    line: line.number - 1,
+                    ch: cursorPos - line.from,
+                  }
+
+                  cursor.value = {
+                    line: cachedCursor.value.line,
+                    ch: cachedCursor.value.ch,
+                  }
+                }
+                if (update.docChanged) {
+                  // Expensive on big files ?
+                  console.log("doc change")
+                  cachedValue.value = update.state.doc
+                    .toJSON()
+                    .join(update.state.lineBreak)
+                  value.value = cachedValue.value
+                }
+              }
+            }
+          ),
+          EditorState.changeFilter.of(
+            () => !options.extendedEditorConfig.readOnly
+          ),
+          language.of(
+            getEditorLanguage(
+              options.extendedEditorConfig.mode ?? "",
+              options.linter ?? undefined,
+              options.completer ?? undefined
+            )
+          ),
+          lineWrapping.of(
+            options.extendedEditorConfig.lineWrapping
+              ? [EditorView.lineWrapping]
+              : []
+          ),
+          keymap.of(defaultKeymap),
+        ],
+      }),
+    })
+  }
 
   onMounted(() => {
-    view.value = new EditorView({
-      state,
-      parent: el.value,
-    })
+    if (el.value) {
+      if (!view.value) initView(el.value)
+    }
+  })
+
+  watch(el, () => {
+    if (el.value) {
+      if (!view.value) initView(el.value)
+    } else {
+      view.value?.destroy()
+      view.value = undefined
+    }
   })
 
   onBeforeUnmount(() => {
-    if (view.value) view.value.destroy()
+    view.value?.destroy()
   })
 
-  watch(cursor, (newPos) => {
-    if (
-      cachedCursor.value.line !== newPos.line ||
-      cachedCursor.value.ch !== newPos.ch
-    ) {
-      const line = state.doc.line(newPos.line + 1)
-      const selUpdate = EditorSelection.cursor(line.from + newPos.ch - 1)
-
-      view.value?.focus()
-
-      dispatch({
-        scrollIntoView: true,
-        selection: selUpdate,
-        effects: EditorView.scrollTo.of(selUpdate),
+  watch(value, (newVal) => {
+    if (cachedValue.value !== newVal) {
+      view.value?.dispatch({
+        changes: {
+          from: 0,
+          to: view.value.state.doc.length,
+          insert: newVal,
+        },
       })
     }
   })
 
-  watch(
-    () => options.extendedEditorConfig.lineWrapping,
-    (newMode) => {
-      dispatch({
-        effects: lineWrapping.reconfigure(
-          newMode ? [EditorView.lineWrapping] : []
-        ),
-      })
-    }
-  )
-
   watch(
     () => [
       options.extendedEditorConfig.mode,
@@ -246,7 +246,7 @@ export function useCodemirror(
       options.completer,
     ],
     () => {
-      dispatch({
+      view.value?.dispatch({
         effects: language.reconfigure(
           getEditorLanguage(
             (options.extendedEditorConfig.mode as any) ?? "",
@@ -258,29 +258,34 @@ export function useCodemirror(
     }
   )
 
-  watch(el, (newEl) => {
+  watch(
+    () => options.extendedEditorConfig.lineWrapping,
+    (newMode) => {
+      view.value?.dispatch({
+        effects: lineWrapping.reconfigure(
+          newMode ? [EditorView.lineWrapping] : []
+        ),
+      })
+    }
+  )
+
+  watch(cursor, (newPos) => {
     if (view.value) {
-      view.value.destroy()
-      view.value = undefined
-    }
+      if (
+        cachedCursor.value.line !== newPos.line ||
+        cachedCursor.value.ch !== newPos.ch
+      ) {
+        const line = view.value.state.doc.line(newPos.line + 1)
+        const selUpdate = EditorSelection.cursor(line.from + newPos.ch - 1)
 
-    if (newEl) {
-      view.value = new EditorView({
-        state,
-        parent: newEl,
-      })
-    }
-  })
+        view.value?.focus()
 
-  watch(value, (newVal) => {
-    if (cachedValue.value !== newVal) {
-      dispatch({
-        changes: {
-          from: 0,
-          to: state.doc.length,
-          insert: newVal,
-        },
-      })
+        view.value.dispatch({
+          scrollIntoView: true,
+          selection: selUpdate,
+          effects: EditorView.scrollTo.of(selUpdate),
+        })
+      }
     }
   })
 

From e88c40db0a0c8791feab91f5cb60422b33c90781 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 13 Nov 2021 20:14:58 +0530
Subject: [PATCH 19/23] feat: graphql language improvements

---
 packages/codemirror-lang-graphql/src/index.js    | 16 ++++++++++++----
 .../codemirror-lang-graphql/src/syntax.grammar   | 10 +++++++---
 .../hoppscotch-app/helpers/editor/codemirror.ts  | 15 ++++++++++++---
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/codemirror-lang-graphql/src/index.js b/packages/codemirror-lang-graphql/src/index.js
index f889a9b67..49af63dfc 100644
--- a/packages/codemirror-lang-graphql/src/index.js
+++ b/packages/codemirror-lang-graphql/src/index.js
@@ -1,18 +1,26 @@
 import {parser} from "./syntax.grammar"
-import {LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent} from "@codemirror/language"
+import {LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside,  delimitedIndent} from "@codemirror/language"
 import {styleTags, tags as t} from "@codemirror/highlight"
 
 export const GQLLanguage = LRLanguage.define({
   parser: parser.configure({
     props: [
       indentNodeProp.add({
-        Application: delimitedIndent({closing: ")", align: false})
+        "SelectionSet FieldsDefinition ObjectValue SchemaDefinition RootTypeDef": delimitedIndent({ closing: "}", align: true }),
       }),
       foldNodeProp.add({
-        Application: foldInside
+        Application: foldInside,
+        "SelectionSet FieldsDefinition ObjectValue RootOperationTypeDefinition RootTypeDef": (node) => {
+          return {
+            from: node.from,
+            to: node.to
+          }
+
+        }
       }),
       styleTags({
-        Name: t.propertyName,
+        Name: t.definition(t.variableName),
+        "OperationDefinition/Name": t.definition(t.function(t.variableName)),
         OperationType: t.keyword,
         BooleanValue: t.bool,
         StringValue: t.string,
diff --git a/packages/codemirror-lang-graphql/src/syntax.grammar b/packages/codemirror-lang-graphql/src/syntax.grammar
index 6417271f0..dd3f27346 100644
--- a/packages/codemirror-lang-graphql/src/syntax.grammar
+++ b/packages/codemirror-lang-graphql/src/syntax.grammar
@@ -34,11 +34,15 @@ TypeSystemExtension {
 }
 
 SchemaDefinition {
-  Description? @specialize<Name, "schema"> Directives? "{" RootOperationTypeDefinition+ "}"
+  Description? @specialize<Name, "schema"> Directives? RootTypeDef
+}
+
+RootTypeDef {
+  "{" RootOperationTypeDefinition+ "}"
 }
 
 SchemaExtension {
-  @specialize<Name, "extend"> @specialize<Name, "schema"> Directives? "{" RootOperationTypeDefinition "}"
+  @specialize<Name, "extend"> @specialize<Name, "schema"> Directives? RootTypeDef
 }
 
 TypeExtension {
@@ -172,7 +176,7 @@ VariableDefinition {
 }
 
 SelectionSet {
-  "{" Selection+ "}"
+  "{" Selection* "}"
 }
 
 Selection {
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 9804f2b69..000d107af 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -48,10 +48,19 @@ const hoppCompleterExt = (completer: Completer): Extension => {
         // Expensive operation! Disable on bigger files ?
         const text = context.state.doc.toJSON().join(context.state.lineBreak)
 
-        const line = context.state.doc.lineAt(context.pos).from
-        const ch = context.pos - line
+        const line = context.state.doc.lineAt(context.pos)
+        const lineStart = line.from
+        const lineNo = line.number - 1
+        const ch = context.pos - lineStart
 
-        const result = await completer(text, { line, ch })
+        // Only do trigger on type when typing a word token, else stop (unless explicit)
+        if (!context.matchBefore(/\w+/) && !context.explicit)
+          return {
+            from: context.pos,
+            options: [],
+          }
+
+        const result = await completer(text, { line: lineNo, ch })
 
         // Use more completion features ?
         const completions =

From 1d99b7992644c9ca8dd38c3dd49bad1216aada37 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 15 Nov 2021 07:49:07 +0530
Subject: [PATCH 20/23] feat: style autocomplete tooltips in codemirror

---
 .../helpers/editor/themes/baseTheme.ts        | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index a52fa1f57..5ac29ed8a 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -52,6 +52,8 @@ export const baseTheme = EditorView.theme({
   ".cm-textfield": {
     backgroundColor: "var(--primary-dark-color)",
     color: "var(--secondary-light-color)",
+    borderColor: "var(--divider-light-color)",
+    borderRadius: "3px",
   },
   ".cm-button": {
     backgroundColor: "var(--primary-dark-color)",
@@ -59,6 +61,25 @@ export const baseTheme = EditorView.theme({
     backgroundImage: "none",
     border: "none",
   },
+  ".cm-tooltip": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+    border: "none",
+    borderRadius: "3px",
+  },
+  ".cm-completionLabel": {
+    color: "var(--secondary-color)",
+  },
+  ".cm-tooltip-autocomplete ul": {
+    fontFamily: "var(--font-mono)",
+  },
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {
+    backgroundColor: "var(--accent-dark-color)",
+    color: "var(--accent-contrast-color)",
+  },
+  ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": {
+    color: "var(--accent-contrast-color)",
+  },
   ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
   ".cm-searchMatch": {
     outline: "1px solid var(--accent-dark-color)",

From 7e9fc486f2e56c45c78b062517b7ba039ca7e93d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 15 Nov 2021 16:22:54 +0530
Subject: [PATCH 21/23] feat: placeholder implementation

---
 .../helpers/editor/codemirror.ts              | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 000d107af..add34f912 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -1,4 +1,10 @@
-import { keymap, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import {
+  keymap,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  placeholder,
+} from "@codemirror/view"
 import {
   Extension,
   EditorState,
@@ -144,6 +150,7 @@ export function useCodemirror(
 ): { cursor: Ref<{ line: number; ch: number }> } {
   const language = new Compartment()
   const lineWrapping = new Compartment()
+  const placeholderConfig = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -199,6 +206,9 @@ export function useCodemirror(
           EditorState.changeFilter.of(
             () => !options.extendedEditorConfig.readOnly
           ),
+          placeholderConfig.of(
+            placeholder(options.extendedEditorConfig.placeholder ?? "")
+          ),
           language.of(
             getEditorLanguage(
               options.extendedEditorConfig.mode ?? "",
@@ -278,6 +288,15 @@ export function useCodemirror(
     }
   )
 
+  watch(
+    () => options.extendedEditorConfig.placeholder,
+    (newValue) => {
+      view.value?.dispatch({
+        effects: placeholderConfig.reconfigure(placeholder(newValue ?? "")),
+      })
+    }
+  )
+
   watch(cursor, (newPos) => {
     if (view.value) {
       if (

From 2bee4342b852b426cdeef913def109538eefda52 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 15 Nov 2021 16:25:56 +0530
Subject: [PATCH 22/23] chore: cleanup

---
 packages/hoppscotch-app/assets/scss/styles.scss     |  2 +-
 .../hoppscotch-app/helpers/editor/codemirror.ts     |  1 -
 .../helpers/editor/themes/baseTheme.ts              | 13 ++++++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 7dcacc465..ad49cfdef 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -288,7 +288,7 @@ pre.ace_editor {
   }
 }
 
-input[type="checkbox"] {
+input[type="checkbox"].checkbox {
   @apply hidden;
 
   &,
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index add34f912..dce9998c4 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -194,7 +194,6 @@ export function useCodemirror(
                 }
                 if (update.docChanged) {
                   // Expensive on big files ?
-                  console.log("doc change")
                   cachedValue.value = update.state.doc
                     .toJSON()
                     .join(update.state.lineBreak)
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 5ac29ed8a..4faa622b5 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -49,6 +49,17 @@ export const baseTheme = EditorView.theme({
   ".cm-panels.cm-panels-bottom": {
     borderTop: "1px solid var(--divider-light-color)",
   },
+  ".cm-search": {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    flexShrink: 0,
+    overflow: "auto",
+  },
+  ".cm-search label": {
+    display: "inline-flex",
+    alignItems: "center",
+  },
   ".cm-textfield": {
     backgroundColor: "var(--primary-dark-color)",
     color: "var(--secondary-light-color)",
@@ -70,7 +81,7 @@ export const baseTheme = EditorView.theme({
   ".cm-completionLabel": {
     color: "var(--secondary-color)",
   },
-  ".cm-tooltip-autocomplete ul": {
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
     fontFamily: "var(--font-mono)",
   },
   ".cm-tooltip-autocomplete ul li[aria-selected]": {

From feb1991da360587a4cb97b615be9ff5c43c47b00 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 15 Nov 2021 16:43:10 +0530
Subject: [PATCH 23/23] fix: error on updating readonly editor

---
 packages/hoppscotch-app/helpers/editor/codemirror.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index dce9998c4..381668559 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -197,7 +197,8 @@ export function useCodemirror(
                   cachedValue.value = update.state.doc
                     .toJSON()
                     .join(update.state.lineBreak)
-                  value.value = cachedValue.value
+                  if (!options.extendedEditorConfig.readOnly)
+                    value.value = cachedValue.value
                 }
               }
             }
@@ -248,6 +249,7 @@ export function useCodemirror(
   watch(value, (newVal) => {
     if (cachedValue.value !== newVal) {
       view.value?.dispatch({
+        filter: false,
         changes: {
           from: 0,
           to: view.value.state.doc.length,