RTE Plugin - Editor working

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

client/coral-embed-stream/src/tabs/stream/components/DraftArea.css

@@ -0,0 +1,3 @@
+.textArea {
+  width: 100%;
+}

client/coral-embed-stream/src/tabs/stream/components/DraftArea.js

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import Slot from 'coral-framework/components/Slot';
 import TextAreaDefault from './TextAreaDefault';
+import styles from './DraftArea.css';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 
@@ -56,6 +57,7 @@ export default class DraftArea extends React.Component {
           <Slot
             fill="textArea"
             defaultComponent={TextAreaDefault}
+            className={styles.textArea}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />

client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js

@@ -24,8 +24,8 @@ export default class DraftAreaContainer extends React.Component {
     return `${STORAGE_PATH}_${this.props.id}`;
   };
 
-  onChange = e => {
-    this.props.onChange && this.props.onChange(e.target.value);
+  onChange = value => {
+    this.props.onChange && this.props.onChange(value);
   };
 
   componentWillReceiveProps(nextProps) {

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

@@ -1,27 +1,35 @@
-.myPluginContainer {
-    padding: 10px;
-    background: #f0f0f0;
-    border: 1px solid #d6d6d6;
-    margin: 10px 0;
-    text-align: center;
-    border-radius: 3px;
+.content {
+  background: #fff;
+  border: solid 1px #bbb;
+  min-height: 120px;
 }
 
-.logo {
-  position: block;
-  animation: spin 2s infinite ease;
-  animation-delay: 1s;
+.button {
+  display: inline-block;
+  text-align: center;
+  color: #2c3e50!important;
+  height: 30px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  outline: 0;
+  margin-right: 2px;
+  font-size: 1em;
+  width: 25px;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.button:hover{
+  background: #fcfcfc;
+  border-color: #95a5a6;
 }
 
-.description {
-  color: #444444;
+.actionBar {
+  user-select: none;
+  padding: 5px 10px;
+  border-top: 1px solid #bbb;
+  border-left: 1px solid #bbb;
+  border-right: 1px solid #bbb;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }

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

@@ -1,31 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import pell from 'pell';
+import { init } from 'pell';
+import styles from './RTEtextArea.css';
+import cn from 'classnames';
+
+const pluginName = 'talk-plugin-rte';
+
+class Editor extends React.Component {
+  ref = null;
+
+  handleRef = ref => (this.ref = ref);
+
+  componentDidMount() {
+    const { onChange, actions, classNames } = this.props;
+
+    init({
+      element: this.ref,
+      onChange: html => onChange(html),
+      actions,
+      classes: {
+        actionbar: cn(
+          styles.actionBar,
+          classNames.actionbar,
+          `${pluginName}-action-bar`
+        ),
+        content: cn(
+          styles.content,
+          classNames.content,
+          `${pluginName}-content`
+        ),
+        button: cn(styles.button, classNames.button, `${pluginName}-button`),
+      },
+    });
+  }
 
-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}
-      />
-    );
+    const { id, containerClass } = this.props;
+    return <div id={id} ref={this.handleRef} className={containerClass} />;
   }
 }
 
-TextArea.defaultProps = {
-  rows: 3,
+Editor.defaultProps = {
+  defaultContent: '',
+  styleWithCSS: false,
+  actions: ['bold', 'italic', 'underline'],
+  classNames: {
+    button: '',
+    content: '',
+    actionbar: '',
+  },
 };
 
-TextArea.propTypes = {
+Editor.propTypes = {
   id: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,
@@ -34,4 +60,4 @@ TextArea.propTypes = {
   rows: PropTypes.number,
 };
 
-export default TextAreaComponent;
+export default Editor;