Progress and testing status w comments

2020-04-16 02:00:43 -04:00
parent 0c6837213d
commit 35852e7fee
22 changed files with 605 additions and 534 deletions
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -1,5 +1,6 @@
 import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import isObject from 'lodash.isobject'
 import classNames from 'classnames/bind'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { isRtl } from '../utils/rtl'
@@ -51,8 +52,19 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
    tokenStart: 0,
  }

-  onChange = (e) => {
-    const [tokenStart, token] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
+  onChange = (e, value, selectionStart) => {
+    if (!isObject(e)) {
+      e = {
+        target: {
+          value,
+          selectionStart,
+        },
+      }
+
+      console.log("new e:", e)
+    }
+
+    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)

@@ -235,7 +247,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
    if (textarea) {
      return (
        <Fragment>
-          <div className={[_s.default, _s.flexGrow1].join(' ')}>
+          <div className={[_s.default, _s.flexGrow1, _s.maxWidth100PC].join(' ')}>
            <div className={[_s.default].join(' ')}>

              <Composer
@@ -253,59 +265,10 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
                small={small}
              />

-              { /* <Textarea
-                className={_s.default}
-                inputRef={this.setTextbox}
-                disabled={disabled}
-                placeholder={placeholder}
-                autoFocus={autoFocus}
-                value={value}
-                onChange={this.onChange}
-                onKeyDown={this.onKeyDown}
-                onKeyUp={onKeyUp}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onPaste={this.onPaste}
-                aria-autocomplete='list'
-              /> */ }
-
-              { /*
-                <Textarea
-                className={_s.default}
-                inputRef={this.setTextbox}
-                disabled={disabled}
-                value={value}
-                aria-autocomplete='list'
-              />
-
-              <ContentEditable
-                tabIndex='0'
-                aria-label='Gab text'
-                role='textbox'
-                aria-autocomplete='list'
-                style={{
-                  userSelect: 'text',
-                  'white-space': 'pre-wrap',
-                  overflowWrap: 'break-word'
-                }}
-                className={textClasses}
-                disabled={disabled}
-                style={style}
-                html={value}
-                placeholder={placeholder}
-                autoFocus={autoFocus}
-                onChange={this.onChange}
-                onKeyDown={this.onKeyDown}
-                onKeyUp={onKeyUp}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onPaste={this.onPaste}
-              />
-              */ }
            </div>
            {children}
          </div>
-          { /* : todo : */ }
+          { /* : todo :  put in popover */ }
          <div className='autosuggest-textarea__suggestions-wrapper'>
            <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
              {suggestions.map(this.renderSuggestion)}
--- a/app/javascript/gabsocial/components/character_counter.js
+++ b/app/javascript/gabsocial/components/character_counter.js
@@ -5,15 +5,14 @@ export default class CharacterCounter extends PureComponent {
  static propTypes = {
    text: PropTypes.string.isRequired,
    max: PropTypes.number.isRequired,
-    small: PropTypes.bool,
  }

  render () {
-    const { text, max, small } = this.props
-    const actualRadius = small ? '10' : '16'
-    const radius = small ? 8 : 12
+    const { text, max } = this.props
+    const actualRadius = '16'
+    const radius = 12
    const circumference = 2 * Math.PI * radius
-    const diff = length(text) / max
+    const diff = Math.min(length(text), max) / max
    const dashoffset = circumference * (1 - diff)

    return (
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -6,11 +6,9 @@ import {
 } from 'draft-js'
 import { urlRegex } from '../features/compose/util/url_regex'
 import classNames from 'classnames/bind'
-import { me } from '../initial_state'
-import { makeGetAccount } from '../selectors'
-import Button from './button'
+import RichTextEditorBar from './rich_text_editor_bar'

-// import 'draft-js/dist/Draft.css'
+import '!style-loader!css-loader!draft-js/dist/Draft.css'

 const cx = classNames.bind(_s)

@@ -45,7 +43,6 @@ const findWithRegex = (regex, contentBlock, callback) => {
 }

 const HighlightedSpan = (props) => {
-  console.log("HighlightedSpan:", props)
  return (
    <span
      className={_s.colorBrand}
@@ -56,69 +53,6 @@ const HighlightedSpan = (props) => {
  )
 }

-const RTE_ITEMS = [
-  {
-    label: 'Bold',
-    style: 'BOLD',
-    type: 'style',
-    icon: 'bold',
-  },
-  {
-    label: 'Italic',
-    style: 'ITALIC',
-    type: 'style',
-    icon: 'italic',
-  },
-  {
-    label: 'Underline',
-    style: 'UNDERLINE',
-    type: 'style',
-    icon: 'underline',
-  },
-  {
-    label: 'Strikethrough',
-    style: 'STRIKETHROUGH',
-    type: 'style',
-    icon: 'strikethrough',
-  },
-  // {
-  //   label: 'Monospace',
-  //   style: 'CODE',
-  //   type: 'style',
-  //   icon: 'circle',
-  // },
-  {
-    label: 'H1',
-    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',
-  },
-]
-
 const compositeDecorator = new CompositeDecorator([
  {
    strategy: handleStrategy,
@@ -137,23 +71,13 @@ const compositeDecorator = new CompositeDecorator([
 const HANDLE_REGEX = /\@[\w]+/g;
 const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;

-const mapStateToProps = (state) => {
-  const getAccount = makeGetAccount()
-  const account = getAccount(state, me)
-  const isPro = account.get('is_pro')
-
-  return {
-    isPro,
-    rteControlsVisible: state.getIn(['compose', 'rte_controls_visible']),
-  }
-}

 const mapDispatchToProps = (dispatch) => ({

 })

 export default
-@connect(mapStateToProps, mapDispatchToProps)
+@connect(null, mapDispatchToProps)
 class Composer extends PureComponent {

  static propTypes = {
@@ -169,8 +93,6 @@ class Composer extends PureComponent {
    onBlur: PropTypes.func,
    onPaste: PropTypes.func,
    small: PropTypes.bool,
-    isPro: PropTypes.bool.isRequired,
-    rteControlsVisible: PropTypes.bool.isRequired,
  }

  state = {
@@ -180,11 +102,11 @@ class Composer extends PureComponent {
  onChange = (editorState) => {
    this.setState({ editorState })
    const text = editorState.getCurrentContent().getPlainText('\u0001')
-    this.props.onChange(text)
-  }
+    
+    const selectionState = editorState.getSelection()
+    const selectionStart = selectionState.getStartOffset()

-  onToggleInlineStyle = (style) => {
-    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, style))
+    this.props.onChange(null, text, selectionStart)
  }

  focus = () => {
@@ -203,28 +125,15 @@ class Composer extends PureComponent {
    return false
  }

+  handleOnTogglePopoutEditor = () => {
+    //
+  }
+
  onTab = (e) => {
    const maxDepth = 4
    this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth))
  }

-  toggleEditorStyle = (style, type) => {
-    console.log("toggleEditorStyle:", style, type)
-    if (type === 'style') {
-      this.onChange(
-        RichUtils.toggleInlineStyle(this.state.editorState, style)
-      )
-    } else if (type === 'block') {
-      this.onChange(
-        RichUtils.toggleBlockType(this.state.editorState, style)
-      )
-    }
-  }
-
-  handleOnTogglePopoutEditor = () => {
-    //
-  }
-
  setRef = (n) => {
    this.textbox = n
  }
@@ -243,14 +152,11 @@ class Composer extends PureComponent {
      onBlur,
      onPaste,
      small,
-      isPro,
-      rteControlsVisible
    } = this.props
    const { editorState } = this.state

    const editorContainerClasses = cx({
      default: 1,
-      RTE: 1,
      cursorText: 1,
      text: 1,
      fontSize16PX: !small,
@@ -263,35 +169,12 @@ class Composer extends PureComponent {
    })

    return (
-      <div className={[_s.default].join(' ')}>
+      <div className={_s.default}>

-        {
-          rteControlsVisible && isPro &&
-          <div className={[_s.default, _s.backgroundColorPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15, _s.alignItemsCenter, _s.flexRow].join(' ')}>
-            {
-              RTE_ITEMS.map((item, i) => (
-                <StyleButton
-                  key={`rte-button-${i}`}
-                  editorState={editorState}
-                  onClick={this.toggleEditorStyle}
-                  {...item}
-                />
-              ))
-            }
-            <Button
-              backgroundColor='none'
-              color='secondary'
-              onClick={this.handleOnTogglePopoutEditor}
-              title='Fullscreen'
-              className={[_s.px10, _s.noSelect, _s.marginLeftAuto].join(' ')}
-              icon='fullscreen'
-              iconClassName={_s.inheritFill}
-              iconWidth='12px'
-              iconHeight='12px'
-              radiusSmall
-            />
-          </div>
-        }
+        <RichTextEditorBar
+          editorState={editorState}
+          onChange={this.onChange}
+        />

        <div
          onClick={this.focus}
@@ -304,73 +187,13 @@ class Composer extends PureComponent {
            handleKeyCommand={this.handleKeyCommand}
            onChange={this.onChange}
            onTab={this.onTab}
-            // placeholder={placeholder}
+            placeholder={placeholder}
            ref={this.setRef}
+            readOnly={disabled}
          />
        </div>
      </div>
    )
  }

-}
-
-class StyleButton extends PureComponent {
-  static propTypes = {
-    onClick: PropTypes.func,
-    label: PropTypes.string,
-    style: PropTypes.string,
-    icon: PropTypes.string,
-    type: PropTypes.string,
-  }
-
-  handleOnClick
-   = (e) => {
-    e.preventDefault()
-    this.props.onClick(this.props.style, this.props.type)
-  }
-
-  render() {
-    const {
-      label,
-      style,
-      type,
-      icon,
-      editorState
-    } = this.props
-
-    const selection = editorState.getSelection()
-
-    const currentStyle = editorState.getCurrentInlineStyle()
-    const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType()
-
-    const active = type === 'block' ? style === blockType : currentStyle.has(style)
-    const color = active ? 'white' : 'secondary'
-
-    const btnClasses = cx({
-      px10: 1,
-      mr5: 1,
-      noSelect: 1,
-      backgroundSubtle2Dark_onHover: 1,
-      backgroundColorBrandLight: active,
-      // py10: !small,
-      // py5: small,
-      // px5: small,
-    })
-
-    return (
-      <Button
-        className={btnClasses}
-        backgroundColor='none'
-        color={color}
-        onClick={this.handleOnClick}
-        title={label}
-        icon={icon}
-        iconClassName={_s.inheritFill}
-        iconWidth='12px'
-        iconHeight='12px'
-        radiusSmall
-      />
-    )
-  }
-}
-
+}
--- a/app/javascript/gabsocial/components/popover/date_picker_popover.js
+++ b/app/javascript/gabsocial/components/popover/date_picker_popover.js
@@ -4,7 +4,7 @@ import { me } from '../../initial_state'
 import { isMobile } from '../../utils/is_mobile'
 import PopoverLayout from './popover_layout'

-// import 'react-datepicker/dist/react-datepicker.css'
+import '!style-loader!css-loader!react-datepicker/dist/react-datepicker.css'

 const mapStateToProps = (state) => ({
  date: state.getIn(['compose', 'scheduled_at']),
@@ -40,8 +40,9 @@ class DatePickerPopover extends PureComponent {
    const withPortal = isMobile(window.innerWidth)

    return (
-      <PopoverLayout>
+      <PopoverLayout width={331}>
        <DatePicker
+          inline
          target={this}
          className='schedule-post-dropdown__datepicker'
          minDate={new Date()}
--- a/app/javascript/gabsocial/components/popover/emoji_picker_popover.js
+++ b/app/javascript/gabsocial/components/popover/emoji_picker_popover.js
@@ -2,14 +2,15 @@ import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { Map as ImmutableMap } from 'immutable'
-import classNames from 'classnames'
 import { createSelector } from 'reselect'
 import detectPassiveEvents from 'detect-passive-events'
 import { changeSetting } from '../../actions/settings'
 import { useEmoji } from '../../actions/emojis'
+import { closePopover } from '../../actions/popover'
 import { EmojiPicker as EmojiPickerAsync } from '../../features/ui/util/async_components'
 import { buildCustomEmojis } from '../emoji/emoji'
 import PopoverLayout from './popover_layout'
+import ColumnIndicator from '../column_indicator'

 import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'

@@ -36,151 +37,6 @@ let EmojiPicker, Emoji // load asynchronously
 const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`
 const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false

-const categoriesSort = [
-  'recent',
-  'custom',
-  'people',
-  'nature',
-  'foods',
-  'activity',
-  'places',
-  'objects',
-  'symbols',
-  'flags',
-];
-
-@injectIntl
-class EmojiPickerMenu extends ImmutablePureComponent {
-
-  static propTypes = {
-    custom_emojis: ImmutablePropTypes.list,
-    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
-    loading: PropTypes.bool,
-    onClose: PropTypes.func.isRequired,
-    onPick: PropTypes.func.isRequired,
-    style: PropTypes.object,
-    arrowOffsetLeft: PropTypes.string,
-    arrowOffsetTop: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    skinTone: PropTypes.number.isRequired,
-    onSkinTone: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    style: {},
-    loading: true,
-    frequentlyUsedEmojis: [],
-  };
-
-  state = {
-    modifierOpen: false,
-  };
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  componentDidMount () {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  componentWillUnmount () {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  getI18n = () => {
-    const { intl } = this.props;
-
-    return {
-      search: intl.formatMessage(messages.emoji_search),
-      notfound: intl.formatMessage(messages.emoji_not_found),
-      categories: {
-        search: intl.formatMessage(messages.search_results),
-        recent: intl.formatMessage(messages.recent),
-        people: intl.formatMessage(messages.people),
-        nature: intl.formatMessage(messages.nature),
-        foods: intl.formatMessage(messages.food),
-        activity: intl.formatMessage(messages.activity),
-        places: intl.formatMessage(messages.travel),
-        objects: intl.formatMessage(messages.objects),
-        symbols: intl.formatMessage(messages.symbols),
-        flags: intl.formatMessage(messages.flags),
-        custom: intl.formatMessage(messages.custom),
-      },
-    };
-  }
-
-  handleClick = emoji => {
-    if (!emoji.native) {
-      emoji.native = emoji.colons;
-    }
-
-    this.props.onClose();
-    this.props.onPick(emoji);
-  }
-
-  handleModifierOpen = () => {
-    this.setState({ modifierOpen: true });
-  }
-
-  handleModifierClose = () => {
-    this.setState({ modifierOpen: false });
-  }
-
-  handleModifierChange = modifier => {
-    this.props.onSkinTone(modifier);
-  }
-
-  render () {
-    const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
-
-    if (loading) {
-      return <div style={{ width: 340 }} />;
-    }
-
-    const title = intl.formatMessage(messages.emoji);
-    const { modifierOpen } = this.state
-
-    return (
-      <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
-        <EmojiPicker
-          backgroundImageFn={backgroundImageFn}
-          custom={buildCustomEmojis(custom_emojis)}
-          title={title}
-          i18n={this.getI18n()}
-          onClick={this.handleClick}
-          include={categoriesSort}
-          recent={frequentlyUsedEmojis}
-          skin={skinTone}
-          emojiSize={24}
-          set='twitter'
-          color='#30CE7D'
-          emoji=''
-          autoFocus
-          emojiTooltip
-        />
-
-        {/*<ModifierPicker
-          active={modifierOpen}
-          modifier={skinTone}
-          onOpen={this.handleModifierOpen}
-          onClose={this.handleModifierClose}
-          onChange={this.handleModifierChange}
-        />*/}
-      </div>
-    );
-  }
-
-}
-
 const perLine = 8
 const lines = 2

@@ -201,7 +57,20 @@ const DEFAULTS = [
  'sunglasses',
  'heart',
  'ok_hand',
-];
+]
+
+const categoriesSort = [
+  'recent',
+  'custom',
+  'people',
+  'nature',
+  'foods',
+  'activity',
+  'places',
+  'objects',
+  'symbols',
+  'flags',
+]

 const getFrequentlyUsedEmojis = createSelector([
  state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
@@ -219,7 +88,7 @@ const getFrequentlyUsedEmojis = createSelector([
  }

  return emojis;
-});
+})

 const getCustomEmojis = createSelector([
  state => state.get('custom_emojis'),
@@ -236,106 +105,187 @@ const getCustomEmojis = createSelector([
  return 0;
 }));

+@injectIntl
+class EmojiPickerMenu extends ImmutablePureComponent {
+
+  static propTypes = {
+    customEmojis: ImmutablePropTypes.list,
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
+    loading: PropTypes.bool,
+    onClose: PropTypes.func.isRequired,
+    onPick: PropTypes.func.isRequired,
+    arrowOffsetLeft: PropTypes.string,
+    arrowOffsetTop: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+    skinTone: PropTypes.number.isRequired,
+    onSkinTone: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    loading: true,
+    frequentlyUsedEmojis: [],
+  }
+
+  getI18n = () => {
+    const { intl } = this.props
+
+    return {
+      search: intl.formatMessage(messages.emoji_search),
+      notfound: intl.formatMessage(messages.emoji_not_found),
+      categories: {
+        search: intl.formatMessage(messages.search_results),
+        recent: intl.formatMessage(messages.recent),
+        people: intl.formatMessage(messages.people),
+        nature: intl.formatMessage(messages.nature),
+        foods: intl.formatMessage(messages.food),
+        activity: intl.formatMessage(messages.activity),
+        places: intl.formatMessage(messages.travel),
+        objects: intl.formatMessage(messages.objects),
+        symbols: intl.formatMessage(messages.symbols),
+        flags: intl.formatMessage(messages.flags),
+        custom: intl.formatMessage(messages.custom),
+      },
+    }
+  }
+
+  handleClick = emoji => {
+    if (!emoji.native) {
+      emoji.native = emoji.colons
+    }
+
+    this.props.onClose()
+    this.props.onPick(emoji)
+  }
+
+  handleModifierChange = modifier => {
+    this.props.onSkinTone(modifier)
+  }
+
+  render () {
+    const {
+      loading,
+      intl,
+      customEmojis,
+      skinTone,
+      frequentlyUsedEmojis,
+    } = this.props
+
+    if (loading) {
+      return (
+        <div style={{ width: 340, height: 425 }}>
+          <ColumnIndicator type='loading' />
+        </div>
+      )
+    }
+
+    const title = intl.formatMessage(messages.emoji)
+
+    return (
+      <EmojiPicker
+        backgroundImageFn={backgroundImageFn}
+        custom={buildCustomEmojis(customEmojis)}
+        title={title}
+        i18n={this.getI18n()}
+        onClick={this.handleClick}
+        include={categoriesSort}
+        recent={frequentlyUsedEmojis}
+        skin={skinTone}
+        emojiSize={24}
+        set='twitter'
+        color='#30CE7D'
+        emoji=''
+        autoFocus
+        emojiTooltip
+        onSkinChange={this.handleModifierChange}
+      />
+    )
+  }
+
+}
+
 const mapStateToProps = (state) => ({
-  custom_emojis: getCustomEmojis(state),
+  customEmojis: getCustomEmojis(state),
  skinTone: state.getIn(['settings', 'skinTone']),
  frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
-});
+})

 const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
+  onClosePopover() {
+    dispatch(closePopover())
+  },
+
  onSkinTone: skinTone => {
-    dispatch(changeSetting(['skinTone'], skinTone));
+    dispatch(changeSetting(['skinTone'], skinTone))
  },

  onPickEmoji: emoji => {
-    dispatch(useEmoji(emoji));
+    dispatch(useEmoji(emoji))

    if (onPickEmoji) {
-      onPickEmoji(emoji);
+      onPickEmoji(emoji)
    }
  },
-});
+})

 export default
-@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
 class EmojiPickerPopover extends ImmutablePureComponent {

  static propTypes = {
-    custom_emojis: ImmutablePropTypes.list,
+    customEmojis: ImmutablePropTypes.list,
    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
    intl: PropTypes.object.isRequired,
    onPickEmoji: PropTypes.func.isRequired,
    onSkinTone: PropTypes.func.isRequired,
    skinTone: PropTypes.number.isRequired,
-  };
+    onClosePopover: PropTypes.func.isRequired,
+  }

  state = {
-    active: false,
    loading: false,
-  };
+  }

  componentWillMount = () => {
-    this.setState({ active: true });
-
    if (!EmojiPicker) {
-      this.setState({ loading: true });
+      this.setState({ loading: true })

-      EmojiPickerAsync().then(EmojiMart => {
-        EmojiPicker = EmojiMart.Picker;
-        Emoji       = EmojiMart.Emoji;
+      EmojiPickerAsync().then((EmojiMart) => {
+        EmojiPicker = EmojiMart.Picker
+        Emoji       = EmojiMart.Emoji

-        this.setState({ loading: false });
+        this.setState({ loading: false })
      }).catch(() => {
-        this.setState({ loading: false });
-      });
+        this.setState({ loading: false })
+      })
    }
  }

  onHideDropdown = () => {
-    this.setState({ active: false });
-  }
-
-  onToggle = (e) => {
-    if (!this.state.loading && (!e.key || e.key === 'Enter')) {
-      if (this.state.active) {
-        this.onHideDropdown();
-      } else {
-        this.onShowDropdown(e);
-      }
-    }
-  }
-
-  handleKeyDown = e => {
-    if (e.key === 'Escape') {
-      this.onHideDropdown();
-    }
+    this.props.onClosePopover()
  }

  render () {
    const {
-      intl,
      onPickEmoji,
      onSkinTone,
      skinTone,
-      frequentlyUsedEmojis
+      frequentlyUsedEmojis,
+      customEmojis,
    } = this.props
    
-    const { active, loading } = this.state
+    const { loading } = this.state

    return (
      <PopoverLayout width={340}>
-        <div onKeyDown={this.handleKeyDown}>
-          <EmojiPickerMenu
-            custom_emojis={this.props.custom_emojis}
-            loading={loading}
-            onClose={this.onHideDropdown}
-            onPick={onPickEmoji}
-            onSkinTone={onSkinTone}
-            skinTone={skinTone}
-            frequentlyUsedEmojis={frequentlyUsedEmojis}
-          />
-        </div>
+        <EmojiPickerMenu
+          customEmojis={customEmojis}
+          loading={loading}
+          onClose={this.onHideDropdown}
+          onPick={onPickEmoji}
+          onSkinTone={onSkinTone}
+          skinTone={skinTone}
+          frequentlyUsedEmojis={frequentlyUsedEmojis}
+        />
      </PopoverLayout>
    )
  }
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -151,6 +151,8 @@ class PopoverRoot extends PureComponent {
    } = this.props
    const visible = !!type

+    console.log("POPOVER_COMPONENTS[type]:", type, POPOVER_COMPONENTS[type]);
+
    return (
      <PopoverBase
        visible={visible}
--- a/app/javascript/gabsocial/components/rich_text_editor_bar.js
+++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js
@@ -0,0 +1,206 @@
+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'
+import Button from './button'
+
+const cx = classNames.bind(_s)
+
+const RTE_ITEMS = [
+  {
+    label: 'Bold',
+    style: 'BOLD',
+    type: 'style',
+    icon: 'bold',
+  },
+  {
+    label: 'Italic',
+    style: 'ITALIC',
+    type: 'style',
+    icon: 'italic',
+  },
+  {
+    label: 'Underline',
+    style: 'UNDERLINE',
+    type: 'style',
+    icon: 'underline',
+  },
+  {
+    label: 'Strikethrough',
+    style: 'STRIKETHROUGH',
+    type: 'style',
+    icon: 'strikethrough',
+  },
+  // {
+  //   label: 'Monospace',
+  //   style: 'CODE',
+  //   type: 'style',
+  //   icon: 'circle',
+  // },
+  {
+    label: 'H1',
+    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',
+  },
+]
+
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+})
+
+const mapStateToProps = (state) => {
+  const getAccount = makeGetAccount()
+  const account = getAccount(state, me)
+  const isPro = account.get('is_pro')
+
+  return {
+    isPro,
+    rteControlsVisible: state.getIn(['compose', 'rte_controls_visible']),
+  }
+}
+
+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,
+  }
+
+  toggleEditorStyle = (style, type) => {
+    if (type === 'style') {
+      this.props.onChange(
+        RichUtils.toggleInlineStyle(this.props.editorState, style)
+      )
+    } else if (type === 'block') {
+      this.props.onChange(
+        RichUtils.toggleBlockType(this.props.editorState, style)
+      )
+    }
+  }
+
+  render() {
+    const { isPro, rteControlsVisible, editorState } = this.props
+
+    if (!rteControlsVisible || !isPro) return null
+
+    return (
+      <div className={[_s.default, _s.backgroundColorPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15, _s.alignItemsCenter, _s.flexRow].join(' ')}>
+        {
+          RTE_ITEMS.map((item, i) => (
+            <StyleButton
+              key={`rte-button-${i}`}
+              editorState={editorState}
+              onClick={this.toggleEditorStyle}
+              {...item}
+            />
+          ))
+        }
+        <Button
+          backgroundColor='none'
+          color='secondary'
+          onClick={this.handleOnTogglePopoutEditor}
+          title='Fullscreen'
+          className={[_s.px10, _s.noSelect, _s.marginLeftAuto].join(' ')}
+          icon='fullscreen'
+          iconClassName={_s.inheritFill}
+          iconWidth='12px'
+          iconHeight='12px'
+          radiusSmall
+        />
+      </div>
+    )
+  }
+
+}
+
+class StyleButton extends PureComponent {
+  static propTypes = {
+    onClick: PropTypes.func,
+    label: PropTypes.string,
+    style: PropTypes.string,
+    icon: PropTypes.string,
+    type: PropTypes.string,
+  }
+
+  handleOnClick = (e) => {
+    e.preventDefault()
+    this.props.onClick(this.props.style, this.props.type)
+  }
+
+  render() {
+    const {
+      label,
+      style,
+      type,
+      icon,
+      editorState
+    } = this.props
+
+    const selection = editorState.getSelection()
+
+    const currentStyle = editorState.getCurrentInlineStyle()
+    const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType()
+
+    const active = type === 'block' ? style === blockType : currentStyle.has(style)
+    const color = active ? 'white' : 'secondary'
+
+    const btnClasses = cx({
+      px10: 1,
+      mr5: 1,
+      noSelect: 1,
+      backgroundSubtle2Dark_onHover: 1,
+      backgroundColorBrandLight: active,
+      // py10: !small,
+      // py5: small,
+      // px5: small,
+    })
+
+    return (
+      <Button
+        className={btnClasses}
+        backgroundColor='none'
+        color={color}
+        onClick={this.handleOnClick}
+        title={label}
+        icon={icon}
+        iconClassName={_s.inheritFill}
+        iconWidth='12px'
+        iconHeight='12px'
+        radiusSmall
+      />
+    )
+  }
+}
+
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -387,8 +387,8 @@ class Status extends ImmutablePureComponent {
    const containerClasses = cx({
      default: 1,
      radiusSmall: !borderless && !isChild,
-      mb15: !borderless && !isChild,
-      backgroundColorPrimary: 1,
+      // mb15: !borderless && !isChild,
+      // backgroundColorPrimary: 1,
      pb15: featured,
      borderBottom1PX: featured && !isChild,
      borderColorSecondary: featured && !isChild,
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -9,7 +9,8 @@ import { me, promotions } from '../initial_state';
 import { dequeueTimeline } from '../actions/timelines';
 import { scrollTopTimeline } from '../actions/timelines';
 import { fetchStatus } from '../actions/statuses';
-import StatusContainer from '../containers/status_container';
+// import StatusContainer from '../containers/status_container';
+import Status from '../features/status';
 import ScrollableList from './scrollable_list';
 import TimelineQueueButtonHeader from './timeline_queue_button_header';
 import ColumnIndicator from './column_indicator';
@@ -173,7 +174,7 @@ class StatusList extends ImmutablePureComponent {
        />
      ) : (
        <Fragment key={statusId}>
-          <StatusContainer
+          <Status
            id={statusId}
            onMoveUp={this.handleMoveUp}
            onMoveDown={this.handleMoveDown}
@@ -184,7 +185,7 @@ class StatusList extends ImmutablePureComponent {
          />
          {
            promotedStatus && index === promotion.position &&
-            <StatusContainer
+            <Status
              id={promotion.status_id}
              contextType={timelineId}
              promoted
@@ -197,7 +198,7 @@ class StatusList extends ImmutablePureComponent {

    if (scrollableContent && featuredStatusIds) {
      scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusContainer
+        <Status
          key={`f-${statusId}`}
          id={statusId}
          featured