Add codeblock button

Author: pomber

packages/mdx/pages/themes.tsx

@@ -58,7 +58,7 @@ export default function Page({ codes, tests }) {
   })
   return (
     <Layout
-      current={"test"}
+      current={"themes"}
       contentFileNames={tests}
       style={{ width: "100%", maxWidth: undefined }}
     >

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

@@ -32,7 +32,10 @@ export function InnerCode({
       <div className="ch-codeblock not-prose">
         <CodeSpring
           className="ch-code"
-          config={props.codeConfig}
+          config={{
+            ...props.codeConfig,
+            showCopyButton: true,
+          }}
           step={props.files[0]}
         />
       </div>

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

@@ -108,8 +108,22 @@ function EditorTween({
       southPanel={southPanel}
       terminalPanel={terminalPanel}
       theme={codeConfig.theme}
-      northButton={<CopyButton content={northContent} />}
-      southButton={<CopyButton content={southContent} />}
+      northButton={
+        <CopyButton
+          content={northContent}
+          style={{
+            margin: "0 0.8em",
+          }}
+        />
+      }
+      southButton={
+        <CopyButton
+          content={southContent}
+          style={{
+            margin: "0 0.8em",
+          }}
+        />
+      }
     />
   )
 }

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

@@ -17,6 +17,7 @@ import {
   CodeShift,
 } from "./partial-step-parser"
 import { SmoothLines } from "./smooth-lines"
+import { CopyButton } from "./copy-button"
 
 type HTMLProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLDivElement>,
@@ -43,6 +44,7 @@ export type CodeConfig = {
   horizontalCenter?: boolean
   theme: IRawTheme
   lineNumbers?: boolean
+  showCopyButton?: boolean
 }
 
 function useCodeShift({
@@ -132,6 +134,7 @@ function AfterDimensions({
   stepInfo,
   progress,
   htmlProps,
+  config,
 }: {
   dimensions: NonNullable<Dimensions>
   stepInfo: CodeShift
@@ -140,6 +143,7 @@ function AfterDimensions({
   htmlProps: HTMLProps
 }) {
   const { bg, fg } = getCodeColors(theme)
+
   return (
     <Wrapper
       htmlProps={htmlProps}
@@ -164,6 +168,18 @@ function AfterDimensions({
         center={horizontalCenter}
         theme={theme}
       />
+      {config.showCopyButton ? (
+        <CopyButton
+          style={{
+            position: "absolute",
+            top: 10,
+            right: 10,
+            width: "1.1em",
+            height: "1.1em",
+          }}
+          content={stepInfo?.code?.prev}
+        />
+      ) : undefined}
     </Wrapper>
   )
 }
@@ -183,6 +199,7 @@ function Wrapper({
       style={{
         margin: 0,
         padding: 0,
+        position: "relative",
         // using this instead of <pre> because https://github.com/code-hike/codehike/issues/120
         whiteSpace: "pre",
         ...style,

packages/mdx/src/smooth-code/copy-button.tsx

@@ -2,8 +2,10 @@ import React from "react"
 
 export function CopyButton({
   content,
+  style,
 }: {
   content: string
+  style?: React.CSSProperties
 }) {
   const [copied, setCopied] = React.useState(false)
 
@@ -12,8 +14,8 @@ export function CopyButton({
       style={{
         width: "1.5em",
         height: "1.5em",
-        margin: "0 0.8em",
         cursor: "pointer",
+        ...style,
       }}
       onClick={() => {
         copyToClipboard(content)