Merge pull request #216 from code-hike/better-scrollbars

Better scrollbars

Author: pomber

packages/mdx/dev/content/test.mdx

@@ -1,10 +1,79 @@
+### with width
+
+<CH.Code debug >
+
 ```js
-foo
-// link(1:2) https://codehike.org
-const hi = 'hi'
-const hi = 'hi'
-const hi = 'hi'
-// link[2:18] https://codehike.org
-hello world
-hello
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
 ```
+
+</CH.Code>
+
+<CH.Code>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+### with width
+
+<CH.Code debug style={{width: 400}}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+<CH.Code style={{width: 400}}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+### with zoom
+
+<CH.Code debug maxZoom={0.7} minZoom={0.7}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+<CH.Code maxZoom={0.7} minZoom={0.7}>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+### with line numbers
+
+<CH.Code debug lineNumbers>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>
+
+<CH.Code lineNumbers>
+
+```js
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```
+
+</CH.Code>

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

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

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

@@ -46,6 +46,7 @@ export type CodeConfig = {
   lineNumbers?: boolean
   showCopyButton?: boolean
   showExpandButton?: boolean
+  debug?: boolean
 }
 
 function useCodeShift({
@@ -83,17 +84,12 @@ export function CodeTween({
     config.lineNumbers || false,
     [config.parentHeight]
   )
-  // return (
-  //   <BeforeDimensions
-  //     element={element}
-  //     htmlProps={preProps}
-  //   />
-  // )
 
-  return !dimensions ? (
+  return !dimensions || config.debug ? (
     <BeforeDimensions
       element={element}
       htmlProps={preProps}
+      debug={config.debug}
     />
   ) : (
     <AfterDimensions
@@ -109,15 +105,16 @@ export function CodeTween({
 function BeforeDimensions({
   element,
   htmlProps,
+  debug,
 }: {
   element: React.ReactNode
   htmlProps?: HTMLProps
+  debug?: boolean
 }) {
   return (
     <Wrapper
       htmlProps={htmlProps}
-      // avoid scrollbars when measuring
-      style={{ overflow: "hidden", opacity: 0 }}
+      style={{ opacity: debug ? 0.9 : 0, overflow: "auto" }}
     >
       {element}
     </Wrapper>

packages/mdx/src/smooth-code/index.scss

@@ -19,6 +19,7 @@
   padding: 0;
   box-sizing: content-box;
   border: none;
+  overscroll-behavior-y: contain;
 }
 
 .ch-code-scroll-parent ::selection {

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

@@ -59,7 +59,7 @@ export function SmoothContainer({
 
   const width = Math.max(
     focusWidth + leftPad,
-    dimensions!.containerWidth
+    dimensions!.contentWidth
   )
 
   const startX = leftPad / zoom
@@ -75,7 +75,7 @@ export function SmoothContainer({
         scale={zoom}
         height={Math.max(
           focusHeight,
-          dimensions!.containerHeight
+          dimensions!.contentHeight
         )}
         width={width}
       >
@@ -214,8 +214,10 @@ function getContentProps({
   originalContentHeight: number
   horizontalCenter: boolean
 }) {
-  const { containerWidth, containerHeight, lineHeight } =
-    dimensions!
+  const { lineHeight } = dimensions!
+  const containerHeight = dimensions?.contentHeight
+  const containerWidth = dimensions?.contentWidth
+
   const originalFocusHeight =
     (extremes[1] - extremes[0] + 3) * lineHeight
 

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

@@ -9,6 +9,8 @@ import {
 type Dimensions = {
   containerWidth: number
   containerHeight: number
+  contentWidth: number
+  contentHeight: number
   deps: React.DependencyList
   lineWidths: [number, number]
   lineWidth: [number, number]
@@ -77,7 +79,13 @@ function useDimensions(
                   _{lineCount}
                 </span>
               ) : undefined}
-              <div style={{ display: "inline-block" }}>
+              <div
+                style={{
+                  display: "inline-block",
+                  // leftPad
+                  marginLeft: 16,
+                }}
+              >
                 <span>{line}</span>
               </div>
             </div>
@@ -99,7 +107,8 @@ function useDimensions(
   useLayoutEffect(() => {
     if (prevLineRef.current) {
       const pll = prevLineRef.current
-      const codeElement = pll?.parentElement!
+      const contentElement = pll?.parentElement!
+      const codeElement = contentElement.parentElement!
 
       // TODO is it clientWidth or clientRect?
       const lineContentDiv = pll?.querySelector(
@@ -126,6 +135,12 @@ function useDimensions(
         containerHeight: getHeightWithoutPadding(
           codeElement.parentElement!
         )!,
+        contentWidth: getWidthWithoutPadding(
+          contentElement.parentElement!
+        ),
+        contentHeight: getHeightWithoutPadding(
+          contentElement.parentElement!
+        )!,
         lineWidths: [
           plw || nlw || DEFAULT_WIDTH,
           nlw || plw || DEFAULT_WIDTH,
@@ -146,9 +161,8 @@ function useDimensions(
         deps: allDeps,
       }
       setDimensions(d)
-      // console.log({ d })
     }
-  }, [allDeps])
+  }, allDeps)
 
   if (
     !dimensions ||