Add overflow scrollbars to mini-editor

Author: pomber

packages/mini-editor/src/code.tsx

@@ -16,6 +16,8 @@ type CodeProps = {
   language: string
   parentHeight?: number
   minColumns: number
+  minZoom: number
+  maxZoom: number
 }
 
 export function Code({
@@ -27,6 +29,8 @@ export function Code({
   language,
   parentHeight,
   minColumns,
+  minZoom,
+  maxZoom,
 }: CodeProps) {
   const {
     prevLines,
@@ -53,17 +57,7 @@ export function Code({
     <pre
       ref={ref}
       className={`language-${language}`}
-      style={{
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        right: 16,
-        left: 16,
-        padding: 0,
-        margin: 0,
-        overflow: "hidden",
-        opacity: dimensions ? 1 : 0,
-      }}
+      style={{ opacity: dimensions ? 1 : 0 }}
     >
       <code>
         {dimensions ? (
@@ -85,7 +79,8 @@ export function Code({
             }
             prevFocus={prevFocusIndexes}
             nextFocus={nextFocusIndexes}
-            maxZoom={1}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
           />
         ) : (
           <>

packages/mini-editor/src/index.scss

@@ -43,11 +43,22 @@
   height: 100%;
   color: #cccccc;
   font-size: 15px;
-  padding: 5px 10px;
+  // padding: 5px 10px;
   line-height: 1.1rem;
   box-sizing: border-box;
 }
 
+.ch-editor-body pre {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 16px;
+  margin: 0;
+  overflow: auto;
+}
+
 .ch-editor-body code {
   line-height: 20px;
 }

packages/mini-editor/src/mini-editor.tsx

@@ -31,6 +31,8 @@ export type MiniEditorProps = {
   steps?: MiniEditorStep[]
   height?: number
   minColumns?: number
+  minZoom?: number
+  maxZoom?: number
   button?: React.ReactNode
   classes?: Classes
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
@@ -46,6 +48,8 @@ function MiniEditor(props: MiniEditorProps) {
     steps: ogSteps,
     tabs: ogTabs,
     minColumns = 50,
+    minZoom = 0.2,
+    maxZoom = 1,
     height,
     ...rest
   } = props
@@ -101,6 +105,8 @@ function MiniEditor(props: MiniEditorProps) {
           steps={contentSteps}
           parentHeight={height}
           minColumns={minColumns}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
         />
       )}
     </EditorFrame>
@@ -155,6 +161,8 @@ type ContentProps = {
   steps: ContentStep[]
   parentHeight?: number
   minColumns: number
+  minZoom: number
+  maxZoom: number
 }
 
 function EditorContent({
@@ -163,6 +171,8 @@ function EditorContent({
   steps,
   parentHeight,
   minColumns,
+  minZoom,
+  maxZoom,
 }: ContentProps) {
   const fwdTransitions = useForwardTransitions(steps)
   const bwdTransitions = useBackwardTransitions(steps)
@@ -188,6 +198,8 @@ function EditorContent({
       progress={progress - transitionIndex + 1}
       parentHeight={parentHeight}
       minColumns={minColumns}
+      minZoom={minZoom}
+      maxZoom={maxZoom}
     />
   )
 }

packages/mini-editor/src/use-dimensions.tsx

@@ -31,8 +31,6 @@ function useDimensions<T extends HTMLElement>(
 
   useLayoutEffect(() => {
     if (ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-
       const pll = ref.current.querySelector(
         ".prev-longest-line"
       )
@@ -50,8 +48,8 @@ function useDimensions<T extends HTMLElement>(
         ? plw! / (pll.textContent?.length || 1)
         : nlw! / (nll!.textContent?.length || 1)
       setDimensions({
-        width: rect.width,
-        height: rect.height,
+        width: getWidthWithoutPadding(ref.current),
+        height: getHeightWithoutPadding(ref.current),
         lineWidths: [
           plw || nlw || DEFAULT_WIDTH,
           nlw || plw || DEFAULT_WIDTH,
@@ -73,6 +71,23 @@ function useDimensions<T extends HTMLElement>(
   }
 }
 
+function getWidthWithoutPadding(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element)
+  return (
+    element.clientWidth -
+    parseFloat(computedStyle.paddingLeft) -
+    parseFloat(computedStyle.paddingRight)
+  )
+}
+function getHeightWithoutPadding(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element)
+  return (
+    element.clientHeight -
+    parseFloat(computedStyle.paddingTop) -
+    parseFloat(computedStyle.paddingBottom)
+  )
+}
+
 function depsChanged(
   oldDeps: React.DependencyList,
   newDeps: React.DependencyList

packages/smooth-lines/src/index.tsx

@@ -208,7 +208,7 @@ function Container({
         width,
         height,
         position: "relative",
-        overflow: "auto",
+        // overflow: "auto",
       }}
     >
       {children}

packages/storybook/src/mini-editor.story.js

@@ -69,6 +69,7 @@ console.log(1)`
           progress={progress}
           backward={backward}
           minColumns={10}
+          minZoom={1}
         />
       )}
     </WithProgress>
@@ -127,6 +128,7 @@ console.log(8)`
           steps={steps}
           progress={progress}
           backward={backward}
+          minZoom={0.8}
         />
       )}
     </WithProgress>

packages/storybook/src/scrollycoding.story.js

@@ -87,6 +87,7 @@ function Hike({
     },
     {
       minColumns: 46,
+      minZoom: 0.9,
       ...codeProps,
     }
   )