Add lang attribute

Author: pomber

packages/mdx/src/smooth-code/code-tween.tsx

@@ -10,6 +10,7 @@ import {
   getColor,
   ColorName,
   getColorScheme,
+  anyValue,
 } from "../utils"
 import {
   useStepParser,
@@ -62,6 +63,7 @@ function useCodeShift({
     theme,
     focus: map(tween, tween => tween.focus),
     annotations: map(tween, tween => tween.annotations),
+    lang: anyValue(tween, tween => tween?.code?.lang),
   })
 }
 

packages/mdx/src/smooth-code/partial-step-parser.ts

@@ -33,6 +33,7 @@ type ParseInput = {
   focus: Tween<FocusString>
   annotations?: Tween<CodeAnnotation[] | undefined>
   highlightedLines: FullTween<HighlightedLine[]>
+  lang: string
 }
 
 export function useStepParser(input: ParseInput) {
@@ -54,6 +55,7 @@ function parse({
   focus,
   annotations,
   highlightedLines,
+  lang,
 }: ParseInput) {
   const normalCode = getCode(highlightedLines)
 
@@ -74,7 +76,11 @@ function parse({
     multilineAnnotations
   )
 
-  const codeStep = addExtraStuff(annotatedCode, normalCode)
+  const codeStep = addExtraStuff(
+    annotatedCode,
+    normalCode,
+    lang
+  )
 
   // console.log({ codeStep })
 
@@ -274,11 +280,13 @@ export type CodeShift = {
   verticalInterval: [number, number]
   lineCount: FullTween<number>
   code: FullTween<string>
+  lang: string
 }
 
 function addExtraStuff(
   codeStep: AnnotatedCode,
-  code: FullTween<string>
+  code: FullTween<string>,
+  lang: string
 ): CodeShift {
   const vInterval = verticalInterval(
     codeStep.enterCount,
@@ -302,6 +310,7 @@ function addExtraStuff(
     groups: newGroups,
     verticalInterval: vInterval,
     code,
+    lang,
   }
 }
 

packages/mdx/src/smooth-code/smooth-container.tsx

@@ -68,6 +68,7 @@ export function SmoothContainer({
     <Container
       width={dimensions!.containerWidth}
       height={dimensions!.containerHeight}
+      lang={codeStep.lang}
     >
       <Content
         dx={dx}
@@ -89,9 +90,11 @@ function Container({
   width,
   height,
   children,
+  lang,
 }: {
   width: number
   height: number
+  lang: string
   children: React.ReactNode
 }) {
   return (
@@ -104,6 +107,7 @@ function Container({
       }}
       className="ch-code-scroll-parent"
       children={children}
+      data-ch-lang={lang}
     />
   )
 }

packages/mdx/src/utils/tween.ts

@@ -43,3 +43,10 @@ export function mapWithDefault<T, R>(
 ): FullTween<R> {
   return map(withDefault(tween, deft), fn)
 }
+
+export function anyValue<T, R>(
+  tween: AnyTween<T>,
+  fn: (t: T) => R
+): R {
+  return fn(tween.prev) || fn(tween.next)
+}