feat(editor): 源代码编辑器支持扩展配置

This commit is contained in:
roymondchen 2022-05-24 19:12:14 +08:00 committed by jia000
parent 64e751bdd8
commit 359fc5fdc6
3 changed files with 20 additions and 6 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<framework> <framework :code-options="codeOptions">
<template #nav> <template #nav>
<slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot> <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
</template> </template>
@ -136,6 +136,11 @@ export default defineComponent({
stageRect: { stageRect: {
type: [String, Object] as PropType<StageRect>, type: [String, Object] as PropType<StageRect>,
}, },
codeOptions: {
type: Object,
default: () => ({}),
},
}, },
emits: ['props-panel-mounted', 'update:modelValue'], emits: ['props-panel-mounted', 'update:modelValue'],

View File

@ -94,11 +94,7 @@ export default defineComponent({
const options = { const options = {
value: values.value, value: values.value,
language: props.language, language: props.language,
tabSize: 2,
theme: 'vs-dark', theme: 'vs-dark',
fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
fontSize: 14,
formatOnPaste: true,
...props.options, ...props.options,
}; };

View File

@ -2,7 +2,13 @@
<div class="m-editor"> <div class="m-editor">
<slot name="nav" class="m-editor-nav-menu"></slot> <slot name="nav" class="m-editor-nav-menu"></slot>
<magic-code-editor v-if="showSrc" class="m-editor-content" :init-values="root" @save="saveCode"></magic-code-editor> <magic-code-editor
v-if="showSrc"
class="m-editor-content"
:init-values="root"
:options="codeOptions"
@save="saveCode"
></magic-code-editor>
<div class="m-editor-content" v-else> <div class="m-editor-content" v-else>
<div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`"> <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
@ -48,6 +54,13 @@ export default defineComponent({
Resizer, Resizer,
}, },
props: {
codeOptions: {
type: Object,
default: () => ({}),
},
},
setup() { setup() {
const { editorService, uiService } = inject<Services>('services') || {}; const { editorService, uiService } = inject<Services>('services') || {};