diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 29346e77c..18b3f15ed 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -30,7 +30,6 @@ "sass-loader": "^13.0.2", "screenfull": "^6.0.2", "unplugin-vue-define-options": "^0.7.3", - "vite-plugin-monaco-editor": "^1.1.0", "vue": "^3.2.25", "vue-clipboard3": "^2.0.0", "vue-codemirror": "^6.1.1", @@ -10274,14 +10273,6 @@ "entities": "^2.0.0" } }, - "node_modules/vite-plugin-monaco-editor": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz", - "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==", - "peerDependencies": { - "monaco-editor": ">=0.33.0" - } - }, "node_modules/vite-plugin-vue-setup-extend": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz", @@ -18367,12 +18358,6 @@ } } }, - "vite-plugin-monaco-editor": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz", - "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==", - "requires": {} - }, "vite-plugin-vue-setup-extend": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 14e0c9bd6..468984b6f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -42,7 +42,6 @@ "sass-loader": "^13.0.2", "screenfull": "^6.0.2", "unplugin-vue-define-options": "^0.7.3", - "vite-plugin-monaco-editor": "^1.1.0", "vue": "^3.2.25", "vue-clipboard3": "^2.0.0", "vue-codemirror": "^6.1.1", diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue index 9a67b1090..94d237aff 100644 --- a/frontend/src/views/host/file-management/code-editor/index.vue +++ b/frontend/src/views/host/file-management/code-editor/index.vue @@ -9,12 +9,12 @@ > - + - + @@ -36,11 +36,34 @@ import { SaveFileContent } from '@/api/modules/files'; import i18n from '@/lang'; import { MsgSuccess } from '@/utils/message'; import * as monaco from 'monaco-editor'; -import { reactive, ref } from 'vue'; +import { nextTick, onBeforeUnmount, reactive, ref } from 'vue'; import { Languages } from '@/global/mimetype'; +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'; +import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; let editor: monaco.editor.IStandaloneCodeEditor | undefined; +self.MonacoEnvironment = { + getWorker(workerId, label) { + 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 (['typescript', 'javascript'].includes(label)) { + return new tsWorker(); + } + return new EditorWorker(); + }, +}; + interface EditProps { language: string; content: string; @@ -90,29 +113,39 @@ const handleClose = () => { } em('close', false); }; +const changeLanguage = () => { + monaco.editor.setModelLanguage(editor.getModel(), config.language); +}; + +const changeTheme = () => { + monaco.editor.setTheme(config.theme); +}; const initEditor = () => { if (editor) { editor.dispose(); } - const codeBox = document.getElementById('codeBox'); - editor = monaco.editor.create(codeBox as HTMLElement, { - theme: config.theme, - value: form.value.content, - readOnly: false, - automaticLayout: true, - language: config.language, - folding: true, - roundedSelection: false, + nextTick(() => { + const codeBox = document.getElementById('codeBox'); + editor = monaco.editor.create(codeBox as HTMLElement, { + theme: config.theme, + value: form.value.content, + readOnly: false, + automaticLayout: true, + language: config.language, + folding: true, + roundedSelection: false, + overviewRulerBorder: false, + }); + + editor.onDidChangeModelContent(() => { + if (editor) { + form.value.content = editor.getValue(); + } + }); + + editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave); }); - - editor.onDidChangeModelContent(() => { - if (editor) { - form.value.content = editor.getValue(); - } - }); - - editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave); }; const quickSave = () => { @@ -139,6 +172,12 @@ const onOpen = () => { initEditor(); }; +onBeforeUnmount(() => { + if (editor) { + editor.dispose(); + } +}); + defineExpose({ acceptParams }); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index a44b9a548..410986c11 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -8,12 +8,13 @@ import VueSetupExtend from 'vite-plugin-vue-setup-extend'; import eslintPlugin from 'vite-plugin-eslint'; import vueJsx from '@vitejs/plugin-vue-jsx'; import DefineOptions from 'unplugin-vue-define-options/vite'; -import MonacoEditorPlugin from 'vite-plugin-monaco-editor'; import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; +const prefix = `monaco-editor/esm/vs`; + export default defineConfig(({ mode }: ConfigEnv): UserConfig => { const env = loadEnv(mode, process.cwd()); const viteEnv = wrapperEnv(env); @@ -50,8 +51,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { }), vueJsx(), VueSetupExtend(), - - MonacoEditorPlugin({}), viteEnv.VITE_REPORT && visualizer(), viteEnv.VITE_BUILD_GZIP && viteCompression({ @@ -87,6 +86,13 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', + manualChunks: { + jsonWorker: [`${prefix}/language/json/json.worker`], + cssWorker: [`${prefix}/language/css/css.worker`], + htmlWorker: [`${prefix}/language/html/html.worker`], + tsWorker: [`${prefix}/language/typescript/ts.worker`], + editorWorker: [`${prefix}/editor/editor.worker`], + }, }, }, },