Merge pull request #234 from code-hike/add-copy-button-to-code-browser

Add copy button to code browser

Author: pomber

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

@@ -22,6 +22,7 @@
   font-size: 1rem;
   line-height: 1.2rem;
   letter-spacing: 0px;
+  position: relative;
 }
 
 .ch-code-browser-content ::selection {
@@ -42,3 +43,14 @@
   background-color: var(--ch-hover-background);
   color: var(--ch-hover-foreground);
 }
+
+.ch-code-browser-button {
+  width: 1.5em;
+  height: 1.5em;
+  cursor: pointer;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  position: absolute;
+  right: 0.8em;
+  top: 0.8em;
+}

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

@@ -1,7 +1,13 @@
 import { CodeFile } from "./editor-shift"
 import { IRawTheme } from "vscode-textmate"
-import { ColorName, getColor, getColorScheme } from "utils"
+import {
+  codeToText,
+  ColorName,
+  getColor,
+  getColorScheme,
+} from "utils"
 import React from "react"
+import { CopyButton } from "smooth-code/copy-button"
 
 export function CodeBrowser({
   files,
@@ -192,6 +198,10 @@ function Content({
         colorScheme: getColorScheme(theme),
       }}
     >
+      <CopyButton
+        className="ch-code-browser-button"
+        content={codeToText(file.code)}
+      />
       {file.code.lines.map((line, i) => (
         <div key={i}>
           {line.tokens.length === 0 ? (