implement copy url

Author: siddharthkp

packages/app/src/app/pages/common/Modals/ShareModal2/elements.js

@@ -157,8 +157,6 @@ export const Button = styled.button(
       backgroundColor: 'blues.600',
       borderColor: 'blues.500',
     },
-
-    textDecoration: 'line-through',
   })
 );
 

packages/app/src/app/pages/common/Modals/ShareModal2/index.js

@@ -1,3 +1,16 @@
+/** TODO:
+- convert to typescript
+- add default module to show
+- check what initial path does
+- visual polish
+	- overflow-x
+	- multiline
+	- style more info in brackets
+	- total height of the container is beyond preview
+- add postMessage to embed for smoother embed modal
+- include darkMode in settings
+*/
+
 import React from 'react';
 import queryString from 'query-string';
 import { ThemeProvider } from 'styled-components';
@@ -80,6 +93,7 @@ function getUrl(settings, darkMode) {
     encode: false,
     skipNull: true,
   });
+
   const url =
     `https://codesandbox.io/embed/dark-magic-variant-5pj49?` + stringified;
 
@@ -107,6 +121,18 @@ function ShareSheet() {
     setSettings({ ...settings, preset: name, ...presets[name] });
   };
 
+  /** Copy Embed code */
+  const urlContainer = React.createRef();
+  const [copied, setCopied] = React.useState(false);
+
+  const copyEmbedCode = () => {
+    const copyText = urlContainer.current;
+    copyText.select();
+    document.execCommand('copy');
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <Container>
@@ -235,11 +261,18 @@ function ShareSheet() {
               rows="5"
               readOnly
               value={getUrl(settings, darkMode)}
+              ref={urlContainer}
             />
-            <Button>Copy Embed Code</Button>
+            <Button onClick={copyEmbedCode}>
+              {copied ? 'Copied!' : 'Copy Embed Code'}
+            </Button>
             <Option multiline>
               Editor url (also works on Medium)
-              <Input code readOnly value="https://codesandbox.io/s/xoj79" />
+              <Input
+                code
+                readOnly
+                value={getUrl(settings, darkMode).replace('embed', 's')}
+              />
             </Option>
           </Section.Body>
         </Sidebar>