gab-social/app/javascript/gabsocial/components/composer.js

251 lines
5.8 KiB
JavaScript
Raw Normal View History

2020-03-25 03:08:43 +00:00
import {
Editor,
EditorState,
2020-03-31 17:04:50 +01:00
CompositeDecorator,
2020-04-22 06:00:11 +01:00
RichUtils,
convertToRaw,
2020-06-17 21:27:58 +01:00
convertFromRaw,
2020-06-17 18:25:10 +01:00
ContentState,
2020-03-25 03:08:43 +00:00
} from 'draft-js'
2020-06-17 00:44:30 +01:00
import draftToMarkdown from '../features/ui/util/draft-to-markdown'
2020-06-17 21:27:58 +01:00
import markdownToDraft from '../features/ui/util/markdown-to-draft'
2020-04-29 03:24:35 +01:00
import { urlRegex } from '../features/ui/util/url_regex'
2020-03-31 17:04:50 +01:00
import classNames from 'classnames/bind'
2020-04-16 07:00:43 +01:00
import RichTextEditorBar from './rich_text_editor_bar'
2020-03-31 17:04:50 +01:00
2020-04-16 07:00:43 +01:00
import '!style-loader!css-loader!draft-js/dist/Draft.css'
2020-04-02 04:17:21 +01:00
2020-03-31 17:04:50 +01:00
const cx = classNames.bind(_s)
const getBlockStyle = (block) => {
switch (block.getType()) {
case 'blockquote':
return 'RichEditor-blockquote'
default:
return null
}
}
function handleStrategy(contentBlock, callback, contentState) {
findWithRegex(HANDLE_REGEX, contentBlock, callback)
}
2020-06-17 18:25:10 +01:00
function hashtagStrategy(contentBlock, callback, contentState) {
2020-03-31 17:04:50 +01:00
findWithRegex(HASHTAG_REGEX, contentBlock, callback)
}
2020-06-17 18:25:10 +01:00
function urlStrategy(contentBlock, callback, contentState) {
2020-03-31 17:04:50 +01:00
findWithRegex(urlRegex, contentBlock, callback)
}
const findWithRegex = (regex, contentBlock, callback) => {
const text = contentBlock.getText()
let matchArr, start
while ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index
callback(start, start + matchArr[0].length)
}
}
const HighlightedSpan = (props) => {
return (
<span
className={_s.colorBrand}
data-offset-key={props.offsetKey}
>
{props.children}
</span>
)
}
const compositeDecorator = new CompositeDecorator([
{
strategy: handleStrategy,
component: HighlightedSpan,
},
{
strategy: hashtagStrategy,
component: HighlightedSpan,
},
{
strategy: urlStrategy,
component: HighlightedSpan,
}
])
2020-06-17 18:25:10 +01:00
const HANDLE_REGEX = /\@[\w]+/g
const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g
2020-03-25 03:08:43 +00:00
2020-06-17 18:25:10 +01:00
export default class Composer extends PureComponent {
2020-03-25 03:08:43 +00:00
2020-03-31 17:04:50 +01:00
static propTypes = {
inputRef: PropTypes.func,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
value: PropTypes.string,
2020-06-17 21:27:58 +01:00
valueMarkdown: PropTypes.string,
2020-03-31 17:04:50 +01:00
onChange: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyUp: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onPaste: PropTypes.func,
2020-04-02 04:17:21 +01:00
small: PropTypes.bool,
2020-03-31 17:04:50 +01:00
}
2020-03-25 03:08:43 +00:00
state = {
2020-03-31 17:04:50 +01:00
editorState: EditorState.createEmpty(compositeDecorator),
2020-06-17 18:25:10 +01:00
plainText: this.props.value,
2020-05-02 07:25:55 +01:00
}
2020-06-17 21:27:58 +01:00
componentDidMount() {
if (this.props.valueMarkdown) {
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))
this.setState({
editorState,
plainText: this.props.value,
})
}
}
2020-06-17 18:25:10 +01:00
componentDidUpdate() {
if (this.state.plainText !== this.props.value) {
let editorState
if (!this.props.value) {
editorState = EditorState.createEmpty(compositeDecorator)
} else {
editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
}
this.setState({
editorState,
plainText: this.props.value,
})
2020-05-15 03:31:24 +01:00
}
}
2020-06-17 18:25:10 +01:00
onChange = (editorState) => {
const content = editorState.getCurrentContent()
const plainText = content.getPlainText('\u0001')
2020-03-25 03:08:43 +00:00
2020-06-17 18:25:10 +01:00
this.setState({ editorState, plainText })
2020-06-12 17:01:54 +01:00
const selectionState = editorState.getSelection()
const selectionStart = selectionState.getStartOffset()
2020-06-17 18:25:10 +01:00
const rawObject = convertToRaw(content)
2020-06-12 17:01:54 +01:00
const markdownString = draftToMarkdown(rawObject, {
2020-06-17 00:44:30 +01:00
escapeMarkdownCharacters: false,
preserveNewlines: false,
2020-06-12 17:01:54 +01:00
remarkablePreset: 'commonmark',
remarkableOptions: {
disable: {
block: ['table']
},
enable: {
inline: ['del', 'ins'],
}
}
2020-06-17 18:25:10 +01:00
})
2020-04-22 06:00:11 +01:00
2020-06-17 18:25:10 +01:00
this.props.onChange(null, plainText, markdownString, selectionStart)
2020-03-31 17:04:50 +01:00
}
focus = () => {
this.textbox.editor.focus()
}
handleKeyCommand = (command) => {
const { editorState } = this.state
const newState = RichUtils.handleKeyCommand(editorState, command)
if (newState) {
this.onChange(newState)
return true
}
return false
}
onTab = (e) => {
const maxDepth = 4
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth))
}
setRef = (n) => {
2020-06-17 18:25:10 +01:00
try {
this.textbox = n
this.props.inputRef(n)
} catch (error) {
//
}
2020-03-25 03:08:43 +00:00
}
render() {
2020-03-31 17:04:50 +01:00
const {
disabled,
placeholder,
onKeyDown,
onKeyUp,
onFocus,
onBlur,
2020-04-02 04:17:21 +01:00
onPaste,
small,
2020-03-31 17:04:50 +01:00
} = this.props
const { editorState } = this.state
2020-04-02 04:17:21 +01:00
const editorContainerClasses = cx({
default: 1,
cursorText: 1,
text: 1,
2020-05-14 07:03:22 +01:00
colorPrimary: 1,
2020-04-29 23:32:49 +01:00
fs16PX: !small,
fs14PX: small,
2020-04-02 04:17:21 +01:00
pt15: !small,
px15: !small,
px10: small,
2020-05-09 03:17:19 +01:00
pb10: !small,
2020-04-02 04:17:21 +01:00
})
2020-03-25 03:08:43 +00:00
return (
2020-04-16 07:00:43 +01:00
<div className={_s.default}>
2020-03-25 03:08:43 +00:00
2020-06-12 17:01:54 +01:00
{
2020-05-01 06:50:27 +01:00
!small &&
<RichTextEditorBar
editorState={editorState}
onChange={this.onChange}
/>
}
2020-03-25 03:08:43 +00:00
2020-03-31 17:04:50 +01:00
<div
onClick={this.focus}
2020-04-02 04:17:21 +01:00
className={editorContainerClasses}
2020-03-31 17:04:50 +01:00
>
<Editor
blockStyleFn={getBlockStyle}
// customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
onTab={this.onTab}
2020-04-16 07:00:43 +01:00
placeholder={placeholder}
2020-03-31 17:04:50 +01:00
ref={this.setRef}
2020-04-16 07:00:43 +01:00
readOnly={disabled}
2020-06-12 17:01:54 +01:00
onBlur={onBlur}
onFocus={onFocus}
stripPastedStyles
2020-03-31 17:04:50 +01:00
/>
</div>
2020-03-25 03:08:43 +00:00
</div>
)
}
2020-04-16 07:00:43 +01:00
}