Rich Text Editor (WIP)

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -53,11 +53,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,8 +66,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
 
     const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
 
-    // console.log('onChange', e.target.value, e.target, this.textbox, tokenStart, token)
-
     if (token !== null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
       this.props.onSuggestionsFetchRequested(token);
@@ -75,7 +74,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       this.props.onSuggestionsClearRequested();
     }
 
-    this.props.onChange(e, markdown);
+    this.props.onChange(e);
   }
 
   onKeyDown = (e) => {
@@ -259,7 +258,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     return (
       <Fragment>
         <div className={textareaContainerClasses}>
-          <Textarea
+          {/*<Textarea
             inputRef={this.setTextbox}
             className={textareaClasses}
             disabled={disabled}
@@ -273,9 +272,9 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
             onBlur={this.onBlur}
             onPaste={this.onPaste}
             aria-autocomplete='list'
-          />
+          />*/}
 
-          {/*<Composer
+          <Composer
             inputRef={this.setTextbox}
             disabled={disabled}
             placeholder={placeholder}
@@ -288,7 +287,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
             onBlur={this.onBlur}
             onPaste={this.onPaste}
             small={small}
-          />*/}
+          />
 
           {children}
         </div>

app/javascript/gabsocial/components/composer.js

@@ -8,7 +8,6 @@ import {
   ContentState,
 } from 'draft-js'
 import { draftToMarkdown } from 'markdown-draft-js'
-// import draftToMarkdown from 'draftjs-to-markdown'
 import { urlRegex } from '../features/ui/util/url_regex'
 import classNames from 'classnames/bind'
 import RichTextEditorBar from './rich_text_editor_bar'
@@ -76,7 +75,6 @@ const compositeDecorator = new CompositeDecorator([
 const HANDLE_REGEX = /\@[\w]+/g;
 const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;
 
-
 const mapDispatchToProps = (dispatch) => ({
 
 })
@@ -117,7 +115,6 @@ class Composer extends PureComponent {
   }
 
   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 })
@@ -126,24 +123,32 @@ class Composer extends PureComponent {
 
   // EditorState.createWithContent(ContentState.createFromText('Hello'))
 
-  onChange = (editorState) => {
+  onChange = (editorState, b, c, d) => {
     this.setState({ editorState })
-    const content = this.state.editorState.getCurrentContent();
+
+    const content = editorState.getCurrentContent();
     const text = content.getPlainText('\u0001')
     
-    // const selectionState = editorState.getSelection()
-    // const selectionStart = selectionState.getStartOffset()
+    const selectionState = editorState.getSelection()
+    const selectionStart = selectionState.getStartOffset()
 
-    // const rawObject = convertToRaw(content);
-    // const markdownString = draftToMarkdown(rawObject);
-    // const markdownString = draftToMarkdown(rawObject, {
-    //   trigger: '#',
-    //   separator: ' ',
-    // });
+    const rawObject = convertToRaw(content);
+    const markdownString = draftToMarkdown(rawObject, {
+      preserveNewlines: true,
+      remarkablePreset: 'commonmark',
+      remarkableOptions: {
+        disable: {
+          block: ['table']
+        },
+        enable: {
+          inline: ['del', 'ins'],
+        }
+      }
+    });
 
-    // console.log("text:", text, this.props.value)
+    console.log("text:", markdownString)
 
-    this.props.onChange(null, text, selectionStart, markdownString)
+    this.props.onChange(null, text, markdownString, selectionStart)
   }
 
   // **bold**
@@ -219,7 +224,7 @@ class Composer extends PureComponent {
     return (
       <div className={_s.default}>
 
-        { /** : todo : */
+        {
           !small &&
           <RichTextEditorBar
             editorState={editorState}
@@ -241,6 +246,9 @@ class Composer extends PureComponent {
             placeholder={placeholder}
             ref={this.setRef}
             readOnly={disabled}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            stripPastedStyles
           />
         </div>
       </div>