refactor: add option to disable context menu (#3717)

packages/hoppscotch-common/src/components/http/PreRequestScript.vue

@@ -99,6 +99,7 @@ useCodemirror(
     linter,
     completer,
     environmentHighlights: false,
+    contextMenuEnabled: false,
   })
 )
 

packages/hoppscotch-common/src/components/http/Tests.vue

@@ -95,6 +95,7 @@ useCodemirror(
     linter,
     completer,
     environmentHighlights: false,
+    contextMenuEnabled: false,
   })
 )
 

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -79,6 +79,7 @@ const props = withDefaults(
     readonly?: boolean
     autoCompleteSource?: string[]
     inspectionResults?: InspectorResult[] | undefined
+    contextMenuEnabled?: boolean
   }>(),
   {
     modelValue: "",
@@ -91,6 +92,7 @@ const props = withDefaults(
     autoCompleteSource: undefined,
     inspectionResult: undefined,
     inspectionResults: undefined,
+    contextMenuEnabled: true,
   }
 )
 
@@ -359,8 +361,11 @@ const initView = (el: any) => {
     handleTextSelection()
   }, 140)
 
-  el.addEventListener("mouseup", debounceFn)
+  // Only add event listeners if context menu is enabled in the component
-  el.addEventListener("keyup", debounceFn)
+  if (props.contextMenuEnabled) {
+    el.addEventListener("mouseup", debounceFn)
+    el.addEventListener("keyup", debounceFn)
+  }
 
   const extensions: Extension = [
     EditorView.contentAttributes.of({ "aria-label": props.placeholder }),
@@ -396,7 +401,7 @@ const initView = (el: any) => {
         ev.preventDefault()
       },
       scroll(event) {
-        if (event.target) {
+        if (event.target && props.contextMenuEnabled) {
           handleTextSelection()
         }
       },
@@ -405,7 +410,6 @@ const initView = (el: any) => {
       class {
         update(update: ViewUpdate) {
           if (props.readonly) return
-
           if (update.docChanged) {
             const prevValue = clone(cachedValue.value)
 
@@ -436,6 +440,17 @@ const initView = (el: any) => {
               clipboardEv = null
               pastedValue = null
             }
+
+            if (props.contextMenuEnabled) {
+              // close the context menu if text is being updated in the editor
+              invokeAction("contextmenu.open", {
+                position: {
+                  top: 0,
+                  left: 0,
+                },
+                text: null,
+              })
+            }
           }
         }
       }

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -63,6 +63,8 @@ type CodeMirrorOptions = {
 
   additionalExts?: Extension[]
 
+  contextMenuEnabled?: boolean
+
   // callback on editor update
   onUpdate?: (view: ViewUpdate) => void
 }
@@ -208,6 +210,9 @@ export function useCodemirror(
 ): { cursor: Ref<{ line: number; ch: number }> } {
   const { subscribeToStream } = useStreamSubscriber()
 
+  // Set default value for contextMenuEnabled if not provided
+  options.contextMenuEnabled = options.contextMenuEnabled ?? true
+
   const additionalExts = new Compartment()
   const language = new Compartment()
   const lineWrapping = new Compartment()
@@ -272,8 +277,11 @@ export function useCodemirror(
               handleTextSelection()
             }, 140)
 
-            el.addEventListener("mouseup", debounceFn)
+            // Only add event listeners if context menu is enabled in the editor
-            el.addEventListener("keyup", debounceFn)
+            if (options.contextMenuEnabled) {
+              el.addEventListener("mouseup", debounceFn)
+              el.addEventListener("keyup", debounceFn)
+            }
 
             if (options.onUpdate) {
               options.onUpdate(update)
@@ -312,7 +320,7 @@ export function useCodemirror(
       ),
       EditorView.domEventHandlers({
         scroll(event) {
-          if (event.target) {
+          if (event.target && options.contextMenuEnabled) {
             handleTextSelection()
           }
         },