Add config props to components

Author: pomber

packages/mdx/dev/content/section.mdx

@@ -28,7 +28,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum [dolore](f
 
 Lorem dolor sit amet, [javascript](focus://index.js#2:3) adipiscing elit, sed do eiusmod [styles](focus://styles.css#2:3) incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
-<CH.Code>
+<CH.Code lineNumbers={true}>
 
 ```js index.js
 function lorem(ipsum, dolor) {

packages/mdx/dev/content/test.mdx

@@ -1,15 +1,124 @@
-Lorem ipsum dolor sit amet. _`console.log("foo bar")`_.
+Annotations allow you to change how the code is displayed and also to add interactivity.
 
-Lorem ipsum dolor sit amet. `console.log("foo bar")`.
+<CH.Spotlight lineNumbers={true}>
 
-_`console.log("foo bar")`_
+````mdx mark=1[7:13],5[1:7]
+```py focus=2
+print(1)
+print(2)
+print(3)
+# focus
+print(4)
+print(5)
+```
+````
 
-_`console.log("foo bar")`_
+There are two ways to add annotations:
 
-X <CH.InlineCode>console.log("foo bar")</CH.InlineCode>
+---
 
-Lorem ipsum `var x = 1`
+```mdx mark=1[7:13],5[1:7] focus=1
 
-_Lorem ipsum `var x = 1`_
+```
 
-**`console.log("foo bar")`**
+- using the codeblock metastring
+
+---
+
+```mdx mark=1[7:13],5[1:7] focus=5
+
+```
+
+- using comments inside the code
+
+</CH.Spotlight>
+
+_`focus`_ is only one of the possible annotations. The full list is:
+
+- _`focus`_: keep the targeted code bright while dimming the rest
+- _`mark`_: add a background color to the targeted tokens
+- _`link`_: add links inside the code
+
+First let's see the syntax to target different parts of the code.
+
+## Targeting lines and columns
+
+<CH.Spotlight maxZoom={1.5} lineNumbers={true} >
+
+<CH.Code lineNumbers={true}>
+
+```text
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+</CH.Code>
+
+---
+
+```text focus=2
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+To select a specific line, use the line number:
+_`focus=2`_
+
+---
+
+```text focus=3:5
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+To select a range of lines use a colon:
+_`focus=3:5`_
+
+---
+
+```text focus=5[3:6]
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+Select a range of column from a line using brackets:
+_`focus=5[3:6]`_
+
+---
+
+```text focus=1,3:5,7[1:4,7:9]
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+Combine selectors using a comma separated list:
+_`focus=1,3:5,7[1:4,7:9]`_
+
+</CH.Spotlight>
+
+## Comment syntax

packages/mdx/src/mdx-client/code.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { CodeSpring } from "../smooth-code"
+import { CodeConfig, CodeSpring } from "../smooth-code"
 import {
   EditorSpring,
   EditorProps,
@@ -20,23 +20,29 @@ export function Code(
   return <InnerCode {...step} onTabClick={onTabClick} />
 }
 
-export function InnerCode({
-  onTabClick,
-  ...props
-}: EditorProps & {
-  onTabClick?: (filename: string) => void
-} & Partial<CodeHikeConfig>) {
+// build the CodeConfig from props and props.codeConfig
+export function mergeCodeConfig<T>(
+  props: Partial<CodeConfig> & {
+    codeConfig: Partial<CodeConfig>
+  } & T
+) {
   const {
     lineNumbers,
     showCopyButton,
     showExpandButton,
-    className,
-    style,
-    ...editorProps
+    minZoom,
+    maxZoom,
+    ...rest
   } = props
-
   const codeConfig = {
     ...props.codeConfig,
+    maxZoom:
+      maxZoom == null ? props.codeConfig?.maxZoom : maxZoom,
+    minZoom:
+      minZoom == null ? props.codeConfig?.minZoom : minZoom,
+    horizontalCenter:
+      props.codeConfig?.horizontalCenter ??
+      props.horizontalCenter,
     lineNumbers:
       lineNumbers == null
         ? props.codeConfig?.lineNumbers
@@ -50,6 +56,17 @@ export function InnerCode({
         ? props.codeConfig?.showExpandButton
         : showExpandButton,
   }
+  return { ...rest, codeConfig }
+}
+
+export function InnerCode({
+  onTabClick,
+  ...props
+}: EditorProps & {
+  onTabClick?: (filename: string) => void
+} & Partial<CodeHikeConfig>) {
+  const { className, style, codeConfig, ...editorProps } =
+    mergeCodeConfig(props)
 
   if (
     !props.southPanel &&

packages/mdx/src/mdx-client/scrollycoding.tsx

@@ -11,6 +11,7 @@ export function Scrollycoding({
   codeConfig,
   presetConfig,
   start = 0,
+  ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
@@ -88,10 +89,11 @@ export function Scrollycoding({
       </div>
       <div className="ch-scrollycoding-sticker">
         <InnerCode
+          showExpandButton={true}
+          {...rest}
           {...(tab as any)}
           codeConfig={codeConfig}
           onTabClick={onTabClick}
-          showExpandButton={true}
         />
         {presetConfig && (
           <Preview

packages/mdx/src/mdx-client/section.tsx

@@ -63,15 +63,21 @@ export function Section({
   )
 }
 
-export function SectionCode() {
+export function SectionCode(innerProps) {
   const { props, setFocus } =
     React.useContext(SectionContext)
 
   const onTabClick = (filename: string) => {
     setFocus({ fileName: filename, focus: null, id: "" })
   }
 
-  return <InnerCode {...props} onTabClick={onTabClick} />
+  return (
+    <InnerCode
+      {...innerProps}
+      {...props}
+      onTabClick={onTabClick}
+    />
+  )
 }
 
 // ---

packages/mdx/src/mdx-client/slideshow.tsx

@@ -9,6 +9,7 @@ export function Slideshow({
   codeConfig,
   presetConfig,
   code,
+  ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
@@ -45,6 +46,7 @@ export function Slideshow({
     >
       <div className="ch-slideshow-slide">
         <InnerCode
+          {...rest}
           {...(tab as any)}
           codeConfig={{
             ...codeConfig,

packages/mdx/src/mdx-client/spotlight.tsx

@@ -9,6 +9,7 @@ export function Spotlight({
   codeConfig,
   start = 0,
   presetConfig,
+  ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
@@ -68,6 +69,7 @@ export function Spotlight({
       </div>
       <div className="ch-spotlight-sticker">
         <InnerCode
+          {...rest}
           {...(tab as any)}
           codeConfig={codeConfig}
           onTabClick={onTabClick}

packages/mdx/src/remark/transform.section.ts

@@ -34,6 +34,7 @@ async function transformSection(
         )
         toJSX(editorNode, {
           name: "CH.SectionCode",
+          appendProps: true,
           props: {},
         })
       }