Merge pull request #1 from omergulen/master

App :: Add copy to clipboard button on code view

src/App.js

@@ -50,6 +50,20 @@ const tabletIcon = (
   </svg>
 );
 
+const clipboardIcon = (
+  <svg
+    viewBox="0 0 25 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M19.914 1h-18v19"/>
+    <path d="M6 5v18h18V5z"/>
+  </svg>
+);
+
 const viewList = [
   {
     icon: desktopIcon,
@@ -87,6 +101,7 @@ class App extends Component {
     this.changeView = this.changeView.bind(this);
     this.toggleSidebar = this.toggleSidebar.bind(this);
     this.toggleView = this.toggleView.bind(this);
+    this.copyToClipboard = this.copyToClipboard.bind(this);
     this.markupRef = React.createRef();
     this.textareaRef = React.createRef();
   }
@@ -188,6 +203,16 @@ class App extends Component {
     this.setState({ sidebar: !this.state.sidebar });
   }
 
+  copyToClipboard() {
+    const code = this.beautifyHTML(this.state.markup);
+    var input = document.createElement('textarea');
+    input.innerHTML = code;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('copy');
+    document.body.removeChild(input);
+}
+
   render() {
     const { darkMode, theme, blockName, blockType, sidebar, view } = this.state;
     return (
@@ -198,6 +223,12 @@ class App extends Component {
         </aside>
         <div className="toolbar">
           <button className="opener" onClick={this.toggleSidebar}>TAILBLOCKS</button>
+          {this.state.codeView ? (
+            <button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
+              {clipboardIcon}
+              <span>COPY TO CLIPBOARD</span>
+            </button>) : ''
+          }
           <button className="copy-the-block" onClick={this.toggleView}>
             {!this.state.codeView ?
               <svg

src/index.css

@@ -411,9 +411,12 @@ svg { width: 100%; }
   display: none;
 }
 
+.toolbar>:nth-child(2) {
+  margin-left: auto;
+}
+
 .copy-the-block {
   border: 1px solid rgba(255, 255, 255, 0.4);
-  margin-left: auto;
   padding: 0 12px;
   border-radius: 20px;
   margin-right: 14px;
@@ -431,6 +434,10 @@ svg { width: 100%; }
   transition: .3s;
 }
 
+.copy-to-clipboard {
+  width: 200px;
+}
+
 .copy-the-block:hover {
   background-color: rgba(255, 255, 255, .12);
 }