Add copy button for code snippet

src/web/app/src/components/Posts/CopyButton.tsx

@@ -0,0 +1,81 @@
+import { useState, CSSProperties, MouseEvent } from 'react';
+import { createStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import { Transition } from 'react-transition-group';
+import clsx from 'clsx';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    copyButton: {
+      position: 'absolute',
+      right: 0,
+      padding: '1rem',
+      marginRight: '1.5rem',
+      transitionDuration: '0.2s',
+      transitionTimingFunction: 'ease',
+      cursor: 'pointer',
+      animation: 'fade-in-out 200ms both',
+    },
+    icon: {
+      fontSize: '2rem',
+    },
+    copyBadge: {
+      position: 'absolute',
+      top: '50%',
+      right: 0,
+      transitionProperty: 'transform, opacity',
+      transitionDuration: '0.2s',
+      transitionTimingFunction: 'ease',
+      borderRadius: '5px',
+      padding: '3px',
+    },
+  })
+);
+
+type CopyButtonProps = {
+  onClick: (e: MouseEvent) => void;
+};
+
+const transition: { [state: string]: CSSProperties } = {
+  entered: { transform: 'translate(-70%, -50%)', opacity: 1 },
+  entering: { transform: 'translate(0, -50%)', opacity: 0 },
+  exited: { transform: `translate(0, -50%)`, opacity: 0 },
+  exiting: { transform: `translate(0, -50%)`, opacity: 0 },
+};
+
+const CopyButton = ({ onClick }: CopyButtonProps) => {
+  const [copied, setCopied] = useState(false);
+  const classes = useStyles();
+
+  const handleClick = (e: MouseEvent) => {
+    onClick(e);
+
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2500);
+  };
+  return (
+    <Button
+      aria-label="copy"
+      onClick={handleClick}
+      className={clsx('copyCodeBtn', classes.copyButton)}
+      color="inherit"
+      size="small"
+    >
+      <FileCopyIcon className={classes.icon} />
+      <Transition in={copied} timeout={300} unmountOnExit>
+        {(state) => (
+          <Paper elevation={5} style={{ ...transition[state] }} className={classes.copyBadge}>
+            Copied ✓
+          </Paper>
+        )}
+      </Transition>
+    </Button>
+  );
+};
+
+export default CopyButton;

src/web/app/src/components/Posts/Post.tsx

@@ -220,6 +220,9 @@ const useStyles = makeStyles((theme: Theme) =>
       '& a:visited': {
         color: theme.palette.action.selected,
       },
+      '& pre': {
+        position: 'relative',
+      },
       '& pre code': {
         backgroundColor: theme.palette.background.default,
       },
@@ -323,7 +326,7 @@ const zoomInImage = (img: HTMLImageElement) => {
   document.body.appendChild(zoomedImgContainer);
 };
 
-function handleZoom(e: MouseEvent) {
+function handleClick(e: MouseEvent) {
   // zoom out of all the currently zoomed images, if zoomed out, don't do anything.
   if (zoomOutAllImages()) return;
 
@@ -365,9 +368,9 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
 
   // Listen for click events
   useEffect(() => {
-    window.document.addEventListener('click', handleZoom);
+    window.document.addEventListener('click', handleClick);
     return () => {
-      window.document.removeEventListener('click', handleZoom);
+      window.document.removeEventListener('click', handleClick);
     };
   }, []);
 

src/web/app/src/components/Posts/Timeline.tsx

@@ -1,9 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, MouseEvent } from 'react';
+import { render } from 'react-dom';
 import { Container, createStyles } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import PostComponent from './Post';
 import { Post } from '../../interfaces';
 import LoadAutoScroll from './LoadAutoScroll';
+import CopyButton from './CopyButton';
 
 type Props = {
   pages: Post[][] | undefined;
@@ -37,6 +39,47 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
+function copyCode(codeSnippet: string) {
+  if (navigator) {
+    navigator.clipboard.writeText(codeSnippet);
+  }
+}
+
+function isCodeBlock(elem: Element) {
+  return elem.tagName === 'CODE' && elem.parentElement?.tagName === 'PRE';
+}
+
+function removeButton(parent: HTMLElement) {
+  parent.querySelectorAll('.copyCodeBtn').forEach((button) => button.remove());
+}
+function createCopyButton(parent: HTMLElement, onClick: (e: MouseEvent) => void) {
+  render(<CopyButton onClick={onClick} />, parent);
+}
+
+function handleMouseMove(e: MouseEvent) {
+  // if mouse hovers <code></code>, we call createCopyButton(e)
+  if (e.target instanceof HTMLElement && isCodeBlock(e.target)) {
+    e.preventDefault();
+    const snippet = e.target; // code tag
+    const parentDiv = snippet.parentElement; // pre tag
+
+    // There is no content to be copied
+    if (!parentDiv || !snippet.textContent) {
+      return;
+    }
+
+    // check if a button has already been added
+    if (parentDiv.querySelector('.copyCodeBtn')) {
+      return;
+    }
+
+    const button = document.createElement('div');
+    createCopyButton(button, () => copyCode(snippet.textContent!));
+    parentDiv.insertBefore(button, snippet);
+    parentDiv.onmouseleave = () => removeButton(parentDiv);
+  }
+}
+
 const Timeline = ({ pages, totalPosts, nextPage }: Props) => {
   const classes = useStyles();
 
@@ -81,7 +124,11 @@ const Timeline = ({ pages, totalPosts, nextPage }: Props) => {
     );
   }
 
-  return <Container className={classes.root}>{postsTimeline}</Container>;
+  return (
+    <div onMouseMove={handleMouseMove}>
+      <Container className={classes.root}>{postsTimeline}</Container>
+    </div>
+  );
 };
 
 export default Timeline;

src/web/app/src/styles/telescope-post-content.css

@@ -232,3 +232,12 @@
 .zoom-out {
   animation: scaleFadeOut 0.15s ease-in-out;
 }
+
+@keyframes fade-in-out {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}