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

306 lines
7.1 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-03-25 03:08:43 +00:00
import {
2020-06-17 22:29:24 +01:00
getDefaultKeyBinding,
2020-03-25 03:08:43 +00:00
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'
import draftToMarkdown from '../features/ui/util/draft_to_markdown'
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 markdownOptions = {
escapeMarkdownCharacters: false,
preserveNewlines: true,
remarkablePreset: 'commonmark',
remarkableOptions: {
disable: {
inline: ['links'],
block: ['table', 'heading'],
},
enable: {
inline: ['del', 'ins'],
}
}
}
2020-03-31 17:04:50 +01:00
const getBlockStyle = (block) => {
switch (block.getType()) {
case 'blockquote':
return 'RichEditor-blockquote'
default:
return null
}
}
function groupHandleStrategy(contentBlock, callback, contentState) {
findWithRegex(GROUP_HANDLE_REGEX, contentBlock, callback)
}
2020-03-31 17:04:50 +01:00
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.cBrand}
2020-03-31 17:04:50 +01:00
data-offset-key={props.offsetKey}
>
{props.children}
</span>
)
}
const compositeDecorator = new CompositeDecorator([
{
strategy: handleStrategy,
component: HighlightedSpan,
},
{
strategy: hashtagStrategy,
component: HighlightedSpan,
},
{
strategy: urlStrategy,
component: HighlightedSpan,
},
{
strategy: groupHandleStrategy,
component: HighlightedSpan,
},
2020-03-31 17:04:50 +01:00
])
2020-06-18 17:05:24 +01:00
const styleMap = {
'CODE': {
padding: '0.25em 0.5em',
backgroundColor: 'var(--border_color_secondary)',
color: 'var(--text_color_secondary)',
fontSize: 'var(--fs_n)',
},
};
const GROUP_HANDLE_REGEX = /\g\/[\w]+/g
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
class Composer extends React.PureComponent {
2020-03-31 17:04:50 +01:00
2020-03-25 03:08:43 +00:00
state = {
2020-06-17 22:29:24 +01:00
active: false,
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 && this.props.isPro && this.props.isEdit) {
const rawData = markdownToDraft(this.props.valueMarkdown, markdownOptions)
2020-06-17 21:27:58 +01:00
const contentState = convertFromRaw(rawData)
const editorState = EditorState.createWithContent(contentState)
2020-06-18 17:05:24 +01:00
2020-06-17 21:27:58 +01:00
this.setState({
editorState,
plainText: this.props.value,
})
} else if (this.props.value) {
2020-06-18 17:05:24 +01:00
const editorState = EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
2020-06-17 21:27:58 +01:00
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 {
2020-06-18 17:05:24 +01:00
editorState = EditorState.moveFocusToEnd(
EditorState.push(this.state.editorState, ContentState.createFromText(this.props.value))
)
2020-06-17 18:25:10 +01:00
}
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
const blocks = convertToRaw(editorState.getCurrentContent()).blocks
const value = blocks.map(block => (!block.text.trim() && '') || block.text).join('\n')
this.setState({
editorState,
plainText: value,
})
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)
const markdownString = this.props.isPro ? draftToMarkdown(rawObject,markdownOptions) : null
2020-04-22 06:00:11 +01:00
this.props.onChange(null, value, markdownString, selectionStart)
2020-03-31 17:04:50 +01:00
}
2020-06-17 22:29:24 +01:00
handleOnFocus = () => {
document.addEventListener('paste', this.handleOnPaste)
this.setState({ active: true })
this.props.onFocus()
}
handleOnBlur = () => {
document.removeEventListener('paste', this.handleOnPaste, true)
this.setState({ active: false })
this.props.onBlur()
}
2020-03-31 17:04:50 +01:00
focus = () => {
2020-06-17 22:29:24 +01:00
this.textbox.focus()
}
handleOnPaste = (e) => {
if (this.state.active) {
this.props.onPaste(e)
}
}
keyBindingFn = (e) => {
if (e.type === 'keydown') {
this.props.onKeyDown(e)
}
return getDefaultKeyBinding(e)
2020-03-31 17:04:50 +01:00
}
handleKeyCommand = (command) => {
const { editorState } = this.state
const newState = RichUtils.handleKeyCommand(editorState, command)
if (newState) {
this.onChange(newState)
return true
}
return false
}
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,
2020-04-02 04:17:21 +01:00
small,
isPro,
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({
d: 1,
2020-04-02 04:17:21 +01:00
cursorText: 1,
text: 1,
cPrimary: 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 (
<div className={_s.d}>
2020-03-25 03:08:43 +00:00
2020-06-12 17:01:54 +01:00
{
!small && isPro &&
2020-05-01 06:50:27 +01:00
<RichTextEditorBar
editorState={editorState}
onChange={this.onChange}
/>
}
2020-03-25 03:08:43 +00:00
2020-03-31 17:04:50 +01:00
<div
2020-04-02 04:17:21 +01:00
className={editorContainerClasses}
2020-06-18 17:05:24 +01:00
onClick={this.handleOnFocus}
2020-03-31 17:04:50 +01:00
>
<Editor
blockStyleFn={getBlockStyle}
editorState={editorState}
2020-06-18 17:05:24 +01:00
customStyleMap={styleMap}
2020-03-31 17:04:50 +01:00
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
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-17 22:29:24 +01:00
onBlur={this.handleOnBlur}
onFocus={this.handleOnFocus}
keyBindingFn={this.keyBindingFn}
2020-06-12 17:01:54 +01:00
stripPastedStyles
spellCheck
2020-03-31 17:04:50 +01:00
/>
</div>
2020-03-25 03:08:43 +00:00
</div>
)
}
}
Composer.propTypes = {
inputRef: PropTypes.func,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
value: PropTypes.string,
valueMarkdown: PropTypes.string,
onChange: PropTypes.func,
onKeyDown: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onPaste: PropTypes.func,
small: PropTypes.bool,
isPro: PropTypes.bool,
isEdit: PropTypes.bool,
}
export default Composer