radiant-docs 0.1.34 → 0.1.38

package/template/src/lib/code/code-block.ts

@@ -137,7 +137,9 @@ const CODE_BLOCK_LANGUAGE_ICON_FILE_BY_VALUE: Record<string, string> = {
   yaml: "file_type_yaml_official.svg",
 };
 
-const SHIKI_THEME = "github-light";
+const SHIKI_LIGHT_THEME = "github-light";
+const SHIKI_DARK_THEME = "github-dark";
+const SHIKI_THEMES = [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME] as const;
 const BUNDLED_LANGUAGE_SET = new Set(Object.keys(bundledLanguages));
 const LANGUAGE_RUNTIME_DEPENDENCIES: Record<string, string[]> = {
   // MDX tokenization relies on TSX grammar injections for JSX-style tags.
@@ -228,7 +230,7 @@ function pickIconFromFileName(fileName: string): string | null {
   const candidates = uniqueValues([trimmedFileName, trimmedFileName.toLowerCase()]);
   for (const candidate of candidates) {
     const iconFileName = getIconForFile(candidate);
-    if (iconFileName !== DEFAULT_FILE) return iconFileName;
+    if (iconFileName && iconFileName !== DEFAULT_FILE) return iconFileName;
   }
 
   return null;
@@ -372,7 +374,7 @@ function namespaceSvgIds(svg: string, namespace: string): string {
 async function getHighlighter() {
   if (!highlighterPromise) {
     highlighterPromise = getSingletonHighlighter({
-      themes: [SHIKI_THEME],
+      themes: [...SHIKI_THEMES],
       langs: [DEFAULT_CODE_BLOCK_LANGUAGE],
     });
   }
@@ -414,7 +416,7 @@ async function ensureLanguageLoaded(
   }
 
   const loadPromise = highlighter
-    .loadLanguage(language)
+    .loadLanguage(language as keyof typeof bundledLanguages)
     .then(() => {
       loadedLanguageSet.add(language);
     })
@@ -493,7 +495,7 @@ export async function getCodeLineTokens({
   language: string;
 }): Promise<{
   normalizedLanguage: string;
-  lines: ThemedToken[][];
+  lines: CodeLineToken[][];
 }> {
   const highlighter = await getHighlighter();
   const normalizedLanguage = normalizeCodeLanguageValue(language);
@@ -523,24 +525,157 @@ export async function getCodeLineTokens({
   }
 
   try {
-    const tokenResult = highlighter.codeToTokens(code, {
-      lang: targetLanguage,
-      theme: SHIKI_THEME,
-    });
+    const themedTokenLines = getThemedTokenLines(highlighter, code, targetLanguage);
 
     return {
       normalizedLanguage: targetLanguage,
-      lines: tokenResult.tokens,
+      lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
     };
   } catch {
-    const tokenResult = highlighter.codeToTokens(code, {
-      lang: DEFAULT_CODE_BLOCK_LANGUAGE,
-      theme: SHIKI_THEME,
-    });
+    const themedTokenLines = getThemedTokenLines(
+      highlighter,
+      code,
+      DEFAULT_CODE_BLOCK_LANGUAGE,
+    );
 
     return {
       normalizedLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
-      lines: tokenResult.tokens,
+      lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
     };
   }
 }
+
+export type CodeLineToken = {
+  content: string;
+  color?: string;
+  darkColor?: string;
+  bgColor?: string;
+  darkBgColor?: string;
+  fontStyle?: number;
+  htmlStyle?: Record<string, string>;
+  darkHtmlStyle?: Record<string, string>;
+};
+
+function getThemedTokenLines(
+  highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
+  code: string,
+  lang: string,
+): {
+  light: ThemedToken[][];
+  dark: ThemedToken[][];
+} {
+  const shikiLanguage = lang as keyof typeof bundledLanguages;
+  const lightTokenResult = highlighter.codeToTokens(code, {
+    lang: shikiLanguage,
+    theme: SHIKI_LIGHT_THEME,
+  });
+  const darkTokenResult = highlighter.codeToTokens(code, {
+    lang: shikiLanguage,
+    theme: SHIKI_DARK_THEME,
+  });
+
+  return {
+    light: lightTokenResult.tokens,
+    dark: darkTokenResult.tokens,
+  };
+}
+
+function buildLightOnlyTokenLine(lightLine: ThemedToken[]): CodeLineToken[] {
+  return lightLine.map((token) => ({
+    content: token.content,
+    color: token.color,
+    bgColor: token.bgColor,
+    fontStyle: token.fontStyle,
+    htmlStyle: token.htmlStyle,
+  }));
+}
+
+function mergeTokenLineByContent(
+  lightLine: ThemedToken[],
+  darkLine: ThemedToken[],
+): CodeLineToken[] | null {
+  const lightContent = lightLine.map((token) => token.content).join("");
+  const darkContent = darkLine.map((token) => token.content).join("");
+
+  // When themes tokenize the same text with different boundaries (common for markdown),
+  // align on content segments so we can still apply dark token colors reliably.
+  if (lightContent !== darkContent) return null;
+  if (lightContent.length === 0) return [];
+
+  const mergedLine: CodeLineToken[] = [];
+  let lightTokenIndex = 0;
+  let darkTokenIndex = 0;
+  let lightTokenOffset = 0;
+  let darkTokenOffset = 0;
+
+  while (
+    lightTokenIndex < lightLine.length &&
+    darkTokenIndex < darkLine.length
+  ) {
+    const lightToken = lightLine[lightTokenIndex];
+    const darkToken = darkLine[darkTokenIndex];
+
+    if (lightTokenOffset >= lightToken.content.length) {
+      lightTokenIndex += 1;
+      lightTokenOffset = 0;
+      continue;
+    }
+
+    if (darkTokenOffset >= darkToken.content.length) {
+      darkTokenIndex += 1;
+      darkTokenOffset = 0;
+      continue;
+    }
+
+    const lightRemainingLength = lightToken.content.length - lightTokenOffset;
+    const darkRemainingLength = darkToken.content.length - darkTokenOffset;
+    const segmentLength = Math.min(lightRemainingLength, darkRemainingLength);
+    if (segmentLength <= 0) break;
+
+    const lightSegment = lightToken.content.slice(
+      lightTokenOffset,
+      lightTokenOffset + segmentLength,
+    );
+    const darkSegment = darkToken.content.slice(
+      darkTokenOffset,
+      darkTokenOffset + segmentLength,
+    );
+
+    if (lightSegment !== darkSegment) return null;
+
+    mergedLine.push({
+      content: lightSegment,
+      color: lightToken.color,
+      darkColor: darkToken.color,
+      bgColor: lightToken.bgColor,
+      darkBgColor: darkToken.bgColor,
+      fontStyle: lightToken.fontStyle,
+      htmlStyle: lightToken.htmlStyle,
+      darkHtmlStyle: darkToken.htmlStyle,
+    });
+
+    lightTokenOffset += segmentLength;
+    darkTokenOffset += segmentLength;
+  }
+
+  const mergedContent = mergedLine.map((token) => token.content).join("");
+  return mergedContent === lightContent ? mergedLine : null;
+}
+
+function mergeTokenLines(
+  lightTokenLines: ThemedToken[][],
+  darkTokenLines: ThemedToken[][],
+): CodeLineToken[][] {
+  const lineCount = Math.max(lightTokenLines.length, darkTokenLines.length);
+  const mergedLines: CodeLineToken[][] = [];
+
+  for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+    const lightLine = lightTokenLines[lineIndex] ?? [];
+    const darkLine = darkTokenLines[lineIndex] ?? [];
+
+    const mergedLine = mergeTokenLineByContent(lightLine, darkLine);
+    mergedLines.push(mergedLine ?? buildLightOnlyTokenLine(lightLine));
+  }
+
+  return mergedLines;
+}