From 9f08051ec164bbd50f0b70691a2cb8390d3b8bb6 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Mon, 29 Apr 2024 17:11:42 +0800
Subject: [PATCH] monaco i18n (#433)

* monaco i18n

* refactor: rename & reload on locale change
---
 spx-gui/package-lock.json                     | 17 +++++++
 spx-gui/package.json                          |  1 +
 .../code-text-editor/CodeTextEditor.vue       | 49 +++++++++++++------
 .../code-text-editor/initialization.ts        | 28 ++++-------
 spx-gui/src/components/top-nav/TopNav.vue     |  2 +
 5 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 71c95502a..b6ecc5ecf 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -8,6 +8,7 @@
       "name": "spx-gui",
       "version": "0.0.0",
       "dependencies": {
+        "@monaco-editor/loader": "^1.4.0",
         "dayjs": "^1.11.10",
         "file-saver": "^2.0.5",
         "js-pkce": "^1.4.0",
@@ -1458,6 +1459,17 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
       "dev": true
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -8352,6 +8364,11 @@
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/std-env": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index c8aa71bed..108eeb5c9 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -13,6 +13,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@monaco-editor/loader": "^1.4.0",
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
     "js-pkce": "^1.4.0",
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue b/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue
index d6baf4f16..474037ce2 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue
@@ -3,10 +3,13 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, onMounted, ref, shallowRef, watch } from 'vue'
-import * as monaco from 'monaco-editor'
+import { ref, shallowRef, watch, watchEffect } from 'vue'
 import { formatSpxCode as onlineFormatSpxCode } from '@/apis/util'
-import { useMonacoInitialization, defaultThemeName } from './initialization'
+import { initMonaco, defaultThemeName } from './initialization'
+import loader from '@monaco-editor/loader'
+import { KeyCode, languages, type editor, Position, MarkerSeverity, KeyMod } from 'monaco-editor'
+import { useUIVariables } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
 
 const props = defineProps<{
   value: string
@@ -16,12 +19,25 @@ const emit = defineEmits<{
 }>()
 
 const editorElement = ref<HTMLElement | null>(null)
-const monacoEditor = shallowRef<monaco.editor.IStandaloneCodeEditor | null>(null)
 
-useMonacoInitialization()
+const monaco = shallowRef<typeof import('monaco-editor')>()
+const monacoEditor = shallowRef<editor.IStandaloneCodeEditor>()
 
-onMounted(() => {
-  const editor = monaco.editor.create(editorElement.value!, {
+const uiVariables = useUIVariables()
+const { t, lang } = useI18n()
+
+loader.config({
+  'vs/nls': {
+    availableLanguages: {
+      '*': lang.value === 'zh' ? 'zh-cn' : 'en'
+    }
+  }
+})
+
+watchEffect(async (onClenaup) => {
+  const monaco_ = await loader.init()
+  initMonaco(monaco_, uiVariables)
+  const editor = monaco_.editor.create(editorElement.value!, {
     value: props.value, // set the initial value of the editor
     theme: defaultThemeName,
     language: 'spx', // define the language mode
@@ -56,8 +72,8 @@ onMounted(() => {
 
   editor.addAction({
     id: 'format',
-    label: 'Format Code',
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL],
+    label: t({ zh: '格式化', en: 'Format Code' }),
+    keybindings: [KeyMod.CtrlCmd | KeyCode.KeyL],
     contextMenuGroupId: 'navigation',
     run: format
   })
@@ -66,17 +82,18 @@ onMounted(() => {
     emit('update:value', editor.getValue())
   })
 
+  monaco.value = monaco_
   monacoEditor.value = editor
-})
 
-onUnmounted(() => {
-  monacoEditor.value?.dispose()
+  onClenaup(() => {
+    editor.dispose()
+  })
 })
 
 watch(
   () => props.value,
   (val) => {
-    if (monacoEditor.value) {
+    if (monaco.value && monacoEditor.value) {
       const editorValue = monacoEditor.value.getValue()
       if (val !== editorValue) {
         monacoEditor.value.setValue(val)
@@ -85,7 +102,7 @@ watch(
   }
 )
 
-function insertSnippet(snippet: monaco.languages.CompletionItem, position?: monaco.Position) {
+function insertSnippet(snippet: languages.CompletionItem, position?: Position) {
   const editor = monacoEditor.value
   if (editor == null) return
 
@@ -105,10 +122,10 @@ async function format() {
   if (res.Body) {
     editor.setValue(res.Body)
   } else {
-    monaco.editor.setModelMarkers(editor.getModel()!, 'owner', [
+    monaco.value?.editor.setModelMarkers(editor.getModel()!, 'owner', [
       {
         message: res.Error.Msg,
-        severity: monaco.MarkerSeverity.Warning,
+        severity: MarkerSeverity.Warning,
         startLineNumber: res.Error.Line,
         startColumn: res.Error.Column,
         endLineNumber: res.Error.Column,
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/initialization.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/initialization.ts
index 8e699704e..d87736993 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/initialization.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/initialization.ts
@@ -1,15 +1,15 @@
-import { onMounted } from 'vue'
-import * as monaco from 'monaco-editor'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import { keywords, brackets, typeKeywords, operators } from '@/utils/spx'
 import type { FormatResponse } from '@/apis/util'
 import formatWasm from '@/assets/format.wasm?url'
 import { allSnippets } from './snippets'
 import { useUIVariables } from '@/components/ui'
+import type { IRange, languages } from 'monaco-editor'
 
 function completionItem(
-  range: monaco.IRange | monaco.languages.CompletionItemRanges
-): monaco.languages.CompletionItem[] {
+  range: IRange | languages.CompletionItemRanges,
+  monaco: typeof import('monaco-editor')
+): languages.CompletionItem[] {
   return [
     ...keywords.map((keyword) => ({
       label: keyword,
@@ -47,7 +47,10 @@ async function initFormatWasm() {
 export const defaultThemeName = 'spx-default-theme'
 
 /** Global initializations for monaco editor */
-function init({ color }: ReturnType<typeof useUIVariables>) {
+export function initMonaco(
+  monaco: typeof import('monaco-editor'),
+  { color }: ReturnType<typeof useUIVariables>
+) {
   self.MonacoEnvironment = {
     getWorker() {
       return new EditorWorker()
@@ -216,7 +219,7 @@ function init({ color }: ReturnType<typeof useUIVariables>) {
         startColumn: word.startColumn,
         endColumn: word.endColumn
       }
-      const suggestions: monaco.languages.CompletionItem[] = completionItem(range)
+      const suggestions: languages.CompletionItem[] = completionItem(range, monaco)
       return { suggestions }
     }
   })
@@ -224,16 +227,3 @@ function init({ color }: ReturnType<typeof useUIVariables>) {
   // tempararily disable in-browser format
   // initFormat()
 }
-
-let inited = false
-
-/** Ensure global initializations for monaco editor */
-export function useMonacoInitialization() {
-  const uiVariables = useUIVariables()
-
-  onMounted(() => {
-    if (inited) return
-    init(uiVariables)
-    inited = true
-  })
-}
diff --git a/spx-gui/src/components/top-nav/TopNav.vue b/spx-gui/src/components/top-nav/TopNav.vue
index 3bdb65d2c..009139d59 100644
--- a/spx-gui/src/components/top-nav/TopNav.vue
+++ b/spx-gui/src/components/top-nav/TopNav.vue
@@ -196,6 +196,8 @@ const langContent = computed(() => (i18n.lang.value === 'en' ? enSvg : zhSvg))
 
 function toggleLang() {
   i18n.setLang(i18n.lang.value === 'en' ? 'zh' : 'en')
+  // Refresh the page to apply the new language for monaco editor
+  location.reload()
 }
 
 const handleSave = useMessageHandle(