Adding rte plugin 🎉

.eslintignore

@@ -32,3 +32,4 @@ public
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-rte

.gitignore

@@ -52,6 +52,7 @@ plugins/*
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-flag-details
 !plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-rte
 
 **/node_modules/*
 yarn-error.log

plugins/talk-plugin-rte/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/talk-plugin-rte/client/components/RTEtextArea.css

@@ -0,0 +1,27 @@
+.myPluginContainer {
+    padding: 10px;
+    background: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    margin: 10px 0;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.logo {
+  position: block;
+  animation: spin 2s infinite ease;
+  animation-delay: 1s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.description {
+  color: #444444;
+}

plugins/talk-plugin-rte/client/components/RTEtextArea.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import pell from 'pell';
+
+class TextArea extends React.Component {
+  componentWillMount() {}
+  render() {
+    const { value, placeholder, id, onChange, rows, disabled } = this.props;
+
+    return (
+      <textarea
+        className={'talk-plugin-commentbox-textarea'}
+        value={value}
+        placeholder={'RTE Text Area'}
+        id={id}
+        onChange={onChange}
+        rows={rows}
+        disabled={disabled}
+      />
+    );
+  }
+}
+
+TextArea.defaultProps = {
+  rows: 3,
+};
+
+TextArea.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  rows: PropTypes.number,
+};
+
+export default TextAreaComponent;

plugins/talk-plugin-rte/client/index.js

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

plugins/talk-plugin-rte/index.js

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

plugins/talk-plugin-rte/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@coralproject/talk-plugin-rte",
+  "pluginName": "talk-plugin-rte",
+  "version": "0.0.1",
+  "description": "Rich Text Editor for Talk",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "pell": "^0.7.0"
+  }
+}

plugins/talk-plugin-rte/yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+pell@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"