convert raw editor to Slate

src/components/ControlPanel/ControlPane.css

@@ -8,8 +8,8 @@
 
   & input,
   & textarea,
-  & select {
+  & select,
-    font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  & div[contenteditable=true] {
     display: block;
     width: 100%;
     padding: 12px;
@@ -28,6 +28,12 @@
       border-color: var(--primaryColor);
     }
   }
+
+  & input,
+  & textarea,
+  & select {
+    font-family: var(--fontFamilyMono);
+  }
 }
 
 .label {

src/components/UI/theme.css

@@ -1,4 +1,6 @@
 :root {
+  --fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --fontFamilyMono: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --defaultColor: #333;
   --defaultColorLight: #fff;
   --backgroundColor: #fff;

src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css

@@ -12,8 +12,10 @@
   composes: editorControlBarSticky from "../VisualEditor/index.css";
 }
 
-.textarea {
+.SlateEditor {
+  position: relative;
   overflow: hidden;
-  resize: none;
+  overflow-x: auto;
   min-height: var(--richTextEditorMinHeight);
+  font-family: var(--fontFamilyMono);
 }

src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
+import { Editor as SlateEditor, Plain as SlatePlain } from 'slate';
 import { markdownToHtml, htmlToMarkdown } from '../../unified';
 import Toolbar from '../Toolbar/Toolbar';
 import { Sticky } from '../../../../UI/Sticky/Sticky';
@@ -8,15 +8,20 @@ import styles from './index.css';
 export default class RawEditor extends React.Component {
   constructor(props) {
     super(props);
+    const value = htmlToMarkdown(this.props.value);
     this.state = {
-      value: htmlToMarkdown(this.props.value) || '',
+      editorState: SlatePlain.deserialize(value || ''),
     };
   }
 
-  handleChange = (e) => {
+  handleChange = editorState => {
-    const html = markdownToHtml(e.target.value);
+    this.setState({ editorState });
+  }
+
+  handleDocumentChange = (doc, editorState) => {
+    const value = SlatePlain.serialize(editorState);
+    const html = markdownToHtml(value);
     this.props.onChange(html);
-    this.setState({ value: e.target.value });
   };
 
   handleToggleMode = () => {
@@ -33,10 +38,11 @@ export default class RawEditor extends React.Component {
         >
           <Toolbar onToggleMode={this.handleToggleMode} disabled rawMode />
         </Sticky>
-        <TextareaAutosize
+        <SlateEditor
-          className={styles.textarea}
+          className={styles.SlateEditor}
-          value={this.state.value}
+          state={this.state.editorState}
           onChange={this.handleChange}
+          onDocumentChange={this.handleDocumentChange}
         />
       </div>
     );

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css

@@ -70,13 +70,10 @@
 
 .slateEditor {
   position: relative;
-  background-color: var(--controlBGColor);
-  padding: 12px;
   overflow: hidden;
-  border-radius: var(--borderRadius);
   overflow-x: auto;
-  border: var(--textFieldBorder);
   min-height: var(--richTextEditorMinHeight);
+  font-family: var(--fontFamily);
 
   & ul,
   & ol {

src/index.css

@@ -13,7 +13,7 @@ html {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: var(--fontFamily);
   height: 100%;
   background-color: #fff;
   color: #7c8382;
@@ -22,7 +22,7 @@ body {
 
 h1, h2, h3, h4, h5, h6, p {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: var(--fontFamily);
 }
 
 h1 {