b78e42272e
Wire up @codemirror/lang-markdown with a custom HighlightStyle to highlight headings, bold, italic, strikethrough, links, lists, blockquotes, and inline code in the raw CodeMirror editor. The custom frontmatter plugin is kept for YAML highlighting; its heading decoration is removed in favour of the language-based parser. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { EditorState } from '@codemirror/state'
|
|
import { EditorView } from '@codemirror/view'
|
|
import { frontmatterHighlightPlugin, frontmatterHighlightTheme } from './frontmatterHighlight'
|
|
|
|
function createView(doc: string) {
|
|
const parent = document.createElement('div')
|
|
document.body.appendChild(parent)
|
|
const state = EditorState.create({
|
|
doc,
|
|
extensions: [frontmatterHighlightPlugin, frontmatterHighlightTheme(false)],
|
|
})
|
|
const view = new EditorView({ state, parent })
|
|
return { view, parent }
|
|
}
|
|
|
|
describe('frontmatterHighlightPlugin', () => {
|
|
it('applies delimiter class to --- lines', () => {
|
|
const { view, parent } = createView('---\ntitle: Hello\n---\n\n# Heading')
|
|
const delimiters = parent.querySelectorAll('.cm-frontmatter-delimiter')
|
|
expect(delimiters.length).toBeGreaterThanOrEqual(2)
|
|
view.destroy()
|
|
parent.remove()
|
|
})
|
|
|
|
it('applies key class to YAML keys', () => {
|
|
const { view, parent } = createView('---\ntitle: Hello\ntags: one\n---\n')
|
|
const keys = parent.querySelectorAll('.cm-frontmatter-key')
|
|
expect(keys.length).toBeGreaterThanOrEqual(2)
|
|
view.destroy()
|
|
parent.remove()
|
|
})
|
|
|
|
it('applies value class to YAML values', () => {
|
|
const { view, parent } = createView('---\ntitle: Hello\n---\n')
|
|
const values = parent.querySelectorAll('.cm-frontmatter-value')
|
|
expect(values.length).toBeGreaterThanOrEqual(1)
|
|
view.destroy()
|
|
parent.remove()
|
|
})
|
|
|
|
it('handles content without frontmatter', () => {
|
|
const { view, parent } = createView('# Just a heading\n\nNo frontmatter here.')
|
|
const delimiters = parent.querySelectorAll('.cm-frontmatter-delimiter')
|
|
expect(delimiters.length).toBe(0)
|
|
const keys = parent.querySelectorAll('.cm-frontmatter-key')
|
|
expect(keys.length).toBe(0)
|
|
view.destroy()
|
|
parent.remove()
|
|
})
|
|
})
|
|
|
|
describe('frontmatterHighlightTheme', () => {
|
|
it('returns an EditorView extension for light mode', () => {
|
|
const theme = frontmatterHighlightTheme(false)
|
|
expect(theme).toBeDefined()
|
|
})
|
|
|
|
it('returns an EditorView extension for dark mode', () => {
|
|
const theme = frontmatterHighlightTheme(true)
|
|
expect(theme).toBeDefined()
|
|
})
|
|
})
|