Merge pull request #235 from code-hike/next

v0.7.1

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 ? (

packages/mdx/src/smooth-code/use-dimensions.tsx

@@ -56,40 +56,43 @@ function useDimensions(
         code.next,
         focus.next
       )
+
       const lines = (code.prev || code.next!)
         .trimEnd()
         .split(newlineRe)
 
       const lineCount = lines.length
 
+      // avod setting the ref more than once https://github.com/code-hike/codehike/issues/232
+      let prevLineRefSet = false
       const element = (
         <code className="ch-code-scroll-parent">
           <br />
-          {lines.map((line, i) => (
-            <div
-              ref={
-                line === prevLongestLine
-                  ? prevLineRef
-                  : undefined
-              }
-              key={i}
-            >
-              {lineNumbers ? (
-                <span className="ch-code-line-number">
-                  _{lineCount}
-                </span>
-              ) : undefined}
-              <div
-                style={{
-                  display: "inline-block",
-                  // leftPad
-                  marginLeft: 16,
-                }}
-              >
-                <span>{line}</span>
+          {lines.map((line, i) => {
+            const ref =
+              !prevLineRefSet && line === prevLongestLine
+                ? prevLineRef
+                : undefined
+            prevLineRefSet = prevLineRefSet || ref != null
+            return (
+              <div ref={ref} key={i}>
+                {lineNumbers ? (
+                  <span className="ch-code-line-number">
+                    _{lineCount}
+                  </span>
+                ) : undefined}
+                <div
+                  style={{
+                    display: "inline-block",
+                    // leftPad
+                    marginLeft: 16,
+                  }}
+                >
+                  <span>{line}</span>
+                </div>
               </div>
-            </div>
-          ))}
+            )
+          })}
           <br />
         </code>
       )