102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { gql } from '@/lib/gql'
|
|
import VisualEditor from '@/components/editor/VisualEditor.vue'
|
|
import SourceEditor from '@/components/editor/SourceEditor.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const slug = computed(() => route.params.slug as string)
|
|
|
|
const docPath = ref('')
|
|
const content = ref('')
|
|
const editorMode = ref<'visual' | 'source'>('visual')
|
|
const loading = ref(true)
|
|
const saving = ref(false)
|
|
const commitMsg = ref('Update document')
|
|
|
|
onMounted(async () => {
|
|
if (slug.value === 'new') {
|
|
loading.value = false
|
|
commitMsg.value = 'Initial commit'
|
|
return
|
|
}
|
|
|
|
docPath.value = slug.value
|
|
try {
|
|
const data = await gql<{ document: { content: string } }>(
|
|
`query Doc($s: String!) { document(slug: $s) { content } }`,
|
|
{ s: slug.value },
|
|
)
|
|
content.value = data.document?.content ?? ''
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
async function save() {
|
|
const targetSlug = slug.value === 'new' ? docPath.value : slug.value
|
|
if (!targetSlug) {
|
|
alert('Please enter a document name.')
|
|
return
|
|
}
|
|
|
|
saving.value = true
|
|
try {
|
|
const res = await gql<{ saveDocument: { slug: string } }>(
|
|
`mutation Save($i: SaveDocumentInput!) { saveDocument(input: $i) { slug } }`,
|
|
{ i: { slug: targetSlug, content: content.value, commitMessage: commitMsg.value } },
|
|
)
|
|
if (slug.value === 'new') {
|
|
router.replace(`/doc/${res.saveDocument.slug}`)
|
|
}
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full">
|
|
<!-- Toolbar -->
|
|
<div class="flex items-center gap-2 p-3 border-b border-slate-700 bg-slate-100 dark:bg-slate-800 flex-wrap">
|
|
<button
|
|
:class="['px-3 py-1 rounded text-sm', editorMode === 'visual' ? 'bg-blue-600 text-white' : 'bg-slate-200 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-700']"
|
|
@click="editorMode = 'visual'"
|
|
>Visual</button>
|
|
<button
|
|
:class="['px-3 py-1 rounded text-sm', editorMode === 'source' ? 'bg-blue-600 text-white' : 'bg-slate-200 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-700']"
|
|
@click="editorMode = 'source'"
|
|
>Source</button>
|
|
|
|
<div class="flex-1" />
|
|
|
|
<input
|
|
v-if="slug === 'new'"
|
|
v-model="docPath"
|
|
class="bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-48 text-slate-900 dark:text-slate-100"
|
|
placeholder="New filename (e.g. folder/doc)"
|
|
/>
|
|
|
|
<input
|
|
v-model="commitMsg"
|
|
class="bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-64 text-slate-900 dark:text-slate-100"
|
|
placeholder="Commit message"
|
|
/>
|
|
<button
|
|
class="px-4 py-1 bg-green-700 hover:bg-green-600 rounded text-sm disabled:opacity-50"
|
|
:disabled="saving"
|
|
@click="save"
|
|
>{{ saving ? 'Saving…' : 'Save' }}</button>
|
|
</div>
|
|
|
|
<!-- Editor -->
|
|
<div class="flex-1 overflow-auto">
|
|
<div v-if="loading" class="p-6 text-slate-400 animate-pulse">Loading…</div>
|
|
<VisualEditor v-else-if="editorMode === 'visual'" v-model="content" />
|
|
<SourceEditor v-else v-model="content" />
|
|
</div>
|
|
</div>
|
|
</template>
|