Copy button component

Author: pomber

packages/mdx/dev/content/copy-button.mdx

@@ -0,0 +1,39 @@
+one line:
+
+```js
+const x = 2
+```
+
+no editor:
+
+```js
+function foo() {
+  return 2
+}
+```
+
+one file editor:
+
+```js foo.js
+function foo() {
+  return 2
+}
+```
+
+two files:
+
+<CH.Code>
+
+```js foo.js
+function foo() {
+  return 2
+}
+```
+
+```js bar.js
+function bar() {
+  return 2
+}
+```
+
+</CH.Code>

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

@@ -4,6 +4,7 @@ import {
   CodeStep,
 } from "../smooth-code"
 import React from "react"
+import { codeToText } from "utils"
 
 export type CodeFile = CodeStep & {
   name: string
@@ -37,6 +38,8 @@ type OutputPanel = {
 type Transition = {
   northPanel: OutputPanel
   southPanel?: OutputPanel | null
+  northContent: string
+  southContent: string
 }
 
 type TabsSnapshot = Record<
@@ -110,6 +113,7 @@ export function useTransition(
   )
 
   return {
+    northContent: getContentFromFile(nextNorthFile),
     northPanel: {
       tabs: northTabs,
       style: northStyle,
@@ -126,6 +130,7 @@ export function useTransition(
         />
       ),
     },
+    southContent: getContentFromFile(nextSouthFile),
     southPanel: inputSouthPanel && {
       tabs: southTabs!,
       style: southStyle!,
@@ -162,6 +167,7 @@ function startingPosition(
   } = getStepFiles(prev, next, true)
 
   return {
+    northContent: getContentFromFile(prevNorthFile),
     northPanel: {
       tabs: inputNorthPanel.tabs.map(title => ({
         title,
@@ -182,6 +188,7 @@ function startingPosition(
         />
       ),
     },
+    southContent: getContentFromFile(prevSouthFile),
     southPanel: inputSouthPanel && {
       tabs: inputSouthPanel.tabs.map(title => ({
         title,
@@ -229,6 +236,7 @@ function endingPosition(
   }
 
   return {
+    northContent: getContentFromFile(nextNorthFile),
     northPanel: {
       tabs: inputNorthPanel.tabs.map(title => ({
         title,
@@ -249,6 +257,7 @@ function endingPosition(
         />
       ),
     },
+    southContent: getContentFromFile(nextSouthFile),
     southPanel: inputSouthPanel && {
       tabs: inputSouthPanel.tabs.map(title => ({
         title,
@@ -305,6 +314,10 @@ function CodeTransition({
   )
 }
 
+function getContentFromFile(file?: CodeFile) {
+  return file ? codeToText(file.code) : ""
+}
+
 /**
  * Get the StepFiles for a transition
  * in each panel, if the prev and next active files are the same

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

@@ -7,6 +7,7 @@ import { TerminalPanel } from "./terminal-panel"
 import { useTransition, EditorStep } from "./editor-shift"
 import { CodeConfig } from "../smooth-code"
 import { useLayoutEffect } from "../utils"
+import { CopyButton } from "smooth-code/copy-button"
 
 export { EditorTransition, EditorTween }
 export type { EditorTransitionProps, EditorTweenProps }
@@ -53,7 +54,12 @@ function EditorTween({
   ...divProps
 }: EditorTweenProps) {
   const ref = React.createRef<HTMLDivElement>()
-  const { northPanel, southPanel } = useTransition(
+  const {
+    northPanel,
+    southPanel,
+    northContent,
+    southContent,
+  } = useTransition(
     ref,
     prev,
     next || prev,
@@ -102,6 +108,8 @@ function EditorTween({
       southPanel={southPanel}
       terminalPanel={terminalPanel}
       theme={codeConfig.theme}
+      // TODO same for south
+      button={<CopyButton content={northContent} />}
     />
   )
 }

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

@@ -0,0 +1,69 @@
+export function CopyButton({
+  content,
+}: {
+  content: string
+}) {
+  return (
+    <svg
+      style={{
+        width: "1.5em",
+        height: "1.5em",
+        margin: "0 0.8em",
+        cursor: "pointer",
+      }}
+      onClick={() => copyToClipboard(content)}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+      ></path>
+    </svg>
+  )
+}
+
+function copyToClipboard(text: string) {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text)
+    return
+  }
+  navigator.clipboard.writeText(text).then(
+    function () {
+      console.log(
+        "Async: Copying to clipboard was successful!"
+      )
+    },
+    function (err) {
+      console.error("Async: Could not copy text: ", err)
+    }
+  )
+}
+
+function fallbackCopyTextToClipboard(text: string) {
+  var textArea = document.createElement("textarea")
+  textArea.value = text
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0"
+  textArea.style.left = "0"
+  textArea.style.position = "fixed"
+
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+
+  try {
+    var successful = document.execCommand("copy")
+    var msg = successful ? "successful" : "unsuccessful"
+    console.log("Fallback: Copying text command was " + msg)
+  } catch (err) {
+    console.error("Fallback: Oops, unable to copy", err)
+  }
+
+  document.body.removeChild(textArea)
+}

packages/mdx/src/utils/code.ts

@@ -11,3 +11,11 @@ export type Code = {
   lines: HighlightedLine[]
   lang: string
 }
+
+export function codeToText(code: Code) {
+  return code.lines
+    .map(line =>
+      line.tokens.map(token => token.content).join("")
+    )
+    .join("\n")
+}