Merge branch 'feature/rich_text_editor' of https://code.gab.com/gab/social/gab-social into develop

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}>

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 (