( oldText: string, newText: string, lang: string, theme: "light" | "dark", _hunkIndex = 0, _filePath?: string, )
| 8 | * arrays of ReactNode representing each line |
| 9 | */ |
| 10 | export async function highlightHunks( |
| 11 | oldText: string, |
| 12 | newText: string, |
| 13 | lang: string, |
| 14 | theme: "light" | "dark", |
| 15 | _hunkIndex = 0, |
| 16 | _filePath?: string, |
| 17 | ): Promise<{ oldLines: ReactNode[]; newLines: ReactNode[] }> { |
| 18 | try { |
| 19 | const highlighter = await getHighlighter(lang) |
| 20 | const shikiTheme = theme === "light" ? "github-light" : "github-dark" |
| 21 | |
| 22 | // Helper to highlight text and extract lines |
| 23 | const highlightAndExtractLines = (text: string): ReactNode[] => { |
| 24 | const textLines = text.split("\n") |
| 25 | |
| 26 | if (!text.trim()) { |
| 27 | return textLines.map((line) => line || "") |
| 28 | } |
| 29 | |
| 30 | try { |
| 31 | // Use Shiki's line transformer to get per-line highlighting |
| 32 | const hast: any = highlighter.codeToHast(text, { |
| 33 | lang, |
| 34 | theme: shikiTheme, |
| 35 | transformers: [ |
| 36 | { |
| 37 | pre(node: any) { |
| 38 | node.properties.style = "padding:0;margin:0;background:none;" |
| 39 | return node |
| 40 | }, |
| 41 | code(node: any) { |
| 42 | node.properties.class = `hljs language-${lang}` |
| 43 | return node |
| 44 | }, |
| 45 | line(node: any, line: number) { |
| 46 | // Add a line marker to help with extraction |
| 47 | node.properties["data-line"] = line |
| 48 | return node |
| 49 | }, |
| 50 | }, |
| 51 | ], |
| 52 | }) |
| 53 | |
| 54 | // Extract the <code> element's children (which should be line elements) |
| 55 | const codeEl = hast?.children?.[0]?.children?.[0] |
| 56 | if (!codeEl || !codeEl.children) { |
| 57 | return textLines.map((line) => line || "") |
| 58 | } |
| 59 | |
| 60 | // Convert each line element to a ReactNode |
| 61 | const highlightedLines: ReactNode[] = [] |
| 62 | |
| 63 | for (const lineNode of codeEl.children) { |
| 64 | if (lineNode.tagName === "span" && lineNode.properties?.className?.includes("line")) { |
| 65 | // This is a line span from Shiki |
| 66 | const reactNode = toJsxRuntime( |
| 67 | { type: "element", tagName: "span", properties: {}, children: lineNode.children || [] }, |
no test coverage detected