react-codemirror-runmode 2.2.1 → 2.4.0

package/src/react-highlighter.tsx

@@ -1,21 +1,34 @@
-import React, { memo, useEffect, useState } from 'react'
-import { highlightCode } from './highlight.js'
-import type { Highlighter as LezerHighlighter } from '@lezer/highlight'
 import type { Language, LanguageDescription } from '@codemirror/language'
+import type { Highlighter as LezerHighlighter } from '@lezer/highlight'
+import React, { memo, useEffect, useState } from 'react'
+
+import { highlightCode, type MarkdownConfig } from './highlight.js'
 
 export type HighlighterProps = {
   lang: string
   children: string
-  theme: LezerHighlighter
+  /**
+   * One highlighter, or several whose emitted classes are merged per token.
+   * Pass an array to combine, e.g. a generic token theme with a
+   * markdown-specific one.
+   */
+  theme: LezerHighlighter | readonly LezerHighlighter[]
   fallbackLanguage?: Language
   languages?: LanguageDescription[]
+  /**
+   * Markdown parser options, used only when `lang` is `markdown`/`md`. Enables
+   * GFM (`base: markdownLanguage`) and custom Lezer markdown extensions. Pass a
+   * stable reference (e.g. a module-level constant) to avoid re-highlighting on
+   * every render.
+   */
+  markdownConfig?: MarkdownConfig
 }
 
+const WRAPPER_STYLE = { display: 'contents' } as const
+
 export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
-  const { lang, children: code, theme, fallbackLanguage, languages } = props
-  const [highlightedCode, setHighlightedCode] = useState<
-    React.ReactNode[] | null
-  >(null)
+  const { lang, children: code, theme, fallbackLanguage, languages, markdownConfig } = props
+  const [highlightedCode, setHighlightedCode] = useState<React.ReactNode[] | null>(null)
 
   useEffect(() => {
     highlightCode(
@@ -30,10 +43,19 @@ export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
             {text}
           </span>
         )
-      }
+      },
+      markdownConfig
     ).then(setHighlightedCode)
-  }, [lang, code, theme])
+  }, [lang, code, theme, markdownConfig])
 
-  return <>{highlightedCode || code}</>
+  return highlightedCode ? (
+    <span key="highlighted" style={WRAPPER_STYLE}>
+      {highlightedCode}
+    </span>
+  ) : (
+    <span key="pending" style={WRAPPER_STYLE}>
+      {code}
+    </span>
+  )
 })
 Highlighter.displayName = 'Highlighter'