Change code left pad

Author: pomber

packages/mdx/src/client/annotations.tsx

@@ -31,7 +31,10 @@ function Box({
           tc.scope?.includes("string")
         )?.settings?.foreground || "yellow"
   return (
-    <span style={{ outline: `2px solid ${border}` }}>
+    <span
+      className="ch-code-box-annotation"
+      style={{ outline: `2px solid ${border}` }}
+    >
       {children}
     </span>
   )
@@ -63,8 +66,18 @@ function Background({
         background: bg,
         // cursor: "pointer",
       }}
-      // onClick={_ => alert("clicked")}
+      className="ch-code-bg-annotation"
     >
+      <span
+        className="ch-code-bg-annotation-border"
+        style={{
+          background: "#00a2d3",
+          width: "3px",
+          height: "100%",
+          position: "absolute",
+          left: 0,
+        }}
+      />
       {children}
     </div>
   )

packages/playground/next.config.js

@@ -2,8 +2,8 @@ const { remarkCodeHike } = require("@code-hike/mdx")
 const theme = require("shiki/themes/monokai.json")
 const withBundleAnalyzer = require("@next/bundle-analyzer")(
   {
-    // enabled: process.env.ANALYZE === "true",
-    enabled: true,
+    enabled: process.env.ANALYZE === "true",
+    // enabled: true,
   }
 )
 module.exports = withBundleAnalyzer({

packages/smooth-code/src/annotations.tsx

@@ -152,7 +152,18 @@ function defaultMultilineComponent(
         cursor: "pointer",
       }}
       onClick={_ => alert("clicked")}
+      className="ch-code-bg-annotation"
     >
+      <span
+        className="ch-code-bg-annotation-border"
+        style={{
+          background: "#00a2d3",
+          width: "3px",
+          height: "100%",
+          position: "absolute",
+          left: 0,
+        }}
+      />
       {children}
     </div>
   )

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

@@ -168,19 +168,8 @@ function Wrapper({
   return (
     <pre
       {...htmlProps}
-      style={{
-        overflow: "auto",
-        margin: 0,
-
-        // hack https://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/
-        // fontSize: "1em",
-        // fontFamily: "monospace,monospace",
-        // lineHeight: `${LINE_HEIGHT}em`,
-        ...style,
-        ...htmlProps?.style,
-      }}
-    >
-      {children}
-    </pre>
+      style={{ margin: 0, ...style, ...htmlProps?.style }}
+      children={children}
+    />
   )
 }

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

@@ -18,7 +18,10 @@ export function SmoothContainer({
   maxZoom?: number
   center?: boolean
   codeStep: CodeShift
-  children: (focusWidth: number) => React.ReactNode
+  children: (
+    focusWidth: number,
+    startX: number
+  ) => React.ReactNode
   progress: number
 }) {
   const { prev, next } = getTweenContentProps({
@@ -49,11 +52,15 @@ export function SmoothContainer({
     progress
   )
 
+  const leftPad = 16
+
   const width = Math.max(
-    focusWidth + 16, // 16 is the left padding
+    focusWidth + leftPad,
     dimensions!.containerWidth
   )
 
+  const startX = leftPad / zoom
+
   return (
     <Container
       width={dimensions!.containerWidth}
@@ -69,7 +76,7 @@ export function SmoothContainer({
         )}
         width={width}
       >
-        {children(focusWidth)}
+        {children(focusWidth, startX)}
       </Content>
     </Container>
   )
@@ -91,11 +98,11 @@ function Container({
         height,
         position: "relative",
         display: "block",
-        // overflowX: "auto",
+        overflow: "auto",
       }}
-    >
-      {children}
-    </code>
+      className="ch-code-scroll-parent"
+      children={children}
+    />
   )
 }
 
@@ -125,19 +132,21 @@ function Content({
         height: height,
         overflow: "hidden",
       }}
+      className="ch-code-scroll-content"
     >
       <div
         style={{
           position: "absolute",
           top: 0,
           left: 0,
           transform: `translateX(${dx}px) translateY(${dy}px) scale(${scale})`,
-          transformOrigin: "16px top",
-          width: "100%",
+          transformOrigin: "left top",
+          width: width / scale,
+          height: (height - 2 * dy) / scale,
+          // outline: "1px solid yellow",
         }}
-      >
-        {children}
-      </div>
+        children={children}
+      />
     </div>
   )
 }

packages/smooth-code/src/smooth-lines.tsx

@@ -20,12 +20,13 @@ type SmoothLinesProps = {
 export function SmoothLines(props: SmoothLinesProps) {
   return (
     <SmoothContainer {...props}>
-      {focusWidth => (
+      {(focusWidth, startX) => (
         <Lines
           codeStep={props.codeStep}
           focusWidth={focusWidth}
           lineHeight={props.dimensions!.lineHeight}
           progress={props.progress}
+          startX={startX}
         />
       )}
     </SmoothContainer>
@@ -37,11 +38,13 @@ function Lines({
   progress,
   focusWidth,
   lineHeight,
+  startX,
 }: {
   codeStep: CodeShift
   focusWidth: number
   lineHeight: number
   progress: number
+  startX: number
 }) {
   const groups =
     progress < 0.5
@@ -58,6 +61,7 @@ function Lines({
               t={progress}
               focusWidth={focusWidth}
               lineHeight={lineHeight}
+              startX={startX}
               key={i}
             />
           )
@@ -94,6 +98,7 @@ function Lines({
               focusWidth={focusWidth}
               lineHeight={lineHeight}
               startY={startY}
+              startX={startX}
             />
           </Component>
         )
@@ -109,12 +114,14 @@ function LineGroup({
   focusWidth,
   lineHeight,
   t,
+  startX,
   startY = 0,
 }: {
   lines: CodeLine[]
   focusWidth: number
   lineHeight: number
   t: number
+  startX: number
   startY?: number
 }) {
   return (
@@ -126,15 +133,33 @@ function LineGroup({
         const opacity = getOpacity(focused, t, dx)
 
         return (
-          <LineContainer
-            key={key}
-            dx={16 + dx * focusWidth} // 16 is the left padding, it should be configurable
-            dy={(dy - startY) * lineHeight}
-            width={focusWidth}
-            opacity={opacity}
-          >
-            <LineContent line={line} progress={t} dx={dx} />
-          </LineContainer>
+          <>
+            {/* <span
+              style={{
+                top: 0,
+                left: 0,
+                transform: `translate(${
+                  dx * focusWidth
+                }px, ${(dy - startY) * lineHeight}px)`,
+                position: "absolute",
+              }}
+            >
+              13
+            </span> */}
+            <LineContainer
+              key={key}
+              dx={startX + dx * focusWidth}
+              dy={(dy - startY) * lineHeight}
+              width={focusWidth}
+              opacity={opacity}
+            >
+              <LineContent
+                line={line}
+                progress={t}
+                dx={dx}
+              />
+            </LineContainer>
+          </>
         )
       })}
     </>

packages/storybook/src/code-tween.story.js

@@ -105,7 +105,7 @@ console.log(4)
   const nextCode = `
 console.log(1)
 console.log(3)
-const x = (y) => y++ * foobarbaz
+const x = (y) => y++ * foobarbaz - 123456789
 `.trim()
 
   const prevAnnotations = [
@@ -139,9 +139,7 @@ const x = (y) => y++ * foobarbaz
   return (
     <WithProgress>
       {progress => (
-        <div
-          style={{ height: 300, outline: "1px solid red" }}
-        >
+        <div style={{ height: 300 }}>
           {tween ? (
             <CodeTween
               progress={progress}