Merge pull request #396 from code-hike/code-expand

Add expand button to codeblocks

Author: pomber

packages/mdx/dev/content/scrollycoding-demo.mdx

@@ -4,7 +4,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
 
-<CH.Scrollycoding  showCopyButton={false} rows="focus" showExpandButton={true}>
+<CH.Scrollycoding  showCopyButton={true} rows="focus" showExpandButton={true}>
 
 ## Step 1
 

packages/mdx/src/mini-editor/code-browser.tsx

@@ -35,11 +35,12 @@ function Sidebar({
   activeFile: CodeFile
   setActiveFile: (file: CodeFile) => void
 }) {
+  const noFiles = files.length === 0 || !files[0].name
   const tree = React.useMemo(
     () => toFileTree(files),
     [files]
   )
-  return (
+  return noFiles ? null : (
     <div className="ch-code-browser-sidebar">
       <SidebarNodes
         tree={tree}

packages/mdx/src/mini-editor/dialog.scss

@@ -7,7 +7,7 @@
 .ch-expand-dialog {
   height: 100vh;
   width: 100vw;
-  max-width: 900px;
+  max-width: min(900px, calc((100% - 6px) - 2em));
   border: 0;
   background-color: transparent;
 }

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

@@ -8,7 +8,7 @@ import { useTransition, EditorStep } from "./editor-shift"
 import { CodeConfig } from "../smooth-code"
 import { useLayoutEffect } from "../utils"
 import { CopyButton } from "smooth-code/copy-button"
-import { ExpandButton } from "mini-editor/expand-button"
+import { EditorExpandButton } from "mini-editor/expand-button"
 
 export { EditorTransition, EditorTween }
 export type { EditorTransitionProps, EditorTweenProps }
@@ -105,7 +105,7 @@ function EditorTween({
         />
       ) : undefined}
       {showExpandButton ? (
-        <ExpandButton
+        <EditorExpandButton
           className="ch-editor-button"
           step={next || prev}
         />

packages/mdx/src/mini-editor/expand-button.tsx

@@ -1,21 +1,63 @@
 import React from "react"
 import { CodeBrowser } from "./code-browser"
 import { EditorStep } from "./editor-shift"
+import { CodeStep } from "../smooth-code/code-tween"
 
-export function ExpandButton({
-  style,
+export function EditorExpandButton({
   step,
-  className,
+  ...props
 }: {
   style?: React.CSSProperties
   step: EditorStep
   className?: string
+}) {
+  const files = step.files
+  const activeFileName = step.northPanel.active
+
+  return (
+    <ExpandButton
+      {...props}
+      files={step.files}
+      activeFileName={step.northPanel?.active}
+    />
+  )
+}
+
+export function CodeExpandButton({
+  step,
+  ...props
+}: {
+  style?: React.CSSProperties
+  step: CodeStep
+  className?: string
+}) {
+  const file = { ...step, name: "" }
+  const activeFileName = ""
+
+  return (
+    <ExpandButton
+      {...props}
+      files={[file]}
+      activeFileName={activeFileName}
+    />
+  )
+}
+
+function ExpandButton({
+  style,
+  className,
+  files,
+  activeFileName,
+}: {
+  style?: React.CSSProperties
+  files: EditorStep["files"]
+  activeFileName: string
+  className?: string
 }) {
   const [expanded, setExpanded] = React.useState(false)
   const [dialogSupported, setDialogSupported] =
     React.useState(true)
   const ref = React.useRef<any>(null)
-  const files = step.files
 
   // check if <dialog /> is supported
   React.useEffect(() => {
@@ -62,7 +104,7 @@ export function ExpandButton({
           <div className="ch-expand-dialog-content">
             <CodeBrowser
               files={files}
-              startingFileName={step.northPanel.active}
+              startingFileName={activeFileName}
             />
           </div>
         ) : undefined}

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

@@ -14,6 +14,7 @@ import {
 } from "./partial-step-parser"
 import { SmoothLines } from "./smooth-lines"
 import { CopyButton } from "./copy-button"
+import { CodeExpandButton } from "mini-editor/expand-button"
 
 type HTMLProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLDivElement>,
@@ -95,6 +96,7 @@ export function CodeTween({
       config={config}
       progress={progress}
       htmlProps={preProps}
+      tween={tween}
     />
   )
 }
@@ -126,12 +128,14 @@ function AfterDimensions({
   progress,
   htmlProps,
   config,
+  tween,
 }: {
   dimensions: NonNullable<Dimensions>
   stepInfo: CodeShift
   config: CodeConfig
   progress: number
   htmlProps: HTMLProps
+  tween: FullTween<CodeStep>
 }) {
   return (
     <Wrapper htmlProps={htmlProps} measured={true}>
@@ -144,12 +148,20 @@ function AfterDimensions({
         maxZoom={maxZoom}
         center={horizontalCenter}
       />
-      {config.showCopyButton ? (
-        <CopyButton
-          className="ch-code-button"
-          content={stepInfo?.code?.prev}
-        />
-      ) : undefined}
+      <div className="ch-code-buttons">
+        {config.showCopyButton ? (
+          <CopyButton
+            className="ch-code-button"
+            content={stepInfo?.code?.prev}
+          />
+        ) : undefined}
+        {config.showExpandButton ? (
+          <CodeExpandButton
+            className="ch-code-button"
+            step={tween.prev}
+          />
+        ) : undefined}
+      </div>
     </Wrapper>
   )
 }

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

@@ -30,14 +30,18 @@
   color: inherit;
 }
 
-.ch-code-button {
-  @include button-reset;
-
+.ch-code-buttons {
   position: absolute;
   top: 10px;
   right: 10px;
+}
+
+.ch-code-button {
+  @include button-reset;
+
   width: 1.1em;
   height: 1.1em;
+  margin-left: 0.5em;
 }
 
 .ch-code-wrapper {