react-codemirror-runmode 2.2.0 → 2.2.1

package/dist/highlight.d.ts

@@ -1,5 +1,6 @@
 import { Parser } from '@lezer/common';
 import { Language, LanguageDescription } from '@codemirror/language';
 import { Highlighter } from '@lezer/highlight';
-export declare function getCodeParser(languageName: string, fallbackLanguage?: Language, languages?: LanguageDescription[]): Promise<Parser | null>;
+export declare function getMarkdownParser(input: string, languages?: LanguageDescription[]): Promise<Parser>;
+export declare function getCodeParser(input: string, languageName: string, fallbackLanguage?: Language, languages?: LanguageDescription[]): Promise<Parser | null>;
 export declare function highlightCode<Output>(languageName: string, input: string, highlighter: Highlighter, fallbackLanguage: Language | undefined, languages: LanguageDescription[] | undefined, callback: (text: string, style: string | null, from: number, to: number) => Output): Promise<Output[]>;

package/dist/highlight.js

@@ -2,12 +2,44 @@ import { LanguageDescription } from '@codemirror/language';
 import { highlightTree } from '@lezer/highlight';
 import { languages as builtinLanguages } from '@codemirror/language-data';
 import { markdown } from '@codemirror/lang-markdown';
-export async function getCodeParser(languageName, fallbackLanguage, languages = builtinLanguages) {
+/**
+ * Extract language names from code blocks in markdown text
+ */
+function extractCodeBlockLanguages(text) {
+    const codeBlockRegex = /```(\w+)/g;
+    const languages = [];
+    let match;
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+        languages.push(match[1]);
+    }
+    return languages;
+}
+/**
+ * Pre-load parsers for a list of language names
+ */
+async function preloadLanguageParsers(languageNames, languages) {
+    return (await Promise.all(languageNames.map(async (langName) => {
+        const found = LanguageDescription.matchLanguageName(languages, langName, true);
+        if (found instanceof LanguageDescription) {
+            if (!found.support)
+                await found.load();
+            if (found.support) {
+                return found;
+            }
+        }
+    }))).filter((desc) => !!desc);
+}
+export async function getMarkdownParser(input, languages = builtinLanguages) {
+    const codeBlockLanguages = extractCodeBlockLanguages(input);
+    const preloadedLanguages = await preloadLanguageParsers(codeBlockLanguages || [], languages);
+    const langSupport = markdown({
+        codeLanguages: preloadedLanguages
+    });
+    return langSupport.language.parser;
+}
+export async function getCodeParser(input, languageName, fallbackLanguage, languages = builtinLanguages) {
     if (languageName === 'markdown' || languageName === 'md') {
-        const mdSupport = markdown({
-            codeLanguages: builtinLanguages
-        });
-        return mdSupport.language.parser;
+        return await getMarkdownParser(input, languages);
     }
     else {
         const found = LanguageDescription.matchLanguageName(languages, languageName, true);
@@ -22,7 +54,7 @@ export async function getCodeParser(languageName, fallbackLanguage, languages =
     return fallbackLanguage ? fallbackLanguage.parser : null;
 }
 export async function highlightCode(languageName, input, highlighter, fallbackLanguage, languages, callback) {
-    const parser = await getCodeParser(languageName, fallbackLanguage, languages);
+    const parser = await getCodeParser(input, languageName, fallbackLanguage, languages);
     if (parser) {
         const tree = parser.parse(input);
         const output = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror-runmode",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Syntax highlighting for react, utilizing CodeMirror's parser",
   "type": "module",
   "main": "dist/index.js",

package/src/highlight.ts

@@ -4,16 +4,68 @@ import { Highlighter, highlightTree } from '@lezer/highlight'
 import { languages as builtinLanguages } from '@codemirror/language-data'
 import { markdown } from '@codemirror/lang-markdown'
 
+/**
+ * Extract language names from code blocks in markdown text
+ */
+function extractCodeBlockLanguages(text: string): string[] {
+  const codeBlockRegex = /```(\w+)/g
+  const languages: string[] = []
+  let match
+  while ((match = codeBlockRegex.exec(text)) !== null) {
+    languages.push(match[1])
+  }
+  return languages
+}
+
+/**
+ * Pre-load parsers for a list of language names
+ */
+async function preloadLanguageParsers(
+  languageNames: string[],
+  languages: LanguageDescription[]
+): Promise<LanguageDescription[]> {
+  return (
+    await Promise.all(
+      languageNames.map(async langName => {
+        const found = LanguageDescription.matchLanguageName(
+          languages,
+          langName,
+          true
+        )
+        if (found instanceof LanguageDescription) {
+          if (!found.support) await found.load()
+          if (found.support) {
+            return found
+          }
+        }
+      })
+    )
+  ).filter((desc): desc is LanguageDescription => !!desc)
+}
+
+export async function getMarkdownParser(
+  input: string,
+  languages: LanguageDescription[] = builtinLanguages
+): Promise<Parser> {
+  const codeBlockLanguages = extractCodeBlockLanguages(input)
+  const preloadedLanguages = await preloadLanguageParsers(
+    codeBlockLanguages || [],
+    languages
+  )
+  const langSupport = markdown({
+    codeLanguages: preloadedLanguages
+  })
+  return langSupport.language.parser
+}
+
 export async function getCodeParser(
+  input: string,
   languageName: string,
   fallbackLanguage?: Language,
   languages: LanguageDescription[] = builtinLanguages
 ): Promise<Parser | null> {
   if (languageName === 'markdown' || languageName === 'md') {
-    const mdSupport = markdown({
-      codeLanguages: builtinLanguages
-    })
-    return mdSupport.language.parser
+    return await getMarkdownParser(input, languages)
   } else {
     const found = LanguageDescription.matchLanguageName(
       languages,
@@ -41,7 +93,12 @@ export async function highlightCode<Output>(
     to: number
   ) => Output
 ): Promise<Output[]> {
-  const parser = await getCodeParser(languageName, fallbackLanguage, languages)
+  const parser = await getCodeParser(
+    input,
+    languageName,
+    fallbackLanguage,
+    languages
+  )
   if (parser) {
     const tree = parser.parse(input)
     const output: Array<Output> = []

package/test/index.spec.tsx

@@ -10,15 +10,15 @@ const sleep = (msec: number) =>
 
 describe('getCodeParser', () => {
   it('loads a JavaScript parser', async () => {
-    const parser = await getCodeParser('js')
+    const parser = await getCodeParser('', 'js')
     expect(parser).toBeInstanceOf(Parser)
   })
   it('loads a Python parser', async () => {
-    const parser = await getCodeParser('python')
+    const parser = await getCodeParser('', 'python')
     expect(parser).toBeInstanceOf(Parser)
   })
   it('returns null for non-existing languages', async () => {
-    const parser = await getCodeParser('foobar123')
+    const parser = await getCodeParser('', 'foobar123')
     expect(parser).toBeNull()
   })
 })
@@ -99,6 +99,38 @@ describe('Highlight codeblocks', () => {
     expect(numberToken).toBeDefined()
     expect(numberToken?.style).not.toBeNull()
   })
+
+  it('highlights typescript codeblocks in markdown', async () => {
+    const mdCode = '```typescript\nconst x: number = 123\n```'
+    const highlighted = await highlightCode(
+      'markdown',
+      mdCode,
+      oneDarkHighlightStyle,
+      undefined,
+      undefined,
+      (text, style, from, to) => ({ text, style, from, to })
+    )
+    expect(highlighted.length).toBeGreaterThan(0)
+
+    // Find the language info token
+    const langInfo = highlighted.find(t => t.text === 'typescript')
+    expect(langInfo).toBeDefined()
+
+    // Find the TS keyword 'const'
+    const constToken = highlighted.find(t => t.text === 'const')
+    expect(constToken).toBeDefined()
+    expect(constToken?.style).not.toBeNull()
+
+    // Find the type annotation 'number'
+    const typeToken = highlighted.find(t => t.text === 'number')
+    expect(typeToken).toBeDefined()
+    expect(typeToken?.style).not.toBeNull()
+
+    // Find the number '123'
+    const numberToken = highlighted.find(t => t.text === '123')
+    expect(numberToken).toBeDefined()
+    expect(numberToken?.style).not.toBeNull()
+  })
 })
 
 describe('React Highlighter', () => {