2c016de59e
A guide was invisible to global search. Core search has a hardcoded block per domain rather than a hook, so a new plugin stays unreachable until someone adds one - which is the same shape as the gap this test file already documents for USB devices and printed parts: records with a list page, labels in the world, and no way to find them from the search box. Guides are searched by title, summary, tags AND body. The body matters more here than elsewhere: people look for a procedure by something written halfway down it, not by a title they never read. PUBLISHED ONLY - a draft is deliberately invisible to readers, and search is exactly where that rule leaks if nobody writes it down. The test proves it with a draft sharing a tag and a body word with a published guide, so a missing filter would show up as a ride-along. PROOFING catches what a spellchecker cannot, because none of these are spelling: a smart quote in a command so it will not run, a checklist item with no text so a step is silently missing, a heading left with nothing under it after a reorganise, an image with no alt text, a TODO published by accident. Warnings, never blocks - somebody publishing at 14:40 with one empty bullet should be told, not stopped, and a procedure that exists imperfectly beats one nobody wrote. The smart-character issue reports once per block with a one-click fix, rather than once per offending character: an opening and a closing quote are one problem, and listing both makes the panel look like it is nagging. The character table itself is written as escapes. The style gate forbids non-ASCII in source, and a file whose job is detecting smart quotes cannot contain any - which the gate caught, correctly.
692 lines
28 KiB
Vue
692 lines
28 KiB
Vue
<template>
|
|
<div class="ge" @paste="onPaste" @dragover.prevent @drop.prevent="onDrop">
|
|
<div class="page-header">
|
|
<h2>{{ isNew ? 'New guide' : 'Edit guide' }}</h2>
|
|
<div class="ge-actions">
|
|
<span class="ge-status">{{ status }}</span>
|
|
<button type="button" class="ge-btn" @click="showPreview = !showPreview">
|
|
{{ showPreview ? 'Hide preview' : 'Preview' }}
|
|
</button>
|
|
<button type="button" class="ge-btn" @click="save()" :disabled="saving">
|
|
{{ saving ? 'Saving...' : 'Save' }}
|
|
</button>
|
|
<button v-if="!isNew && canpublish" type="button" class="ge-btn ge-primary"
|
|
@click="publish" :disabled="saving">
|
|
{{ guide.ispublished ? 'Publish changes' : 'Publish' }}
|
|
</button>
|
|
<button v-if="!isNew && canpublish && guide.ispublished" type="button"
|
|
class="ge-btn" @click="unpublish">Withdraw</button>
|
|
<router-link v-if="!isNew && guide.slug" class="ge-btn"
|
|
:to="{ name: 'guide-view', params: { slug: guide.slug } }">View</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="message" class="settings-success">{{ message }}</div>
|
|
<div v-if="error" class="error-message">{{ error }}</div>
|
|
|
|
<div class="ge-fields">
|
|
<input v-model="guide.title" type="text" class="ge-title"
|
|
placeholder="Guide title">
|
|
<input v-model="guide.summary" type="text"
|
|
placeholder="One line: what this covers and when somebody needs it">
|
|
<input v-model="guide.tags" type="text"
|
|
placeholder="Tags, comma separated - e.g. partmarker, backups">
|
|
</div>
|
|
|
|
<!-- The blank page is the barrier, so offer a shape rather than an empty
|
|
canvas. Only on a guide that has nothing in it yet. -->
|
|
<div v-if="!blocks.length" class="ge-templates">
|
|
<span>Start from:</span>
|
|
<button v-for="tpl in templates" :key="tpl.key" type="button"
|
|
class="ge-tpl" @click="useTemplate(tpl)">
|
|
<strong>{{ tpl.name }}</strong>
|
|
<small>{{ tpl.description }}</small>
|
|
</button>
|
|
</div>
|
|
|
|
<!--
|
|
Proofing: warnings, never a block. Somebody publishing at 14:40 with one
|
|
empty bullet should be told, not stopped - the tool does not know the
|
|
bullet is deliberate, and a procedure that exists imperfectly beats one
|
|
nobody wrote.
|
|
-->
|
|
<div v-if="issues.length" class="ge-proof">
|
|
<div class="ge-proofhead">
|
|
<strong>{{ errorCount }} to fix, {{ issues.length - errorCount }} worth a look</strong>
|
|
<button type="button" @click="showProof = !showProof">
|
|
{{ showProof ? 'Hide' : 'Show' }}
|
|
</button>
|
|
</div>
|
|
<ul v-if="showProof">
|
|
<li v-for="(item, i) in issues" :key="i" :class="'ge-' + item.level">
|
|
<button v-if="item.blockid" type="button" class="ge-jump"
|
|
@click="jumpTo(item.blockid)">go</button>
|
|
<span>{{ item.message }}</span>
|
|
<button v-if="item.fix" type="button" class="ge-fix"
|
|
@click="fix(item)">fix it</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ge-split" :class="{ 'ge-haspreview': showPreview }">
|
|
<div class="ge-editor">
|
|
<div v-for="(block, index) in blocks" :key="block.id"
|
|
class="ge-block" :class="{ 'ge-focused': focused === block.id }"
|
|
@focusin="focused = block.id">
|
|
<div class="ge-blockbar">
|
|
<span class="ge-type">{{ block.type }}</span>
|
|
<select v-if="block.type === 'callout'" v-model="block.variant" class="ge-mini">
|
|
<option value="info">info</option>
|
|
<option value="warning">warning</option>
|
|
<option value="success">success</option>
|
|
</select>
|
|
<input v-if="block.type === 'code'" v-model="block.language"
|
|
class="ge-mini" placeholder="language">
|
|
<input v-if="block.type === 'code'" v-model="block.caption"
|
|
class="ge-mini" placeholder="caption">
|
|
|
|
<!-- Formatting acts on the selection in this block's textarea, so
|
|
nobody has to know the markup exists. -->
|
|
<div v-if="hasText(block) && block.type !== 'code'" class="ge-format">
|
|
<button type="button" title="Bold" @click="wrap(block, '**')"><b>B</b></button>
|
|
<button type="button" title="Italic" @click="wrap(block, '*')"><i>I</i></button>
|
|
<button type="button" title="Code" @click="wrap(block, '`')"><></button>
|
|
<button type="button" title="Link" @click="makeLink(block)">link</button>
|
|
</div>
|
|
|
|
<div class="ge-blockbtns">
|
|
<button type="button" title="Move up" @click="move(index, -1)"
|
|
:disabled="index === 0">^</button>
|
|
<button type="button" title="Move down" @click="move(index, 1)"
|
|
:disabled="index === blocks.length - 1">v</button>
|
|
<button type="button" title="Duplicate" @click="duplicate(index)">copy</button>
|
|
<button type="button" class="ge-del" title="Remove"
|
|
@click="remove(index)">x</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input v-if="block.type === 'step'" v-model="block.title" class="ge-steptitle"
|
|
placeholder="Step title">
|
|
|
|
<!--
|
|
Spellcheck and autocorrect are ON for prose and OFF for code.
|
|
|
|
A code block that autocorrects is a guide that tells somebody to run
|
|
a command which does not work: smart quotes replacing ", an
|
|
autocapitalised cmdlet, a "corrected" flag. The author will not
|
|
notice, because it still LOOKS right - and the person at the bay
|
|
gets a syntax error with no idea why.
|
|
-->
|
|
<textarea v-if="hasText(block)" v-model="block.text"
|
|
:ref="el => registerArea(block.id, el)"
|
|
class="ge-text" :class="{ 'ge-mono': block.type === 'code' }"
|
|
:rows="block.type === 'code' ? 6 : 3"
|
|
:spellcheck="block.type !== 'code'"
|
|
:autocorrect="block.type === 'code' ? 'off' : 'on'"
|
|
:autocapitalize="block.type === 'code' ? 'off' : 'sentences'"
|
|
:autocomplete="block.type === 'code' ? 'off' : undefined"
|
|
:placeholder="placeholderFor(block)"></textarea>
|
|
|
|
<div v-if="hasItems(block)" class="ge-items">
|
|
<div v-for="(item, i) in block.items" :key="item.id" class="ge-item">
|
|
<span class="ge-bullet">{{ block.type === 'numbers' ? (i + 1) + '.' : '-' }}</span>
|
|
<input v-model="item.text" :placeholder="'Item ' + (i + 1)"
|
|
:ref="el => registerItem(item.id, el)"
|
|
@keydown.enter.prevent="addItemAfter(block, i)"
|
|
@keydown.backspace="maybeRemoveItem(block, i, $event)">
|
|
<button type="button" @click="removeItem(block, i)">x</button>
|
|
</div>
|
|
<button type="button" class="ge-additem" @click="addItemAfter(block, block.items.length - 1)">
|
|
Add item
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="block.type === 'image'" class="ge-image">
|
|
<img v-if="block.url" :src="block.url" alt="">
|
|
<input v-model="block.caption" placeholder="Caption (optional)">
|
|
<input v-model="block.alt" placeholder="Alt text, for anyone who cannot see it">
|
|
</div>
|
|
|
|
<div v-if="block.type === 'table'" class="ge-tableedit">
|
|
<textarea v-model="block.raw" rows="4" @input="parseTable(block)"
|
|
spellcheck="false" autocorrect="off" autocapitalize="off"
|
|
placeholder="One row per line, cells separated by | Header | Header Cell | Cell"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ge-add">
|
|
<span>Add:</span>
|
|
<button v-for="type in blocktypes" :key="type" type="button"
|
|
@click="add(type)">{{ type }}</button>
|
|
<label class="ge-upload">
|
|
image
|
|
<input type="file" accept="image/*" hidden @change="onFilePick">
|
|
</label>
|
|
</div>
|
|
|
|
<p class="ge-hint">
|
|
Paste or drag an image anywhere to drop it in below the block you are working on.
|
|
Text supports **bold**, *italic*, `code` and [links](https://example.com) -
|
|
or use the buttons.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- The same renderer readers get, so what you see here is what they see.
|
|
A separate preview implementation would drift within a month. -->
|
|
<div v-if="showPreview" class="ge-preview">
|
|
<div class="ge-previewhead">Preview</div>
|
|
<h1 class="ge-previewtitle">{{ guide.title || 'Untitled guide' }}</h1>
|
|
<p v-if="guide.summary" class="ge-previewsummary">{{ guide.summary }}</p>
|
|
<GuideBlocks :blocks="blocks" :interactive="false" :ticked="{}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!isNew && revisions.length" class="ge-revisions">
|
|
<h3>Version history</h3>
|
|
<div v-for="rev in revisions" :key="rev.guiderevisionid" class="ge-rev">
|
|
<span class="ge-revnum">v{{ rev.revision }}</span>
|
|
<span class="ge-revwhen">{{ formatDate(rev.createdat) }}</span>
|
|
<span v-if="rev.ispublished" class="ge-revpub">published</span>
|
|
<span class="ge-revnote">{{ rev.note }}</span>
|
|
<button type="button" @click="restore(rev)">Restore</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
|
|
import api from '@/api'
|
|
import { apiError } from '@/utils/apiError'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import GuideBlocks from '../components/GuideBlocks.vue'
|
|
import { templates } from '../utils/templates.js'
|
|
import { proof, applyFix } from '../utils/proof.js'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
|
|
const blocktypes = ['heading', 'paragraph', 'step', 'checklist', 'bullets',
|
|
'numbers', 'callout', 'code', 'table']
|
|
|
|
const guide = reactive({ guideid: null, title: '', summary: '', tags: '',
|
|
slug: '', ispublished: false })
|
|
const blocks = ref([])
|
|
const revisions = ref([])
|
|
const saving = ref(false)
|
|
const message = ref('')
|
|
const error = ref('')
|
|
const status = ref('')
|
|
const showPreview = ref(true)
|
|
const focused = ref('')
|
|
const dirty = ref(false)
|
|
const showProof = ref(true)
|
|
|
|
// Recomputed as you type. Cheap - it is a walk over a few dozen blocks - and
|
|
// live feedback is the difference between proofing and a report nobody reads.
|
|
const issues = computed(() => proof(guide, blocks.value))
|
|
const errorCount = computed(() => issues.value.filter(i => i.level === 'error').length)
|
|
|
|
function jumpTo (blockid) {
|
|
focused.value = blockid
|
|
const node = textareas[blockid] || itemInputs[blockid]
|
|
if (node?.scrollIntoView) {
|
|
node.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
node.focus?.()
|
|
}
|
|
}
|
|
|
|
function fix (item) {
|
|
const block = blocks.value.find(b => b.id === item.blockid)
|
|
if (block && applyFix(block, item.fix)) dirty.value = true
|
|
}
|
|
|
|
const isNew = computed(() => !guide.guideid)
|
|
const canpublish = computed(() => auth.hasPermission?.('guides.publish') ?? false)
|
|
|
|
const textareas = {}
|
|
const itemInputs = {}
|
|
function registerArea (id, el) { if (el) textareas[id] = el }
|
|
function registerItem (id, el) { if (el) itemInputs[id] = el }
|
|
|
|
function newid () {
|
|
if (window.crypto?.randomUUID) return window.crypto.randomUUID().slice(0, 8)
|
|
return Math.random().toString(36).slice(2, 10)
|
|
}
|
|
|
|
function hasText (block) {
|
|
return ['heading', 'paragraph', 'step', 'callout', 'code'].includes(block.type)
|
|
}
|
|
function hasItems (block) {
|
|
return ['checklist', 'bullets', 'numbers'].includes(block.type)
|
|
}
|
|
function placeholderFor (block) {
|
|
if (block.type === 'code') return 'The command, exactly as it should be run'
|
|
if (block.type === 'callout') return 'What somebody needs to know before carrying on'
|
|
if (block.type === 'heading') return 'Section heading'
|
|
return 'Text'
|
|
}
|
|
|
|
function useTemplate (tpl) {
|
|
blocks.value = tpl.blocks()
|
|
dirty.value = true
|
|
}
|
|
|
|
// New blocks land AFTER the block being worked on, not at the bottom. Appending
|
|
// to the end means scrolling back every time, which is the difference between
|
|
// writing a guide and fighting an editor.
|
|
function insertIndex () {
|
|
const index = blocks.value.findIndex(b => b.id === focused.value)
|
|
return index === -1 ? blocks.value.length : index + 1
|
|
}
|
|
|
|
function add (type) {
|
|
const block = { id: newid(), type }
|
|
if (hasItems(block)) block.items = [{ id: newid(), text: '' }]
|
|
if (type === 'callout') block.variant = 'info'
|
|
if (type === 'table') { block.raw = ''; block.header = []; block.rows = [] }
|
|
const at = insertIndex()
|
|
blocks.value.splice(at, 0, block)
|
|
focused.value = block.id
|
|
nextTick(() => textareas[block.id]?.focus())
|
|
}
|
|
|
|
function duplicate (index) {
|
|
const source = blocks.value[index]
|
|
const copy = JSON.parse(JSON.stringify(source))
|
|
copy.id = newid()
|
|
if (copy.items) copy.items = copy.items.map(item => ({ ...item, id: newid() }))
|
|
blocks.value.splice(index + 1, 0, copy)
|
|
}
|
|
|
|
function remove (index) { blocks.value.splice(index, 1) }
|
|
|
|
function move (index, delta) {
|
|
const target = index + delta
|
|
if (target < 0 || target >= blocks.value.length) return
|
|
const [block] = blocks.value.splice(index, 1)
|
|
blocks.value.splice(target, 0, block)
|
|
}
|
|
|
|
// Enter makes the next item and focuses it - the way every list in every other
|
|
// tool behaves. Typing a ten-item checklist should not need the mouse.
|
|
function addItemAfter (block, index) {
|
|
const item = { id: newid(), text: '' }
|
|
block.items.splice(index + 1, 0, item)
|
|
nextTick(() => itemInputs[item.id]?.focus())
|
|
}
|
|
|
|
// Backspace on an ALREADY EMPTY item removes it and moves up, which is how a
|
|
// list stops without reaching for the mouse. Never on a non-empty one.
|
|
function maybeRemoveItem (block, index, event) {
|
|
if (event.target.value !== '' || block.items.length <= 1) return
|
|
event.preventDefault()
|
|
const previous = block.items[index - 1]
|
|
block.items.splice(index, 1)
|
|
if (previous) nextTick(() => itemInputs[previous.id]?.focus())
|
|
}
|
|
|
|
function removeItem (block, index) {
|
|
if (block.items.length > 1) block.items.splice(index, 1)
|
|
else block.items[0].text = ''
|
|
}
|
|
|
|
function parseTable (block) {
|
|
const lines = (block.raw || '').split('\n').filter(l => l.trim())
|
|
const rows = lines.map(line => line.split('|').map(cell => cell.trim()))
|
|
block.header = rows.length ? rows[0] : []
|
|
block.rows = rows.slice(1)
|
|
}
|
|
|
|
// Formatting wraps the SELECTION, so the markup stays an implementation detail.
|
|
function wrap (block, marker) {
|
|
const area = textareas[block.id]
|
|
if (!area) return
|
|
const start = area.selectionStart
|
|
const end = area.selectionEnd
|
|
const text = block.text || ''
|
|
const selected = text.slice(start, end) || 'text'
|
|
block.text = text.slice(0, start) + marker + selected + marker + text.slice(end)
|
|
nextTick(() => {
|
|
area.focus()
|
|
area.setSelectionRange(start + marker.length, start + marker.length + selected.length)
|
|
})
|
|
}
|
|
|
|
function makeLink (block) {
|
|
const area = textareas[block.id]
|
|
if (!area) return
|
|
const start = area.selectionStart
|
|
const end = area.selectionEnd
|
|
const text = block.text || ''
|
|
const selected = text.slice(start, end) || 'link text'
|
|
const url = window.prompt('Link to:', 'https://')
|
|
if (!url) return
|
|
block.text = text.slice(0, start) + '[' + selected + '](' + url + ')' + text.slice(end)
|
|
nextTick(() => area.focus())
|
|
}
|
|
|
|
async function uploadImage (file) {
|
|
const form = new FormData()
|
|
form.append('file', file)
|
|
if (guide.guideid) form.append('guideid', guide.guideid)
|
|
const response = await api.post('/guides/images', form,
|
|
{ headers: { 'Content-Type': 'multipart/form-data' } })
|
|
return response.data?.data || response.data
|
|
}
|
|
|
|
async function insertImage (file) {
|
|
error.value = ''
|
|
status.value = 'Uploading image...'
|
|
try {
|
|
const image = await uploadImage(file)
|
|
const block = { id: newid(), type: 'image', url: image.url, caption: '', alt: '' }
|
|
blocks.value.splice(insertIndex(), 0, block)
|
|
focused.value = block.id
|
|
status.value = ''
|
|
} catch (err) {
|
|
status.value = ''
|
|
error.value = apiError(err, 'Could not upload that image')
|
|
}
|
|
}
|
|
|
|
function onPaste (event) {
|
|
const items = Array.from(event.clipboardData?.items || [])
|
|
const imageItem = items.find(item => item.type.startsWith('image/'))
|
|
if (!imageItem) return
|
|
event.preventDefault()
|
|
const file = imageItem.getAsFile()
|
|
if (file) insertImage(file)
|
|
}
|
|
|
|
function onDrop (event) {
|
|
const file = Array.from(event.dataTransfer?.files || [])
|
|
.find(f => f.type.startsWith('image/'))
|
|
if (file) insertImage(file)
|
|
}
|
|
|
|
function onFilePick (event) {
|
|
const file = event.target.files?.[0]
|
|
if (file) insertImage(file)
|
|
event.target.value = ''
|
|
}
|
|
|
|
function payload () {
|
|
return { title: guide.title, summary: guide.summary || '',
|
|
tags: guide.tags || '', blocks: blocks.value }
|
|
}
|
|
|
|
async function save (quiet) {
|
|
if (!guide.title.trim()) {
|
|
if (!quiet) error.value = 'A guide needs a title before it can be saved'
|
|
return
|
|
}
|
|
saving.value = true
|
|
error.value = ''
|
|
try {
|
|
if (isNew.value) {
|
|
const response = await api.post('/guides', payload())
|
|
const created = response.data?.data || response.data
|
|
Object.assign(guide, { guideid: created.guideid, slug: created.slug })
|
|
router.replace({ name: 'guide-edit', params: { guideid: created.guideid } })
|
|
} else {
|
|
const response = await api.put('/guides/' + guide.guideid, payload())
|
|
const saved = response.data?.data || response.data
|
|
guide.slug = saved.slug
|
|
}
|
|
dirty.value = false
|
|
status.value = 'Saved ' + new Date().toLocaleTimeString()
|
|
await loadRevisions()
|
|
} catch (err) {
|
|
error.value = apiError(err, 'Could not save this guide')
|
|
status.value = 'Not saved'
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
// Autosave, debounced. The server dedups on content, so an autosave that
|
|
// changed nothing writes no version - which is what makes this safe to run on a
|
|
// timer rather than a deliberate act.
|
|
let autosaveTimer = null
|
|
watch([blocks, () => guide.title, () => guide.summary, () => guide.tags],
|
|
() => {
|
|
dirty.value = true
|
|
status.value = 'Unsaved changes'
|
|
if (isNew.value) return // a new guide is saved deliberately, once
|
|
clearTimeout(autosaveTimer)
|
|
autosaveTimer = setTimeout(() => save(true), 3000)
|
|
},
|
|
{ deep: true })
|
|
|
|
onBeforeUnmount(() => clearTimeout(autosaveTimer))
|
|
|
|
// Leaving with unsaved work should require saying so out loud.
|
|
onBeforeRouteLeave(() => {
|
|
if (!dirty.value) return true
|
|
return window.confirm('This guide has unsaved changes. Leave anyway?')
|
|
})
|
|
|
|
async function publish () {
|
|
if (errorCount.value) {
|
|
const ok = window.confirm(
|
|
errorCount.value + ' problem(s) would go out with this guide, including '
|
|
+ 'anything flagged in a command. Publish anyway?')
|
|
if (!ok) return
|
|
}
|
|
await save(true)
|
|
try {
|
|
const response = await api.post('/guides/' + guide.guideid + '/publish')
|
|
guide.ispublished = true
|
|
message.value = response.data?.message || 'Published'
|
|
setTimeout(() => { message.value = '' }, 3000)
|
|
await loadRevisions()
|
|
} catch (err) {
|
|
error.value = apiError(err, 'Could not publish this guide')
|
|
}
|
|
}
|
|
|
|
async function unpublish () {
|
|
try {
|
|
await api.post('/guides/' + guide.guideid + '/unpublish')
|
|
guide.ispublished = false
|
|
message.value = 'Withdrawn from readers'
|
|
setTimeout(() => { message.value = '' }, 3000)
|
|
await loadRevisions()
|
|
} catch (err) {
|
|
error.value = apiError(err, 'Could not withdraw this guide')
|
|
}
|
|
}
|
|
|
|
async function restore (rev) {
|
|
if (!window.confirm('Bring version ' + rev.revision + ' back as a new draft version?')) return
|
|
try {
|
|
const response = await api.post(
|
|
'/guides/' + guide.guideid + '/restore/' + rev.guiderevisionid)
|
|
const restored = response.data?.data || response.data
|
|
blocks.value = restored.blocks || []
|
|
Object.assign(guide, { title: restored.title, summary: restored.summary || '',
|
|
tags: (restored.tags || []).join(', ') })
|
|
dirty.value = false
|
|
message.value = response.data?.message || 'Restored'
|
|
await loadRevisions()
|
|
} catch (err) {
|
|
error.value = apiError(err, 'Could not restore that version')
|
|
}
|
|
}
|
|
|
|
async function loadRevisions () {
|
|
if (!guide.guideid) return
|
|
try {
|
|
const response = await api.get('/guides/' + guide.guideid + '/revisions')
|
|
revisions.value = response.data?.data || response.data || []
|
|
} catch (err) {
|
|
revisions.value = []
|
|
}
|
|
}
|
|
|
|
function formatDate (value) {
|
|
return value ? new Date(value).toLocaleString() : ''
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const guideid = route.params.guideid
|
|
if (!guideid) return
|
|
try {
|
|
const response = await api.get('/guides/' + guideid + '/working')
|
|
const data = response.data?.data || response.data
|
|
Object.assign(guide, {
|
|
guideid: data.guideid, title: data.title, summary: data.summary || '',
|
|
tags: (data.tags || []).join(', '), slug: data.slug,
|
|
ispublished: data.ispublished,
|
|
})
|
|
blocks.value = (data.blocks || []).map(block => {
|
|
if (block.type === 'table' && !block.raw) {
|
|
const rows = [block.header || [], ...(block.rows || [])]
|
|
block.raw = rows.filter(r => r.length).map(r => r.join(' | ')).join('\n')
|
|
}
|
|
return block
|
|
})
|
|
await nextTick()
|
|
dirty.value = false
|
|
status.value = ''
|
|
await loadRevisions()
|
|
} catch (err) {
|
|
error.value = apiError(err, 'Could not load this guide')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-header { display: flex; align-items: center; justify-content: space-between; }
|
|
.ge-actions { display: flex; gap: 0.4rem; align-items: center; }
|
|
.ge-status { font-size: 0.75rem; color: var(--text-light); margin-right: 0.3rem; }
|
|
.ge-btn {
|
|
font-size: 0.8rem; padding: 0.3rem 0.7rem; border: 1px solid var(--primary);
|
|
color: var(--primary); background: transparent; border-radius: 4px;
|
|
cursor: pointer; text-decoration: none;
|
|
}
|
|
.ge-primary { background: var(--primary); color: #fff; }
|
|
.ge-btn:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
.ge-fields { display: grid; gap: 0.4rem; margin: 0.8rem 0 1rem; max-width: 45rem; }
|
|
.ge-fields input {
|
|
padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 4px;
|
|
background: var(--surface, transparent); color: var(--text);
|
|
}
|
|
.ge-title { font-size: 1.1rem; font-weight: 600; }
|
|
|
|
.ge-templates { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
|
|
margin-bottom: 1rem; }
|
|
.ge-templates > span { font-size: 0.8rem; color: var(--text-light); }
|
|
.ge-tpl {
|
|
display: grid; text-align: left; gap: 0.1rem; padding: 0.45rem 0.7rem;
|
|
border: 1px solid var(--border); border-radius: 5px; background: transparent;
|
|
color: var(--text); cursor: pointer; max-width: 15rem;
|
|
}
|
|
.ge-tpl:hover { border-color: var(--primary); }
|
|
.ge-tpl small { color: var(--text-light); font-size: 0.72rem; }
|
|
|
|
.ge-split { display: grid; gap: 1.2rem; }
|
|
.ge-haspreview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
@media (max-width: 70rem) { .ge-haspreview { grid-template-columns: 1fr; } }
|
|
|
|
.ge-block {
|
|
border: 1px solid var(--border); border-radius: 5px; padding: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.ge-focused { border-color: var(--primary); }
|
|
.ge-blockbar { display: flex; gap: 0.35rem; align-items: center; margin-bottom: 0.35rem;
|
|
flex-wrap: wrap; }
|
|
.ge-type { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
|
|
color: var(--text-light); }
|
|
.ge-mini {
|
|
font-size: 0.72rem; padding: 0.12rem 0.3rem; border: 1px solid var(--border);
|
|
border-radius: 3px; background: var(--surface, transparent); color: var(--text);
|
|
max-width: 8rem;
|
|
}
|
|
.ge-format { display: flex; gap: 0.15rem; }
|
|
.ge-format button, .ge-blockbtns button {
|
|
font-size: 0.7rem; padding: 0.1rem 0.35rem; border: 1px solid var(--border);
|
|
background: transparent; color: var(--text-light); border-radius: 3px; cursor: pointer;
|
|
min-width: 1.5rem;
|
|
}
|
|
.ge-format button:hover, .ge-blockbtns button:hover { color: var(--primary); border-color: var(--primary); }
|
|
.ge-blockbtns { margin-left: auto; display: flex; gap: 0.15rem; }
|
|
.ge-del:hover { border-color: var(--danger, #c0392b) !important; color: var(--danger, #c0392b) !important; }
|
|
|
|
.ge-text, .ge-steptitle, .ge-tableedit textarea {
|
|
width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border);
|
|
border-radius: 4px; background: var(--surface, transparent); color: var(--text);
|
|
font-family: inherit; font-size: 0.88rem; resize: vertical;
|
|
}
|
|
.ge-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; }
|
|
.ge-steptitle { margin-bottom: 0.35rem; }
|
|
|
|
.ge-items { display: grid; gap: 0.25rem; }
|
|
.ge-item { display: flex; gap: 0.3rem; align-items: center; }
|
|
.ge-bullet { font-size: 0.8rem; color: var(--text-light); width: 1.2rem; }
|
|
.ge-item input {
|
|
flex: 1; padding: 0.3rem 0.45rem; border: 1px solid var(--border);
|
|
border-radius: 4px; background: var(--surface, transparent); color: var(--text);
|
|
}
|
|
.ge-item button, .ge-additem, .ge-add button, .ge-upload {
|
|
font-size: 0.72rem; padding: 0.15rem 0.45rem; border: 1px solid var(--border);
|
|
background: transparent; color: var(--text-light); border-radius: 3px;
|
|
cursor: pointer; justify-self: start;
|
|
}
|
|
.ge-image img { max-width: 18rem; display: block; margin-bottom: 0.35rem;
|
|
border: 1px solid var(--border); border-radius: 4px; }
|
|
.ge-image input { width: 100%; margin-bottom: 0.25rem; padding: 0.3rem 0.45rem;
|
|
border: 1px solid var(--border); border-radius: 4px;
|
|
background: var(--surface, transparent); color: var(--text); }
|
|
|
|
.ge-add { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin: 0.8rem 0 0.4rem; }
|
|
.ge-add > span { font-size: 0.75rem; color: var(--text-light); }
|
|
.ge-hint { font-size: 0.75rem; color: var(--text-light); }
|
|
|
|
.ge-preview {
|
|
border-left: 1px solid var(--border); padding-left: 1.2rem;
|
|
position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 3rem);
|
|
overflow-y: auto;
|
|
}
|
|
.ge-previewhead {
|
|
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
|
|
color: var(--text-light); margin-bottom: 0.5rem;
|
|
}
|
|
.ge-previewtitle { margin: 0 0 0.2rem; font-size: 1.4rem; }
|
|
.ge-previewsummary { color: var(--text-light); margin: 0 0 1rem; }
|
|
|
|
.ge-proof {
|
|
border: 1px solid var(--border); border-left: 3px solid var(--warning, #d9822b);
|
|
border-radius: 4px; padding: 0.5rem 0.7rem; margin-bottom: 1rem;
|
|
font-size: 0.82rem;
|
|
}
|
|
.ge-proofhead { display: flex; align-items: center; gap: 0.5rem; }
|
|
.ge-proofhead button {
|
|
margin-left: auto; font-size: 0.72rem; background: none; border: none;
|
|
color: var(--text-light); cursor: pointer; text-decoration: underline;
|
|
}
|
|
.ge-proof ul { margin: 0.4rem 0 0; padding: 0; list-style: none; }
|
|
.ge-proof li { display: flex; gap: 0.4rem; align-items: baseline; padding: 0.15rem 0; }
|
|
.ge-error span { color: var(--danger, #c0392b); }
|
|
.ge-warn span { color: var(--text-light); }
|
|
.ge-jump, .ge-fix {
|
|
font-size: 0.68rem; padding: 0.05rem 0.35rem; border: 1px solid var(--border);
|
|
background: transparent; color: var(--text-light); border-radius: 3px; cursor: pointer;
|
|
}
|
|
.ge-fix { margin-left: auto; border-color: var(--primary); color: var(--primary); }
|
|
|
|
.ge-revisions { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
|
|
.ge-rev { display: flex; gap: 0.6rem; align-items: center; font-size: 0.8rem; padding: 0.25rem 0; }
|
|
.ge-revnum { font-weight: 600; }
|
|
.ge-revwhen, .ge-revnote { color: var(--text-light); }
|
|
.ge-revpub { font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 3px;
|
|
border: 1px solid var(--primary); color: var(--primary); }
|
|
.ge-rev button { margin-left: auto; font-size: 0.72rem; padding: 0.12rem 0.45rem;
|
|
border: 1px solid var(--border); background: transparent;
|
|
color: var(--text-light); border-radius: 3px; cursor: pointer; }
|
|
</style>
|