styles, renaming, func

client/coral-embed-stream/style/default.css

@@ -5,7 +5,6 @@
 
 * {
   font-family: inherit;
-  font-style: inherit;
 }
 
 html, body {

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

@@ -2,6 +2,12 @@
   background: #fff;
   border: solid 1px #bbb;
   min-height: 120px;
+  box-sizing: border-box;
+  outline: 0;
+  overflow-y: auto;
+  width: 100%;
+  padding: 4px;
+  font-style: unset;
 }
 
 .button {
@@ -17,6 +23,8 @@
   margin-right: 2px;
   font-size: 1em;
   width: 25px;
+  background-color: transparent;
+  outline: 0;
 }
 
 .button:hover{
@@ -33,3 +41,7 @@
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
+
+.container {
+  box-sizing: border-box;
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { init } from 'pell';
-import styles from './RTEtextArea.css';
+import styles from './Editor.css';
 import cn from 'classnames';
 
 const pluginName = 'talk-plugin-rte';
@@ -35,8 +35,18 @@ class Editor extends React.Component {
   }
 
   render() {
-    const { id, containerClass } = this.props;
-    return <div id={id} ref={this.handleRef} className={containerClass} />;
+    const { id, classNames } = this.props;
+    return (
+      <div
+        id={id}
+        ref={this.handleRef}
+        className={cn(
+          styles.container,
+          classNames.container,
+          `${pluginName}-container`
+        )}
+      />
+    );
   }
 }
 
@@ -48,6 +58,7 @@ Editor.defaultProps = {
     button: '',
     content: '',
     actionbar: '',
+    container: '',
   },
 };
 

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

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