Adds a Clipboard Button component (#1743)

The inline button component to copy the publish url was lacking an indication
that the text was copied. Additionally, the current setup was using a copy
method that can have an issue in some browsers. This commit switches to use of the
clipboard npm repo, moves code into a component, and adds an indication that
the text was copied.

RELEASE-NOTES.txt

@@ -9,6 +9,8 @@
 ### Fixes
 - Makes settings scrollable on shorter smaller view ports [#1767](https://github.com/Automattic/simplenote-electron/pull/1767)
 
+- Added indication that publish url has been copied [#1743](https://github.com/Automattic/simplenote-electron/pull/1743)
+
 ### Other Changes
 
 - Updated dependencies [#1759](https://github.com/Automattic/simplenote-electron/pull/1759)
@@ -17,7 +19,7 @@
 
 ### Enhancements
 
- - Added matching tags to the notes list on search [#1648](https://github.com/Automattic/simplenote-electron/pull/1648)
+- Added matching tags to the notes list on search [#1648](https://github.com/Automattic/simplenote-electron/pull/1648)
 
 ### Fixes
 

lib/components/clipboard-button/index.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import ReactDom from 'react-dom';
+import Clipboard from 'clipboard';
+
+function ClipboardButton({ text }) {
+  const buttonRef = useRef();
+  const textCallback = useRef();
+  const successCallback = useRef();
+
+  const onCopy = () => {
+    setCopied(true);
+  };
+
+  const [isCopied, setCopied] = useState(false);
+
+  // toggle the `isCopied` flag back to `false` after 4 seconds
+  useEffect(() => {
+    if (isCopied) {
+      const confirmationTimeout = setTimeout(() => setCopied(false), 4000);
+      return () => clearTimeout(confirmationTimeout);
+    }
+  }, [isCopied]);
+
+  // update the callbacks on rerenders that change `text` or `onCopy`
+  useEffect(() => {
+    textCallback.current = () => text;
+    successCallback.current = onCopy;
+  }, [text, onCopy]);
+
+  // create the `Clipboard` object on mount and destroy on unmount
+  useEffect(() => {
+    const clipboard = new Clipboard(buttonRef.current, {
+      text: () => textCallback.current(),
+    });
+    clipboard.on('success', () => successCallback.current());
+
+    return () => clipboard.destroy();
+  }, []);
+
+  return (
+    <button ref={buttonRef} type="button" className="button button-borderless">
+      {isCopied ? 'Copied!' : 'Copy'}
+    </button>
+  );
+}
+
+ClipboardButton.propTypes = {
+  disbaled: PropTypes.bool,
+  text: PropTypes.string,
+};
+
+export default ClipboardButton;

lib/dialogs/settings/style.scss

@@ -45,10 +45,6 @@
     border-bottom: none;
   }
 
-  .button-borderless {
-    padding-right: 0;
-  }
-
   .settings-item-label {
     flex: 1 1 auto;
     align-items: center;

lib/dialogs/share/index.jsx

@@ -5,6 +5,7 @@ import { includes, isEmpty } from 'lodash';
 import MD5 from 'md5.js';
 
 import analytics from '../../analytics';
+import ClipboardButton from '../../components/clipboard-button';
 import isEmailTag from '../../utils/is-email-tag';
 import { updateNoteTags } from '../../state/domain/notes';
 import Dialog from '../../dialog';
@@ -33,18 +34,6 @@ export class ShareDialog extends Component {
     });
   };
 
-  copyPublishURL = () => {
-    this.publishUrlElement.select();
-
-    try {
-      document.execCommand('copy');
-    } catch (err) {
-      return;
-    }
-
-    this.copyUrlElement.focus();
-  };
-
   getPublishURL = url => (isEmpty(url) ? undefined : `http://simp.ly/p/${url}`);
 
   onAddCollaborator = event => {
@@ -200,15 +189,7 @@ export class ShareDialog extends Component {
                       spellCheck={false}
                     />
                     <div className="settings-item-control">
-                      <button
-                        ref={e => (this.copyUrlElement = e)}
-                        disabled={!publishURL}
-                        type="button"
-                        className="button button-borderless"
-                        onClick={this.copyPublishURL}
-                      >
-                        Copy
-                      </button>
+                      {publishURL && <ClipboardButton text={publishURL} />}
                     </div>
                   </div>
                 </div>
@@ -222,7 +203,4 @@ export class ShareDialog extends Component {
   }
 }
 
-export default connect(
-  null,
-  { updateNoteTags }
-)(ShareDialog);
+export default connect(null, { updateNoteTags })(ShareDialog);

package.json

@@ -87,6 +87,7 @@
     "@automattic/color-studio": "2.2.0",
     "@material-ui/core": "4.7.1",
     "bottleneck": "2.19.5",
+    "clipboard": "2.0.4",
     "cookie": "0.4.0",
     "core-js": "3.4.7",
     "date-fns": "2.8.1",