add copy to clipboard

Author: rishavanand

package-lock.json

@@ -28,6 +28,7 @@
     "marked": "^2.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-scroll": "^1.8.0",

package.json

@@ -1,9 +1,10 @@
-import { FireOutlined } from '@ant-design/icons';
+import { CopyOutlined, FireOutlined } from '@ant-design/icons';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Col, Divider, Grid, Input, Modal, Row, Tooltip, Typography } from 'antd';
+import { Button, Col, Divider, Grid, Input, message, Modal, Row, Tooltip, Typography } from 'antd';
 import marked from 'marked';
 import React, { MutableRefObject, useContext, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { generateSectionTitleMarkdown } from '../components/Section';
 import { FIELD_TYPES } from '../config/global';
 import { globalContext } from '../context/GlobalContextProvider';
@@ -120,6 +121,10 @@ export const Preview = ({ scrollRef }: { scrollRef: MutableRefObject<any> }) =>
         );
     };
 
+    const showCopiedSuccessfullyMessage = () => {
+        message.success('Markdown has been copied to your clipboard.');
+    };
+
     return (
         <div ref={scrollRef}>
             <Row justify="space-between">
@@ -141,10 +146,21 @@ export const Preview = ({ scrollRef }: { scrollRef: MutableRefObject<any> }) =>
                 dangerouslySetInnerHTML={{ __html: generateMarkdown().html }}
             />
             <Modal
-                title="Generated Markdown"
+                title={
+                    <>
+                        Generated Markdowns{' '}
+                        <CopyToClipboard
+                            text={generateAdvertisedMarkdown(generateMarkdown().markdown)}
+                            onCopy={showCopiedSuccessfullyMessage}
+                        >
+                            <Button type="primary" ghost>
+                                <CopyOutlined /> Copy
+                            </Button>
+                        </CopyToClipboard>
+                    </>
+                }
                 width="70vw"
                 visible={showMarkdown}
-                onCancel={toggleShowMarkdown}
                 onOk={toggleShowMarkdown}
             >
                 <h3