perf: add code folding and shortcut for save #97

This commit is contained in:
Lykin 2023-12-08 10:38:08 +08:00
parent 86b3ac0bd4
commit f966fec0a3
3 changed files with 11 additions and 3 deletions

View File

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

View File

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

View File

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