feat: apply full line decoration when possible

packages/core/src/transformer-decorations.ts

@@ -1,5 +1,5 @@
 import type { Element, ElementContent } from 'hast'
-import type { DecorationItem, OffsetOrPosition, ResolvedDecorationItem, ResolvedPosition, ShikiTransformer, ShikiTransformerContextMeta, ShikiTransformerContextSource } from './types'
+import type { DecorationItem, DecorationTransformType, OffsetOrPosition, ResolvedDecorationItem, ResolvedPosition, ShikiTransformer, ShikiTransformerContextMeta, ShikiTransformerContextSource } from './types'
 import { addClassToHast, createPositionConverter, splitTokens } from './utils'
 import { ShikiError } from './error'
 
@@ -133,25 +133,34 @@ export function transformerDecorations(): ShikiTransformer {
           throw new ShikiError(`Failed to find end index for decoration ${JSON.stringify(decoration.end)}`)
 
         const children = lineEl.children.slice(startIndex, endIndex)
-        const element: Element = !decoration.alwaysWrap && children.length === 1 && children[0].type === 'element'
-          ? children[0]
-          : {
-              type: 'element',
-              tagName: 'span',
-              properties: {},
-              children,
-            }
-
-        applyDecoration(element, decoration, false)
-
-        lineEl.children.splice(startIndex, children.length, element)
+
+        // Full line decoration
+        if (!decoration.alwaysWrap && children.length === lineEl.children.length) {
+          applyDecoration(lineEl, decoration, 'line')
+        }
+        // Single token decoration
+        else if (!decoration.alwaysWrap && children.length === 1 && children[0].type === 'element') {
+          applyDecoration(children[0], decoration, 'token')
+        }
+        // Create a wrapper for the decoration
+        else {
+          const wrapper: Element = {
+            type: 'element',
+            tagName: 'span',
+            properties: {},
+            children,
+          }
+
+          applyDecoration(wrapper, decoration, 'wrapper')
+          lineEl.children.splice(startIndex, children.length, wrapper)
+        }
       }
 
       function applyLine(line: number, decoration: DecorationItem) {
-        lines[line] = applyDecoration(lines[line], decoration, true)
+        lines[line] = applyDecoration(lines[line], decoration, 'line')
       }
 
-      function applyDecoration(el: Element, decoration: DecorationItem, isLine: boolean) {
+      function applyDecoration(el: Element, decoration: DecorationItem, type: DecorationTransformType) {
         const properties = decoration.properties || {}
         const transform = decoration.transform || (i => i)
 
@@ -163,7 +172,7 @@ export function transformerDecorations(): ShikiTransformer {
         }
         if (decoration.properties?.class)
           addClassToHast(el, decoration.properties.class as string[])
-        el = transform(el, isLine) || el
+        el = transform(el, type) || el
         return el
       }
 

packages/core/src/types/decorations.ts

@@ -30,7 +30,7 @@ export interface DecorationItem {
   /**
    * A custom function to transform the element after it has been created.
    */
-  transform?: (element: Element, isEntireLine: boolean) => Element | void
+  transform?: (element: Element, type: DecorationTransformType) => Element | void
 
   /**
    * By default when the decoration contains only one token, the decoration will be applied to the token.
@@ -47,6 +47,8 @@ export interface ResolvedDecorationItem extends Omit<DecorationItem, 'start' | '
   end: ResolvedPosition
 }
 
+export type DecorationTransformType = 'wrapper' | 'line' | 'token'
+
 export interface Position {
   line: number
   character: number