From e6174c3955e82399b96be9e45c885cd3e5e49459 Mon Sep 17 00:00:00 2001
From: Red-Asuka <liyd0623@gmail.com>
Date: Thu, 23 Jan 2025 10:00:31 +0800
Subject: [PATCH] feat(editor): add customizable actions to Monaco editor
 components

---
 packages/ui/src/components/MonacoEditor.vue          |  8 +++++++-
 .../ui/src/components/script/function/Editor.vue     | 12 ++++++++++++
 packages/ui/src/components/script/schema/Editor.vue  | 12 ++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/MonacoEditor.vue b/packages/ui/src/components/MonacoEditor.vue
index 1a41f4052..de6c8cb20 100644
--- a/packages/ui/src/components/MonacoEditor.vue
+++ b/packages/ui/src/components/MonacoEditor.vue
@@ -12,11 +12,13 @@ const props = withDefaults(
     value?: monaco.editor.IStandaloneEditorConstructionOptions['value']
     language?: monaco.editor.IStandaloneEditorConstructionOptions['language']
     options?: Partial<monaco.editor.IStandaloneEditorConstructionOptions>
+    actions?: monaco.editor.IActionDescriptor[]
   }>(),
   {
     value: '',
     language: 'json',
     options: () => ({}),
+    actions: () => [],
   },
 )
 
@@ -24,7 +26,7 @@ const emit = defineEmits<{
   (e: 'update', value: string, event: monaco.editor.IModelContentChangedEvent): void
 }>()
 
-const { value, language, options } = toRefs(props)
+const { value, language, options, actions } = toRefs(props)
 
 const editorRef = ref<HTMLElement | null>(null)
 // The editor cannot use ref, using ref will cause the editor to completely freeze when calling getValue or setValue
@@ -107,6 +109,10 @@ function initMonacoEditor() {
       emit('update', editorValue, event)
     }
   })
+
+  actions.value.forEach((action) => {
+    editor!.addAction(action)
+  })
 }
 
 watch(value, (newValue) => {
diff --git a/packages/ui/src/components/script/function/Editor.vue b/packages/ui/src/components/script/function/Editor.vue
index 4fc0bee6d..44772166f 100644
--- a/packages/ui/src/components/script/function/Editor.vue
+++ b/packages/ui/src/components/script/function/Editor.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ScriptFunction } from 'mqttx'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { useScriptFunctionStore } from '../../../stores'
 
 const modelLang = defineModel<ScriptFunction['lang']>('lang', { default: 'javascript' })
@@ -198,6 +199,16 @@ async function uploadFunction(file: { name: string, content: string }) {
   // Must set functionContent after currentFunction is updated to avoid conflict with the assignment in watch
   functionContent.value = file.content
 }
+
+const editorActions: monaco.editor.IActionDescriptor[] = [
+  {
+    id: 'save',
+    label: t('common.save'),
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+    run: () => handleClickSave(),
+    contextMenuGroupId: 'navigation',
+  },
+]
 </script>
 
 <template>
@@ -263,6 +274,7 @@ async function uploadFunction(file: { name: string, content: string }) {
         :value="functionContent"
         :language="currentLang"
         :options="{ lineNumbers: 'on' }"
+        :actions="editorActions"
         @update="functionContent = $event"
       />
     </section>
diff --git a/packages/ui/src/components/script/schema/Editor.vue b/packages/ui/src/components/script/schema/Editor.vue
index e2b7bef8a..94092ca65 100644
--- a/packages/ui/src/components/script/schema/Editor.vue
+++ b/packages/ui/src/components/script/schema/Editor.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ScriptSchema } from 'mqttx'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { useScriptSchemaStore } from '../../../stores'
 
 const modelCodec = defineModel<ScriptSchema['codec']>('codec', { default: 'protobuf' })
@@ -204,6 +205,16 @@ async function uploadSchema(file: { name: string, content: string }) {
   // Must set schemaContent after currentSchema is updated to avoid conflict with the assignment in watch
   schemaContent.value = file.content
 }
+
+const editorActions: monaco.editor.IActionDescriptor[] = [
+  {
+    id: 'save',
+    label: t('common.save'),
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+    run: () => handleClickSave(),
+    contextMenuGroupId: 'navigation',
+  },
+]
 </script>
 
 <template>
@@ -269,6 +280,7 @@ async function uploadSchema(file: { name: string, content: string }) {
         :value="schemaContent"
         :language="defaultSchema[currentCodec].editorLangugage"
         :options="{ lineNumbers: 'on' }"
+        :actions="editorActions"
         @update="schemaContent = $event"
       />
     </section>