Adding plugin

plugins/coral-plugin-permalink/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/coral-plugin-permalink/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/coral-plugin-permalink/client/components/PermalinkButton.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import styles from './styles.css';
+import t from 'coral-framework/services/i18n';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import cn from 'classnames';
+
+const name = 'coral-plugin-permalinks';
+
+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
+      });
+    }
+
+    setTimeout(() => {
+      this.setState({
+        copyFailure: null,
+        copySuccessful: null
+      });
+    }, 3000);
+  }
+
+  render () {
+    const {copySuccessful, copyFailure, popoverOpen} = this.state;
+    const {asset} = this.props;
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={`${name}-container`}>
+          <button
+            ref={(ref) => this.linkButton = ref}
+            onClick={this.toggle}
+            className={`${name}-button`}>
+            {t('permalink')}
+            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+          </button>
+          <div
+            ref={(ref) => this.popover = ref}
+            className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}>
+            <input
+              className={`${name}-copy-field`}
+              type='text'
+              ref={(input) => this.permalinkInput = input}
+              value={`${asset.url}#${this.props.commentId}`}
+            />
+
+            <Button
+              onClick={this.copyPermalink}
+              className={cn([`${name}-copy-button`, {[style.success]:copySuccessful, [styles.failure]: copyFailure}])}
+            >
+              {!copyFailure && !copySuccessful && 'Copy'}
+              {copySuccessful && 'Copied'}
+              {copyFailure && 'Not supported'}
+            </Button>
+          </div>
+        </div>
+      </ClickOutside>
+    );
+  }
+}

plugins/coral-plugin-permalink/client/components/styles.css

@@ -0,0 +1,67 @@
+.container {
+  border-radius: 3px;
+  padding: 15px 10px;
+  box-sizing: border-box;
+  border: solid 1px rgba(153, 153, 153, 0.33);
+  left: 0;
+  width: 100%;
+  z-index: 10;
+
+  &::before {
+    content: '';
+    border: 10px solid transparent;
+    border-top-color: white;
+    position: absolute;
+    right: 7em;
+    bottom: -20px;
+    z-index: 2;
+  }
+
+  &::after{
+    content: '';
+    border: 10px solid transparent;
+    border-top-color: rgba(153, 153, 153, 0.33);
+    position: absolute;
+    right: 7em;
+    bottom: -21px;
+    z-index: 1;
+  }
+
+  input {
+    display: inline-block;
+    width: calc(100% - 78px);
+    padding: 8px;
+    border-radius: 3px;
+    border: solid 1px #e0e0e0;
+    height: 32px;
+    box-sizing: border-box;
+    font-size: 1em;
+  }
+
+  button {
+    display: inline-block;
+    float: right;
+    box-sizing: border-box;
+    margin: 0;
+    background-color: #e0e0e0;
+    font-size: 1em;
+    width: auto;
+    height: auto;
+    padding: 2px;
+    transition: background-color 0.4s ease;
+
+    &:hover{
+      color: black;
+    }
+
+    &.success {
+      background-color: #00897B;
+      color: white;
+    }
+
+    &.failure {
+      background-color: #FF5252;
+      color: white;
+    }
+  }
+}

plugins/coral-plugin-permalink/client/index.js

@@ -0,0 +1,7 @@
+import PermalinkButton from './components/PermalinkButton';
+
+export default {
+  slots: {
+    commentActions: [PermalinkButton]
+  }
+};

plugins/coral-plugin-permalink/index.js

@@ -0,0 +1 @@
+module.exports = {};

plugins/coral-plugin-permalink/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "coral-plugin-permalink",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}