Updating composer to fix line breaks and other rich text issues

• Updating:
- composer to fix line breaks and other rich text issues

app/javascript/gabsocial/actions/compose.js

@@ -264,30 +264,22 @@ export function submitCompose(group, replyToId = null, router, isStandalone) {
 
     let status = getState().getIn(['compose', 'text'], '');
     let markdown = getState().getIn(['compose', 'markdown'], '');
-    const media  = getState().getIn(['compose', 'media_attachments']);
+    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) =>{
+    const replacer = (match) => {
       const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
       //Make sure not a remote mention like @someone@somewhere.com
       if (!hasProtocol) {
         if (status.indexOf(`@${match}`) > -1) return match
       }
       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
     }
 
+    // : hack :
+    //Prepend http:// to urls in status that don't have protocol
+    status = `${status}`.replace(urlRegex, replacer)
+    markdown = !!markdown ? `${markdown}`.replace(urlRegex, replacer) : undefined
+
     const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId
 
     dispatch(submitComposeRequest());

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -36,6 +36,8 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     onBlur: PropTypes.func,
     textarea: PropTypes.bool,
     small: PropTypes.bool,
+    isPro: PropTypes.bool,
+    isEdit: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -211,6 +213,8 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       children,
       valueMarkdown,
       id,
+      isPro,
+      isEdit,
     } = this.props
 
     const { suggestionsHidden } = this.state
@@ -284,6 +288,8 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
               onBlur={this.onBlur}
               onPaste={this.onPaste}
               small={small}
+              isEdit={isEdit}
+              isPro={isPro}
             />
           </Responsive>
 

app/javascript/gabsocial/components/composer.js

@@ -18,6 +18,21 @@ import '!style-loader!css-loader!draft-js/dist/Draft.css'
 
 const cx = classNames.bind(_s)
 
+const markdownOptions = {
+  escapeMarkdownCharacters: false,
+  preserveNewlines: true,
+  remarkablePreset: 'commonmark',
+  remarkableOptions: {
+    disable: {
+      inline: ['links'],
+      block: ['table', 'heading'],
+    },
+    enable: {
+      inline: ['del', 'ins'],
+    }
+  }
+}
+
 const getBlockStyle = (block) => {
   switch (block.getType()) {
     case 'blockquote':
@@ -100,6 +115,8 @@ export default class Composer extends PureComponent {
     onBlur: PropTypes.func,
     onPaste: PropTypes.func,
     small: PropTypes.bool,
+    isPro: PropTypes.bool,
+    isEdit: PropTypes.bool,
   }
 
   state = {
@@ -109,8 +126,8 @@ export default class Composer extends PureComponent {
   }
 
   componentDidMount() {
-    if (this.props.valueMarkdown) {
-      const rawData = markdownToDraft(this.props.valueMarkdown)
+    if (this.props.valueMarkdown && this.props.isPro && this.props.isEdit) {
+      const rawData = markdownToDraft(this.props.valueMarkdown, markdownOptions)
       const contentState = convertFromRaw(rawData)
       const editorState = EditorState.createWithContent(contentState)
 
@@ -146,29 +163,23 @@ export default class Composer extends PureComponent {
 
   onChange = (editorState) => {
     const content = editorState.getCurrentContent()
-    const plainText = content.getPlainText('\u0001')
+    // const plainText = content.getPlainText('\u0001')
 
-    this.setState({ editorState, plainText })
+    const blocks = convertToRaw(editorState.getCurrentContent()).blocks
+    const value = blocks.map(block => (!block.text.trim() && '') || block.text).join('\n')
+
+    this.setState({
+      editorState,
+      plainText: value,
+    })
 
     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'],
-        }
-      }
-    })
+    const markdownString = this.props.isPro ? draftToMarkdown(rawObject,markdownOptions) : null
 
-    this.props.onChange(null, plainText, markdownString, selectionStart)
+    this.props.onChange(null, value, markdownString, selectionStart)
   }
 
   handleOnFocus = () => {
@@ -227,6 +238,7 @@ export default class Composer extends PureComponent {
       disabled,
       placeholder,
       small,
+      isPro,
     } = this.props
     const { editorState } = this.state
 
@@ -247,7 +259,7 @@ export default class Composer extends PureComponent {
       <div className={_s.default}>
 
         {
-          !small &&
+          !small && isPro &&
           <RichTextEditorBar
             editorState={editorState}
             onChange={this.onChange}

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -88,6 +88,7 @@ class ComposeForm extends ImmutablePureComponent {
     reduxReplyToId: PropTypes.string,
     hasPoll: PropTypes.bool,
     selectedGifSrc: PropTypes.string,
+    isPro: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -244,6 +245,7 @@ class ComposeForm extends ImmutablePureComponent {
       isChangingUpload,
       isSubmitting,
       selectedGifSrc,
+      isPro,
     } = this.props
 
     const disabled = isSubmitting
@@ -322,6 +324,8 @@ class ComposeForm extends ImmutablePureComponent {
                     onPaste={onPaste}
                     autoFocus={shouldAutoFocus}
                     small={shouldCondense}
+                    isPro={isPro}
+                    isEdit={!!edit}
                     id='comment-composer'
                   />
 
@@ -414,6 +418,8 @@ class ComposeForm extends ImmutablePureComponent {
                   onPaste={onPaste}
                   autoFocus={shouldAutoFocus}
                   small={shouldCondense}
+                  isPro={isPro}
+                  isEdit={!!edit}
                   id='main-composer'
                 />
 

app/javascript/gabsocial/features/compose/containers/compose_form_container.js

@@ -90,12 +90,13 @@ const mapStateToProps = (state, props) => {
     quoteOfId: state.getIn(['compose', 'quote_of_id']),
     scheduledAt: state.getIn(['compose', 'scheduled_at']),
     account: state.getIn(['accounts', me]),
+    isPro: state.getIn(['accounts', me, 'is_pro']),
     hasPoll: state.getIn(['compose', 'poll']),
     selectedGifSrc: state.getIn(['tenor', 'selectedGif', 'src']),
   }
 }
 
-const mapDispatchToProps = (dispatch, { reduxReplyToId, replyToId, isStandalone }) => ({
+const mapDispatchToProps = (dispatch, { isStandalone }) => ({
 
   onChange(text, markdown, newReplyToId, position) {
     dispatch(changeCompose(text, markdown, newReplyToId, isStandalone, position))

app/lib/formatter.rb

@@ -123,7 +123,8 @@ class Formatter
 
   def format_markdown(html)
     html = markdown_formatter.render(html)
-    html.delete("\r").delete("\n")
+    # html.delete("\r").delete("\n")
+    html = html.gsub(/(?:\n\r?|\r\n?)/, '<br />')
   end
 
   def reformat(html, outgoing = false)