From 05e2104c3231d23519e7e45591c84392899ae6ed Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Mon, 8 Aug 2022 09:40:23 +0000
Subject: [PATCH 1/2] Add rows prop

---
 packages/mdx/dev/content/rows.mdx             | 53 +++++++++++++++++++
 packages/mdx/src/mdx-client/code.tsx          |  1 +
 packages/mdx/src/smooth-code/code-tween.tsx   |  2 +
 .../mdx/src/smooth-code/use-dimensions.tsx    | 42 ++++++++++++++-
 packages/mdx/src/utils/focus.ts               |  2 +-
 5 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 packages/mdx/dev/content/rows.mdx

diff --git a/packages/mdx/dev/content/rows.mdx b/packages/mdx/dev/content/rows.mdx
new file mode 100644
index 00000000..2edb3695
--- /dev/null
+++ b/packages/mdx/dev/content/rows.mdx
@@ -0,0 +1,53 @@
+<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={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>
diff --git a/packages/mdx/src/mdx-client/code.tsx b/packages/mdx/src/mdx-client/code.tsx
index 23f456f3..604aca1e 100644
--- a/packages/mdx/src/mdx-client/code.tsx
+++ b/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 }
diff --git a/packages/mdx/src/smooth-code/code-tween.tsx b/packages/mdx/src/smooth-code/code-tween.tsx
index 03c75af2..0c98852a 100644
--- a/packages/mdx/src/smooth-code/code-tween.tsx
+++ b/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]
   )
 
diff --git a/packages/mdx/src/smooth-code/use-dimensions.tsx b/packages/mdx/src/smooth-code/use-dimensions.tsx
index 217294d1..80679304 100644
--- a/packages/mdx/src/smooth-code/use-dimensions.tsx
+++ b/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
+}
diff --git a/packages/mdx/src/utils/focus.ts b/packages/mdx/src/utils/focus.ts
index 4c30a1f1..bf733366 100644
--- a/packages/mdx/src/utils/focus.ts
+++ b/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] {

From fb2e24db492ed62cbc67bacc722031cac2c389ea Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Mon, 8 Aug 2022 09:42:37 +0000
Subject: [PATCH 2/2] Add focus example

---
 packages/mdx/dev/content/rows.mdx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/mdx/dev/content/rows.mdx b/packages/mdx/dev/content/rows.mdx
index 2edb3695..2ee7962d 100644
--- a/packages/mdx/dev/content/rows.mdx
+++ b/packages/mdx/dev/content/rows.mdx
@@ -20,6 +20,20 @@ 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