feat: gql revamp (#2644)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/helpers/editor/gql/operation.ts

@@ -0,0 +1,58 @@
+import { EditorState, Range } from "@codemirror/state"
+import { Decoration, ViewPlugin } from "@codemirror/view"
+import { syntaxTree } from "@codemirror/language"
+
+function getOperationDefsPosInEditor(state: EditorState) {
+  const tree = syntaxTree(state)
+
+  const defs: Array<{ from: number; to: number }> = []
+
+  tree.iterate({
+    enter({ name, from, to }) {
+      if (name === "OperationDefinition") {
+        defs.push({ from, to })
+      }
+    },
+  })
+
+  return defs
+}
+
+function generateSelectedOpDecors(state: EditorState) {
+  const selectedPos = state.selection.main.head // Cursor Pos
+
+  const defsPositions = getOperationDefsPosInEditor(state)
+
+  if (defsPositions.length === 1) return Decoration.none
+
+  const decors = defsPositions
+    .map(({ from, to }) => ({
+      selected: selectedPos >= from && selectedPos <= to,
+      from,
+      to,
+    }))
+    .map((info) => ({
+      ...info,
+      decor: Decoration.mark({
+        class: info.selected
+          ? "gql-operation-highlight"
+          : "gql-operation-not-highlight",
+        inclusive: true,
+      }),
+    }))
+    .map(({ from, to, decor }) => <Range<Decoration>>{ from, to, value: decor }) // Convert to Range<Decoration> (Range from "@codemirror/view")
+
+  return Decoration.set(decors)
+}
+
+export const selectedGQLOpHighlight = ViewPlugin.define(
+  (view) => ({
+    decorations: generateSelectedOpDecors(view.state),
+    update(u) {
+      this.decorations = generateSelectedOpDecors(u.state)
+    },
+  }),
+  {
+    decorations: (v) => v.decorations,
+  }
+)