Merge branch 'feat-003-tiptap'

Closes #3
EvitanRelta · Jun 12, 2022 · ef28c59 · ef28c59
2 parents 56008cf + ab90377
commit ef28c59
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 6 deletions.
diff --git a/src/components/Body/Body.tsx b/src/components/Body/Body.tsx
@@ -29,7 +29,9 @@ const Body = ({ showMarkdown, mdText, onTextChange, theme }: Props) => {
                 >
                     <TextEditor theme={theme} onTextChange={onTextChange} />
                 </div>
-                {showMarkdown && <MarkdownTextContainer mdText={mdText} />}
+                {showMarkdown && (
+                    <MarkdownTextContainer mdText={mdText} theme={theme} />
+                )}
             </div>
         </div>
     )

diff --git a/src/components/Body/CopyClipboardButton.js b/src/components/Body/CopyClipboardButton.js
@@ -0,0 +1,27 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { IconButton } from '@mui/material'
+
+const CopyClipboardButton = ({ onClick }) => {
+    return (
+        <div
+            style={{
+                marginTop: 6,
+                padding: 2,
+                paddingTop: 6,
+                borderRadius: 5,
+                display: 'inline',
+            }}
+        >
+            <IconButton
+                onClick={onClick}
+                color='inherit'
+                size='small'
+                sx={{ transform: 'scaleX(-1) scale(0.8)' }}
+            >
+                <ContentCopyIcon />
+            </IconButton>
+        </div>
+    )
+}
+
+export default CopyClipboardButton
diff --git a/src/components/Body/MarkdownTextContainer.tsx b/src/components/Body/MarkdownTextContainer.tsx
@@ -1,20 +1,70 @@
+import Button from '@mui/material/Button'
+import { useState } from 'react'
+import CopyClipboardButton from './CopyClipboardButton'
+
 type Props = {
     mdText: string
+    theme: 'light' | 'dark'
 }
 
-const MarkdownTextContainer = ({ mdText }: Props) => {
+const MarkdownTextContainer = ({ mdText, theme }: Props) => {
+    const [isHovering, setIsHovering] = useState(false)
+
+    const [showCopiedPopup, setShowCopiedPopup] = useState(false)
+
+    const onCopy = () => {
+        navigator.clipboard.writeText(mdText)
+        popUpCopied()
+    }
+
+    const popUpCopied = () => {
+        setShowCopiedPopup(true)
+        setTimeout(() => setShowCopiedPopup(false), 1000)
+    }
+
+    const copyButtonColor = theme === 'dark' ? '#2a2a2a' : '#F5F5F5'
+
     return (
-        <pre
+        <div
             style={{
-                border: '1px solid #d0cccc',
                 width: '50%',
+                border: '1px solid #d0cccc',
                 padding: '20px',
+                paddingTop: 15,
+                paddingRight: 8,
                 margin: '10px',
                 overflowX: 'auto',
             }}
+            onMouseLeave={() => setIsHovering(false)}
+            onMouseEnter={() => setIsHovering(true)}
         >
-            {mdText}
-        </pre>
+            {isHovering && (
+                <div
+                    style={{
+                        margin: 0,
+                        right: 20,
+                        top: 120,
+                        position: 'absolute',
+                        backgroundColor: copyButtonColor,
+                        borderRadius: 7,
+                        paddingBottom: 1,
+                    }}
+                >
+                    {showCopiedPopup ? (
+                        <Button
+                            sx={{
+                                display: 'inline',
+                            }}
+                        >
+                            Copied
+                        </Button>
+                    ) : (
+                        <CopyClipboardButton onClick={onCopy} />
+                    )}
+                </div>
+            )}
+            <pre style={{ marginTop: 15, display: 'inline' }}>{mdText}</pre>
+        </div>
     )
 }