Add copy button to config

Author: pomber

packages/mdx/dev/files.ts

@@ -34,7 +34,12 @@ export async function getCode(file: string, config = {}) {
       remarkPlugins: [
         [
           remarkCodeHike,
-          { autoImport: false, theme, ...config },
+          {
+            autoImport: false,
+            showCopyButton: true,
+            theme,
+            ...config,
+          },
         ],
       ],
     })

packages/mdx/pages/themes.tsx

@@ -38,6 +38,7 @@ export async function getStaticProps() {
     const { code } = await getCode(mdx, {
       theme,
       lineNumbers: true,
+      showCopyButton: true,
     })
     return { themeName, code }
   })

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

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

packages/mdx/src/mdx-plugin/plugin.ts

@@ -15,6 +15,7 @@ type CodeHikeConfig = {
   theme: any
   lineNumbers?: boolean
   autoImport?: boolean
+  showCopyButton?: boolean
 }
 
 export function remarkCodeHike(

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

@@ -54,6 +54,8 @@ function EditorTween({
   ...divProps
 }: EditorTweenProps) {
   const ref = React.createRef<HTMLDivElement>()
+
+  const { showCopyButton, ...config } = codeConfig
   const {
     northPanel,
     southPanel,
@@ -65,7 +67,7 @@ function EditorTween({
     next || prev,
     t,
     backward,
-    codeConfig
+    config
   )
 
   const [frozenHeight, freezeHeight] = React.useState<
@@ -109,20 +111,20 @@ function EditorTween({
       terminalPanel={terminalPanel}
       theme={codeConfig.theme}
       northButton={
-        <CopyButton
-          content={northContent}
-          style={{
-            margin: "0 0.8em",
-          }}
-        />
+        showCopyButton ? (
+          <CopyButton
+            content={northContent}
+            style={{ margin: "0 0.8em" }}
+          />
+        ) : undefined
       }
       southButton={
-        <CopyButton
-          content={southContent}
-          style={{
-            margin: "0 0.8em",
-          }}
-        />
+        showCopyButton ? (
+          <CopyButton
+            content={southContent}
+            style={{ margin: "0 0.8em" }}
+          />
+        ) : undefined
       }
     />
   )