fix(core): fix decoration offset edge cases (#728)

Author: timothycohen

packages/core/src/transformer-decorations.ts

@@ -21,12 +21,21 @@ export function transformerDecorations(): ShikiTransformer {
 
       function normalizePosition(p: OffsetOrPosition): ResolvedPosition {
         if (typeof p === 'number') {
+          if (p < 0 || p > shiki.source.length)
+            throw new ShikiError(`Invalid decoration offset: ${p}. Code length: ${shiki.source.length}`)
+
           return {
             ...converter.indexToPos(p),
             offset: p,
           }
         }
         else {
+          const line = converter.lines[p.line]
+          if (line === undefined)
+            throw new ShikiError(`Invalid decoration position ${JSON.stringify(p)}. Lines length: ${converter.lines.length}`)
+          if (p.character < 0 || p.character > line.length)
+            throw new ShikiError(`Invalid decoration position ${JSON.stringify(p)}. Line ${p.line} length: ${line.length}`)
+
           return {
             ...p,
             offset: converter.posToIndex(p.line, p.character),

packages/core/src/types/decorations.ts

@@ -14,8 +14,6 @@ export interface DecorationItem {
   start: OffsetOrPosition
   /**
    * End offset or position of the decoration.
-   *
-   * If the
    */
   end: OffsetOrPosition
   /**

packages/core/src/utils.ts

@@ -7,7 +7,7 @@ export function toArray<T>(x: MaybeArray<T>): T[] {
 }
 
 /**
- * Slipt a string into lines, each line preserves the line ending.
+ * Split a string into lines, each line preserves the line ending.
  */
 export function splitLines(code: string, preserveEnding = false): [string, number][] {
   const parts = code.split(/(\r?\n)/g)
@@ -192,11 +192,20 @@ export function stringifyTokenStyle(token: Record<string, string>) {
 
 /**
  * Creates a converter between index and position in a code block.
+ *
+ * Overflow/underflow are unchecked.
  */
 export function createPositionConverter(code: string) {
   const lines = splitLines(code, true).map(([line]) => line)
 
   function indexToPos(index: number): Position {
+    if (index === code.length) {
+      return {
+        line: lines.length - 1,
+        character: lines[lines.length - 1].length,
+      }
+    }
+
     let character = index
     let line = 0
     for (const lineText of lines) {

packages/shiki/test/decorations.test.ts

@@ -23,7 +23,7 @@ export function codeToHtml(
   let result = hastToHtml(codeToHast(internal, code, options, context))
   return result
 }
-`
+// final`
 
 describe('decorations', () => {
   it('works', async () => {
@@ -78,6 +78,13 @@ describe('decorations', () => {
           end: { line: 8, character: 25 },
           properties: { class: 'highlighted' },
         },
+        // "// final"
+        // Testing offset === code.length edge case
+        {
+          start: code.length - 8,
+          end: code.length,
+          properties: { class: 'highlighted' },
+        },
       ],
     })
 
@@ -126,7 +133,7 @@ describe('decorations errors', () => {
         ],
       })
     }).rejects
-      .toThrowErrorMatchingInlineSnapshot(`[TypeError: Cannot read properties of undefined (reading 'length')]`)
+      .toThrowErrorMatchingInlineSnapshot(`[ShikiError: Invalid decoration position {"line":100,"character":0}. Lines length: 12]`)
   })
 
   it('throws when chars overflow', async () => {
@@ -139,6 +146,40 @@ describe('decorations errors', () => {
         ],
       })
     }).rejects
-      .toThrowErrorMatchingInlineSnapshot(`[ShikiError: Failed to find end index for decoration {"line":0,"character":10,"offset":10}]`)
+      .toThrowErrorMatchingInlineSnapshot(`[ShikiError: Invalid decoration position {"line":0,"character":10}. Line 0 length: 4]`)
+
+    expect(async () => {
+      await codeToHtml(code, {
+        theme: 'vitesse-light',
+        lang: 'ts',
+        decorations: [
+          {
+            start: { line: 2, character: 1 },
+            end: { line: 1, character: 36 }, // actual position is { line: 2, character: 3, offset 40 }
+          },
+        ],
+      })
+    }).rejects
+      .toThrowErrorMatchingInlineSnapshot(`[ShikiError: Invalid decoration position {"line":1,"character":36}. Line 1 length: 33]`)
+  })
+
+  it('throws when offset underflows/overflows', async () => {
+    expect(async () => {
+      await codeToHtml(code, {
+        theme: 'vitesse-light',
+        lang: 'ts',
+        decorations: [{ start: 1, end: 1000 }],
+      })
+    }).rejects
+      .toThrowErrorMatchingInlineSnapshot(`[ShikiError: Invalid decoration offset: 1000. Code length: 252]`)
+
+    expect(async () => {
+      await codeToHtml(code, {
+        theme: 'vitesse-light',
+        lang: 'ts',
+        decorations: [{ start: -3, end: 5 }],
+      })
+    }).rejects
+      .toThrowErrorMatchingInlineSnapshot(`[ShikiError: Invalid decoration offset: -3. Code length: 252]`)
   })
 })