Commit 65f4cbe0 authored by mgabdev's avatar mgabdev

Updating Rich Text editor x 2

parent 2387c331
......@@ -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) => {
......
......@@ -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}
......
......@@ -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',
style: 'header-one',
type: 'block',
icon: 'text-size',
label: 'Monospace',
style: 'CODE',
type: 'style',
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,
// py5: small,
// px5: small,
bgTransparent: 1,
radiusSmall: 1,
outlineNone: 1,
py10: 1,
})
return (
<Button
<button
className={btnClasses}
backgroundColor='none'
color={color}
onClick={this.handleOnClick}
onMouseDown={this.handleOnClick}
title={label}
icon={icon}
iconClassName={_s.inheritFill}
iconSize='12px'
radiusSmall
/>
>
<Icon id={icon} size='12px' className={_s[fillColor]} />
</button>
)
}
}
......@@ -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)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment