From 8258ccde9b3e0f6e69cb4734a838b1221c2a9f58 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 10:13:13 -0300
Subject: [PATCH] RTE Plugin - Editor working

---
 .vscode/settings.json                         |  2 +
 .../src/tabs/stream/components/DraftArea.css  |  3 +
 .../src/tabs/stream/components/DraftArea.js   |  2 +
 .../src/tabs/stream/containers/DraftArea.js   |  4 +-
 .../client/components/RTEtextArea.css         | 48 ++++++++------
 .../client/components/RTEtextArea.js          | 66 +++++++++++++------
 6 files changed, 83 insertions(+), 42 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/DraftArea.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..7a73a41bf
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
new file mode 100644
index 000000000..04bde1d0d
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
@@ -0,0 +1,3 @@
+.textArea {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
index 7d75807ba..806592795 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/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" />
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
index b9b7fd58a..ffe481c24 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/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) {
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.css b/plugins/talk-plugin-rte/client/components/RTEtextArea.css
index 187e68750..56fe7d9ed 100644
--- a/plugins/talk-plugin-rte/client/components/RTEtextArea.css
+++ b/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;
 }
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.js b/plugins/talk-plugin-rte/client/components/RTEtextArea.js
index 5a833bcc0..b2d4bc39f 100644
--- a/plugins/talk-plugin-rte/client/components/RTEtextArea.js
+++ b/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;