feat(editor): add markdown presets, heading folding and external file refresh
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import '@/styles/headings.css'
|
||||
|
||||
const key = 'editor-heading-appearance'
|
||||
export const defaultHeadingSizes = [32, 28, 24, 21, 18, 16]
|
||||
export function normalizeHeadingAppearance(value: unknown) {
|
||||
const raw = value && typeof value === 'object' ? value as Record<string, unknown> : {}
|
||||
const levels = Array.isArray(raw.levels) ? raw.levels : []
|
||||
return {
|
||||
custom: raw.custom === true,
|
||||
family: ['inherit', 'serif', 'sans-serif', 'monospace'].includes(String(raw.family)) ? String(raw.family) : 'inherit',
|
||||
levels: defaultHeadingSizes.map((size, index) => {
|
||||
const item = levels[index] ?? {}
|
||||
return {
|
||||
size: typeof item.size === 'number' && Number.isFinite(item.size) ? Math.min(72, Math.max(12, item.size)) : size,
|
||||
weight: [400, 500, 600, 700, 800].includes(item.weight) ? Number(item.weight) : 700,
|
||||
}
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
export const useHeadingAppearanceStore = defineStore('heading-appearance', () => {
|
||||
let saved: unknown
|
||||
try { saved = JSON.parse(localStorage.getItem(key) ?? '{}') } catch { saved = {} }
|
||||
const preferences = ref(normalizeHeadingAppearance(saved))
|
||||
watch(preferences, value => localStorage.setItem(key, JSON.stringify(normalizeHeadingAppearance(value))), { deep: true })
|
||||
const cssVariables = computed(() => {
|
||||
const normalized = normalizeHeadingAppearance(preferences.value)
|
||||
if (!normalized.custom) return {}
|
||||
const result: Record<string, string> = { '--heading-family': normalized.family }
|
||||
normalized.levels.forEach((item, index) => {
|
||||
result[`--heading-${index + 1}-size`] = `${item.size}px`
|
||||
result[`--heading-${index + 1}-weight`] = String(item.weight)
|
||||
})
|
||||
return result
|
||||
})
|
||||
function reset() { preferences.value = normalizeHeadingAppearance({}) }
|
||||
return { preferences, cssVariables, reset }
|
||||
})
|
||||
Reference in New Issue
Block a user