Updating Rich Text editor x 2

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -67,7 +67,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       this.props.onSuggestionsClearRequested();
     }
 
-    this.props.onChange(e);
+    this.props.onChange(e, e.target.selectionStart);
   }
 
   onKeyDown = (e) => {

app/javascript/gabsocial/components/composer.js

@@ -74,6 +74,15 @@ const compositeDecorator = new CompositeDecorator([
   }
 ])
 
+const styleMap = {
+  'CODE': {
+    padding: '0.25em 0.5em',
+    backgroundColor: 'var(--border_color_secondary)',
+    color: 'var(--text_color_secondary)',
+    fontSize: 'var(--fs_n)',
+  },
+};
+
 const HANDLE_REGEX = /\@[\w]+/g
 const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g
 
@@ -104,12 +113,13 @@ export default class Composer extends PureComponent {
       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))
+      const editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
       this.setState({
         editorState,
         plainText: this.props.value,
@@ -123,7 +133,9 @@ export default class Composer extends PureComponent {
       if (!this.props.value) {
         editorState = EditorState.createEmpty(compositeDecorator)
       } else {
-        editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
+        editorState = EditorState.moveFocusToEnd(
+          EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
+        )
       }
       this.setState({
         editorState,
@@ -201,11 +213,6 @@ export default class Composer extends PureComponent {
     return false
   }
 
-  onTab = (e) => {
-    const maxDepth = 4
-    this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth))
-  }
-
   setRef = (n) => {
     try {
       this.textbox = n
@@ -219,10 +226,6 @@ export default class Composer extends PureComponent {
     const {
       disabled,
       placeholder,
-      onKeyDown,
-      onFocus,
-      onBlur,
-      onPaste,
       small,
     } = this.props
     const { editorState } = this.state
@@ -252,15 +255,15 @@ export default class Composer extends PureComponent {
         }
 
         <div
-          onClick={this.focus}
           className={editorContainerClasses}
+          onClick={this.handleOnFocus}
         >
           <Editor
             blockStyleFn={getBlockStyle}
             editorState={editorState}
+            customStyleMap={styleMap}
             handleKeyCommand={this.handleKeyCommand}
             onChange={this.onChange}
-            onTab={this.onTab}
             placeholder={placeholder}
             ref={this.setRef}
             readOnly={disabled}

app/javascript/gabsocial/components/rich_text_editor_bar.js

@@ -2,7 +2,7 @@ import { RichUtils } from 'draft-js'
 import classNames from 'classnames/bind'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
-import Button from './button'
+import Icon from './icon'
 
 const cx = classNames.bind(_s)
 
@@ -31,19 +31,19 @@ const RTE_ITEMS = [
     type: 'style',
     icon: 'strikethrough',
   },
-  // {
-  //   label: 'Monospace',
-  //   style: 'CODE',
-  //   type: 'style',
-  //   icon: 'circle',
-  // },
   {
-    label: 'Title',
+    label: 'Monospace',
-    style: 'header-one',
+    style: 'CODE',
-    type: 'block',
+    type: 'style',
-    icon: 'text-size',
+    icon: 'code',
   },
   // {
+  //   label: 'Title',
+  //   style: 'header-one',
+  //   type: 'block',
+  //   icon: 'text-size',
+  // },
+  // {
   //   label: 'Blockquote',
   //   style: 'blockquote',
   //   type: 'block',
@@ -138,6 +138,7 @@ class RichTextEditorBar extends PureComponent {
 }
 
 class StyleButton extends PureComponent {
+
   static propTypes = {
     onClick: PropTypes.func,
     label: PropTypes.string,
@@ -161,37 +162,37 @@ class StyleButton extends PureComponent {
     } = 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 fillColor = active ? 'fillWhite' : 'fillSecondary'
 
     const btnClasses = cx({
+      default: 1,
+      noUnderline: 1,
+      cursorPointer: 1,
       px10: 1,
       mr5: 1,
       noSelect: 1,
       bgSecondaryDark_onHover: 1,
       bgBrandLight: active,
-      // py10: !small,
+      bgTransparent: 1,
-      // py5: small,
+      radiusSmall: 1,
-      // px5: small,
+      outlineNone: 1,
+      py10: 1,
     })
 
     return (
-      <Button
+      <button
         className={btnClasses}
-        backgroundColor='none'
+        onMouseDown={this.handleOnClick}
-        color={color}
-        onClick={this.handleOnClick}
         title={label}
-        icon={icon}
+      >
-        iconClassName={_s.inheritFill}
+        <Icon id={icon} size='12px' className={_s[fillColor]} />
-        iconSize='12px'
+      </button>
-        radiusSmall
-      />
     )
   }
+
 }
 

app/lib/formatter.rb

@@ -13,7 +13,7 @@ class HTMLRenderer < Redcarpet::Render::HTML
   end
 
   def codespan(code)
-    "<code>#{code}</code>"
+    "<code>#{encode(code).gsub("\n", "<br/>")}</code>"
   end
 
   def double_emphasis(text)