feat: support markdown annotations

package.json

@@ -109,6 +109,12 @@
           "description": "Force enable extension",
           "default": false
         },
+        "slidev.annotations": {
+          "type": "boolean",
+          "scope": "window",
+          "description": "Display annotations for slides markdown files",
+          "default": true
+        },
         "slidev.port": {
           "type": "number",
           "scope": "window",

src/annotations.ts

@@ -0,0 +1,68 @@
+import { Position, Range, window } from 'vscode'
+import type { TextDocument, TextEditor } from 'vscode'
+import type { SlideInfo } from '@slidev/types'
+import { ctx } from './ctx'
+
+const dividerDecoration = window.createTextEditorDecorationType({
+  color: '#8884',
+  isWholeLine: true,
+})
+const frontmatterDecoration = window.createTextEditorDecorationType({
+  isWholeLine: true,
+  backgroundColor: '#8881',
+  borderColor: '#8882',
+  border: '1px',
+})
+
+export function updateAnnotaions(doc: TextDocument, editor: TextEditor) {
+  const dividerRanges: Range[] = []
+  const frontmetterRanges: Range[] = []
+
+  const text = doc.getText()
+
+  if (ctx.data) {
+    const max = doc.lineCount - 1
+    ctx.data.slides.forEach((i) => {
+      const item = i.inline as SlideInfo || i
+
+      if (item?.start == null)
+        return
+
+      const line = [
+        doc.lineAt(Math.max(0, Math.min(max, item.start))),
+        doc.lineAt(Math.max(0, Math.min(max, item.start - 1))),
+        doc.lineAt(Math.max(0, Math.min(max, item.start + 1))),
+      ].find(i => i.text.startsWith('---'))
+      if (!line)
+        return null
+      const start = new Position(line.lineNumber, 0)
+      dividerRanges.push(
+        new Range(start, new Position(line.lineNumber, line.text.length)),
+      )
+
+      const hasFrontmatter = Object.keys(i.frontmatter).length > 0
+      if (!hasFrontmatter) {
+        frontmetterRanges.push(new Range(start, start))
+      }
+      else {
+        const range = text.slice(doc.offsetAt(start))
+        const match = range.match(/^---[\s\S]*?\n---/)
+        if (match && match.index != null) {
+          const endLine = doc.positionAt(doc.offsetAt(start) + match.index + match[0].length).line
+          frontmetterRanges.push(new Range(start, new Position(endLine, 0)))
+          if (endLine !== start.line)
+            dividerRanges.push(new Range(new Position(endLine, 0), new Position(endLine, 0)))
+        }
+      }
+    })
+  }
+
+  editor?.setDecorations(
+    dividerDecoration,
+    dividerRanges,
+  )
+  editor.setDecorations(
+    frontmatterDecoration,
+    frontmetterRanges,
+  )
+}

src/config.ts

@@ -13,6 +13,7 @@ export interface Config {
   root: string
   port: number
   enabled: boolean
+  annotations: boolean
 }
 
 export const config = new Proxy(

src/editor.ts

@@ -2,11 +2,13 @@ import { commands, languages, window, workspace } from 'vscode'
 import * as parser from '@slidev/parser/fs'
 import Markdown from 'markdown-it'
 import { ctx } from './ctx'
+import { config } from './config'
 import type { SlideItem } from './view/SlideItem'
 import { SlidesProvider } from './view/SlidesProvider'
 import { FoldingProvider } from './view/FoldingProvider'
 import { PreviewProvider } from './view/PreviewProvider'
 import { getCurrentSlideIndex, revealSlide } from './slides'
+import { updateAnnotaions } from './annotations'
 
 export function configEditor() {
   const previewProvider = new PreviewProvider()
@@ -25,6 +27,9 @@ export function configEditor() {
 
     ctx.doc = doc
     ctx.data = await parser.load(path, {}, doc.getText())
+
+    if (config.annotations)
+      updateAnnotaions(doc, editor)
   }
 
   function updateCurrentSlide() {
@@ -129,3 +134,4 @@ export function configEditor() {
 
   update()
 }
+

src/slides.ts

@@ -12,9 +12,9 @@ export function getCurrentSlideIndex(editor = window.activeTextEditor) {
 export async function revealSlide(idx: number, editor = window.activeTextEditor) {
   if (idx < 0)
     return
-  // @ts-expect-error cast
+  // @ts-expect-error casting
   let slide: SlideInfoWithPath & SlideInfo = ctx.data?.slides[idx]
-  // @ts-expect-error cast
+  // @ts-expect-error casting
   slide = slide?.source || slide
   if (!slide)
     return