chore: getting monaco editor options from one common place

Author: technikhil314

helpers/utils.ts

@@ -58,3 +58,18 @@ export function putToClipboard(
     theme: 'success',
   })
 }
+
+export function getMonacoEditorDefaultOptions(theme: string) {
+  return {
+    language: 'javascript',
+    theme,
+    fontSize: parseFloat(getComputedStyle(document.documentElement).fontSize),
+    scrollBeyondLastLine: false,
+    scrollBeyondLastColumn: false,
+    minimap: {
+      enabled: false,
+    },
+    wordWrap: 'on',
+    contextmenu: false,
+  }
+}

pages/v2/diff.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import pako from 'pako'
 import Vue from 'vue'
-import { undoUrlSafeBase64 } from '../../helpers/utils'
+import { getMonacoEditorDefaultOptions, undoUrlSafeBase64 } from '../../helpers/utils'
 import DiffActionBar from '~/components/v2/diffActionBar.vue'
 import Navbar from '~/components/v2/navbar.vue'
 import { DiffData } from '~/helpers/types'
@@ -67,24 +67,13 @@ export default Vue.extend({
   mounted() {
     const monacoDiffViewerEl = document.getElementById('monaco-diff-viewer')
     const theme = this.$cookies.isDarkMode ? 'vs-dark' : 'light'
-    const monacoEditorOptions = {
-      language: 'javascript',
-      theme,
-      fontSize: parseFloat(getComputedStyle(document.documentElement).fontSize),
-      readOnly: true,
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: false,
-      minimap: {
-        enabled: false,
-      },
-      wordWrap: 'on',
-      contextmenu: false,
-    }
+    const monacoEditorOptions = getMonacoEditorDefaultOptions(theme);
     if (monacoDiffViewerEl) {
       this.monacoDiffEditor = monaco.editor.createDiffEditor(
         monacoDiffViewerEl,
         {
           ...monacoEditorOptions,
+          readOnly: true
         }
       ) as any
       if (this.monacoDiffEditor) {

pages/v2/index.vue

@@ -68,7 +68,10 @@
 <script lang="ts">
 import Vue from 'vue'
 import pako from 'pako'
-import { doUrlSafeBase64 } from '../../helpers/utils'
+import {
+  doUrlSafeBase64,
+  getMonacoEditorDefaultOptions,
+} from '../../helpers/utils'
 import showTutorials from '../../helpers/driverjsTutorials'
 import Navbar from '~/components/v2/navbar.vue'
 declare namespace monaco {
@@ -106,17 +109,7 @@ export default Vue.extend({
     const lhs = document.getElementById('lhs')
     const rhs = document.getElementById('rhs')
     const theme = this.$cookies.isDarkMode ? 'vs-dark' : 'light'
-    const monacoEditorOptions = {
-      language: 'javascript',
-      theme,
-      fontSize: parseFloat(getComputedStyle(document.documentElement).fontSize),
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: false,
-      minimap: {
-        enabled: false,
-      },
-      wordWrap: 'on',
-    }
+    const monacoEditorOptions = getMonacoEditorDefaultOptions(theme)
     if (lhs) {
       this.lhsEditor = monaco.editor.create(lhs, {
         ...monacoEditorOptions,