feat(editor): add customizable actions to Monaco editor components

packages/ui/src/components/MonacoEditor.vue

@@ -12,19 +12,21 @@ 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: () => [],
   },
 )
 
 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) => {

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>

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>