feat: use button tag for clipboard button

diplodoc-platform · Aug 20, 2024 · 50ebcfe · 50ebcfe
1 parent 18bc8e1
commit 50ebcfe
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 44 deletions.
diff --git a/src/js/code.ts b/src/js/code.ts
@@ -59,7 +59,7 @@ if (typeof document !== 'undefined') {
         }
 
         copyToClipboard(code.innerText).then(() => {
-            notifySuccess(parent.querySelector('.yfm-clipboard-button'));
+            notifySuccess(parent.querySelector('.yfm-clipboard-icon'));
         });
     });
 }
diff --git a/src/scss/_code.scss b/src/scss/_code.scss
@@ -2,22 +2,35 @@
     &-clipboard {
         position: relative;
 
-        &:hover &-button {
-            display: block;
+        &-button {
+            &:hover, &:focus {
+                opacity: 1;
+            }
         }
 
         & > pre {
             border-radius: 10px;
             overflow: hidden;
         }
-    }
 
-    &-clipboard-button {
-        display: none;
-        position: absolute;
-        cursor: pointer;
-        top: 16px;
-        right: 16px;
-        z-index: 1;
+        &-button {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            z-index: 1;
+            opacity: 0;
+
+            //reset default button style
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0;
+            font: inherit;
+            cursor: pointer;
+        }
+
+        &-icon {
+            pointer-events: none;
+        }
     }
 }
diff --git a/src/transform/plugins/code.ts b/src/transform/plugins/code.ts
@@ -6,39 +6,41 @@ import {generateID} from './utils';
 const wrapInClipboard = (element: string | undefined, id: number) => {
     return `
     <div class="yfm-clipboard">
-    ${element}
-    <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-button" data-animation="${id}">
-        <path
-            fill="currentColor"
-            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-        />
-        <path
-            stroke="currentColor"
-            fill="transparent"
-            stroke-width="1.5"
-            d="M9.5 13l3 3l5 -5"
-            visibility="hidden"
-        >
-            <animate
-                id="visibileAnimation-${id}"
-                attributeName="visibility"
-                from="hidden"
-                to="visible"
-                dur="0.2s"
-                fill="freeze"
-                begin=""
-            />
-            <animate
-                id="hideAnimation-${id}"
-                attributeName="visibility"
-                from="visible"
-                to="hidden"
-                dur="1s"
-                begin="visibileAnimation-${id}.end+1"
-                fill="freeze"
-            />
-        </path>
-    </svg>
+        ${element}
+        <button class="yfm-clipboard-button">
+            <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-icon" data-animation="${id}">
+                <path
+                    fill="currentColor"
+                    d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                />
+                <path
+                    stroke="currentColor"
+                    fill="transparent"
+                    stroke-width="1.5"
+                    d="M9.5 13l3 3l5 -5"
+                    visibility="hidden"
+                >
+                    <animate
+                        id="visibileAnimation-${id}"
+                        attributeName="visibility"
+                        from="hidden"
+                        to="visible"
+                        dur="0.2s"
+                        fill="freeze"
+                        begin=""
+                    />
+                    <animate
+                        id="hideAnimation-${id}"
+                        attributeName="visibility"
+                        from="visible"
+                        to="hidden"
+                        dur="1s"
+                        begin="visibileAnimation-${id}.end+1"
+                        fill="freeze"
+                    />
+                </path>
+            </svg>
+        </button>
     </div>
 `;
 };