Adds a Clipboard Button component

RELEASE-NOTES.txt

@@ -7,6 +7,8 @@
 
 ### Fixes
 
+- 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)
@@ -15,7 +17,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,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDom from 'react-dom';
+import Clipboard from 'clipboard';
+
+function ClipboardButton({ text, disabled }) {
+  const buttonRef = React.useRef();
+
+  const textCallback = React.useRef();
+  const successCallback = React.useRef();
+
+  const onCopy = () => {
+    setCopied(true);
+  };
+
+  const [isCopied, setCopied] = React.useState(false);
+
+  // toggle the `isCopied` flag back to `false` after 4 seconds
+  React.useEffect(() => {
+    if (isCopied) {
+      const confirmationTimeout = setTimeout(() => setCopied(false), 4000);
+      return () => clearTimeout(confirmationTimeout);
+    }
+  }, [isCopied]);
+
+  // update the callbacks on rerenders that change `text` or `onCopy`
+  React.useEffect(() => {
+    textCallback.current = () => text;
+    successCallback.current = onCopy;
+  }, [text, onCopy]);
+
+  // create the `Clipboard` object on mount and destroy on unmount
+  React.useEffect(() => {
+    const buttonEl = ReactDom.findDOMNode(buttonRef.current);
+    const clipboard = new Clipboard(buttonEl, {
+      text: () => textCallback.current(),
+    });
+    clipboard.on('success', () => successCallback.current());
+
+    return () => clipboard.destroy();
+  }, []);
+
+  return (
+    <button
+      ref={buttonRef}
+      disabled={disabled}
+      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",