From e87a3b4981293a4488524eaa7d81cbd3bbb68bff Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camscode.com>
Date: Thu, 23 Dec 2021 16:35:56 -0500
Subject: [PATCH] Added copy to clipboard tool

---
 src/components/ArticleEditor.js      | 11 +++++++++++
 src/components/css/ArticleEditor.css | 20 ++++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/components/ArticleEditor.js b/src/components/ArticleEditor.js
index b855669..4f9b8d8 100644
--- a/src/components/ArticleEditor.js
+++ b/src/components/ArticleEditor.js
@@ -12,8 +12,19 @@ const ArticleEditor = (props) => {
         "contents": content
     };
 
+    let copyToClipboard = () => {
+        navigator.clipboard.writeText(content).then(function() {
+        console.log('Async: Copying to clipboard was successful!');
+        }, function(err) {
+            console.error('Async: Could not copy text: ', err);
+        });
+    };
+
     return (
     <div className="ArticleEditor">
+        <div id="toolbar" className="toolbar">
+            <div className="btn" onClick={copyToClipboard()}>Copy to Clipboard</div>
+        </div>
         <Article article={article}/>
         <textarea onInput={e=>{setContent(e.target.value)}}></textarea>
     </div>
diff --git a/src/components/css/ArticleEditor.css b/src/components/css/ArticleEditor.css
index 29c5e15..44c05ec 100644
--- a/src/components/css/ArticleEditor.css
+++ b/src/components/css/ArticleEditor.css
@@ -9,6 +9,26 @@
     text-align: left;
 }
 
+.ArticleEditor .toolbar {
+    width: 100%;
+    height: 56px;
+    display: flex;
+}
+
+.ArticleEditor .toolbar .btn {
+    color: white;
+    background-color: darkgreen;
+    text-align: center;
+    align-items:center;
+    justify-content: center;
+    display: flex;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+.ArticleEditor .toolbar .btn:hover{
+    background-color: #005400
+}
+
 .article .open {
     max-height:100vh;
 }