Added button to copy current path to clipboard (#607)

Co-authored-by: Axel Bocciarelli <[email protected]>

src/h5web/breadcrumbs/Breadcrumbs.tsx

@@ -3,6 +3,7 @@ import styles from './BreadcrumbsBar.module.css';
 import { assertAbsolutePath } from '../guards';
 import { ProviderContext } from '../providers/context';
 import Crumb from './Crumb';
+import CopyableCrumb from './CopyableCrumb';
 
 interface Props {
   path: string;
@@ -42,9 +43,7 @@ function Breadcrumbs(props: Props) {
           />
         );
       })}
-      <span className={styles.crumb} data-current>
-        {crumbs[crumbs.length - 1]}
-      </span>
+      <CopyableCrumb name={crumbs[crumbs.length - 1]} path={path} />
     </h1>
   );
 }

src/h5web/breadcrumbs/BreadcrumbsBar.module.css

@@ -14,7 +14,7 @@
   overflow: hidden;
   min-width: 0;
   margin-bottom: 0;
-  padding: 0 0.25rem;
+  padding: 0 1rem;
   font-size: inherit;
   font-weight: inherit;
   line-height: 1.3; /* fix cropping of glyphs */
@@ -23,7 +23,16 @@
 
 .crumbButton {
   composes: btn-clean from global;
+  position: relative;
   display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.crumbButton[data-current] {
+  flex: none; /* never shrink current breadcrumb */
+  font-weight: 600;
 }
 
 .crumbButton:hover {
@@ -36,47 +45,21 @@
   text-overflow: ellipsis;
 }
 
-.crumb[data-current] {
-  flex: none; /* never shrink current breadcrumb */
-  font-weight: 600;
-}
-
 .separator {
+  flex: none;
   min-width: 0.75rem;
 }
 
-.modeToggler {
-  display: flex;
-  border-radius: 0.5rem;
-  overflow: hidden;
+.copyIcon {
+  position: absolute;
+  display: none;
+  font-size: 0.9rem;
+  top: 50%;
+  right: -0.125rem;
+  margin: 1px 0;
+  transform: translate(100%, -50%);
 }
 
-.btn {
-  composes: btn-clean from global;
+.crumbButton:hover > .copyIcon {
   display: flex;
-  align-items: center;
-  padding: 0.25rem 0.75rem 0.375rem;
-  background-color: var(--secondary-light-bg);
-  transition: background-color 0s ease-out;
-}
-
-.btn:hover,
-.btn[aria-selected='true'] {
-  transition-duration: 0.2s, 0.2s;
-}
-
-.btn:hover {
-  background-color: var(--secondary-light);
-}
-
-.btn[aria-selected='true'],
-.btn[aria-pressed='true'] {
-  background-color: var(--secondary);
-  font-weight: bold;
-}
-
-.sidebarBtn {
-  composes: btn;
-  margin-right: 1rem;
-  border-radius: 0.5rem;
 }

src/h5web/breadcrumbs/CopyableCrumb.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { FiCheck, FiClipboard } from 'react-icons/fi';
+import styles from './BreadcrumbsBar.module.css';
+
+interface Props {
+  name: string;
+  path: string;
+}
+
+function CopyableCrumb(props: Props) {
+  const { name, path } = props;
+
+  const [isPathCopied, setPathCopied] = useState(false);
+  const CopyIcon = isPathCopied ? FiCheck : FiClipboard;
+
+  return (
+    <button
+      className={styles.crumbButton}
+      type="button"
+      title="Copy path to clipboard"
+      onClick={() => {
+        navigator.clipboard.writeText(path);
+        setPathCopied(true);
+      }}
+      onPointerOut={() => setPathCopied(false)}
+      data-current
+    >
+      <span className={styles.crumb}>{name}</span>
+      <CopyIcon className={styles.copyIcon} />
+    </button>
+  );
+}
+
+export default CopyableCrumb;