feat(vscode): update annotations and foldings (#1588)

slidevjs · May 17, 2024 · b2d1dac · b2d1dac
1 parent 58862b1
commit b2d1dac
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/packages/vscode/src/views/annotations.ts b/packages/vscode/src/views/annotations.ts
@@ -2,24 +2,33 @@ import { clamp } from '@antfu/utils'
 import type { SourceSlideInfo } from '@slidev/types'
 import { computed, watch } from '@vue/runtime-core'
 import type { DecorationOptions } from 'vscode'
-import { Position, Range, window } from 'vscode'
+import { Position, Range, ThemeColor, window } from 'vscode'
 import { useActiveTextEditor } from '../composables/useActiveTextEditor'
 import { useProjectFromDoc } from '../composables/useProjectFromDoc'
 import { displayAnnotations } from '../configs'
 import { activeProject } from '../projects'
 import { createSingletonComposable } from '../utils/singletonComposable'
 import { toRelativePath } from '../utils/toRelativePath'
 
+const dividerCommonOptions = {
+  color: new ThemeColor('panelTitle.inactiveForeground'),
+  fontWeight: 'bold',
+  isWholeLine: true,
+  backgroundColor: '#8881',
+}
+
 const firstLineDecoration = window.createTextEditorDecorationType({})
 const dividerDecoration = window.createTextEditorDecorationType({
-  color: '#8884',
-  backgroundColor: '#8881',
-  isWholeLine: true,
+  ...dividerCommonOptions,
+  borderStyle: 'solid',
+  borderWidth: '1px 0 0 0',
+  borderColor: new ThemeColor('panelTitle.activeBorder'),
 })
-const frontmatterDecoration = window.createTextEditorDecorationType({
+const frontmatterContentDecoration = window.createTextEditorDecorationType({
   isWholeLine: true,
   backgroundColor: '#8881',
 })
+const frontmatterEndDecoration = window.createTextEditorDecorationType(dividerCommonOptions)
 
 export const useAnnotations = createSingletonComposable(() => {
   const editor = useActiveTextEditor()
@@ -34,7 +43,7 @@ export const useAnnotations = createSingletonComposable(() => {
       if (!enabled) {
         editor.setDecorations(firstLineDecoration, [])
         editor.setDecorations(dividerDecoration, [])
-        editor.setDecorations(frontmatterDecoration, [])
+        editor.setDecorations(frontmatterContentDecoration, [])
         return
       }
 
@@ -60,10 +69,11 @@ export const useAnnotations = createSingletonComposable(() => {
 
       const firstLineRanges: DecorationOptions[] = []
       const dividerRanges: DecorationOptions[] = []
-      const frontmatterRanges: DecorationOptions[] = []
+      const frontmatterContentRanges: DecorationOptions[] = []
+      const frontmatterEndRanges: DecorationOptions[] = []
 
       for (const slide of md.slides) {
-        const lineNo = slide.frontmatterStyle ? slide.start : slide.start - 1
+        const lineNo = slide.frontmatterStyle === 'frontmatter' ? slide.start : slide.start - 1
         const line = doc.lineAt(clamp(lineNo, 0, doc.lineCount))
 
         const start = new Position(line.lineNumber, 0)
@@ -78,7 +88,7 @@ export const useAnnotations = createSingletonComposable(() => {
             after: {
               contentText: getTextContent(slide),
               fontWeight: 'bold',
-              color: '#8888',
+              color: new ThemeColor('panelTitle.activeBorder'),
             },
           },
         })
@@ -88,11 +98,11 @@ export const useAnnotations = createSingletonComposable(() => {
           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
-            frontmatterRanges.push({
+            frontmatterContentRanges.push({
               range: new Range(new Position(line.lineNumber + 1, 0), new Position(endLine - 1, 0)),
             })
             if (endLine !== start.line) {
-              dividerRanges.push({
+              frontmatterEndRanges.push({
                 range: new Range(new Position(endLine, 0), new Position(endLine, 0)),
               })
             }
@@ -102,7 +112,8 @@ export const useAnnotations = createSingletonComposable(() => {
 
       editor.setDecorations(firstLineDecoration, firstLineRanges)
       editor.setDecorations(dividerDecoration, dividerRanges)
-      editor.setDecorations(frontmatterDecoration, frontmatterRanges)
+      editor.setDecorations(frontmatterContentDecoration, frontmatterContentRanges)
+      editor.setDecorations(frontmatterEndDecoration, frontmatterEndRanges)
     },
     { immediate: true },
   )

diff --git a/packages/vscode/src/views/foldings.ts b/packages/vscode/src/views/foldings.ts
@@ -17,9 +17,9 @@ export const useFoldings = createSingletonComposable(() => {
           return // Not a slidev markdown file
         // Not using global slides data because it updates too late
         const md = await parse(document.getText(), document.uri.fsPath)
-        return md?.slides.map(slide => ({
-          start: slide.frontmatterStyle ? slide.start : slide.start - 1,
-          end: slide.end - 1,
+        return md?.slides.map(source => ({
+          start: Math.max(0, source.frontmatterStyle === 'frontmatter' ? source.start : source.start - 1),
+          end: source.end - 1,
           kind: FoldingRangeKind.Region,
         }))
       },