Rich Text Editor (WIP) x4

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -17,6 +17,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
 
   static propTypes = {
     value: PropTypes.string,
+    valueMarkdown: PropTypes.string,
     suggestions: ImmutablePropTypes.list,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
@@ -214,6 +215,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       onKeyUp,
       autoFocus,
       children,
+      valueMarkdown,
       className,
       id,
       maxLength,
@@ -280,6 +282,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
             placeholder={placeholder}
             autoFocus={autoFocus}
             value={value}
+            valueMarkdown={valueMarkdown}
             onChange={this.onChange}
             onKeyDown={this.onKeyDown}
             onKeyUp={onKeyUp}

app/javascript/gabsocial/components/composer.js

@@ -4,9 +4,11 @@ import {
   CompositeDecorator,
   RichUtils,
   convertToRaw,
+  convertFromRaw,
   ContentState,
 } from 'draft-js'
 import draftToMarkdown from '../features/ui/util/draft-to-markdown'
+import markdownToDraft from '../features/ui/util/markdown-to-draft'
 import { urlRegex } from '../features/ui/util/url_regex'
 import classNames from 'classnames/bind'
 import RichTextEditorBar from './rich_text_editor_bar'
@@ -81,6 +83,7 @@ export default class Composer extends PureComponent {
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
     value: PropTypes.string,
+    valueMarkdown: PropTypes.string,
     onChange: PropTypes.func,
     onKeyDown: PropTypes.func,
     onKeyUp: PropTypes.func,
@@ -95,6 +98,24 @@ export default class Composer extends PureComponent {
     plainText: this.props.value,
   }
 
+  componentDidMount() {
+    if (this.props.valueMarkdown) {
+      const rawData = markdownToDraft(this.props.valueMarkdown)
+      const contentState = convertFromRaw(rawData)
+      const editorState = EditorState.createWithContent(contentState)
+      this.setState({
+        editorState,
+        plainText: this.props.value,
+      })
+    } else if (this.props.value) {
+      editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
+      this.setState({
+        editorState,
+        plainText: this.props.value,
+      })
+    }
+  }
+
   componentDidUpdate() {
     if (this.state.plainText !== this.props.value) {
       let editorState