38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useEditorStore } from '@/stores/editor'
|
|
import { useSettingsStore } from '@/stores/settings'
|
|
import VisualMarkdownEditor from './VisualMarkdownEditor.vue'
|
|
|
|
const editorStore = useEditorStore()
|
|
const settingsStore = useSettingsStore()
|
|
function updateContent(event: Event) {
|
|
editorStore.updateContent((event.target as HTMLTextAreaElement).value)
|
|
editorStore.scheduleAutoSave(settingsStore.autoSaveInterval)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VisualMarkdownEditor v-if="editorStore.mode === 'wysiwyg'" :key="editorStore.currentFilePath ?? 'empty'"
|
|
:initial-content="editorStore.content" />
|
|
<textarea v-else class="editor-pane source" :value="editorStore.content" :spellcheck="false"
|
|
aria-label="Markdown 源码编辑器" @input="updateContent" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.editor-pane {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
width: 100%;
|
|
resize: none;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: var(--space-xl);
|
|
background: var(--color-background-primary);
|
|
color: var(--color-text-primary);
|
|
font: inherit;
|
|
line-height: 1.7;
|
|
user-select: text;
|
|
}
|
|
.editor-pane.source { font-family: var(--font-editor-mono); font-size: var(--font-editor-size); line-height: var(--font-editor-line-height); }
|
|
</style>
|