diff --git a/Gemfile b/Gemfile
index ec339981..387d5508 100644
--- a/Gemfile
+++ b/Gemfile
@@ -94,6 +94,8 @@ gem 'json-ld', '~> 3.0'
 gem 'json-ld-preloaded', '~> 3.0'
 gem 'rdf-normalize', '~> 0.3'
 
+gem 'redcarpet', '~> 3.4'
+
 group :development, :test do
   gem 'fabrication', '~> 2.20'
   gem 'fuubar', '~> 2.3'
diff --git a/Gemfile.lock b/Gemfile.lock
index e64ff643..5d095708 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -479,6 +479,7 @@ GEM
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.3.3)
       rdf (>= 2.2, < 4.0)
+    redcarpet (3.4.0)
     redis (4.1.2)
     redis-actionpack (5.0.2)
       actionpack (>= 4.0, < 6)
@@ -740,6 +741,7 @@ DEPENDENCIES
   rails-i18n (~> 5.1)
   rails-settings-cached (~> 0.6)
   rdf-normalize (~> 0.3)
+  redcarpet (~> 3.4)
   redis (~> 4.1)
   redis-namespace (~> 1.5)
   redis-rails (~> 5.0)
diff --git a/app/controllers/api/v1/statuses_controller.rb b/app/controllers/api/v1/statuses_controller.rb
index e800bff4..cdee103e 100644
--- a/app/controllers/api/v1/statuses_controller.rb
+++ b/app/controllers/api/v1/statuses_controller.rb
@@ -52,9 +52,10 @@ class Api::V1::StatusesController < Api::BaseController
   end
 
   def create
+    markdown = status_params[:markdown] unless status_params[:markdown] === status_params[:status]
     @status = PostStatusService.new.call(current_user.account,
                                          text: status_params[:status],
-                                         markdown: status_params[:markdown],
+                                         markdown: markdown,
                                          thread: status_params[:in_reply_to_id].blank? ? nil : Status.find(status_params[:in_reply_to_id]),
                                          media_ids: status_params[:media_ids],
                                          sensitive: status_params[:sensitive],
@@ -72,9 +73,10 @@ class Api::V1::StatusesController < Api::BaseController
 
   def update
     authorize @status, :update?
-    
+    markdown = status_params[:markdown] unless status_params[:markdown] === status_params[:status]
     @status = EditStatusService.new.call(@status,
                                          text: status_params[:status],
+                                         markdown: markdown,
                                          media_ids: status_params[:media_ids],
                                          sensitive: status_params[:sensitive],
                                          spoiler_text: status_params[:spoiler_text],
diff --git a/app/javascript/gabsocial/actions/compose.js b/app/javascript/gabsocial/actions/compose.js
index f476da49..9745469f 100644
--- a/app/javascript/gabsocial/actions/compose.js
+++ b/app/javascript/gabsocial/actions/compose.js
@@ -263,12 +263,12 @@ export function submitCompose(group, replyToId = null, router, isStandalone) {
     if (!me) return;
 
     let status = getState().getIn(['compose', 'text'], '');
-    const markdown = getState().getIn(['compose', 'markdown'], '');
+    let markdown = getState().getIn(['compose', 'markdown'], '');
     const media  = getState().getIn(['compose', 'media_attachments']);
 
     // : hack :
     //Prepend http:// to urls in status that don't have protocol
-    status = status.replace(urlRegex, (match, a, b, c) =>{
+    status = `${status}`.replace(urlRegex, (match, a, b, c) =>{
       const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
       //Make sure not a remote mention like @someone@somewhere.com
       if (!hasProtocol) {
@@ -276,15 +276,20 @@ export function submitCompose(group, replyToId = null, router, isStandalone) {
       }
       return hasProtocol ? match : `http://${match}`
     })
-    // markdown = statusMarkdown.replace(urlRegex, (match) =>{
-    //   const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
-    //   return hasProtocol ? match : `http://${match}`
-    // })
+    markdown = !!markdown ? markdown.replace(urlRegex, (match) =>{
+      const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
+      if (!hasProtocol) {
+        if (status.indexOf(`@${match}`) > -1) return match
+      }
+      return hasProtocol ? match : `http://${match}`
+    }) : undefined
+    
+    if (status === markdown) {
+      markdown = undefined
+    }
 
     const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId
 
-    // console.log("markdown:", markdown)
-
     dispatch(submitComposeRequest());
     dispatch(closeModal());
 
@@ -706,9 +711,9 @@ export function changeScheduledAt(date) {
   };
 };
 
-export function changeRichTextEditorControlsVisibility(status) {
+export function changeRichTextEditorControlsVisibility(open) {
   return {
     type: COMPOSE_RICH_TEXT_EDITOR_CONTROLS_VISIBILITY,
-    status: status,
+    open,
   }
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/actions/importer/normalizer.js b/app/javascript/gabsocial/actions/importer/normalizer.js
index eaa4ca17..1de5700f 100644
--- a/app/javascript/gabsocial/actions/importer/normalizer.js
+++ b/app/javascript/gabsocial/actions/importer/normalizer.js
@@ -1,9 +1,9 @@
-import escapeTextContentForBrowser from 'escape-html';
-import emojify from '../../components/emoji/emoji';
-import { unescapeHTML } from '../../utils/html';
-import { expandSpoilers } from '../../initial_state';
+import escapeTextContentForBrowser from 'escape-html'
+import emojify from '../../components/emoji/emoji'
+import { unescapeHTML } from '../../utils/html'
+import { expandSpoilers } from '../../initial_state'
 
-const domParser = new DOMParser();
+const domParser = new DOMParser()
 
 const makeEmojiMap = record => record.emojis.reduce((obj, emoji) => {
   obj[`:${emoji.shortcode}:`] = emoji;
@@ -86,3 +86,21 @@ export function normalizePoll(poll) {
 
   return normalPoll;
 }
+
+
+// <p><h1>attention!</h1></p>
+// <p>#test @bob #nice https://bob.com http://techcrunch.com <del>strike it</del></p>
+// <p><del>https://twitter.com</del></p>
+// <p><em>@bobitalic</em></p>
+// <p><pre><code>jonincode</code></pre></p>
+
+// # attention!
+// #test @bob #nice https://bob.com http://techcrunch.com ~~strike it~~
+
+// ~~https://twitter.com~~
+
+// _@bobitalic_
+
+// ```
+// jonincode
+// ```
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox.js
index 0576c7d1..f4aff23f 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -15,6 +15,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
 
   static propTypes = {
     value: PropTypes.string,
+    valueMarkdown: PropTypes.string,
     suggestions: ImmutablePropTypes.list,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
@@ -45,11 +46,12 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     tokenStart: 0,
   }
 
-  onChange = (e, value, selectionStart, markdown) => {
+  onChange = (e, value, markdown, selectionStart) => {
     if (!isObject(e)) {
       e = {
         target: {
           value,
+          markdown,
           selectionStart,
         },
       }
@@ -65,7 +67,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       this.props.onSuggestionsClearRequested();
     }
 
-    this.props.onChange(e, markdown);
+    this.props.onChange(e);
   }
 
   onKeyDown = (e) => {
@@ -191,7 +193,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
   }
 
   setTextbox = (c) => {
-    this.textbox = c;
+    this.textbox = c
   }
 
   render() {
@@ -203,6 +205,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       placeholder,
       onKeyUp,
       children,
+      valueMarkdown,
       id,
     } = this.props
 
@@ -246,29 +249,14 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
           <label htmlFor={id} className={_s.visiblyHidden}>
             {placeholder}
           </label>
-          <Textarea
-            id={id}
-            inputRef={this.setTextbox}
-            className={textareaClasses}
-            disabled={disabled}
-            placeholder={placeholder}
-            autoFocus={false}
-            value={value}
-            onChange={this.onChange}
-            onKeyDown={this.onKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            onPaste={this.onPaste}
-            aria-autocomplete='list'
-          />
 
-          {/*<Composer
+          <Composer
             inputRef={this.setTextbox}
             disabled={disabled}
             placeholder={placeholder}
             autoFocus={autoFocus}
             value={value}
+            valueMarkdown={valueMarkdown}
             onChange={this.onChange}
             onKeyDown={this.onKeyDown}
             onKeyUp={onKeyUp}
@@ -276,7 +264,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
             onBlur={this.onBlur}
             onPaste={this.onPaste}
             small={small}
-          />*/}
+          />
 
           {children}
         </div>
diff --git a/app/javascript/gabsocial/components/composer.js b/app/javascript/gabsocial/components/composer.js
index 88e1d1d9..05d5946c 100644
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -7,8 +7,8 @@ import {
   convertFromRaw,
   ContentState,
 } from 'draft-js'
-import { draftToMarkdown } from 'markdown-draft-js'
-// import draftToMarkdown from 'draftjs-to-markdown'
+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'
@@ -30,11 +30,11 @@ function handleStrategy(contentBlock, callback, contentState) {
   findWithRegex(HANDLE_REGEX, contentBlock, callback)
 }
 
-function hashtagStrategy (contentBlock, callback, contentState) {
+function hashtagStrategy(contentBlock, callback, contentState) {
   findWithRegex(HASHTAG_REGEX, contentBlock, callback)
 }
 
-function urlStrategy (contentBlock, callback, contentState) {
+function urlStrategy(contentBlock, callback, contentState) {
   findWithRegex(urlRegex, contentBlock, callback)
 }
 
@@ -73,24 +73,17 @@ const compositeDecorator = new CompositeDecorator([
   }
 ])
 
-const HANDLE_REGEX = /\@[\w]+/g;
-const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;
+const HANDLE_REGEX = /\@[\w]+/g
+const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g
 
-
-const mapDispatchToProps = (dispatch) => ({
-
-})
-
-export default
-@connect(null, mapDispatchToProps)
-class Composer extends PureComponent {
+export default class Composer extends PureComponent {
 
   static propTypes = {
     inputRef: PropTypes.func,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
-    autoFocus: PropTypes.bool,
     value: PropTypes.string,
+    valueMarkdown: PropTypes.string,
     onChange: PropTypes.func,
     onKeyDown: PropTypes.func,
     onKeyUp: PropTypes.func,
@@ -101,59 +94,69 @@ class Composer extends PureComponent {
   }
 
   state = {
-    markdownText: '',
-    plainText: '',
     editorState: EditorState.createEmpty(compositeDecorator),
-  }
-  
-  static getDerivedStateFromProps(nextProps, prevState) {
-    // if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
-    //   return {
-    //     fetched: true
-    //   }
-    // }
-
-    return null
+    plainText: this.props.value,
   }
 
-  componentDidUpdate (prevProps) {
-    // console.log("this.props.value:", this.props.value)
-    if (prevProps.value !== this.props.value) {
-      // const editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value));
-      // this.setState({ editorState })
+  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,
+      })
     }
   }
 
-  // EditorState.createWithContent(ContentState.createFromText('Hello'))
-
-  onChange = (editorState) => {
-    this.setState({ editorState })
-    const content = this.state.editorState.getCurrentContent();
-    const text = content.getPlainText('\u0001')
-    
-    // const selectionState = editorState.getSelection()
-    // const selectionStart = selectionState.getStartOffset()
-
-    // const rawObject = convertToRaw(content);
-    // const markdownString = draftToMarkdown(rawObject);
-    // const markdownString = draftToMarkdown(rawObject, {
-    //   trigger: '#',
-    //   separator: ' ',
-    // });
-
-    // console.log("text:", text, this.props.value)
-
-    this.props.onChange(null, text, selectionStart, markdownString)
+  componentDidUpdate() {
+    if (this.state.plainText !== this.props.value) {
+      let editorState
+      if (!this.props.value) {
+        editorState = EditorState.createEmpty(compositeDecorator)
+      } else {
+        editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
+      }
+      this.setState({
+        editorState,
+        plainText: this.props.value,
+      })
+    }
   }
 
-  // **bold**
-  // *italic*
-  // __underline__
-  // ~strikethrough~
-  // # title
-  // > quote
-  // `code`
-  // ```code```
+  onChange = (editorState) => {
+    const content = editorState.getCurrentContent()
+    const plainText = content.getPlainText('\u0001')
+
+    this.setState({ editorState, plainText })
+
+    const selectionState = editorState.getSelection()
+    const selectionStart = selectionState.getStartOffset()
+
+    const rawObject = convertToRaw(content)
+    const markdownString = draftToMarkdown(rawObject, {
+      escapeMarkdownCharacters: false,
+      preserveNewlines: false,
+      remarkablePreset: 'commonmark',
+      remarkableOptions: {
+        disable: {
+          block: ['table']
+        },
+        enable: {
+          inline: ['del', 'ins'],
+        }
+      }
+    })
+
+    this.props.onChange(null, plainText, markdownString, selectionStart)
+  }
 
   focus = () => {
     this.textbox.editor.focus()
@@ -171,27 +174,24 @@ class Composer extends PureComponent {
     return false
   }
 
-  handleOnTogglePopoutEditor = () => {
-    //
-  }
-
   onTab = (e) => {
     const maxDepth = 4
     this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth))
   }
 
   setRef = (n) => {
-    this.textbox = n
+    try {
+      this.textbox = n
+      this.props.inputRef(n) 
+    } catch (error) {
+      //
+    }
   }
 
   render() {
     const {
-      inputRef,
       disabled,
       placeholder,
-      autoFocus,
-      value,
-      onChange,
       onKeyDown,
       onKeyUp,
       onFocus,
@@ -211,15 +211,13 @@ class Composer extends PureComponent {
       pt15: !small,
       px15: !small,
       px10: small,
-      pt5: small,
-      pb5: small,
       pb10: !small,
     })
 
     return (
       <div className={_s.default}>
 
-        { /** : todo : */
+        {
           !small &&
           <RichTextEditorBar
             editorState={editorState}
@@ -241,6 +239,9 @@ class Composer extends PureComponent {
             placeholder={placeholder}
             ref={this.setRef}
             readOnly={disabled}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            stripPastedStyles
           />
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
index 235545c4..a130cb05 100644
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -42,6 +42,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
           <Text>• Larger Video and Image Uploads</Text>
           <Text>• Receive the PRO Badge</Text>
           <Text>• Remove in-feed promotions</Text>
+          <Text>• Compose Rich Text posts (Bold, Italic, Underline and more)</Text>
         </div>
 
         <Button
diff --git a/app/javascript/gabsocial/components/rich_text_editor_bar.js b/app/javascript/gabsocial/components/rich_text_editor_bar.js
index f8b8d9dd..68545609 100644
--- a/app/javascript/gabsocial/components/rich_text_editor_bar.js
+++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js
@@ -1,5 +1,4 @@
 import { RichUtils } from 'draft-js'
-import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
@@ -39,41 +38,37 @@ const RTE_ITEMS = [
   //   icon: 'circle',
   // },
   {
-    label: 'H1',
+    label: 'Title',
     style: 'header-one',
     type: 'block',
     icon: 'text-size',
   },
-  {
-    label: 'Blockquote',
-    style: 'blockquote',
-    type: 'block',
-    icon: 'blockquote',
-  },
-  {
-    label: 'Code Block',
-    style: 'code-block',
-    type: 'block',
-    icon: 'code',
-  },
-  {
-    label: 'UL',
-    style: 'unordered-list-item',
-    type: 'block',
-    icon: 'ul-list',
-  },
-  {
-    label: 'OL',
-    style: 'ordered-list-item',
-    type: 'block',
-    icon: 'ol-list',
-  },
+  // {
+  //   label: 'Blockquote',
+  //   style: 'blockquote',
+  //   type: 'block',
+  //   icon: 'blockquote',
+  // },
+  // {
+  //   label: 'Code Block',
+  //   style: 'code-block',
+  //   type: 'block',
+  //   icon: 'code',
+  // },
+  // {
+  //   label: 'UL',
+  //   style: 'unordered-list-item',
+  //   type: 'block',
+  //   icon: 'ul-list',
+  // },
+  // {
+  //   label: 'OL',
+  //   style: 'ordered-list-item',
+  //   type: 'block',
+  //   icon: 'ol-list',
+  // },
 ]
 
-const messages = defineMessages({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
-})
-
 const mapStateToProps = (state) => {
   const getAccount = makeGetAccount()
   const account = getAccount(state, me)
@@ -86,13 +81,11 @@ const mapStateToProps = (state) => {
 }
 
 export default
-@injectIntl
 @connect(mapStateToProps)
 class RichTextEditorBar extends PureComponent {
 
   static propTypes = {
     editorState: PropTypes.object.isRequired,
-    intl: PropTypes.object.isRequired,
     isPro: PropTypes.bool.isRequired,
     rteControlsVisible: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
@@ -127,7 +120,7 @@ class RichTextEditorBar extends PureComponent {
             />
           ))
         }
-        <Button
+        {/*<Button
           backgroundColor='none'
           color='secondary'
           onClick={this.handleOnTogglePopoutEditor}
@@ -137,7 +130,7 @@ class RichTextEditorBar extends PureComponent {
           iconClassName={_s.inheritFill}
           iconSize='12px'
           radiusSmall
-        />
+        />*/}
       </div>
     )
   }
diff --git a/app/javascript/gabsocial/components/timeline_compose_block.js b/app/javascript/gabsocial/components/timeline_compose_block.js
index c938713b..53d26f44 100644
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -46,7 +46,7 @@ class TimelineComposeBlock extends ImmutablePureComponent {
       return (
         <section className={_s.default}>
           <div className={[_s.default, _s.flexRow].join(' ')}>
-            <ComposeFormContainer {...rest} />
+            <ComposeFormContainer {...rest} modal={modal} />
           </div>
         </section>
       )
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index b1a092a8..2ef9940f 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -21,6 +21,7 @@ import PollButton from './poll_button'
 import PollForm from './poll_form'
 import SchedulePostButton from './schedule_post_button'
 import SpoilerButton from './spoiler_button'
+import RichTextEditorButton from './rich_text_editor_button'
 import StatusContainer from '../../../containers/status_container'
 import StatusVisibilityButton from './status_visibility_button'
 import UploadButton from './media_upload_button'
@@ -44,7 +45,7 @@ class ComposeForm extends ImmutablePureComponent {
   static contextTypes = {
     router: PropTypes.object,
   }
-  
+
   state = {
     composeFocused: false,
   }
@@ -54,6 +55,7 @@ class ComposeForm extends ImmutablePureComponent {
     edit: PropTypes.bool,
     isMatch: PropTypes.bool,
     text: PropTypes.string.isRequired,
+    markdown: PropTypes.string,
     suggestions: ImmutablePropTypes.list,
     account: ImmutablePropTypes.map.isRequired,
     status: ImmutablePropTypes.map,
@@ -92,14 +94,8 @@ class ComposeForm extends ImmutablePureComponent {
     showSearch: false,
   };
 
-  handleChange = (e, markdown) => {
-    let position = null
-    try {
-      position = this.autosuggestTextarea.textbox.selectionStart 
-    } catch (error) {
-      //
-    }
-    this.props.onChange(e.target.value, markdown, this.props.replyToId, position)
+  handleChange = (e, selectionStart) => {
+    this.props.onChange(e.target.value, e.target.markdown, this.props.replyToId, selectionStart)
   }
 
   handleComposeFocus = () => {
@@ -137,11 +133,11 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleSubmit = () => {
-    if (this.props.text !== this.autosuggestTextarea.textbox.value) {
-      // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
-      // Update the state to match the current text
-      this.props.onChange(this.autosuggestTextarea.textbox.value);
-    }
+    // if (this.props.text !== this.autosuggestTextarea.textbox.value) {
+    // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
+    // Update the state to match the current text
+    // this.props.onChange(this.autosuggestTextarea.textbox.value);
+    // }
 
     // Submit disabled:
     const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
@@ -218,6 +214,7 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleEmojiPick = (data) => {
+    // : todo : with rich text
     const { text } = this.props
     const position = this.autosuggestTextarea.textbox.selectionStart
     const needsSpace = data.custom && position > 0 && !ALLOWED_AROUND_SHORT_CODE.includes(text[position - 1])
@@ -248,6 +245,7 @@ class ComposeForm extends ImmutablePureComponent {
       isSubmitting,
       selectedGifSrc,
     } = this.props
+
     const disabled = isSubmitting
     const text = [this.props.spoilerText, countableText(this.props.text)].join('');
     const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text) !== 0 && length(text.trim()) === 0 && !anyMedia);
@@ -330,9 +328,9 @@ class ComposeForm extends ImmutablePureComponent {
                   <div className={actionsContainerClasses}>
                     <div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
 
-                      { /* <EmojiPickerButton small={shouldCondense} isMatch={isMatch} /> */ }
+                      { /* <EmojiPickerButton small={shouldCondense} isMatch={isMatch} /> */}
 
-                      { /* <UploadButton small={shouldCondense} /> */ }
+                      { /* <UploadButton small={shouldCondense} /> */}
 
                       <div className={commentPublishBtnClasses}>
                         <Button
@@ -375,7 +373,7 @@ class ComposeForm extends ImmutablePureComponent {
               >
 
                 {
-                  !!reduxReplyToId && isModalOpen &&
+                  !!reduxReplyToId && isModalOpen && isMatch &&
                   <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
@@ -405,6 +403,7 @@ class ComposeForm extends ImmutablePureComponent {
                   placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) && isMatch ? messages.commentPlaceholder : messages.placeholder)}
                   disabled={disabled}
                   value={this.props.text}
+                  valueMarkdown={this.props.markdown}
                   onChange={this.handleChange}
                   suggestions={this.props.suggestions}
                   onKeyDown={this.handleKeyDown}
@@ -449,7 +448,7 @@ class ComposeForm extends ImmutablePureComponent {
                 }
 
                 {
-                  !!quoteOfId && isModalOpen &&
+                  !!quoteOfId && isModalOpen && isMatch &&
                   <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
@@ -476,7 +475,7 @@ class ComposeForm extends ImmutablePureComponent {
                     <StatusVisibilityButton />
                     <SpoilerButton />
                     <SchedulePostButton />
-                    { /* !shouldCondense && <RichTextEditorButton /> */}
+                    <RichTextEditorButton />
                   </div>
 
                   <Responsive min={BREAKPOINT_EXTRA_SMALL}>
diff --git a/app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js b/app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js
index 8687d124..5a48a459 100644
--- a/app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js
+++ b/app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js
@@ -1,5 +1,7 @@
 import { injectIntl, defineMessages } from 'react-intl'
 import { changeRichTextEditorControlsVisibility } from '../../../actions/compose'
+import { openModal } from '../../../actions/modal'
+import { me } from '../../../initial_state'
 import ComposeExtraButton from './compose_extra_button'
 
 const messages = defineMessages({
@@ -10,14 +12,18 @@ const messages = defineMessages({
 
 const mapStateToProps = (state) => ({
   active: state.getIn(['compose', 'rte_controls_visible']),
+  isPro: state.getIn(['accounts', me, 'is_pro']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
 
-  onClick (status) {
-    dispatch(changeRichTextEditorControlsVisibility(status))
+  onChangeRichTextEditorControlsVisibility() {
+    dispatch(changeRichTextEditorControlsVisibility())
   },
 
+  onOpenProUpgradeModal() {
+    dispatch(openModal('PRO_UPGRADE'))
+  },
 })
 
 export default
@@ -29,14 +35,21 @@ class RichTextEditorButton extends PureComponent {
     active: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     small: PropTypes.bool,
+    isPro: PropTypes.bool,
+    onOpenProUpgradeModal: PropTypes.func.isRequired,
+    onChangeRichTextEditorControlsVisibility: PropTypes.func.isRequired,
   }
 
   handleClick = (e) => {
     e.preventDefault()
-    this.props.onClick()
+    if (!this.props.isPro) {
+      this.props.onOpenProUpgradeModal()
+    } else {
+      this.props.onChangeRichTextEditorControlsVisibility()
+    }
   }
 
-  render () {
+  render() {
     const { active, intl, small } = this.props
 
     return (
diff --git a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
index 35ea2652..e007460a 100644
--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
@@ -12,7 +12,13 @@ import {
 } from '../../../actions/compose'
 import { me } from '../../../initial_state'
 
-const mapStateToProps = (state, { replyToId, isStandalone }) => {
+const mapStateToProps = (state, props) => {
+  const {
+    replyToId,
+    isStandalone,
+    shouldCondense,
+    modal,
+  } = props
 
   const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
   const isModalOpen = state.getIn(['modal', 'modalType']) === 'COMPOSE' || isStandalone
@@ -27,10 +33,14 @@ const mapStateToProps = (state, { replyToId, isStandalone }) => {
   }
 
   if (isModalOpen) isMatch = true
-
+  if (isModalOpen && shouldCondense) isMatch = false
+  if (isModalOpen && !modal) isMatch = false
+  
   // console.log("isMatch:", isMatch, reduxReplyToId, replyToId, state.getIn(['compose', 'text']))
   // console.log("reduxReplyToId:", reduxReplyToId, isModalOpen, isStandalone)
 
+  const edit = state.getIn(['compose', 'id'])
+
   if (!isMatch) {
     return {
       isMatch,
@@ -38,6 +48,7 @@ const mapStateToProps = (state, { replyToId, isStandalone }) => {
       reduxReplyToId,
       edit: null,
       text: '',
+      markdown: null,
       suggestions: ImmutableList(),
       spoiler: false,
       spoilerText: '',
@@ -57,13 +68,14 @@ const mapStateToProps = (state, { replyToId, isStandalone }) => {
       selectedGifSrc: null,
     }
   }
-
+  
   return {
     isMatch,
     isModalOpen,
     reduxReplyToId,
     edit: state.getIn(['compose', 'id']) !== null,
     text: state.getIn(['compose', 'text']),
+    markdown: state.getIn(['compose', 'markdown']),
     suggestions: state.getIn(['compose', 'suggestions']),
     spoiler: state.getIn(['compose', 'spoiler']),
     spoilerText: state.getIn(['compose', 'spoiler_text']),
diff --git a/app/javascript/gabsocial/features/ui/util/draft-to-markdown.js b/app/javascript/gabsocial/features/ui/util/draft-to-markdown.js
new file mode 100644
index 00000000..ca95bcc2
--- /dev/null
+++ b/app/javascript/gabsocial/features/ui/util/draft-to-markdown.js
@@ -0,0 +1,456 @@
+// https://raw.githubusercontent.com/Rosey/markdown-draft-js/main/src/draft-to-markdown.js
+const TRAILING_WHITESPACE = /[ \u0020\t\n]*$/;
+
+// This escapes some markdown but there's a few cases that are TODO -
+// - List items
+// - Back tics  (see https://github.com/Rosey/markdown-draft-js/issues/52#issuecomment-388458017)
+// - Complex markdown, like links or images. Not sure it's even worth it, because if you're typing
+// that into draft chances are you know its markdown and maybe expect it convert? :/
+const MARKDOWN_STYLE_CHARACTERS = ['*', '_', '~', '`'];
+const MARKDOWN_STYLE_CHARACTER_REGXP = /(\*|_|~|\\|`)/g;
+
+// I hate this a bit, being outside of the function’s scope
+// but can’t think of a better way to keep track of how many ordered list
+// items were are on, as draft doesn’t explicitly tell us in the raw object 😢.
+// This is a hash that will be assigned values based on depth, so like
+// orderedListNumber[0] = 1 would mean that ordered list at depth 0 is on number 1.
+// orderedListNumber[0] = 2 would mean that ordered list at depth 0 is on number 2.
+// This is so we have the right number of numbers when doing a list, eg
+// 1. Item One
+// 2. Item two
+// 3. Item three
+// And so on.
+var orderedListNumber = {},
+    previousOrderedListDepth = 0;
+
+// A map of draftjs block types -> markdown open and close characters
+// Both the open and close methods must exist, even if they simply return an empty string.
+// They should always return a string.
+const StyleItems = {
+  // BLOCK LEVEL
+  'unordered-list-item': {
+    open: function () {
+      return '- ';
+    },
+
+    close: function () {
+      return '';
+    }
+  },
+
+  'ordered-list-item': {
+    open: function (block, number = 1) {
+      return `${number}. `;
+    },
+
+    close: function () {
+      return '';
+    }
+  },
+
+  'blockquote': {
+    open: function () {
+      return '> ';
+    },
+
+    close: function () {
+      return '';
+    }
+  },
+
+  'header-one': {
+    open: function () {
+      return '# ';
+    },
+
+    close: function () {
+      return '';
+    }
+  },
+
+  'code-block': {
+    open: function (block) {
+      return '```' + (block.data.language || '') + '\n';
+    },
+
+    close: function () {
+      return '\n```';
+    }
+  },
+
+  // INLINE LEVEL
+  'BOLD': {
+    open: function () {
+      return '**';
+    },
+
+    close: function () {
+      return '**';
+    }
+  },
+
+  'ITALIC': {
+    open: function () {
+      return '*';
+    },
+
+    close: function () {
+      return '*';
+    }
+  },
+
+  'UNDERLINE': {
+    open: function () {
+      return '_';
+    },
+
+    close: function () {
+      return '_';
+    }
+  },
+
+  'STRIKETHROUGH': {
+    open: function () {
+      return '~~';
+    },
+
+    close: function () {
+      return '~~';
+    }
+  },
+
+  'CODE': {
+    open: function () {
+      return '`';
+    },
+
+    close: function () {
+      return '`';
+    }
+  }
+};
+
+// A map of draftjs entity types -> markdown open and close characters
+// entities are different from block types because they have additional data attached to them.
+// an entity object is passed in to both open and close, in case it's needed for string generation.
+//
+// Both the open and close methods must exist, even if they simply return an empty string.
+// They should always return a string.
+const EntityItems = {
+  //
+}
+
+// Bit of a hack - we normally want a double newline after a block,
+// but for list items we just want one (unless it's the _last_ list item in a group.)
+const SingleNewlineAfterBlock = [
+  'unordered-list-item',
+  'ordered-list-item'
+];
+
+function isEmptyBlock(block) {
+  return block.text.length === 0 && block.entityRanges.length === 0 && Object.keys(block.data || {}).length === 0;
+}
+
+/**
+ * Generate markdown for a single block javascript object
+ * DraftJS raw object contains an array of blocks, which is the main "structure"
+ * of the text. Each block = a new line.
+ *
+ * @param {Object} block - block to generate markdown for
+ * @param {Number} index - index of the block in the blocks array
+ * @param {Object} rawDraftObject - entire raw draft object (needed for accessing the entityMap)
+ * @param {Object} options - additional options passed in by the user calling this method.
+ *
+ * @return {String} markdown string
+**/
+function renderBlock(block, index, rawDraftObject, options) {
+  var openInlineStyles = [],
+      markdownToAdd = [];
+  var markdownString = '',
+      customStyleItems = options.styleItems || {},
+      customEntityItems = options.entityItems || {},
+      escapeMarkdownCharacters = options.hasOwnProperty('escapeMarkdownCharacters') ? options.escapeMarkdownCharacters : true;
+
+  var type = block.type;
+
+  var markdownStyleCharactersToEscape = [];
+
+  // draft-js emits empty blocks that have type set… don’t style them unless the user wants to preserve new lines
+  // (if newlines are preserved each empty line should be "styled" eg in case of blockquote we want to see a blockquote.)
+  // but if newlines aren’t preserved then we'd end up having double or triple or etc markdown characters, which is a bug.
+  if (isEmptyBlock(block) && !options.preserveNewlines) {
+    type = 'unstyled';
+  }
+
+  // Render main block wrapping element
+  if (customStyleItems[type] || StyleItems[type]) {
+    if (type === 'unordered-list-item' || type === 'ordered-list-item') {
+      markdownString += ' '.repeat(block.depth * 4);
+    }
+
+    if (type === 'ordered-list-item') {
+      orderedListNumber[block.depth] = orderedListNumber[block.depth] || 1;
+      markdownString += (customStyleItems[type] || StyleItems[type]).open(block, orderedListNumber[block.depth]);
+      orderedListNumber[block.depth]++;
+
+      // Have to reset the number for orderedListNumber if we are breaking out of a list so that if
+      // there's another nested list at the same level further down, it starts at 1 again.
+      // COMPLICATED 😭
+      if (previousOrderedListDepth > block.depth) {
+        orderedListNumber[previousOrderedListDepth] = 1;
+      }
+
+      previousOrderedListDepth = block.depth;
+    } else {
+      orderedListNumber = {};
+      markdownString += (customStyleItems[type] || StyleItems[type]).open(block);
+    }
+  }
+
+  // Render text within content, along with any inline styles/entities
+  Array.from(block.text).some(function (character, characterIndex) {
+    // Close any entity tags that need closing
+    block.entityRanges.forEach(function (range, rangeIndex) {
+      if (range.offset + range.length === characterIndex) {
+        var entity = rawDraftObject.entityMap[range.key];
+        if (customEntityItems[entity.type] || EntityItems[entity.type]) {
+          markdownString += (customEntityItems[entity.type] || EntityItems[entity.type]).close(entity);
+        }
+      }
+    });
+
+    // Close any inline tags that need closing
+    openInlineStyles.forEach(function (style, styleIndex) {
+      if (style.offset + style.length === characterIndex) {
+        if ((customStyleItems[style.style] || StyleItems[style.style])) {
+          var styleIndex = openInlineStyles.indexOf(style);
+          // Handle nested case - close any open inline styles before closing the parent
+          if (styleIndex > -1 && styleIndex !== openInlineStyles.length - 1) {
+            for (var i = openInlineStyles.length - 1; i !== styleIndex; i--) {
+              var styleItem = (customStyleItems[openInlineStyles[i].style] || StyleItems[openInlineStyles[i].style]);
+              if (styleItem) {
+                var trailingWhitespace = TRAILING_WHITESPACE.exec(markdownString);
+                markdownString = markdownString.slice(0, markdownString.length - trailingWhitespace[0].length);
+                markdownString += styleItem.close();
+                markdownString += trailingWhitespace[0];
+              }
+            }
+          }
+
+          // Close the actual inline style being closed
+          // Have to trim whitespace first and then re-add after because markdown can't handle leading/trailing whitespace
+          var trailingWhitespace = TRAILING_WHITESPACE.exec(markdownString);
+          markdownString = markdownString.slice(0, markdownString.length - trailingWhitespace[0].length);
+
+          markdownString += (customStyleItems[style.style] || StyleItems[style.style]).close();
+          markdownString += trailingWhitespace[0];
+
+          // Handle nested case - reopen any inline styles after closing the parent
+          if (styleIndex > -1 && styleIndex !== openInlineStyles.length - 1) {
+            for (var i = openInlineStyles.length - 1; i !== styleIndex; i--) {
+              var styleItem = (customStyleItems[openInlineStyles[i].style] || StyleItems[openInlineStyles[i].style]);
+              if (styleItem && openInlineStyles[i].offset + openInlineStyles[i].length > characterIndex) {
+                markdownString += styleItem.open();
+              } else {
+                openInlineStyles.splice(i, 1);
+              }
+            }
+          }
+
+          openInlineStyles.splice(styleIndex, 1);
+        }
+      }
+    });
+
+    // Open any inline tags that need opening
+    block.inlineStyleRanges.forEach(function (style, styleIndex) {
+      if (style.offset === characterIndex) {
+        if ((customStyleItems[style.style] || StyleItems[style.style])) {
+          var styleToAdd = (customStyleItems[style.style] || StyleItems[style.style]).open();
+          markdownToAdd.push({
+            type: 'style',
+            style: style,
+            value: styleToAdd
+          });
+        }
+      }
+    });
+
+    // Open any entity tags that need opening
+    block.entityRanges.forEach(function (range, rangeIndex) {
+      if (range.offset === characterIndex) {
+        var entity = rawDraftObject.entityMap[range.key];
+        if (customEntityItems[entity.type] || EntityItems[entity.type]) {
+          var entityToAdd = (customEntityItems[entity.type] || EntityItems[entity.type]).open(entity);
+          markdownToAdd.push({
+            type: 'entity',
+            value: entityToAdd
+          });
+        }
+      }
+    });
+
+    // These are all the opening entity and style types being added to the markdown string for this loop
+    // we store in an array and add here because if the character is WS character, we want to hang onto it and not apply it until the next non-whitespace
+    // character before adding the markdown, since markdown doesn’t play nice with leading whitespace (eg '** bold**' is no  good, whereas ' **bold**' is good.)
+    if (character !== ' ' && markdownToAdd.length) {
+      markdownString += markdownToAdd.map(function (item) {
+        return item.value;
+      }).join('');
+
+      markdownToAdd.forEach(function (item) {
+        if (item.type === 'style') {
+          // We hang on to this because we may need to close it early and then re-open if there are nested styles being opened and closed.
+          openInlineStyles.push(item.style);
+        }
+      });
+
+      markdownToAdd = [];
+    }
+
+    if (block.type !== 'code-block' && escapeMarkdownCharacters) {
+      let insideInlineCodeStyle = openInlineStyles.find((style) => style.style === 'CODE');
+
+      if (insideInlineCodeStyle) {
+        // Todo - The syntax to escape backtics when inside backtic code already is to use MORE backtics wrapping.
+        // So we need to see how many backtics in a row we have and then when converting to markdown, use that # + 1
+
+        // EG  ``Test ` Hllo ``
+        // OR   ```Test `` Hello```
+        // OR ````Test ``` Hello ````
+        // Similar work has to be done for codeblocks.
+      } else {
+        // Special escape logic for blockquotes and heading characters
+        if (characterIndex === 0 && character === '#' && block.text[1] && block.text[1] === ' ') {
+          character = character.replace('#', '\\#');
+        } else if (characterIndex === 0 && character === '>') {
+          character = character.replace('>', '\\>');
+        }
+
+        // Escaping inline markdown characters
+        // 🧹 If someone can think of a more elegant solution, I would love that.
+        // orginally this was just a little char replace using a simple regular expression, but there’s lots of cases where
+        // a markdown character does not actually get converted to markdown, like this case: http://google.com/i_am_a_link
+        // so this code now tries to be smart and keeps track of potential “opening” characters as well as potential “closing”
+        // characters, and only escapes if both opening and closing exist, and they have the correct whitepace-before-open, whitespace-or-end-of-string-after-close pattern
+        if (MARKDOWN_STYLE_CHARACTERS.includes(character)) {
+          let openingStyle = markdownStyleCharactersToEscape.find(function (item) {
+            return item.character === character;
+          });
+
+          if (!openingStyle && block.text[characterIndex - 1] === ' ' && block.text[characterIndex + 1] !== ' ') {
+            markdownStyleCharactersToEscape.push({
+              character: character,
+              index: characterIndex,
+              markdownStringIndexStart: markdownString.length + character.length - 1,
+              markdownStringIndexEnd: markdownString.length + character.length
+            });
+          } else if (openingStyle && block.text[characterIndex - 1] === character && characterIndex === openingStyle.index + 1) {
+            openingStyle.markdownStringIndexEnd += 1;
+          } else if (openingStyle) {
+            let openingStyleLength = openingStyle.markdownStringIndexEnd - openingStyle.markdownStringIndexStart;
+            let escapeCharacter = false;
+            let popOpeningStyle = false;
+            if (openingStyleLength === 1 && (block.text[characterIndex + 1] === ' ' || !block.text[characterIndex + 1])) {
+              popOpeningStyle = true;
+              escapeCharacter = true;
+            }
+
+            if (openingStyleLength === 2 && block.text[characterIndex + 1] === character) {
+              escapeCharacter = true;
+            }
+
+            if (openingStyleLength === 2 && block.text[characterIndex - 1] === character && (block.text[characterIndex + 1] === ' ' || !block.text[characterIndex + 1])) {
+              popOpeningStyle = true;
+              escapeCharacter = true;
+            }
+
+            if (popOpeningStyle) {
+              markdownStyleCharactersToEscape.splice(markdownStyleCharactersToEscape.indexOf(openingStyle), 1);
+              let replacementString = markdownString.slice(openingStyle.markdownStringIndexStart, openingStyle.markdownStringIndexEnd);
+              replacementString = replacementString.replace(MARKDOWN_STYLE_CHARACTER_REGXP, '\\$1');
+              markdownString = (markdownString.slice(0, openingStyle.markdownStringIndexStart) + replacementString + markdownString.slice(openingStyle.markdownStringIndexEnd));
+            }
+
+            if (escapeCharacter) {
+              character = `\\${character}`;
+            }
+          }
+        }
+      }
+    }
+
+    if (character === '\n' && type === 'blockquote') {
+      markdownString += '\n> ';
+    } else {
+      markdownString += character;
+    }
+  });
+
+  // Close any remaining entity tags
+  block.entityRanges.forEach(function (range, rangeIndex) {
+    if (range.offset + range.length === Array.from(block.text).length) {
+      var entity = rawDraftObject.entityMap[range.key];
+      if (customEntityItems[entity.type] || EntityItems[entity.type]) {
+        markdownString += (customEntityItems[entity.type] || EntityItems[entity.type]).close(entity);
+      }
+    }
+  });
+
+  // Close any remaining inline tags (if an inline tag ends at the very last char, we won't catch it inside the loop)
+  openInlineStyles.reverse().forEach(function (style) {
+    var trailingWhitespace = TRAILING_WHITESPACE.exec(markdownString);
+    markdownString = markdownString.slice(0, markdownString.length - trailingWhitespace[0].length);
+    markdownString += (customStyleItems[style.style] || StyleItems[style.style]).close();
+    markdownString += trailingWhitespace[0];
+  });
+
+  // Close block level item
+  if (customStyleItems[type] || StyleItems[type]) {
+    markdownString += (customStyleItems[type] || StyleItems[type]).close(block);
+  }
+
+  // Determine how many newlines to add - generally we want 2, but for list items we just want one when they are succeeded by another list item.
+  if (SingleNewlineAfterBlock.indexOf(type) !== -1 && rawDraftObject.blocks[index + 1] && SingleNewlineAfterBlock.indexOf(rawDraftObject.blocks[index + 1].type) !== -1) {
+    markdownString += '\n';
+  } else if (rawDraftObject.blocks[index + 1]) {
+    if (rawDraftObject.blocks[index].text) {
+      if (SingleNewlineAfterBlock.indexOf(type) !== -1
+          && SingleNewlineAfterBlock.indexOf(rawDraftObject.blocks[index + 1].type) === -1) {
+        markdownString += '\n\n';
+      } else if (!options.preserveNewlines) {
+        // 2 newlines if not preserving
+        markdownString += '\n\n';
+      } else {
+        markdownString += '\n';
+      }
+    } else if (options.preserveNewlines) {
+      markdownString += '\n';
+    }
+  }
+
+  return markdownString;
+}
+
+/**
+ * Generate markdown for a raw draftjs object
+ * DraftJS raw object contains an array of blocks, which is the main "structure"
+ * of the text. Each block = a new line.
+ *
+ * @param {Object} rawDraftObject - draftjs object to generate markdown for
+ * @param {Object} options - optional additional data, see readme for what options can be passed in.
+ *
+ * @return {String} markdown string
+**/
+function draftToMarkdown(rawDraftObject, options) {
+  options = options || {};
+  var markdownString = '';
+  rawDraftObject.blocks.forEach(function (block, index) {
+    markdownString += renderBlock(block, index, rawDraftObject, options);
+  });
+
+  orderedListNumber = {}; // See variable definitions at the top of the page to see why we have to do this sad hack.
+  return markdownString;
+}
+
+export default draftToMarkdown;
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/util/markdown-to-draft.js b/app/javascript/gabsocial/features/ui/util/markdown-to-draft.js
new file mode 100644
index 00000000..5ed33290
--- /dev/null
+++ b/app/javascript/gabsocial/features/ui/util/markdown-to-draft.js
@@ -0,0 +1,312 @@
+// https://raw.githubusercontent.com/Rosey/markdown-draft-js/main/src/markdown-to-draft.js
+import { Remarkable } from 'remarkable';
+
+const TRAILING_NEW_LINE = /\n$/;
+
+// In DraftJS, string lengths are calculated differently than in JS itself (due
+// to surrogate pairs). Instead of importing the entire UnicodeUtils file from
+// FBJS, we use a simpler alternative, in the form of `Array.from`.
+//
+// Alternative:  const { strlen } = require('fbjs/lib/UnicodeUtils');
+function strlen(str) {
+  return Array.from(str).length;
+}
+
+// Block level items, key is Remarkable's key for them, value returned is
+// A function that generates the raw draftjs key and block data.
+//
+// Why a function? Because in some cases (headers) we need additional information
+// before we can determine the exact key to return. And blocks may also return data
+const DefaultBlockTypes = {
+  paragraph_open: function (item) {
+    return {
+      type: 'unstyled',
+      text: '',
+      entityRanges: [],
+      inlineStyleRanges: []
+    };
+  },
+
+  blockquote_open: function (item) {
+    return {
+      type: 'blockquote',
+      text: ''
+    };
+  },
+
+  ordered_list_item_open: function () {
+    return {
+      type: 'ordered-list-item',
+      text: ''
+    };
+  },
+
+  unordered_list_item_open: function () {
+    return {
+      type: 'unordered-list-item',
+      text: ''
+    };
+  },
+
+  fence: function (item) {
+    return {
+      type: 'code-block',
+      data: {
+        language: item.params || ''
+      },
+      text: (item.content || '').replace(TRAILING_NEW_LINE, ''), // remarkable seems to always append an erronious trailing newline to its codeblock content, so we need to trim it out.
+      entityRanges: [],
+      inlineStyleRanges: []
+    };
+  },
+
+  heading_open: function (item) {
+    var type = 'header-' + ({
+      1: 'one',
+      2: 'two',
+      3: 'three',
+      4: 'four',
+      5: 'five',
+      6: 'six'
+    })[item.hLevel];
+
+    return {
+      type: type,
+      text: ''
+    };
+  }
+};
+
+// Entity types. These are things like links or images that require
+// additional data and will be added to the `entityMap`
+// again. In this case, key is remarkable key, value is
+// meethod that returns the draftjs key + any data needed.
+const DefaultBlockEntities = {
+  link_open: function (item) {
+    return {
+      type: 'LINK',
+      mutability: 'MUTABLE',
+      data: {
+        url: item.href,
+        href: item.href
+      }
+    };
+  }
+};
+
+// Entity styles. Simple Inline styles that aren't added to entityMap
+// key is remarkable key, value is draftjs raw key
+const DefaultBlockStyles = {
+  strong_open: 'BOLD',
+  em_open: 'ITALIC',
+  code: 'CODE'
+};
+
+// Key generator for entityMap items
+var idCounter = -1;
+function generateUniqueKey() {
+  idCounter++;
+  return idCounter;
+}
+
+/*
+ * Handle inline content in a block level item
+ * parses for BlockEntities (links, images) and BlockStyles (em, strong)
+ * doesn't handle block level items (blockquote, ordered list, etc)
+ *
+ * @param <Object> inlineItem - single object from remarkable data representation of markdown
+ * @param <Object> BlockEntities - key-value object of mappable block entity items. Passed in as param so users can include their own custom stuff
+ * @param <Object> BlockStyles - key-value object of mappable block styles items. Passed in as param so users can include their own custom stuff
+ *
+ * @return <Object>
+ *  content: Entire text content for the inline item,
+ *  blockEntities: New block eneities to be added to global block entity map
+ *  blockEntityRanges: block-level representation of block entities including key to access the block entity from the global map
+ *  blockStyleRanges: block-level representation of styles (eg strong, em)
+*/
+function parseInline(inlineItem, BlockEntities, BlockStyles) {
+  var content = '', blockEntities = {}, blockEntityRanges = [], blockInlineStyleRanges = [];
+  inlineItem.children.forEach(function (child) {
+    if (child.type === 'text') {
+      content += child.content;
+    } else if (child.type === 'softbreak') {
+      content += '\n';
+    } else if (child.type === 'hardbreak') {
+      content += '\n';
+    } else if (BlockStyles[child.type]) {
+      var key = generateUniqueKey();
+      var styleBlock = {
+        offset: strlen(content) || 0,
+        length: 0,
+        style: BlockStyles[child.type]
+      };
+
+      // Edge case hack because code items don't have inline content or open/close, unlike everything else
+      if (child.type === 'code') {
+        styleBlock.length = strlen(child.content);
+        content += child.content;
+      }
+
+      blockInlineStyleRanges.push(styleBlock);
+    } else if (BlockEntities[child.type]) {
+      var key = generateUniqueKey();
+
+      blockEntities[key] = BlockEntities[child.type](child);
+
+      blockEntityRanges.push({
+        offset: strlen(content) || 0,
+        length: 0,
+        key: key
+      });
+    } else if (child.type.indexOf('_close') !== -1 && BlockEntities[child.type.replace('_close', '_open')]) {
+      blockEntityRanges[blockEntityRanges.length - 1].length = strlen(content) - blockEntityRanges[blockEntityRanges.length - 1].offset;
+    } else if (child.type.indexOf('_close') !== -1 && BlockStyles[child.type.replace('_close', '_open')]) {
+      var type = BlockStyles[child.type.replace('_close', '_open')]
+      blockInlineStyleRanges = blockInlineStyleRanges
+        .map(style => {
+          if (style.length === 0 && style.style === type) {
+            style.length = strlen(content) - style.offset;
+          }
+          return style;
+        });
+    }
+  });
+
+  return {content, blockEntities, blockEntityRanges, blockInlineStyleRanges};
+}
+
+/**
+ * Convert markdown into raw draftjs object
+ *
+ * @param {String} markdown - markdown to convert into raw draftjs object
+ * @param {Object} options - optional additional data, see readme for what options can be passed in.
+ *
+ * @return {Object} rawDraftObject
+**/
+function markdownToDraft(string, options = {}) {
+  const remarkablePreset = options.remarkablePreset || options.remarkableOptions;
+  const remarkableOptions = typeof options.remarkableOptions === 'object' ? options.remarkableOptions : null;
+  const md = new Remarkable(remarkablePreset, remarkableOptions);
+
+  // if tables are not explicitly enabled, disable them by default
+  if (
+    !remarkableOptions ||
+    !remarkableOptions.enable ||
+    !remarkableOptions.enable.block ||
+    remarkableOptions.enable.block !== 'table' ||
+    remarkableOptions.enable.block.includes('table') === false
+  ) {
+    md.block.ruler.disable('table');
+  }
+
+  // disable the specified rules
+  if (remarkableOptions && remarkableOptions.disable) {
+    for (let [key, value] of Object.entries(remarkableOptions.disable)) {
+      md[key].ruler.disable(value);
+    }
+  }
+
+  // enable the specified rules
+  if (remarkableOptions && remarkableOptions.enable) {
+    for (let [key, value] of Object.entries(remarkableOptions.enable)) {
+      md[key].ruler.enable(value);
+    }
+  }
+
+  // If users want to define custom remarkable plugins for custom markdown, they can be added here
+  if (options.remarkablePlugins) {
+    options.remarkablePlugins.forEach(function (plugin) {
+      md.use(plugin, {});
+    });
+  }
+
+  var blocks = []; // blocks will be returned as part of the final draftjs raw object
+  var entityMap = {}; // entitymap will be returned as part of the final draftjs raw object
+  var parsedData = md.parse(string, {}); // remarkable js takes markdown and makes it an array of style objects for us to easily parse
+  var currentListType = null; // Because of how remarkable's data is formatted, we need to cache what kind of list we're currently dealing with
+  var previousBlockEndingLine = 0;
+
+  // Allow user to define custom BlockTypes and Entities if they so wish
+  const BlockTypes = Object.assign({}, DefaultBlockTypes, options.blockTypes || {});
+  const BlockEntities = Object.assign({}, DefaultBlockEntities, options.blockEntities || {});
+  const BlockStyles = Object.assign({}, DefaultBlockStyles, options.blockStyles || {});
+
+  parsedData.forEach(function (item) {
+    // Because of how remarkable's data is formatted, we need to cache what kind of list we're currently dealing with
+    if (item.type === 'bullet_list_open') {
+      currentListType = 'unordered_list_item_open';
+    } else if (item.type === 'ordered_list_open') {
+      currentListType = 'ordered_list_item_open';
+    }
+
+    var itemType = item.type;
+    if (itemType === 'list_item_open') {
+      itemType = currentListType;
+    }
+
+    if (itemType === 'inline') {
+      // Parse inline content and apply it to the most recently created block level item,
+      // which is where the inline content will belong.
+      var {content, blockEntities, blockEntityRanges, blockInlineStyleRanges} = parseInline(item, BlockEntities, BlockStyles);
+      var blockToModify = blocks[blocks.length - 1];
+      blockToModify.text = content;
+      blockToModify.inlineStyleRanges = blockInlineStyleRanges;
+      blockToModify.entityRanges = blockEntityRanges;
+
+      // The entity map is a master object separate from the block so just add any entities created for this block to the master object
+      Object.assign(entityMap, blockEntities);
+    } else if ((itemType.indexOf('_open') !== -1 || itemType === 'fence' || itemType === 'hr') && BlockTypes[itemType]) {
+      var depth = 0;
+      var block;
+
+      if (item.level > 0) {
+        depth = Math.floor(item.level / 2);
+      }
+
+      // Draftjs only supports 1 level of blocks, hence the item.level === 0 check
+      // List items will always be at least `level==1` though so we need a separate check for that
+      // If there’s nested block level items deeper than that, we need to make sure we capture this by cloning the topmost block
+      // otherwise we’ll accidentally overwrite its text. (eg if there's a blockquote with 3 nested paragraphs with inline text, without this check, only the last paragraph would be reflected)
+      if (item.level === 0 || item.type === 'list_item_open') {
+        block = Object.assign({
+          depth: depth
+        }, BlockTypes[itemType](item));
+      } else if (item.level > 0 && blocks[blocks.length - 1].text) {
+        block = Object.assign({}, blocks[blocks.length - 1]);
+      }
+
+      if (block && options.preserveNewlines) {
+        // Re: previousBlockEndingLine.... omg.
+        // So remarkable strips out empty newlines and doesn't make any entities to parse to restore them
+        // the only solution I could find is that there's a 2-value array on each block item called "lines" which is the start and end line of the block element.
+        // by keeping track of the PREVIOUS block element ending line and the NEXT block element starting line, we can find the difference between the new lines and insert
+        // an appropriate number of extra paragraphs to re-create those newlines in draftjs.
+        // This is probably my least favourite thing in this file, but not sure what could be better.
+        var totalEmptyParagraphsToCreate = item.lines[0] - previousBlockEndingLine;
+        for (var i = 0; i < totalEmptyParagraphsToCreate; i++) {
+          blocks.push(DefaultBlockTypes.paragraph_open());
+        }
+      }
+
+      if (block) {
+        previousBlockEndingLine = item.lines[1];
+        blocks.push(block);
+      }
+    }
+
+  });
+
+  // EditorState.createWithContent will error if there's no blocks defined
+  // Remarkable returns an empty array though. So we have to generate a 'fake'
+  // empty block in this case. 😑
+  if (!blocks.length) {
+    blocks.push(DefaultBlockTypes.paragraph_open());
+  }
+
+  return {
+    entityMap,
+    blocks
+  };
+}
+
+export default markdownToDraft;
\ No newline at end of file
diff --git a/app/javascript/gabsocial/reducers/compose.js b/app/javascript/gabsocial/reducers/compose.js
index f7b05035..b6911832 100644
--- a/app/javascript/gabsocial/reducers/compose.js
+++ b/app/javascript/gabsocial/reducers/compose.js
@@ -100,6 +100,7 @@ function clearAll(state) {
   return state.withMutations(map => {
     map.set('id', null);
     map.set('text', '');
+    map.set('markdown', null);
     map.set('spoiler', false);
     map.set('spoiler_text', '');
     map.set('is_submitting', false);
@@ -112,6 +113,8 @@ function clearAll(state) {
     map.set('poll', null);
     map.set('idempotencyKey', uuid());
     map.set('scheduled_at', null);
+    map.set('rte_controls_visible', false);
+    map.set('gif', false);
   });
 };
 
@@ -271,6 +274,7 @@ export default function compose(state = initialState, action) {
       map.set('idempotencyKey', uuid());
       map.set('spoiler', false);
       map.set('spoiler_text', '');
+      map.set('rte_controls_visible', false);
       if (action.text) {
         map.set('text', `${statusToTextMentions(state, action.status)}${action.text}`);
       } else {
@@ -289,6 +293,7 @@ export default function compose(state = initialState, action) {
       map.set('idempotencyKey', uuid());
       map.set('spoiler', false);
       map.set('spoiler_text', '');
+      map.set('rte_controls_visible', '');
     });
   case COMPOSE_REPLY_CANCEL:
   case COMPOSE_RESET:
@@ -361,9 +366,11 @@ export default function compose(state = initialState, action) {
         return item;
       }));
   case STATUS_EDIT:
+    const hasMarkdown = !!action.status.get('plain_markdown')
     return state.withMutations(map => {
       map.set('id', action.status.get('id'));
       map.set('text', unescapeHTML(expandMentions(action.status)));
+      map.set('markdown', action.status.get('plain_markdown'));
       map.set('in_reply_to', action.status.get('in_reply_to_id'));
       map.set('quote_of_id', action.status.get('quote_of_id'));
       map.set('privacy', action.status.get('visibility'));
@@ -371,6 +378,7 @@ export default function compose(state = initialState, action) {
       map.set('focusDate', new Date());
       map.set('caretPosition', null);
       map.set('idempotencyKey', uuid());
+      map.set('rte_controls_visible', hasMarkdown);
 
       if (action.status.get('spoiler_text').length > 0) {
         map.set('spoiler', true);
@@ -396,7 +404,7 @@ export default function compose(state = initialState, action) {
     return state.set('scheduled_at', action.date);
   case COMPOSE_RICH_TEXT_EDITOR_CONTROLS_VISIBILITY:
     return state.withMutations(map => {
-      map.set('rte_controls_visible', !state.get('rte_controls_visible'));
+      map.set('rte_controls_visible', action.open || !state.get('rte_controls_visible'));
     });
   default:
     return state;
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index eb6ccce6..bf4cfce5 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -122,6 +122,11 @@ body {
   overscroll-behavior-y: none;
 }
 
+code,
+pre {
+  font-family: monospace !important;
+}
+
 .overflowYScroll {
   overflow: hidden;
   overflow-y: scroll;
@@ -166,11 +171,29 @@ body {
   margin-bottom: 0.5rem;
 }
 
+.statusContent h1 * {
+  font-size: var(--fs_xl) !important;
+}
+
 .statusContent ul,
 .statusContent ol {
-  list-style-type: disc;
   padding-left: 40px;
-  margin: 0;
+  margin: 0.5rem 0;
+}
+
+.statusContent ul {
+  /* list-style-type: disc; */
+}
+
+.statusContent ol {
+  /* list-style-type: disc; */
+}
+
+.statusContent code {
+  background-color: var(--border_color_secondary);
+  color: var(--text_color_secondary) !important;
+  font-size: var(--fs_n) !important;
+  padding: 0.25em 0.5em;
 }
 
 .dangerousContent,
@@ -1009,6 +1032,7 @@ body {
   font-size: var(--fs_l);
 } */
 
+.statusContent blockquote,
 :global(.RichEditor-blockquote) {
   border-left: 5px solid var(--border_color_secondary);
   color: var(--text_color_secondary);
@@ -1017,11 +1041,14 @@ body {
   padding: 10px 20px;
 }
 
+.statusContent pre,
 :global(.public-DraftStyleDefault-pre) {
   background-color: rgba(0,0,0,.05);
   font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
   font-size: var(--fs_l);
   padding: 10px 20px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 /*  */
diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb
index 7164af06..25f46ff9 100644
--- a/app/lib/formatter.rb
+++ b/app/lib/formatter.rb
@@ -3,6 +3,73 @@
 require 'singleton'
 require_relative './sanitize_config'
 
+class HTMLRenderer < Redcarpet::Render::HTML
+  def block_code(code, language)
+    "<pre><code>#{encode(code).gsub("\n", "<br/>")}</code></pre>"
+  end
+
+  def block_quote(quote)
+    "<blockquote>#{quote}</blockquote>"
+  end
+
+  def codespan(code)
+    "<code>#{code}</code>"
+  end
+
+  def double_emphasis(text)
+    "<strong>#{text}</strong>"
+  end
+  
+  def emphasis(text)
+    "<em>#{text}</em>"
+  end
+  
+  def header(text, header_level)
+    "<h1>#{text}</h1>"
+  end
+  
+  def triple_emphasis(text)
+    "<b><em>#{text}</em></b>"
+  end
+  
+  def strikethrough(text)
+    "<del>#{text}</del>"
+  end
+  
+  def underline(text)
+    "<u>#{text}</u>"
+  end
+
+  def list(contents, list_type)
+    if list_type == :ordered
+      "<ol>#{contents}</ol>"
+    elsif list_type == :unordered
+      "<ul>#{contents}</ul>"
+    else
+      content
+    end
+  end
+  
+  def list_item(text, list_type)
+    "<li>#{text}</li>"
+  end
+
+  def autolink(link, link_type)
+    return link if link_type == :email
+    Formatter.instance.link_url(link)
+  end
+
+  private
+
+  def html_entities
+    @html_entities ||= HTMLEntities.new
+  end
+
+  def encode(html)
+    html_entities.encode(html)
+  end
+end
+
 class Formatter
   include Singleton
   include RoutingHelper
@@ -39,33 +106,28 @@ class Formatter
     linkable_accounts << status.account
 
     html = raw_content
-
-    html = encode_and_link_urls(html, linkable_accounts)
-
-    # : todo :
-    if options[:use_markdown]
-      html = convert_headers(html)
-      html = convert_strong(html)
-      html = convert_italic(html)
-      html = convert_strikethrough(html)
-      html = convert_code(html)
-      html = convert_codeblock(html)
-      html = convert_links(html)
-      html = convert_lists(html)
-      html = convert_ordered_lists(html)
-    end
-
+    html = format_markdown(html) if options[:use_markdown]
+    html = encode_and_link_urls(html, linkable_accounts, keep_html: options[:use_markdown])
+    html = reformat(html, true) unless options[:use_markdown]
     html = encode_custom_emojis(html, status.emojis, options[:autoplay]) if options[:custom_emojify]
 
-    html = simple_format(html, {}, sanitize: false)
-
-    html = html.delete("\n")
+    unless options[:use_markdown]
+      html = html.gsub(/(?:\n\r?|\r\n?)/, '<br />')
+      html = html.delete("\n")
+    end
 
     html.html_safe # rubocop:disable Rails/OutputSafety
+
+    html
   end
 
-  def reformat(html)
-    sanitize(html, Sanitize::Config::GABSOCIAL_STRICT)
+  def format_markdown(html)
+    html = markdown_formatter.render(html)
+    html.delete("\r").delete("\n")
+  end
+
+  def reformat(html, outgoing = false)
+    sanitize(html, Sanitize::Config::GABSOCIAL_STRICT.merge(outgoing: outgoing))
   rescue ArgumentError
     ''
   end
@@ -106,8 +168,7 @@ class Formatter
   end
 
   def format_field(account, str, **options)
-    return reformat(str).html_safe unless account.local? # rubocop:disable Rails/OutputSafety
-    html = encode_and_link_urls(str, me: true)
+    html = account.local? ? encode_and_link_urls(str, me: true) : reformat(str)
     html = encode_custom_emojis(html, account.emojis, options[:autoplay]) if options[:custom_emojify]
     html.html_safe # rubocop:disable Rails/OutputSafety
   end
@@ -120,8 +181,43 @@ class Formatter
     html.html_safe # rubocop:disable Rails/OutputSafety
   end
 
+  def link_url(url)
+    "<a href=\"#{encode(url)}\" target=\"blank\" rel=\"nofollow noopener noreferrer\">#{link_html(url)}</a>"
+  end
+
   private
 
+  def markdown_formatter
+    extensions = {
+      autolink: false,
+      no_intra_emphasis: true,
+      fenced_code_blocks: true,
+      disable_indented_code_blocks: true,
+      strikethrough: true,
+      lax_spacing: true,
+      space_after_headers: true,
+      superscript: false,
+      underline: true,
+      highlight: false,
+      footnotes: false,
+    }
+
+    renderer = HTMLRenderer.new({
+      filter_html: false,
+      escape_html: false,
+      no_images: true,
+      no_styles: true,
+      safe_links_only: false,
+      hard_wrap: false,
+      no_links: true,
+      with_toc_data: false,
+      prettify: false,
+      link_attributes: nil
+    })
+
+    Redcarpet::Markdown.new(renderer, extensions)
+  end
+
   def html_entities
     @html_entities ||= HTMLEntities.new
   end
@@ -138,7 +234,7 @@ class Formatter
       accounts = nil
     end
 
-    rewrite(html.dup, entities) do |entity|
+    rewrite(html.dup, entities, options[:keep_html]) do |entity|
       if entity[:url]
         link_to_url(entity, options)
       elsif entity[:hashtag]
@@ -208,7 +304,7 @@ class Formatter
     html
   end
 
-  def rewrite(text, entities)
+  def rewrite(text, entities, keep_html = false)
     text = text.to_s
 
     # Sort by start index
@@ -221,12 +317,12 @@ class Formatter
 
     last_index = entities.reduce(0) do |index, entity|
       indices = entity.respond_to?(:indices) ? entity.indices : entity[:indices]
-      result << encode(text[index...indices.first])
+      result << (keep_html ? text[index...indices.first] : encode(text[index...indices.first]))
       result << yield(entity)
       indices.last
     end
 
-    result << encode(text[last_index..-1])
+    result << (keep_html ? text[last_index..-1] : encode(text[last_index..-1]))
 
     result.flatten.join
   end
@@ -269,6 +365,29 @@ class Formatter
     Extractor.remove_overlapping_entities(special + standard)
   end
 
+  def html_friendly_extractor(html, options = {})
+    gaps = []
+    total_offset = 0
+
+    escaped = html.gsub(/<[^>]*>|&#[0-9]+;/) do |match|
+      total_offset += match.length - 1
+      end_offset = Regexp.last_match.end(0)
+      gaps << [end_offset - total_offset, total_offset]
+      "\u200b"
+    end
+
+    entities = Extractor.extract_hashtags_with_indices(escaped, :check_url_overlap => false) +
+               Extractor.extract_mentions_or_lists_with_indices(escaped)
+    Extractor.remove_overlapping_entities(entities).map do |extract|
+      pos = extract[:indices].first
+      offset_idx = gaps.rindex { |gap| gap.first <= pos }
+      offset = offset_idx.nil? ? 0 : gaps[offset_idx].last
+      next extract.merge(
+        :indices => [extract[:indices].first + offset, extract[:indices].last + offset]
+      )
+    end
+  end
+
   def link_to_url(entity, options = {})
     url        = Addressable::URI.parse(entity[:url])
     html_attrs = { target: '_blank', rel: 'nofollow noopener noreferrer' }
@@ -321,79 +440,4 @@ class Formatter
     "<a data-focusable=\"true\" role=\"link\" href=\"#{encode(TagManager.instance.url_for(account))}\" class=\"u-url mention\">@#{encode(account.acct)}</a>"
   end
 
-  def convert_headers(html)
-    html.gsub(/^\#{1,6}.*$/) do |header|
-      weight = 0
-      header.split('').each do |char|
-        break unless char == '#'
-        weight += 1
-      end
-      content = header.sub(/^\#{1,6}/, '')
-      "<h#{weight}>#{content}</h#{weight}>"
-    end
-  end
-
-  def convert_strong(html)
-    html.gsub(/\*{2}.*\*{2}|_{2}.*_{2}/) do |strong|
-      content = strong.gsub(/\*{2}|_{2}/, '')
-      "<strong>#{content}</strong>"
-    end
-  end
-
-  def convert_italic(html)
-    html.gsub(/\*{1}(\w|\s)+\*{1}|_{1}(\w|\s)+_{1}/) do |italic|
-      content = italic.gsub(/\*{1}|_{1}/, '')
-      "<em>#{content}</em>"
-    end
-  end
-
-  def convert_strikethrough(html)
-    html.gsub(/~~(\w|\s)+~~/) do |strike|
-      content = strike.gsub(/~~/, '')
-      "<strike>#{content}</strike>"
-    end
-  end
-
-  def convert_code(html)
-    html.gsub(/`(\w|\s)+`/) do |code|
-      content = code.gsub(/`/, '')
-      "<code>#{content}</code>"
-    end
-  end
-
-  def convert_codeblock(html)
-    html.gsub(/```\w*(.*(\r\n|\r|\n))+```/) do |code|
-      lang = code.match(/```\w+/)[0].gsub(/`/, '')
-      content = code.gsub(/```\w+/, '```').gsub(/`/, '')
-      "<pre class=\"#{lang}\"><code>#{content}</code></pre>"
-    end
-  end
-
-  def convert_links(html)
-    html.gsub(/\[(\w|\s)+\]\((\w|\W)+\)/) do |anchor|
-      link_text = anchor.match(/\[(\w|\s)+\]/)[0].gsub(/[\[\]]/, '')
-      href = anchor.match(/\((\w|\W)+\)/)[0].gsub(/\(|\)/, '')
-      "<a href=\"#{href}\">#{link_text}</a>"
-    end
-  end
-
-  def convert_lists(html)
-    html.gsub(/(\-.+(\r|\n|\r\n))+/) do |list|
-      items = "<ul>\n"
-      list.gsub(/\-.+/) do |li|
-        items << "<li>#{li.sub(/^\-/, '').strip}</li>\n"
-      end
-      items << "</ul>\n"
-    end
-  end
-
-  def convert_ordered_lists(html)
-    html.gsub(/(\d\..+(\r|\n|\r\n))+/) do |list|
-      items = "<ol>\n"
-      list.gsub(/\d.+/) do |li|
-        items << "<li>#{li.sub(/^\d\./, '').strip}</li>\n"
-      end
-      items << "</ol>\n"
-    end
-  end
-end
+end
\ No newline at end of file
diff --git a/app/serializers/rest/status_serializer.rb b/app/serializers/rest/status_serializer.rb
index d2cba228..939a93a4 100644
--- a/app/serializers/rest/status_serializer.rb
+++ b/app/serializers/rest/status_serializer.rb
@@ -13,6 +13,7 @@ class REST::StatusSerializer < ActiveModel::Serializer
 
   attribute :content, unless: :source_requested?
   attribute :rich_content, unless: :source_requested?
+  attribute :plain_markdown, unless: :source_requested?
   attribute :text, if: :source_requested?
 
   belongs_to :reblog, serializer: REST::StatusSerializer
@@ -73,8 +74,11 @@ class REST::StatusSerializer < ActiveModel::Serializer
   end
 
   def rich_content
-    Formatter.instance.format(object).strip
-    # Formatter.instance.format(object, use_markdown: true).strip
+    Formatter.instance.format(object, use_markdown: true).strip
+  end
+
+  def plain_markdown
+    object.markdown
   end
 
   def url
diff --git a/app/services/edit_status_service.rb b/app/services/edit_status_service.rb
index 0039dca4..16d7015e 100644
--- a/app/services/edit_status_service.rb
+++ b/app/services/edit_status_service.rb
@@ -7,6 +7,7 @@ class EditStatusService < BaseService
   # @param [Status] status Status being edited
   # @param [Hash] options
   # @option [String] :text Message
+  # @option [String] :markdown Optional message in markdown
   # @option [Boolean] :sensitive
   # @option [String] :visibility
   # @option [String] :spoiler_text
@@ -20,6 +21,7 @@ class EditStatusService < BaseService
     @account     = status.account
     @options     = options
     @text        = @options[:text] || ''
+    @markdown    = @options[:markdown] if @account.is_pro
 
     return idempotency_duplicate if idempotency_given? && idempotency_duplicate?
 
@@ -119,6 +121,7 @@ class EditStatusService < BaseService
     {
       revised_at: Time.now,
       text: @text,
+      markdown: @markdown,
       media_attachments: @media || [],
       sensitive: (@options[:sensitive].nil? ? @account.user&.setting_default_sensitive : @options[:sensitive]) || @options[:spoiler_text].present?,
       spoiler_text: @options[:spoiler_text] || '',
diff --git a/app/services/post_status_service.rb b/app/services/post_status_service.rb
index 6fc3a663..8e4d7bc3 100644
--- a/app/services/post_status_service.rb
+++ b/app/services/post_status_service.rb
@@ -26,7 +26,7 @@ class PostStatusService < BaseService
     @account     = account
     @options     = options
     @text        = @options[:text] || ''
-    @markdown    = @options[:markdown]
+    @markdown    = @options[:markdown] if @account.is_pro
     @in_reply_to = @options[:thread]
 
     return idempotency_duplicate if idempotency_given? && idempotency_duplicate?
diff --git a/package.json b/package.json
index b6c0daa2..be7929b5 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,6 @@
     "lodash.throttle": "^4.1.1",
     "lodash.unescape": "^4.0.1",
     "mark-loader": "^0.1.6",
-    "markdown-draft-js": "^2.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "mkdirp": "^0.5.1",
     "moment-mini": "^2.24.0",
@@ -151,6 +150,7 @@
     "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0",
+    "remarkable": "^2.0.1",
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.0.0",
     "rimraf": "^2.6.3",
diff --git a/yarn.lock b/yarn.lock
index b50329da..57e1adba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6014,13 +6014,6 @@ mark-loader@^0.1.6:
   resolved "https://registry.yarnpkg.com/mark-loader/-/mark-loader-0.1.6.tgz#0abb477dca7421d70e20128ff6489f5cae8676d5"
   integrity sha1-CrtHfcp0IdcOIBKP9kifXK6GdtU=
 
-markdown-draft-js@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/markdown-draft-js/-/markdown-draft-js-2.2.0.tgz#1a4796c4d7907761ae417e2176ab858dfaa1166a"
-  integrity sha512-OW53nd5m7KrnuXjH8jNKB3SQ5KidKD/+pHS+3daVKTsyjsiozghjUxzNH+5JLxzaBECHmJ7itE39RzMgYm5EFQ==
-  dependencies:
-    remarkable "2.0.0"
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8126,10 +8119,10 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
-remarkable@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-2.0.0.tgz#795f965bede8300362ce51a716edc322d9e7a4ca"
-  integrity sha512-3gvKFAgL4xmmVRKAMNm6UzDo/rO2gPVkZrWagp6AXEA4JvCcMcRx9aapYbb7AJAmLLvi/u06+EhzqoS7ha9qOg==
+remarkable@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-2.0.1.tgz#280ae6627384dfb13d98ee3995627ca550a12f31"
+  integrity sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==
   dependencies:
     argparse "^1.0.10"
     autolinker "^3.11.0"
@@ -9301,11 +9294,16 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.9.0:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
+tslib@^1.9.3:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"