Merge pull request #40 from joshwcomeau/main

Fix issue with MDX inline code

Author: pomber

.changeset/cool-cycles-admire.md

@@ -0,0 +1,5 @@
+---
+"bright": patch
+---
+
+Fix usage with overriden code element

lib/src/index.tsx

@@ -13,6 +13,7 @@ import {
   BrightProps,
   Extension,
   CodeText,
+  MdCodeText,
 } from "./types"
 import { linesToContent } from "./lines"
 import { tokensToContent, tokensToTokenList } from "./tokens"
@@ -190,14 +191,43 @@ function parseChildren(
   lang?: LanguageAlias,
   code?: string
 ): Partial<BrightProps> {
-  if (typeof children === "object" && children?.type === "code") {
+  // the Code component can be used in many ways
+  // this function use some heuristics to guess the correct usage
+
+  if (typeof children === "string" || code) {
+    // Basic usage
+    // either: <Code lang="js">console.log(1)</Code>
+    // or: <Code lang="js" code="console.log(1)" />
+    let newLang = lang || "text"
+    if (!LANG_NAMES.includes(newLang)) {
+      console.warn(`Bright warning: Unknown language ${JSON.stringify(lang)}`)
+      newLang = "text"
+    }
+    return {
+      code: (children as string) || code || "",
+      lang: newLang,
+    }
+  }
+
+  if (
+    typeof children === "object" &&
+    typeof children?.props?.children === "string"
+  ) {
+    // Basic MDX usage, children usually is <code className="language-js">console.log(1)</code>
+    // the code tag can be replaced by a custom component https://github.com/code-hike/bright/issues/37, so we can't check for the tag name
     return {
       code: trimTrailingNewline(children.props?.children),
-      ...getLanguageAndTitle(children.props?.className),
+      ...getLanguageAndTitle((children as MdCodeText).props?.className),
     }
-  } else if (typeof children === "object") {
+  }
+
+  if (typeof children === "object") {
+    // MDX usage with multiple code blocks (for example: https://bright.codehike.org/recipes/tabs)
+    // children is an array of <Code> components
     const subProps = React.Children.toArray(children as any).map((c: any) => {
-      const codeProps = c.props?.children?.props
+      const codeElement = c.props?.children
+      const codeProps = codeElement?.props
+
       return {
         code: trimTrailingNewline(codeProps.children),
         ...getLanguageAndTitle(codeProps.className),
@@ -206,16 +236,17 @@ function parseChildren(
     return {
       subProps,
     }
-  } else {
-    let newLang = lang || "text"
-    if (!LANG_NAMES.includes(newLang)) {
-      console.warn(`Bright warning: Unknown language ${JSON.stringify(lang)}`)
-      newLang = "text"
-    }
-    return {
-      code: (children as string) || code || "",
-      lang: newLang,
-    }
+  }
+
+  // unknown usage
+  let newLang = lang || "text"
+  if (!LANG_NAMES.includes(newLang)) {
+    console.warn(`Bright warning: Unknown language ${JSON.stringify(lang)}`)
+    newLang = "text"
+  }
+  return {
+    code: (children as string) || code || "",
+    lang: newLang,
   }
 }
 

lib/src/types.ts

@@ -53,12 +53,12 @@ export type DoubleTheme = {
   dark: Theme
   light: Theme
 }
-type MdCodeText = {
+export type MdCodeText = {
   type: "code"
   props: { className?: string; children: string }
 }
 
-type MdMultiCodeText = {
+export type MdMultiCodeText = {
   type: Function
   props: {
     children: MdCodeText[]