feat(editor): add markdown presets, heading folding and external file refresh
This commit is contained in:
@@ -1,11 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { useEditorStore } from '@/stores/editor'
|
||||
import { useWorkspaceStore } from '@/stores/workspace'
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import ActionDialog from '@/components/common/ActionDialog.vue'
|
||||
import { useActionDialog } from '@/composables/useActionDialog'
|
||||
import { t } from '@/i18n'
|
||||
|
||||
const editorStore = useEditorStore()
|
||||
const workspaceStore = useWorkspaceStore()
|
||||
const { actionDialog, resolveAction, askConfirm } = useActionDialog()
|
||||
const reloadError = ref('')
|
||||
async function reload() {
|
||||
const path = editorStore.currentFilePath, snapshot = editorStore.content
|
||||
if (!(await askConfirm(t('重新加载会丢弃当前未保存内容。请先复制需要保留的文字。继续吗？', 'Reload discards unsaved edits. Copy any text you need to keep first. Continue?')))) return
|
||||
if (path !== editorStore.currentFilePath || snapshot !== editorStore.content) return
|
||||
try { await editorStore.reloadExternalFile(); reloadError.value = '' } catch (error) { reloadError.value = error instanceof Error ? error.message : '重新加载失败' }
|
||||
}
|
||||
|
||||
const statusText = computed<Record<string, string>>(() => ({
|
||||
idle: t('空闲', 'Idle'), dirty: t('未保存', 'Unsaved'), saving: t('保存中…', 'Saving…'), saved: t('已保存', 'Saved'), save_failed: t('保存失败', 'Save failed'),
|
||||
@@ -15,14 +25,17 @@ const statusText = computed<Record<string, string>>(() => ({
|
||||
|
||||
<template>
|
||||
<header class="editor-header">
|
||||
<ActionDialog v-if="actionDialog" v-bind="actionDialog" @resolve="resolveAction" />
|
||||
<div class="file-identity"><strong>{{ workspaceStore.activeFile?.name ?? t('未命名笔记', 'Untitled note') }}</strong><small>{{ workspaceStore.activeFilePath }}</small></div>
|
||||
<div class="editor-actions">
|
||||
<span class="save-status" :class="editorStore.saveStatus">{{ statusText[editorStore.saveStatus] }}</span>
|
||||
<button v-if="['conflict', 'external_changed'].includes(editorStore.saveStatus)" class="button-secondary" @click="reload">{{ t('重新加载外部版本', 'Reload external version') }}</button>
|
||||
<span v-if="reloadError" class="save-status conflict" role="alert">{{ reloadError }}</span>
|
||||
<div class="mode-switch" :aria-label="t('编辑模式', 'Editor mode')">
|
||||
<button type="button" :class="{ active: editorStore.mode === 'wysiwyg' }" @click="editorStore.setMode('wysiwyg')">{{ t('写作', 'Writing') }}</button>
|
||||
<button type="button" :class="{ active: editorStore.mode === 'source' }" @click="editorStore.setMode('source')">{{ t('源码', 'Source') }}</button>
|
||||
</div>
|
||||
<button type="button" class="save-button" :disabled="editorStore.saveStatus === 'saving'" @click="editorStore.save">{{ t('保存', 'Save') }}</button>
|
||||
<button type="button" class="save-button" :disabled="['saving','conflict','external_changed'].includes(editorStore.saveStatus)" @click="editorStore.save">{{ t('保存', 'Save') }}</button>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -24,7 +24,7 @@ function updateContent(event: Event) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VisualMarkdownEditor v-if="editorStore.mode === 'wysiwyg'" :key="`${editorStore.currentFilePath ?? 'empty'}:${themeStore.resolvedCodeBlockTheme}:${settingsStore.language}`"
|
||||
<VisualMarkdownEditor v-if="editorStore.mode === 'wysiwyg'" :key="`${editorStore.currentFilePath ?? 'empty'}:${editorStore.contentRevision}:${themeStore.resolvedCodeBlockTheme}:${settingsStore.language}`"
|
||||
:initial-content="editorStore.content" />
|
||||
<textarea v-else ref="sourceEditor" class="editor-pane source" :value="editorStore.content" :spellcheck="settingsStore.spellCheck"
|
||||
:lang="settingsStore.language" :aria-label="settingsStore.language === 'en' ? 'Markdown source editor' : 'Markdown 源码编辑器'" @input="updateContent" />
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createPinia } from 'pinia'
|
||||
import HeadingStyleSettings from './HeadingStyleSettings.vue'
|
||||
it('previews individual heading settings and restores theme inheritance', async () => {
|
||||
localStorage.clear()
|
||||
const wrapper = mount(HeadingStyleSettings, { global: { plugins: [createPinia()] } })
|
||||
try {
|
||||
expect(wrapper.get('input[aria-label="H1 字号"]').attributes('disabled')).toBeDefined()
|
||||
await wrapper.get('input[type="checkbox"]').setValue(true)
|
||||
await wrapper.get('input[aria-label="H1 字号"]').setValue(42)
|
||||
await wrapper.get('select[aria-label="H1 粗细"]').setValue('400')
|
||||
expect(wrapper.get('.heading-style-preview').attributes('style')).toContain('--heading-1-size: 42px')
|
||||
expect(wrapper.get('.heading-style-preview').attributes('style')).toContain('--heading-1-weight: 400')
|
||||
await wrapper.get('button').trigger('click')
|
||||
expect(wrapper.get('.heading-style-preview').attributes('data-heading-style')).toBeUndefined()
|
||||
expect(wrapper.get('.heading-style-preview').attributes('style') ?? '').not.toContain('--heading-1-size')
|
||||
} finally { wrapper.unmount() }
|
||||
})
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { useHeadingAppearanceStore } from '@/stores/headingAppearance'
|
||||
import { t } from '@/i18n'
|
||||
const appearance = useHeadingAppearanceStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<details class="ui-disclosure heading-style-settings">
|
||||
<summary>{{ t('标题样式', 'Heading styles') }}</summary>
|
||||
<div class="heading-settings-body">
|
||||
<label><input v-model="appearance.preferences.custom" type="checkbox" /> {{ t('自定义标题样式', 'Customize heading styles') }}</label>
|
||||
<p class="subtle">{{ t('关闭时跟随主题。设置作用于正文 H1–H6，不改写 Markdown，也不改变笔记属性标题。', 'Disable to follow the theme. Applies to document H1–H6 without rewriting Markdown or the metadata title.') }}</p>
|
||||
<label>{{ t('标题字体', 'Heading font') }}
|
||||
<select v-model="appearance.preferences.family" class="select" :disabled="!appearance.preferences.custom">
|
||||
<option value="inherit">{{ t('跟随正文', 'Follow body') }}</option><option value="serif">{{ t('衬线字体', 'Serif') }}</option><option value="sans-serif">{{ t('无衬线字体', 'Sans serif') }}</option><option value="monospace">{{ t('等宽字体', 'Monospace') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<div v-for="(level, index) in appearance.preferences.levels" :key="index" class="heading-setting-row">
|
||||
<strong>H{{ index + 1 }}</strong>
|
||||
<label>{{ t('字号 px', 'Size px') }}<input v-model.number="level.size" class="input" type="number" min="12" max="72" :disabled="!appearance.preferences.custom" :aria-label="`H${index + 1} ${t('字号', 'size')}`" /></label>
|
||||
<label>{{ t('粗细', 'Weight') }}<select v-model.number="level.weight" class="select" :disabled="!appearance.preferences.custom" :aria-label="`H${index + 1} ${t('粗细', 'weight')}`"><option :value="400">{{ t('常规', 'Regular') }}</option><option :value="500">Medium</option><option :value="600">Semibold</option><option :value="700">{{ t('加粗', 'Bold') }}</option><option :value="800">Extra bold</option></select></label>
|
||||
</div>
|
||||
<button class="button-secondary" type="button" @click="appearance.reset">{{ t('恢复跟随主题', 'Restore theme defaults') }}</button>
|
||||
<div class="heading-style-preview" :data-heading-style="appearance.preferences.custom ? 'custom' : undefined" :style="appearance.cssVariables">
|
||||
<div class="markdown-content"><component :is="`h${index + 1}`" v-for="(_, index) in appearance.preferences.levels" :key="index">H{{ index + 1 }} {{ t('标题预览', 'Heading preview') }}</component></div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.heading-settings-body { display: grid; gap: 14px; padding: 16px; }
|
||||
.heading-setting-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
|
||||
.heading-setting-row label { display: grid; gap: 6px; min-width: 0; }
|
||||
.heading-setting-row strong { align-self: center; }
|
||||
.heading-style-preview { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 16px; overflow-wrap: anywhere; background: var(--color-surface-primary); color: var(--color-text-primary); }
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useMarkdownPreferencesStore, markdownPresets } from '@/stores/markdownPreferences'
|
||||
import { t } from '@/i18n'
|
||||
const store = useMarkdownPreferencesStore()
|
||||
const name = ref('')
|
||||
const error = ref('')
|
||||
function save() { error.value = store.savePreset(name.value) ? '' : t('请输入名称，最多保存 20 个预设。', 'Enter a name; up to 20 presets.'); if (!error.value) name.value = '' }
|
||||
</script>
|
||||
<template>
|
||||
<section class="markdown-preferences surface-nested">
|
||||
<h3>{{ t('Markdown 语法与编辑预设', 'Markdown syntax and editing presets') }}</h3>
|
||||
<p class="subtle">{{ t('语法和代码设置在下次打开写作编辑器时应用；不批量改写已有笔记。静态预览即时更新。', 'Syntax and code settings apply when the visual editor next opens; existing notes are not rewritten in bulk. Static previews update immediately.') }}</p>
|
||||
<div class="inline-actions"><button class="button-secondary" @click="store.apply(markdownPresets.extended)">{{ t('扩展 Markdown', 'Extended Markdown') }}</button><button class="button-secondary" @click="store.apply(markdownPresets.github)">GitHub</button><button class="button-secondary" @click="store.apply(markdownPresets.plain)">{{ t('基础 Markdown', 'Basic Markdown') }}</button></div>
|
||||
<div class="form-grid">
|
||||
<label>{{ t('标题语法', 'Heading syntax') }}<select v-model="store.preferences.heading" class="select"><option value="atx">ATX (#)</option><option value="setext">Setext (=== / ---)</option></select></label>
|
||||
<label>{{ t('无序列表', 'Bullet list') }}<select v-model="store.preferences.bullet" class="select"><option>-</option><option>*</option><option>+</option></select></label>
|
||||
<label>{{ t('有序列表', 'Ordered list') }}<select v-model="store.preferences.incrementList" class="select"><option :value="true">1. 2. 3.</option><option :value="false">1. 1. 1.</option></select></label>
|
||||
<label>{{ t('代码围栏', 'Code fence') }}<select v-model="store.preferences.fence" class="select"><option value="`">```</option><option value="~">~~~</option></select></label>
|
||||
</div>
|
||||
<p class="subtle">{{ t('Setext 适用于 H1/H2，H3–H6 仍使用 #。写作模式保存时会规范化整篇正文的标记；源码模式保留手写语法。', 'Setext applies to H1/H2; H3–H6 use #. Visual-mode saves normalize document markers; source mode preserves handwritten syntax.') }}</p>
|
||||
<div class="markdown-switches">
|
||||
<label><input v-model="store.preferences.autoLinks" type="checkbox" />{{ t('自动识别裸链接', 'Recognize bare URLs') }}</label>
|
||||
<label><input v-model="store.preferences.math" type="checkbox" />{{ t('数学公式', 'Math') }}</label>
|
||||
<label><input v-model="store.preferences.callouts" type="checkbox" />{{ t('警告框与提示框', 'Alerts and callouts') }}</label>
|
||||
<label><input v-model="store.preferences.diagrams" type="checkbox" />Mermaid</label>
|
||||
<label><input v-model="store.preferences.lineNumbers" type="checkbox" />{{ t('代码行号', 'Code line numbers') }}</label>
|
||||
<label><input v-model="store.preferences.wrapCode" type="checkbox" />{{ t('代码自动换行', 'Wrap code') }}</label>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>{{ t('代码缩进', 'Code indent') }}<select v-model.number="store.preferences.indent" class="select"><option :value="2">2</option><option :value="4">4</option><option :value="8">8</option></select></label>
|
||||
<label>{{ t('新建代码块默认语言', 'Default language for new code blocks') }}<input v-model="store.preferences.defaultLanguage" class="input" maxlength="40" placeholder="python" /></label>
|
||||
</div>
|
||||
<form class="inline-actions" @submit.prevent="save"><input v-model="name" class="input" maxlength="40" :aria-label="t('预设名称', 'Preset name')" :placeholder="t('我的预设名称', 'My preset name')" /><button class="button-primary">{{ t('保存为预设', 'Save preset') }}</button></form>
|
||||
<p v-if="error" class="error-banner" role="alert">{{ error }}</p>
|
||||
<div v-for="(preset, index) in store.customPresets" :key="preset.name" class="inline-actions"><strong>{{ preset.name }}</strong><button class="button-secondary" @click="store.apply(preset.preferences)">{{ t('应用', 'Apply') }}</button><button class="button-danger" @click="store.customPresets.splice(index, 1)">{{ t('删除', 'Delete') }}</button></div>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped>
|
||||
.markdown-preferences { display: grid; gap: 16px; padding: 16px; margin-block: 16px; }
|
||||
.markdown-preferences .form-grid > label { display: grid; gap: 6px; min-width: 0; }
|
||||
.markdown-switches { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; }
|
||||
.markdown-switches label { display: flex; align-items: center; gap: 8px; }
|
||||
.inline-actions { flex-wrap: wrap; }
|
||||
</style>
|
||||
@@ -15,6 +15,8 @@ import { EditorView as CodeMirror } from '@codemirror/view'
|
||||
import { renderMarkdown } from '@/utils/markdown'
|
||||
import { useEditorStore } from '@/stores/editor'
|
||||
import { executeEditorCommand } from '@/services/editorCommandService'
|
||||
import { headingFoldKey } from './headingFolding'
|
||||
import { useMarkdownPreferencesStore } from '@/stores/markdownPreferences'
|
||||
|
||||
type EditorComponent = { getEditor: () => Editor | undefined }
|
||||
|
||||
@@ -53,6 +55,47 @@ afterEach(() => {
|
||||
})
|
||||
|
||||
describe('VisualMarkdownEditor formatting toolbars', () => {
|
||||
it('applies syntax and renderer preferences when opening the visual editor', async () => {
|
||||
const preferences = useMarkdownPreferencesStore()
|
||||
preferences.preferences.heading = 'setext'
|
||||
preferences.preferences.bullet = '+'
|
||||
preferences.preferences.fence = '~'
|
||||
preferences.preferences.callouts = false
|
||||
preferences.preferences.math = false
|
||||
preferences.preferences.autoLinks = false
|
||||
const wrapper = mount(VisualMarkdownEditor, { props: { initialContent: '# Heading\n\n- first\n- second\n\n> [!NOTE]\n> text\n\nhttps://example.com\n\n```text\ncode\n```' }, attachTo: document.body })
|
||||
mounted.push(wrapper)
|
||||
const editor = await waitForEditor(wrapper)
|
||||
const result = editor.action(getMarkdown())
|
||||
expect(result).toContain('Heading\n===')
|
||||
expect(result).toContain('+ first')
|
||||
expect(result).toContain('~~~text')
|
||||
expect(wrapper.find('.markdown-callout').exists()).toBe(false)
|
||||
expect(wrapper.find('.ProseMirror a').exists()).toBe(false)
|
||||
})
|
||||
it('folds heading sections, retains nested state and opens hidden outline targets', async () => {
|
||||
const source = '# A\n\nbody\n\n## B\n\nchild\n\n# C\n\nvisible'
|
||||
const wrapper = mount(VisualMarkdownEditor, { props: { initialContent: source }, attachTo: document.body })
|
||||
mounted.push(wrapper)
|
||||
const editor = await waitForEditor(wrapper)
|
||||
await wrapper.get('.heading-fold-toggle[aria-label="折叠 H2 B"]').trigger('click')
|
||||
await wrapper.get('.heading-fold-toggle[aria-label="折叠 H1 A"]').trigger('click')
|
||||
expect(wrapper.findAll('.heading-fold-hidden').length).toBeGreaterThan(1)
|
||||
await wrapper.get('.heading-fold-toggle[aria-label="展开 H1 A"]').trigger('click')
|
||||
expect(wrapper.get('.heading-fold-toggle[aria-label="展开 H2 B"]').attributes('aria-expanded')).toBe('false')
|
||||
editor.action(ctx => {
|
||||
const view = ctx.get(editorViewCtx)
|
||||
let position = 0
|
||||
view.state.doc.descendants((node, pos) => { if (node.isText && node.text === 'child') position = pos })
|
||||
view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, position)))
|
||||
expect(headingFoldKey.getState(view.state)?.size).toBe(0)
|
||||
})
|
||||
expect(wrapper.find('.heading-fold-hidden').exists()).toBe(false)
|
||||
expect(editor.action(getMarkdown()).trim()).toBe(source)
|
||||
await wrapper.get('button[aria-label="折叠所有章节"]').trigger('click')
|
||||
await wrapper.get('button[aria-label="展开所有章节"]').trigger('click')
|
||||
expect(wrapper.find('.heading-fold-hidden').exists()).toBe(false)
|
||||
})
|
||||
it('renders and folds callouts without losing portable Markdown on serialization', async () => {
|
||||
const source = '> [!WARNING]- 注意\n>\n> **正文**\n>\n> > [!TIP] 内层\n> > 内容'
|
||||
const wrapper = mount(VisualMarkdownEditor, { props: { initialContent: source }, attachTo: document.body })
|
||||
|
||||
@@ -8,7 +8,9 @@ import { Link } from '@element-plus/icons-vue'
|
||||
import { Crepe } from '@milkdown/crepe'
|
||||
import { codeBlockConfig } from '@milkdown/kit/component/code-block'
|
||||
import { basicSetup } from 'codemirror'
|
||||
import { keymap } from '@codemirror/view'
|
||||
import { keymap, EditorView as CodeEditorView } from '@codemirror/view'
|
||||
import { indentUnit } from '@codemirror/language'
|
||||
import { EditorState as CodeEditorState } from '@codemirror/state'
|
||||
import { indentWithTab } from '@codemirror/commands'
|
||||
import { shikiEditorTheme, shikiLanguages, renderCodeLanguage } from './shikiCodeMirror'
|
||||
import './language-icons.css'
|
||||
@@ -16,7 +18,7 @@ import { installLanguagePickerPopover } from './languagePickerPopover'
|
||||
import { installCodeBlockLabels } from './codeBlockLabels'
|
||||
import { createMermaidPreview } from './mermaidPreview'
|
||||
import { splitNoteMetadata, updateMetadataTags } from './noteMetadata'
|
||||
import { getMarkdown } from '@milkdown/kit/utils'
|
||||
import { getMarkdown, $remark } from '@milkdown/kit/utils'
|
||||
import {
|
||||
createCodeBlockCommand,
|
||||
toggleEmphasisCommand,
|
||||
@@ -28,7 +30,7 @@ import {
|
||||
wrapInHeadingCommand,
|
||||
wrapInOrderedListCommand,
|
||||
} from '@milkdown/kit/preset/commonmark'
|
||||
import { commandsCtx, editorViewCtx, parserCtx } from '@milkdown/kit/core'
|
||||
import { commandsCtx, editorViewCtx, parserCtx, remarkStringifyOptionsCtx } from '@milkdown/kit/core'
|
||||
import { Slice } from '@milkdown/kit/prose/model'
|
||||
import { registerEditorCommands, type CommandHandler, type EditorCommandId } from '@/services/editorCommandService'
|
||||
import { TextSelection } from '@milkdown/kit/prose/state'
|
||||
@@ -41,11 +43,16 @@ import { applyMarkdownFontSize, fontSizeMarkdownPlugin } from './fontSizeMarkdow
|
||||
import { inlineCodeInputPlugin } from './inlineCodeInput'
|
||||
import { calloutPlugin, configureCalloutSerialization } from './calloutPlugin'
|
||||
import { calloutTypes } from '@/utils/callouts'
|
||||
import { headingFoldingPlugin, headingFoldTransaction } from './headingFolding'
|
||||
import { useHeadingAppearanceStore } from '@/stores/headingAppearance'
|
||||
import { useMarkdownPreferencesStore } from '@/stores/markdownPreferences'
|
||||
import { t } from '@/i18n'
|
||||
import '@milkdown/crepe/theme/common/style.css'
|
||||
import '@milkdown/crepe/theme/frame.css'
|
||||
|
||||
const props = defineProps<{ initialContent: string }>()
|
||||
const headingAppearance = useHeadingAppearanceStore()
|
||||
const markdownPreferences = { ...useMarkdownPreferencesStore().normalized }
|
||||
const metadata = ref(splitNoteMetadata(props.initialContent))
|
||||
const tagDraft = ref('')
|
||||
function setTags(tags: string[]) {
|
||||
@@ -93,8 +100,14 @@ function insertCallout(event: Event) {
|
||||
function installCommands() {
|
||||
const targetPath = editorStore.currentFilePath
|
||||
const handlers: Partial<Record<EditorCommandId, CommandHandler>> = {}
|
||||
for (const [id, action] of [['editor.heading.toggle-fold', 'toggle'], ['editor.heading.fold-all', 'all'], ['editor.heading.unfold-all', 'none']] as const) {
|
||||
handlers[id] = () => { foldHeadings(action); return { ok: true } }
|
||||
}
|
||||
const toolbar: ToolbarCommand[] = ['bold', 'italic', 'ordered-list', 'bullet-list', 'inline-code', 'code-block', 'inline-math', 'math-block']
|
||||
for (const command of toolbar) handlers[`editor.${command}`] = () => { runCommand(command); return { ok: true } }
|
||||
for (const command of toolbar) {
|
||||
if (!markdownPreferences.math && command.includes('math')) continue
|
||||
handlers[`editor.${command}`] = () => { runCommand(command); return { ok: true } }
|
||||
}
|
||||
handlers['editor.paragraph'] = () => { crepe!.editor.action(callCommand(turnIntoTextCommand.key)); return { ok: true } }
|
||||
handlers['editor.heading'] = params => {
|
||||
if (!Number.isInteger(params) || Number(params) < 1 || Number(params) > 6) return { ok: false, reason: 'invalid-params' }
|
||||
@@ -113,6 +126,7 @@ function installCommands() {
|
||||
return { ok: true }
|
||||
}
|
||||
handlers['editor.callout'] = params => {
|
||||
if (!markdownPreferences.callouts) return { ok: false, reason: 'unsupported' }
|
||||
if (!params || typeof params !== 'object') return { ok: false, reason: 'invalid-params' }
|
||||
const { type, title = '', body = '', fold = '' } = params as Record<string, unknown>
|
||||
if (typeof type !== 'string' || !/^[\w-]{1,64}$/.test(type) || typeof title !== 'string' || /[\r\n]/.test(title)
|
||||
@@ -126,6 +140,14 @@ function installCommands() {
|
||||
handlers,
|
||||
})
|
||||
}
|
||||
|
||||
function foldHeadings(action: 'toggle' | 'all' | 'none') {
|
||||
crepe?.editor.action(ctx => {
|
||||
const view = ctx.get(editorViewCtx)
|
||||
const tr = headingFoldTransaction(view.state, action)
|
||||
if (tr) view.dispatch(tr)
|
||||
})
|
||||
}
|
||||
const diagramPreviews = new Map<string, { source: string; apply: (value: HTMLElement) => void }>()
|
||||
function renderDiagram(source: string, apply: (value: HTMLElement) => void) {
|
||||
for (const [id, entry] of diagramPreviews) {
|
||||
@@ -173,7 +195,7 @@ function runCommand(command: ToolbarCommand) {
|
||||
'ordered-list': callCommand(wrapInOrderedListCommand.key),
|
||||
'bullet-list': callCommand(wrapInBulletListCommand.key),
|
||||
'inline-code': callCommand(toggleInlineCodeCommand.key),
|
||||
'code-block': callCommand(createCodeBlockCommand.key, ''),
|
||||
'code-block': callCommand(createCodeBlockCommand.key, markdownPreferences.defaultLanguage),
|
||||
'inline-math': callCommand('ToggleLatex'),
|
||||
'math-block': callCommand(createCodeBlockCommand.key, 'LaTeX'),
|
||||
}
|
||||
@@ -240,7 +262,7 @@ onMounted(async () => {
|
||||
crepe = new Crepe({
|
||||
root: editorRoot.value,
|
||||
defaultValue: metadata.value?.body ?? props.initialContent,
|
||||
features: { [Crepe.Feature.TopBar]: false },
|
||||
features: { [Crepe.Feature.TopBar]: false, [Crepe.Feature.Latex]: markdownPreferences.math },
|
||||
featureConfigs: {
|
||||
[Crepe.Feature.Placeholder]: { text: t('开始记录你的想法…', 'Start writing your thoughts…') },
|
||||
[Crepe.Feature.CodeMirror]: {
|
||||
@@ -304,14 +326,35 @@ onMounted(async () => {
|
||||
languages: shikiLanguages(themeStore.resolvedCodeBlockTheme),
|
||||
renderLanguage: renderCodeLanguage,
|
||||
renderPreview: (language, content, applyPreview) => language.trim().toLowerCase() === 'mermaid'
|
||||
? renderDiagram(content, applyPreview)
|
||||
? markdownPreferences.diagrams ? renderDiagram(content, applyPreview) : null
|
||||
: config.renderPreview(language, content, applyPreview),
|
||||
extensions: [basicSetup, keymap.of([indentWithTab]), shikiEditorTheme(themeStore.resolvedCodeBlockTheme)],
|
||||
extensions: [basicSetup, keymap.of([indentWithTab]), shikiEditorTheme(themeStore.resolvedCodeBlockTheme),
|
||||
indentUnit.of(' '.repeat(markdownPreferences.indent)), CodeEditorState.tabSize.of(markdownPreferences.indent),
|
||||
...(markdownPreferences.wrapCode ? [CodeEditorView.lineWrapping] : [])],
|
||||
})))
|
||||
crepe.editor.config(ctx => ctx.update(remarkStringifyOptionsCtx, options => ({
|
||||
...options, setext: markdownPreferences.heading === 'setext', bullet: markdownPreferences.bullet,
|
||||
incrementListMarker: markdownPreferences.incrementList, fence: markdownPreferences.fence,
|
||||
})))
|
||||
if (!markdownPreferences.autoLinks) crepe.editor.use($remark('disable-bare-autolinks', () => () => (tree, file) => {
|
||||
type Ast = { type: string; value?: string; url?: string; children?: Ast[]; position?: { start: { offset?: number }; end: { offset?: number } } }
|
||||
const source = String(file.value)
|
||||
const walk = (node: Ast) => {
|
||||
if (node.type === 'link' && node.position) {
|
||||
const raw = source.slice(node.position.start.offset, node.position.end.offset)
|
||||
if (/^(?:https?:\/\/|www\.)\S+$/.test(raw)) {
|
||||
node.type = 'text'; node.value = raw; delete node.children; delete node.url
|
||||
}
|
||||
}
|
||||
node.children?.forEach(walk)
|
||||
}
|
||||
walk(tree as Ast)
|
||||
}))
|
||||
crepe.editor.use(fontSizeMarkdownPlugin)
|
||||
crepe.editor.use(inlineCodeInputPlugin)
|
||||
crepe.editor.use(calloutPlugin)
|
||||
crepe.editor.config(configureCalloutSerialization)
|
||||
if (markdownPreferences.callouts) crepe.editor.use(calloutPlugin)
|
||||
crepe.editor.use(headingFoldingPlugin)
|
||||
if (markdownPreferences.callouts) crepe.editor.config(configureCalloutSerialization)
|
||||
crepe.on((listener) => {
|
||||
listener.markdownUpdated((_ctx, markdown, previousMarkdown) => {
|
||||
// 忽略编辑器初始化/回显事件，防止无内容变化时触发自动保存循环。
|
||||
@@ -350,9 +393,11 @@ defineExpose({ getEditor: () => crepe?.editor })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DiagramInteractions class="visual-editor">
|
||||
<DiagramInteractions class="visual-editor" :class="{ 'hide-code-line-numbers': !markdownPreferences.lineNumbers }" :data-heading-style="headingAppearance.preferences.custom ? 'custom' : undefined" :style="headingAppearance.cssVariables">
|
||||
<ActionDialog v-if="actionDialog" v-bind="actionDialog" @resolve="resolveAction" />
|
||||
<div class="markdown-toolbar" role="toolbar" :aria-label="t('Markdown 格式工具栏', 'Markdown formatting toolbar')">
|
||||
<button type="button" :title="t('折叠所有章节', 'Fold all sections')" :aria-label="t('折叠所有章节', 'Fold all sections')" @click="foldHeadings('all')">▸</button>
|
||||
<button type="button" :title="t('展开所有章节', 'Unfold all sections')" :aria-label="t('展开所有章节', 'Unfold all sections')" @click="foldHeadings('none')">▾</button>
|
||||
<label class="toolbar-select heading-select" :title="t('设置标题级别', 'Set heading level')">
|
||||
<span class="format-glyph heading-glyph">H</span>
|
||||
<select :aria-label="t('标题级别', 'Heading level')" @change="applyHeading">
|
||||
@@ -383,11 +428,11 @@ defineExpose({ getEditor: () => crepe?.editor })
|
||||
<span class="toolbar-divider" />
|
||||
<button type="button" :title="t('行内代码', 'Inline code')" :aria-label="t('行内代码', 'Inline code')" @pointerdown.prevent="runCommand('inline-code')"><code class="code-glyph"></></code></button>
|
||||
<button type="button" :title="t('代码块', 'Code block')" :aria-label="t('代码块', 'Code block')" @pointerdown.prevent="runCommand('code-block')"><span class="block-glyph">{ }</span></button>
|
||||
<button type="button" :title="t('行内公式', 'Inline formula')" :aria-label="t('行内公式', 'Inline formula')" @pointerdown.prevent="runCommand('inline-math')"><span class="math-glyph">ƒx</span></button>
|
||||
<button type="button" :title="t('公式块', 'Formula block')" :aria-label="t('公式块', 'Formula block')" @pointerdown.prevent="runCommand('math-block')"><span class="math-glyph">∑</span></button>
|
||||
<button v-if="markdownPreferences.math" type="button" :title="t('行内公式', 'Inline formula')" :aria-label="t('行内公式', 'Inline formula')" @pointerdown.prevent="runCommand('inline-math')"><span class="math-glyph">ƒx</span></button>
|
||||
<button v-if="markdownPreferences.math" type="button" :title="t('公式块', 'Formula block')" :aria-label="t('公式块', 'Formula block')" @pointerdown.prevent="runCommand('math-block')"><span class="math-glyph">∑</span></button>
|
||||
<button type="button" :title="t('插入链接', 'Insert link')" :aria-label="t('插入链接', 'Insert link')" @pointerdown.prevent="applyLink"><AppIcon :icon="Link" :size="17" /></button>
|
||||
<label class="toolbar-select">
|
||||
<select :aria-label="t('插入警告框', 'Insert callout')" @change="insertCallout">
|
||||
<select v-if="markdownPreferences.callouts" :aria-label="t('插入警告框', 'Insert callout')" @change="insertCallout">
|
||||
<option value="">{{ t('提示框', 'Callout') }}</option>
|
||||
<option v-for="(_, type) in calloutTypes" :key="type" :value="type">{{ type }}</option>
|
||||
</select>
|
||||
@@ -411,6 +456,7 @@ defineExpose({ getEditor: () => crepe?.editor })
|
||||
|
||||
<style scoped>
|
||||
.visual-editor { display: flex; flex: 1; min-height: 0; flex-direction: column; background: var(--color-background-primary); }
|
||||
.hide-code-line-numbers :deep(.cm-lineNumbers) { display: none; }
|
||||
.markdown-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-height: 42px; padding: 5px var(--space-lg); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-primary); }
|
||||
.markdown-toolbar button { display: inline-grid; place-items: center; min-width: 32px; min-height: 30px; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--color-text-primary); }
|
||||
.markdown-toolbar button:hover, .toolbar-select:hover { background: var(--color-background-hover); color: var(--color-text-primary); }
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { expect, it } from 'vitest'
|
||||
import { Schema } from '@milkdown/kit/prose/model'
|
||||
import { EditorState, TextSelection } from '@milkdown/kit/prose/state'
|
||||
import { headingSections, headingFoldTransaction } from './headingFolding'
|
||||
|
||||
const schema = new Schema({ nodes: {
|
||||
doc: { content: 'block+' }, text: { group: 'inline' },
|
||||
heading: { group: 'block', content: 'inline*', attrs: { level: { default: 1 } } },
|
||||
paragraph: { group: 'block', content: 'inline*' },
|
||||
blockquote: { group: 'block', content: 'block+' },
|
||||
} })
|
||||
const h = (level: number, text: string) => schema.nodes.heading!.create({ level }, schema.text(text))
|
||||
const p = (text: string) => schema.nodes.paragraph!.create(null, schema.text(text))
|
||||
it('ends sections at same-or-higher headings and confines nested quotes to their parent', () => {
|
||||
const doc = schema.nodes.doc!.create(null, [h(1, 'A'), p('a'), h(2, 'B'), p('b'), h(1, 'C'), p('c'), schema.nodes.blockquote!.create(null, [h(2, 'D'), p('d')])])
|
||||
const sections = headingSections(doc)
|
||||
expect(sections.map(section => doc.nodeAt(section.from)?.textContent)).toEqual(['A', 'B', 'C', 'D'])
|
||||
expect(sections[0]!.end).toBe(sections[2]!.from)
|
||||
expect(sections[1]!.end).toBe(sections[2]!.from)
|
||||
expect(sections[3]!.end).toBe(doc.content.size - 1)
|
||||
})
|
||||
it('moves the caret out of collapsed content without changing document content or history', () => {
|
||||
const doc = schema.nodes.doc!.create(null, [h(1, 'A'), p('body'), h(1, 'B')])
|
||||
const state = EditorState.create({ doc, selection: TextSelection.create(doc, 5) })
|
||||
const tr = headingFoldTransaction(state, 'all')!
|
||||
expect(tr.doc.eq(doc)).toBe(true)
|
||||
expect(tr.docChanged).toBe(false)
|
||||
expect(tr.selection.from).toBe(1)
|
||||
expect(tr.getMeta('addToHistory')).toBe(false)
|
||||
expect(headingSections(doc)).toHaveLength(1)
|
||||
})
|
||||
@@ -0,0 +1,119 @@
|
||||
import { $prose } from '@milkdown/kit/utils'
|
||||
import { Plugin, PluginKey, TextSelection, type EditorState } from '@milkdown/kit/prose/state'
|
||||
import { Decoration, DecorationSet } from '@milkdown/kit/prose/view'
|
||||
import type { Node } from '@milkdown/kit/prose/model'
|
||||
import { t } from '@/i18n'
|
||||
|
||||
export const headingFoldKey = new PluginKey<Set<number>>('heading-folding')
|
||||
type Section = { from: number; body: number; end: number; level: number }
|
||||
const sectionCache = new WeakMap<Node, Section[]>()
|
||||
/** A section ends at the next sibling heading of the same or a higher rank. */
|
||||
export function headingSections(doc: Node): Section[] {
|
||||
const cached = sectionCache.get(doc)
|
||||
if (cached) return cached
|
||||
const sections: Section[] = []
|
||||
function visit(parent: Node, start: number) {
|
||||
const children: { node: Node; pos: number }[] = []
|
||||
parent.forEach((node, offset) => children.push({ node, pos: start + offset }))
|
||||
const following: { pos: number; level: number }[] = []
|
||||
for (let i = children.length - 1; i >= 0; i--) {
|
||||
const { node, pos } = children[i]!
|
||||
if (node.type.name === 'heading') {
|
||||
while (following.length && following[following.length - 1]!.level > node.attrs.level) following.pop()
|
||||
const next = following[following.length - 1]
|
||||
const body = pos + node.nodeSize
|
||||
const end = next?.pos ?? start + parent.content.size
|
||||
if (end > body) sections.push({ from: pos, body, end, level: Number(node.attrs.level) })
|
||||
following.push({ pos, level: Number(node.attrs.level) })
|
||||
}
|
||||
if (!node.isTextblock && node.childCount) visit(node, pos + 1)
|
||||
}
|
||||
}
|
||||
visit(doc, 0)
|
||||
sections.sort((a, b) => a.from - b.from)
|
||||
sectionCache.set(doc, sections)
|
||||
return sections
|
||||
}
|
||||
|
||||
export function headingFoldTransaction(state: EditorState, action: 'toggle' | 'all' | 'none', position?: number) {
|
||||
const sections = headingSections(state.doc)
|
||||
const folded = new Set(headingFoldKey.getState(state) ?? [])
|
||||
if (action === 'none') folded.clear()
|
||||
else if (action === 'all') sections.forEach(section => folded.add(section.from))
|
||||
else {
|
||||
const section = position === undefined
|
||||
? sections.filter(item => item.from <= state.selection.from && item.end >= state.selection.from).pop()
|
||||
: sections.find(item => item.from === position)
|
||||
if (!section) return null
|
||||
if (folded.has(section.from)) folded.delete(section.from)
|
||||
else folded.add(section.from)
|
||||
}
|
||||
const tr = state.tr
|
||||
const enclosing = sections.find(section => folded.has(section.from) && state.selection.to >= section.body && state.selection.from < section.end)
|
||||
if (enclosing) tr.setSelection(TextSelection.near(state.doc.resolve(enclosing.from + 1)))
|
||||
return tr.setMeta(headingFoldKey, folded).setMeta('addToHistory', false)
|
||||
}
|
||||
|
||||
export const headingFoldingPlugin = $prose(() => new Plugin<Set<number>>({
|
||||
key: headingFoldKey,
|
||||
state: {
|
||||
init: () => new Set(),
|
||||
apply(tr, previous) {
|
||||
const explicit = tr.getMeta(headingFoldKey) as Set<number> | undefined
|
||||
if (explicit) return explicit
|
||||
const sections = headingSections(tr.doc)
|
||||
const mapped = new Set<number>()
|
||||
for (const old of previous) {
|
||||
const result = tr.mapping.mapResult(old, 1)
|
||||
if (!result.deleted && sections.some(section => section.from === result.pos)) mapped.add(result.pos)
|
||||
}
|
||||
// Outline jumps, find and keyboard navigation must never leave a hidden caret.
|
||||
if (tr.selectionSet || tr.docChanged) {
|
||||
for (const section of sections) if (tr.selection.to >= section.body && tr.selection.from < section.end) mapped.delete(section.from)
|
||||
}
|
||||
return mapped
|
||||
},
|
||||
},
|
||||
props: {
|
||||
decorations(state) {
|
||||
const folded = headingFoldKey.getState(state) ?? new Set<number>()
|
||||
const sections = headingSections(state.doc)
|
||||
const decorations: Decoration[] = []
|
||||
for (const section of sections) {
|
||||
const collapsed = folded.has(section.from)
|
||||
decorations.push(Decoration.widget(section.from + 1, view => {
|
||||
const button = document.createElement('button')
|
||||
button.type = 'button'; button.className = 'heading-fold-toggle'; button.contentEditable = 'false'
|
||||
button.textContent = collapsed ? '▸' : '▾'
|
||||
button.setAttribute('aria-expanded', String(!collapsed))
|
||||
button.setAttribute('aria-label', `${collapsed ? t('展开', 'Expand') : t('折叠', 'Collapse')} H${section.level} ${state.doc.nodeAt(section.from)?.textContent ?? ''}`)
|
||||
button.onmousedown = event => event.preventDefault()
|
||||
button.onclick = event => {
|
||||
event.preventDefault()
|
||||
const tr = headingFoldTransaction(view.state, 'toggle', section.from)
|
||||
if (tr) view.dispatch(tr)
|
||||
}
|
||||
return button
|
||||
}, { key: `${section.from}:${collapsed}:${state.doc.nodeAt(section.from)?.textContent}`, side: -1, stopEvent: () => true }))
|
||||
}
|
||||
const hidden: { body: number; end: number }[] = []
|
||||
for (const section of sections) {
|
||||
if (!folded.has(section.from)) continue
|
||||
const previous = hidden[hidden.length - 1]
|
||||
if (previous && section.body <= previous.end) previous.end = Math.max(previous.end, section.end)
|
||||
else hidden.push({ body: section.body, end: section.end })
|
||||
}
|
||||
let rangeIndex = 0
|
||||
state.doc.descendants((node, pos) => {
|
||||
if (!node.isBlock) return
|
||||
while (hidden[rangeIndex] && pos >= hidden[rangeIndex]!.end) rangeIndex++
|
||||
const range = hidden[rangeIndex]
|
||||
if (range && pos >= range.body && pos + node.nodeSize <= range.end) {
|
||||
decorations.push(Decoration.node(pos, pos + node.nodeSize, { class: 'heading-fold-hidden' }))
|
||||
return false
|
||||
}
|
||||
})
|
||||
return DecorationSet.create(state.doc, decorations)
|
||||
},
|
||||
},
|
||||
}))
|
||||
@@ -5,6 +5,8 @@ const { actionDialog, resolveAction, askConfirm } = useActionDialog()
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import type { ProviderConfig } from '@/contracts'
|
||||
import ProviderForm from './ProviderForm.vue'
|
||||
import HeadingStyleSettings from '@/features/editor/HeadingStyleSettings.vue'
|
||||
import MarkdownPreferenceSettings from '@/features/editor/MarkdownPreferenceSettings.vue'
|
||||
import ChatPersonaDialog from '@/features/chat/ChatPersonaDialog.vue'
|
||||
import ProviderLogo from './ProviderLogo.vue'
|
||||
import ModelRoutingSettings from './ModelRoutingSettings.vue'
|
||||
@@ -85,7 +87,7 @@ async function chooseDefaultModel(provider: ProviderConfig, event: Event) {
|
||||
<ChatPersonaDialog v-if="showPersona" @close="showPersona = false" />
|
||||
<div v-if="activeSection === 'general'" class="panel settings-section"><h2>{{ t('通用', 'General') }}</h2><label class="setting-row"><span><strong>{{ t('恢复上次 Vault', 'Restore last Vault') }}</strong><small>{{ t('启动后自动打开最近使用的知识库', 'Open the most recently used knowledge base at startup') }}</small></span><input v-model="settingsStore.restoreLastVault" type="checkbox" /></label><div class="setting-row"><span><strong>{{ t('自动保存间隔', 'Autosave interval') }}</strong><small>{{ t('编辑停止后等待多久写入文件', 'How long to wait after editing before saving') }}</small></span><select v-model.number="settingsStore.autoSaveInterval" class="select short"><option :value="500">0.5 {{ t('秒', 'sec') }}</option><option :value="1500">1.5 {{ t('秒', 'sec') }}</option><option :value="3000">3 {{ t('秒', 'sec') }}</option></select></div><div class="setting-row"><span><strong>{{ t('界面语言', 'Interface language') }}</strong><small>{{ t('切换后立即应用到界面', 'Applied to the interface immediately') }}</small></span><select v-model="settingsStore.language" class="select short"><option value="zh-CN">简体中文</option><option value="en">English</option></select></div><div class="setting-row"><span><strong>{{ t('版本', 'Version') }}</strong><small>Desktop / AI Core</small></span><span>{{ settingsStore.appVersion }} / {{ settingsStore.aiCoreVersion }}</span></div></div>
|
||||
|
||||
<div v-else-if="activeSection === 'editor'" class="panel settings-section"><h2>{{ t('编辑器', 'Editor') }}</h2><div class="setting-row"><span><strong>{{ t('默认模式', 'Default mode') }}</strong><small>{{ t('新打开文件使用的编辑器模式', 'Editor mode used for newly opened files') }}</small></span><select v-model="settingsStore.defaultEditorMode" class="select short"><option value="wysiwyg">{{ t('写作与预览', 'Writing and preview') }}</option><option value="source">{{ t('Markdown 源码', 'Markdown source') }}</option></select></div><div class="setting-row"><span><strong>{{ t('字号', 'Font size') }}</strong></span><input v-model.number="themeStore.fontEditorSize" class="input short" type="number" min="12" max="32" /></div><div class="setting-row"><span><strong>{{ t('行高', 'Line height') }}</strong></span><input v-model.number="themeStore.lineHeight" class="input short" type="number" min="1.2" max="2.4" step="0.1" /></div><div class="setting-row"><span><strong>{{ t('行宽', 'Line width') }}</strong><small>{{ t('Markdown 预览最大字符宽度', 'Maximum character width for Markdown preview') }}</small></span><input v-model.number="settingsStore.editorLineWidth" class="input short" type="number" min="40" max="140" /></div><label class="setting-row"><span><strong>{{ t('拼写检查', 'Spell check') }}</strong><small>{{ t('在写作与源码编辑器中使用系统拼写检查', 'Use system spell checking in visual and source editors') }}</small></span><input v-model="settingsStore.spellCheck" type="checkbox" /></label></div>
|
||||
<div v-else-if="activeSection === 'editor'" class="panel settings-section"><h2>{{ t('编辑器', 'Editor') }}</h2><div class="setting-row"><span><strong>{{ t('默认模式', 'Default mode') }}</strong><small>{{ t('新打开文件使用的编辑器模式', 'Editor mode used for newly opened files') }}</small></span><select v-model="settingsStore.defaultEditorMode" class="select short"><option value="wysiwyg">{{ t('写作与预览', 'Writing and preview') }}</option><option value="source">{{ t('Markdown 源码', 'Markdown source') }}</option></select></div><div class="setting-row"><span><strong>{{ t('字号', 'Font size') }}</strong></span><input v-model.number="themeStore.fontEditorSize" class="input short" type="number" min="12" max="32" /></div><div class="setting-row"><span><strong>{{ t('行高', 'Line height') }}</strong></span><input v-model.number="themeStore.lineHeight" class="input short" type="number" min="1.2" max="2.4" step="0.1" /></div><div class="setting-row"><span><strong>{{ t('行宽', 'Line width') }}</strong><small>{{ t('Markdown 预览最大字符宽度', 'Maximum character width for Markdown preview') }}</small></span><input v-model.number="settingsStore.editorLineWidth" class="input short" type="number" min="40" max="140" /></div><label class="setting-row"><span><strong>{{ t('拼写检查', 'Spell check') }}</strong><small>{{ t('在写作与源码编辑器中使用系统拼写检查', 'Use system spell checking in visual and source editors') }}</small></span><input v-model="settingsStore.spellCheck" type="checkbox" /></label><MarkdownPreferenceSettings /><HeadingStyleSettings /></div>
|
||||
|
||||
<div v-else-if="activeSection === 'providers'" class="settings-section">
|
||||
<section class="panel provider-settings-card">
|
||||
|
||||
@@ -5,6 +5,7 @@ import { t } from '@/i18n'
|
||||
import { getCommunityThemePreviewCss, mockCommunityThemes } from '@/services/themePackageService'
|
||||
import tokensCss from '@/styles/tokens.css?raw'
|
||||
import featuresCss from '@/styles/features.css?raw'
|
||||
import headingsCss from '@/styles/headings.css?raw'
|
||||
import calloutsCss from '@/styles/callouts.css?raw'
|
||||
import { calloutTypes } from '@/utils/callouts'
|
||||
import specimenHtml from './themeSpecimen.html?raw'
|
||||
@@ -22,7 +23,7 @@ const previewDocument = computed(() => {
|
||||
policy.content = "default-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src data:; base-uri 'none'; form-action 'none'"
|
||||
doc.head.append(policy)
|
||||
const style = doc.createElement('style')
|
||||
style.textContent = `${tokensCss}\n${featuresCss}\n${calloutsCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nhtml { height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body { height:auto !important; min-height:100%; overflow:visible !important; margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
|
||||
style.textContent = `${tokensCss}\n${featuresCss}\n${calloutsCss}\n${headingsCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nhtml { height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body { height:auto !important; min-height:100%; overflow:visible !important; margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
|
||||
|
||||
doc.head.append(style)
|
||||
const article = doc.createElement('article')
|
||||
|
||||
@@ -96,7 +96,7 @@ it.each(mockCommunityThemes)('previews uninstalled $theme_id using its actual CS
|
||||
|
||||
it('offers and applies the paper theme update without discarding the active theme', async () => {
|
||||
const store = useThemeStore()
|
||||
const old = await inspectThemePackage(paperPackage.replace('version: 1.7.0', 'version: 1.6.1'))
|
||||
const old = await inspectThemePackage(paperPackage.replace('version: 1.8.0', 'version: 1.6.1'))
|
||||
await store.installThemeFromInspection(old.manifest, old.css)
|
||||
store.applyTheme('paper-moments')
|
||||
wrapper = mount(ThemesView, { global: { stubs: { MarkdownContent: true } } })
|
||||
@@ -105,6 +105,6 @@ it('offers and applies the paper theme update without discarding the active them
|
||||
const card = wrapper.findAll('article.theme-card').find(item => item.text().includes('Paper Moments'))!
|
||||
await card.findAll('button').find(button => button.text() === '更新')!.trigger('click')
|
||||
await flushPromises()
|
||||
expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.7.0')
|
||||
expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.8.0')
|
||||
expect(document.getElementById('theme-style-paper-moments')!.textContent).toContain('.surface-nested')
|
||||
})
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import HeadingStyleSettings from '@/features/editor/HeadingStyleSettings.vue'
|
||||
import AppDialog from '@/components/common/AppDialog.vue'
|
||||
import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
import MarkdownContent from '@/components/common/MarkdownContent.vue'
|
||||
@@ -222,6 +223,7 @@ onMounted(() => {
|
||||
<div class="field"><label>{{ t('字体', 'Font') }}</label><select v-model="themeStore.fontEditorFamily" class="select"><option value="system-ui">{{ t('系统字体', 'System font') }}</option><option value="serif">{{ t('衬线字体', 'Serif') }}</option><option value="var(--font-ui-mono)">{{ t('等宽字体', 'Monospace') }}</option></select></div>
|
||||
<div class="field"><label>{{ t('代码块样式', 'Code block style') }}</label><select v-model="themeStore.codeBlockTheme" class="select"><option value="auto">{{ t('跟随主题', 'Follow theme') }}</option><option value="github-light">GitHub Light</option><option value="github-dark">GitHub Dark</option></select><small>{{ t('Markdown 渲染使用对应的 Shiki GitHub 主题', 'Markdown rendering uses the matching Shiki GitHub theme') }}</small></div>
|
||||
</div>
|
||||
<HeadingStyleSettings />
|
||||
<div class="editor-preview" :style="{ fontSize: `${themeStore.fontEditorSize}px`, lineHeight: themeStore.lineHeight, fontFamily: themeStore.fontEditorFamily }">
|
||||
<div class="preview-heading"><h3>{{ t('主题预览', 'Theme Preview') }}</h3><span class="badge info">{{ codeThemeLabel }}</span></div>
|
||||
<p>{{ t('知识的价值不只在于保存，更在于被重新发现和使用。', 'Knowledge gains value when it can be rediscovered and used.') }}</p>
|
||||
|
||||
@@ -17,3 +17,6 @@ console.log(note);</code></pre><table><thead><tr><th>名称</th><th>状态</th><
|
||||
<figure class="specimen-chart"><figcaption>数据配色示例</figcaption><div role="img" aria-label="本地用量 30，提供商用量 70"><span style="height:30%;background:var(--color-accent-primary)"></span><span style="height:70%;background:var(--color-accent-secondary)"></span></div></figure>
|
||||
<p class="subtle specimen-long">超长模型标识：provider/model-with-a-very-long-identifier-for-layout-validation-012345678901234567890123456789</p>
|
||||
</div>
|
||||
|
||||
<section class="surface-nested markdown-preferences"><h2>Markdown 语法预设</h2><label>标题样式 <select class="select"><option>ATX (#)</option><option>Setext</option></select></label><label><input type="checkbox" checked> 警告框与提示框</label><button class="button-secondary">保存为预设</button></section>
|
||||
<section class="milkdown"><div class="ProseMirror"><h2><button class="heading-fold-toggle" aria-expanded="true" aria-label="折叠示例标题"></button>悬停查看折叠箭头</h2><p>折叠按钮跟随主题，键盘聚焦时也可见。</p></div></section>
|
||||
|
||||
@@ -216,6 +216,7 @@ function containingFolder(path: string): string {
|
||||
|
||||
<template>
|
||||
<section class="file-tree-panel" @click="closeContextMenu" @keydown.esc="closeContextMenu" @wheel.passive="revealSearch">
|
||||
<p v-if="workspaceStore.treeRefreshError" class="subtle" role="status">{{ t('文件树暂未同步，将自动重试。', 'File tree sync delayed; retrying automatically.') }}</p>
|
||||
<ActionDialog v-if="actionDialog" v-bind="actionDialog" @resolve="resolveAction" />
|
||||
<div class="workspace-tabs" role="tablist" :aria-label="t('工作区导航', 'Workspace navigation')" @keydown="navigateTabs">
|
||||
<button id="workspace-files-tab" role="tab" aria-controls="workspace-files-panel" :aria-selected="activeTab === 'files'" :tabindex="activeTab === 'files' ? 0 : -1" @click="switchTab('files')">{{ t('文件', 'Files') }}</button>
|
||||
|
||||
Reference in New Issue
Block a user