Merge pull request #1553 from aviraldg/feature-rte

Rich Text Editor

package.json

@@ -35,6 +35,7 @@
     "babel-polyfill": "^6.5.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
+    "draft-js": "^0.7.0",
     "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",

src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css

@@ -0,0 +1,22 @@
+.mx_UserPill {
+    color: white;
+    background-color: #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_RoomPill {
+    background-color: white;
+    color: #76cfa6;
+    border: 1px solid #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_Markdown_BOLD {
+    font-weight: bold;
+}
+
+.mx_Markdown_ITALIC {
+    font-style: italic;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -22,15 +22,15 @@ limitations under the License.
 }
 
 .mx_MessageComposer_row {
-    display: table-row;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     width: 100%;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
-    display: table-cell;
     padding-left: 10px;
     padding-right: 28px;
-    vertical-align: middle;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@@ -42,9 +42,7 @@ limitations under the License.
 }
 
 .mx_MessageComposer_noperm_error {
-    display: table-cell;
     width: 100%;
-    vertical-align: middle;
     height: 60px;
     text-align: center;
     font-style: italic;
@@ -52,10 +50,22 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input {
-    display: table-cell;
+    flex: 1;
-    width: 100%;
     vertical-align: middle;
-    height: 60px;
+    min-height: 60px;
+    max-height: 120px;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    transition: 0.6s border-top ease;
+    border-top: 2px solid rgba(255, 255, 255, 0);
+}
+.mx_MessageComposer_input_rte {
+    border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    flex: 1;
 }
 
 .mx_MessageComposer_input textarea {
@@ -92,8 +102,8 @@ limitations under the License.
 .mx_MessageComposer_hangup,
 .mx_MessageComposer_voicecall,
 .mx_MessageComposer_videocall {
-    display: table-cell;
+    /*display: table-cell;*/
-    vertical-align: middle;
+    /*vertical-align: middle;*/
     padding-left: 10px;
     padding-right: 10px;
     cursor: pointer;

src/vector/index.js

@@ -26,6 +26,7 @@ require('../../vector/components.css');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
+require('draft-js/dist/Draft.css');
 
 
  // add React and ReactPerf to the global namespace, to make them easier to