From 6a5fe679be81b06cdd4c3f1b0e844001a910086c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 6 Jul 2022 14:40:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E4=B8=8D=E8=83=BD=E6=AD=A3=E5=B8=B8=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?worker=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/MonacoEditor/EditorWorker.vue       | 20 ++++++++++++++++
 .../Pages/MonacoEditor/index.hook.ts          | 24 -------------------
 src/components/Pages/MonacoEditor/index.ts    |  3 ++-
 src/components/Pages/MonacoEditor/index.vue   |  4 +++-
 4 files changed, 25 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Pages/MonacoEditor/EditorWorker.vue

diff --git a/src/components/Pages/MonacoEditor/EditorWorker.vue b/src/components/Pages/MonacoEditor/EditorWorker.vue
new file mode 100644
index 00000000..5e2a6350
--- /dev/null
+++ b/src/components/Pages/MonacoEditor/EditorWorker.vue
@@ -0,0 +1,20 @@
+<template></template>
+
+<script setup>
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+self.MonacoEnvironment = {
+  getWorker(workerId, label) {
+    if (label === 'json') {
+      return new jsonWorker()
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker()
+    }
+    return new editorWorker()
+  }
+}
+</script>
diff --git a/src/components/Pages/MonacoEditor/index.hook.ts b/src/components/Pages/MonacoEditor/index.hook.ts
index e6f808e3..ddd3512e 100644
--- a/src/components/Pages/MonacoEditor/index.hook.ts
+++ b/src/components/Pages/MonacoEditor/index.hook.ts
@@ -1,34 +1,10 @@
 import { ref, onBeforeUnmount, nextTick } from 'vue'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 
 export const useMonacoEditor = (language = 'javascript') => {
   let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
   let initReadOnly = false
   const el = ref<HTMLElement | null>(null)
-  
-  // @ts-ignore
-  self.MonacoEnvironment = {
-    getWorker(_: any, label: string) {
-      if (label === 'json') {
-        return new jsonWorker()
-      }
-      // if (label === 'css' || label === 'scss' || label === 'less') {
-      //   return new cssWorker()
-      // }
-      // if (label === 'html' || label === 'handlebars' || label === 'razor') {
-      //   return new htmlWorker()
-      // }
-      if (label === 'typescript' || label === 'javascript') {
-        return new tsWorker()
-      }
-      return new editorWorker()
-    }
-  }
 
   // 格式化
   const onFormatDoc = async () => {
diff --git a/src/components/Pages/MonacoEditor/index.ts b/src/components/Pages/MonacoEditor/index.ts
index 12bc7e53..675bfe91 100644
--- a/src/components/Pages/MonacoEditor/index.ts
+++ b/src/components/Pages/MonacoEditor/index.ts
@@ -1,3 +1,4 @@
 import MonacoEditor from './index.vue';
+import EditorWorker from './EditorWorker.vue';
 
-export { MonacoEditor };
+export { MonacoEditor, EditorWorker };
diff --git a/src/components/Pages/MonacoEditor/index.vue b/src/components/Pages/MonacoEditor/index.vue
index c13190ca..81d655e0 100644
--- a/src/components/Pages/MonacoEditor/index.vue
+++ b/src/components/Pages/MonacoEditor/index.vue
@@ -1,10 +1,12 @@
 <template>
   <div ref="el" class="editor-area" :style="{ width, height }"></div>
+  <EditorWorker></EditorWorker>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, watch, PropType } from 'vue'
 import { useMonacoEditor } from './index.hook'
+import { EditorWorker } from './index'
 
 const props = defineProps({
   width: {
@@ -17,7 +19,7 @@ const props = defineProps({
   },
   language: {
     type: String as PropType<string>,
-    default: 'javascript'
+    default: 'typescript'
   },
   preComment: {
     type: String as PropType<string>,