Now the smooth flag works

client/coral-admin/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
+import smoothscroll from 'smoothscroll-polyfill';
 
 import {getClient} from './services/client';
 import store from './services/store';
@@ -13,6 +14,7 @@ import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/he
 
 loadPluginsTranslations();
 injectPluginsReducers();
+smoothscroll.polyfill();
 
 render(
   <ApolloProvider client={getClient()} store={store}>

package.json

@@ -118,6 +118,7 @@
     "resolve": "^1.3.2",
     "semver": "^5.3.0",
     "simplemde": "^1.11.2",
+    "smoothscroll-polyfill": "^0.3.5",
     "snake-case": "^2.1.0",
     "subscriptions-transport-ws": "^0.7.2",
     "timekeeper": "^1.0.0",

plugins/talk-plugin-permalink/client/components/CopyButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {t} from 'plugin-api/beta/client/services';
+import {withCopyToClipboard} from 'plugin-api/beta/client/hocs';
+import {Button} from 'plugin-api/beta/client/components/ui';
+
+class ButtonCopyToClipboard extends React.Component {
+  render () {
+    return (
+      <Button {...this.props} >
+        {t('common.copy')}
+      </Button>
+    );
+  }
+}
+
+export default withCopyToClipboard(ButtonCopyToClipboard);

plugins/talk-plugin-permalink/client/components/Permalink.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './styles.css';
+import {t} from 'plugin-api/beta/client/services';
+import {ClickOutside} from 'plugin-api/beta/client/components';
+import {Icon, Button} from 'plugin-api/beta/client/components/ui';
+
+const name = 'talk-plugin-permalink';
+
+export default class PermalinkButton extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      popoverOpen: false,
+      copySuccessful: null,
+      copyFailure: null
+    };
+
+  }
+
+  toggle = () => {
+    this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
+
+    this.setState({
+      popoverOpen: !this.state.popoverOpen
+    });
+  }
+
+  handleClickOutside = () => {
+    this.setState({
+      popoverOpen: false
+    });
+  }
+
+  copyPermalink = () => {
+    this.permalinkInput.select();
+    try {
+      document.execCommand('copy');
+      this.setState({
+        copySuccessful: true,
+        copyFailure: null
+      });
+    } catch (err) {
+      this.setState({
+        copyFailure: true,
+        copySuccessful: null
+      });
+    }
+
+    this.timeout = window.setTimeout(() => {
+      this.setState({
+        copyFailure: null,
+        copySuccessful: null
+      });
+    }, 3000);
+  }
+
+  componentWillUnmount() {
+    window.clearTimeout(this.timeout);
+  }
+
+  render () {
+    const {copySuccessful, copyFailure, popoverOpen} = this.state;
+    const {asset} = this.props;
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={cn(`${name}-container`, styles.container)}>
+          
+          <button
+            ref={(ref) => this.linkButton = ref}
+            onClick={this.toggle}
+            className={`${name}-button`}>
+              {t('permalink')}
+            <Icon name="link" />
+          </button>
+
+          <div
+            ref={(ref) => this.popover = ref}
+            className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}>
+
+            <input
+              className={cn(styles.input, `${name}-copy-field`)}
+              type='text'
+              ref={(input) => this.permalinkInput = input}
+              defaultValue={`${asset.url}#${this.props.commentId}`}
+            />
+
+            <Button
+              onClick={this.copyPermalink}
+              className={cn([
+                styles.button,
+                `${name}-copy-button`, {
+                  [styles.success]:copySuccessful,
+                  [styles.failure]: copyFailure
+                }])}>
+              {!copyFailure && !copySuccessful && 'Copy'}
+              {copySuccessful && 'Copied'}
+              {copyFailure && 'Not supported'}
+            </Button>
+            
+          </div>
+        </div>
+      </ClickOutside>
+    );
+  }
+}

yarn.lock

@@ -7602,6 +7602,10 @@ smart-buffer@^1.0.4:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16"
 
+smoothscroll-polyfill@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.5.tgz#466e6039b51cb525d70e1a5077ef81e064678eae"
+
 smtp-connection@2.12.0:
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/smtp-connection/-/smtp-connection-2.12.0.tgz#d76ef9127cb23c2259edb1e8349c2e8d5e2d74c1"