feat(ui): make code blocks copyable

jeremyckahn · Oct 12, 2023 · eb88436 · eb88436
1 parent 5fd1598
commit eb88436
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/src/components/CopyableBlock/CopyableBlock.tsx b/src/components/CopyableBlock/CopyableBlock.tsx
@@ -1,4 +1,5 @@
 import Box, { BoxProps } from '@mui/material/Box'
+import Tooltip from '@mui/material/Tooltip'
 import Fab from '@mui/material/Fab'
 import ContentCopy from '@mui/icons-material/ContentCopy'
 import { useContext, useRef } from 'react'
@@ -31,20 +32,22 @@ export const CopyableBlock = ({ children }: CopyableBlockProps) => {
       }}
     >
       {children}
-      <Fab
-        color="default"
-        size="small"
-        onClick={handleCopyClick}
-        sx={theme => ({
-          position: 'absolute',
-          top: '1em',
-          right: '1em',
-          opacity: 0,
-          transition: theme.transitions.create(['opacity', 'transform']),
-        })}
-      >
-        <ContentCopy />
-      </Fab>
+      <Tooltip title="Copy to clipboard">
+        <Fab
+          color="default"
+          size="small"
+          onClick={handleCopyClick}
+          sx={theme => ({
+            position: 'absolute',
+            top: '1em',
+            right: '1em',
+            opacity: 0,
+            transition: theme.transitions.create(['opacity', 'transform']),
+          })}
+        >
+          <ContentCopy />
+        </Fab>
+      </Tooltip>
     </Box>
   )
 }
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
@@ -27,10 +27,12 @@ import {
   isInlineMedia,
 } from 'models/chat'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
+import { CopyableBlock } from 'components/CopyableBlock/CopyableBlock'
 
 import { SyntaxHighlighter } from '../../components/SyntaxHighlighter'
 
 import { InlineMedia } from './InlineMedia'
+
 import './Message.sass'
 
 export interface MessageProps {
@@ -65,14 +67,17 @@ const componentMap = {
   // https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
   code({ node, inline, className, children, style, ...props }: CodeProps) {
     const match = /language-(\w+)/.exec(className || '')
+
     return !inline && match ? (
-      <SyntaxHighlighter
-        children={String(children).replace(/\n$/, '')}
-        language={match[1]}
-        style={materialDark}
-        PreTag="div"
-        {...props}
-      />
+      <CopyableBlock>
+        <SyntaxHighlighter
+          children={String(children).replace(/\n$/, '')}
+          language={match[1]}
+          style={materialDark}
+          PreTag="div"
+          {...props}
+        />
+      </CopyableBlock>
     ) : (
       <code className={className} {...props}>
         {children}