Merge pull request #262 from code-hike/rows

Change code height with `rows`

Author: pomber

packages/mdx/dev/content/rows.mdx

@@ -0,0 +1,67 @@
+<CH.Code rows={4} showCopyButton={false}>
+
+```js
+console.log(2)
+```
+
+</CH.Code>
+
+<CH.Code rows={4} showCopyButton={false} lineNumbers >
+
+```js
+console.log(1)
+console.log(2)
+console.log(3)
+console.log(4)
+console.log(5)
+console.log(6)
+console.log(7)
+```
+
+</CH.Code>
+
+<CH.Code rows="focus" showCopyButton={false} lineNumbers >
+
+```js focus=3:4,6[1:11]
+console.log(1)
+console.log(2)
+console.log(3)
+console.log(4)
+console.log(5)
+console.log(6)
+console.log(7)
+```
+
+</CH.Code>
+
+<CH.Code rows={4} style={{width: 200 }} lineNumbers >
+
+```js
+console.log(1)
+console.log(2)
+console.log(3)
+console.log(4)
+console.log(5)
+// focus
+console.log(600000)
+console.log(7)
+```
+
+</CH.Code>
+
+<CH.Code rows={6}  lineNumbers >
+
+```js foo.js
+console.log(1)
+```
+
+```js bar.js
+console.log(1)
+console.log(2)
+console.log(3)
+console.log(4)
+console.log(5)
+console.log(7)
+```
+
+</CH.Code>

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

@@ -55,6 +55,7 @@ export function mergeCodeConfig<T>(
       showExpandButton == null
         ? props.codeConfig?.showExpandButton
         : showExpandButton,
+    rows: props.rows,
     debug: props.debug ?? props.codeConfig?.debug,
   }
   return { ...rest, codeConfig }

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

@@ -48,6 +48,7 @@ export type CodeConfig = {
   showCopyButton?: boolean
   showExpandButton?: boolean
   staticMediaQuery?: string
+  rows?: number | "focus"
   debug?: boolean
 }
 
@@ -85,6 +86,7 @@ export function CodeTween({
     map(tween, tween => tween.focus),
     config.minColumns || DEFAULT_MIN_COLUMNS,
     config.lineNumbers || false,
+    config.rows,
     [config.parentHeight]
   )
 

packages/mdx/src/smooth-code/use-dimensions.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import {
   FocusString,
+  getFocusExtremes,
   getFocusIndexes,
   Tween,
   useLayoutEffect,
@@ -38,6 +39,7 @@ function useDimensions(
   focus: Tween<FocusString>,
   minColumns: number,
   lineNumbers: boolean,
+  rows: number | "focus" | undefined,
   deps: React.DependencyList
 ): { element: React.ReactNode; dimensions: Dimensions } {
   const [dimensions, setDimensions] =
@@ -61,7 +63,35 @@ function useDimensions(
         .trimEnd()
         .split(newlineRe)
 
-      const lineCount = lines.length
+      const originalLineCount = lines.length
+
+      if (rows) {
+        // make the lines match the requested number of rows
+        const heightInLines =
+          rows === "focus"
+            ? focusHeightInLines(focus, lines)
+            : rows
+        let i = lines.length
+
+        while (i < heightInLines) {
+          lines.push("")
+          i++
+        }
+
+        // remove extra lines to match the requested rows
+        while (i > heightInLines) {
+          lines.pop()
+          i--
+        }
+
+        // if we removed prevLongestLine, add it back
+        if (
+          prevLongestLine &&
+          !lines.includes(prevLongestLine)
+        ) {
+          lines[lines.length - 1] = prevLongestLine
+        }
+      }
 
       // avod setting the ref more than once https://github.com/code-hike/codehike/issues/232
       let prevLineRefSet = false
@@ -78,7 +108,7 @@ function useDimensions(
               <div ref={ref} key={i}>
                 {lineNumbers ? (
                   <span className="ch-code-line-number">
-                    _{lineCount}
+                    _{originalLineCount}
                   </span>
                 ) : undefined}
                 <div
@@ -244,3 +274,11 @@ function useWindowWidth() {
   }, [])
   return width
 }
+
+function focusHeightInLines(
+  focus: Tween<FocusString>,
+  lines: any[]
+): number {
+  const [start, end] = getFocusExtremes(focus.prev, lines)
+  return end - start + 1
+}

packages/mdx/src/utils/focus.ts

@@ -102,7 +102,7 @@ export function parseExtremes(part: string) {
 /**
  * Return the first and last indexes to focus, both included
  */
-function getFocusExtremes(
+export function getFocusExtremes(
   focus: FocusString,
   lines: any[]
 ): [number, number] {