refactor: using a button instead of just an SVG

Author: mfranzke

packages/mdx/src/mini-editor/index.scss

@@ -104,4 +104,17 @@
   min-width: 1.5em;
   min-height: 1.5em;
   margin-right: 0.8em;
+
+  &[type="button"] {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: inherit;
+  }
+
+  svg {
+    width: 1.5em;
+    height: 1.5em;
+    min-width: 1.5em;
+    min-height: 1.5em;
+  }
 }

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

@@ -12,7 +12,9 @@ export function CopyButton({
   const [copied, setCopied] = React.useState(false)
 
   return (
-    <svg
+    <button
+      type="button"
+      className={className}
       style={style}
       onClick={() => {
         copyToClipboard(content)
@@ -21,30 +23,32 @@ export function CopyButton({
           setCopied(false)
         }, 1200)
       }}
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
     >
-      <title>Copy</title>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Copy</title>
 
-      {copied ? (
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 13l4 4L19 7"
-        />
-      ) : (
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.6px"
-          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"
-        />
-      )}
-    </svg>
+        {copied ? (
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M5 13l4 4L19 7"
+          />
+        ) : (
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.6px"
+            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"
+          />
+        )}
+      </svg>
+    </button>
   )
 }