refactor: merge branch 'main' into refactor/monorepo

packages/hoppscotch-app/components/http/CodegenModal.vue

@@ -38,31 +38,25 @@
             {{ t("request.generated_code") }}
           </label>
         </div>
-        <SmartAceEditor
+        <div
           v-if="codegenType"
           ref="generatedCode"
-          :value="requestCode"
-          :lang="codegens.find((x) => x.id === codegenType).language"
-          :options="{
-            maxLines: 16,
-            minLines: 8,
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
-          }"
-          styles="border rounded border-dividerLight"
-        />
+          class="border border-dividerLight rounded"
+        ></div>
       </div>
     </template>
     <template #footer>
-      <ButtonPrimary
-        ref="copyRequestCode"
-        :label="t('action.copy')"
-        :svg="copyIcon"
-        @click.native="copyRequestCode"
-      />
-      <ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
+      <span class="flex">
+        <ButtonPrimary
+          :label="t('action.copy').toString()"
+          :svg="copyIcon"
+          @click.native="copyRequestCode"
+        />
+        <ButtonSecondary
+          :label="t('action.dismiss').toString()"
+          @click.native="hideModal"
+        />
+      </span>
     </template>
   </SmartModal>
 </template>
@@ -70,6 +64,7 @@
 <script setup lang="ts">
 import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
 import { getCurrentEnvironment } from "~/newstore/environments"
@@ -106,6 +101,17 @@ const requestCode = computed(() => {
     .generator(generateCodegenContext(effectiveRequest))
 })
 
+const generatedCode = ref<any | null>(null)
+
+useCodemirror(generatedCode, requestCode, {
+  extendedEditorConfig: {
+    mode: "text/plain",
+    readOnly: true,
+  },
+  linter: null,
+  completer: null,
+})
+
 watch(
   () => props.show,
   (goingToShow) => {