perf: add code folding and shortcut for save #97

frontend/src/components/content_value/ContentEditor.vue

@@ -28,7 +28,7 @@ const props = defineProps({
     },
 })
 
-const emit = defineEmits(['reset', 'input'])
+const emit = defineEmits(['reset', 'input', 'save'])
 
 const themeVars = useThemeVars()
 /** @type {HTMLElement|null} */
@@ -65,6 +65,7 @@ onMounted(async () => {
             accessibilitySupport: 'off',
             wordWrap: 'on',
             tabSize: 2,
+            folding: true,
             fontFamily,
             fontSize,
             scrollBeyondLastLine: false,
@@ -84,6 +85,11 @@ onMounted(async () => {
             renderLineHighlight: 'gutter',
         })
 
+        // add shortcut for save
+        editorNode.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, (event) => {
+            emit('save')
+        })
+
         // editorNode.onDidChangeModelLanguageConfiguration(() => {
         //     editorNode?.getAction('editor.action.formatDocument')?.run()
         // })

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -181,7 +181,8 @@ const onSave = () => {
                         class="flex-item-expand"
                         style="height: 100%"
                         @input="onInput"
-                        @reset="onInput" />
+                        @reset="onInput"
+                        @save="onSave" />
                     <format-selector
                         :decode="viewAs.decode"
                         :format="viewAs.format"

frontend/src/components/content_value/ContentValueString.vue

@@ -214,7 +214,8 @@ defineExpose({
                 class="flex-item-expand"
                 style="height: 100%"
                 @input="onInput"
-                @reset="onInput" />
+                @reset="onInput"
+                @save="onSave" />
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.length') }}: {{ props.length }}</n-text>