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

240 lines
5.1 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,
convertFromRaw
2020-03-25 03:08:43 +00:00
} from 'draft-js'
2020-04-22 06:00:11 +01:00
import { draftToMarkdown } from 'markdown-draft-js'
// import draftToMarkdown from 'draftjs-to-markdown'
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)
}
function hashtagStrategy (contentBlock, callback, contentState) {
findWithRegex(HASHTAG_REGEX, contentBlock, callback)
}
function urlStrategy (contentBlock, callback, contentState) {
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,
}
])
const HANDLE_REGEX = /\@[\w]+/g;
const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;
2020-03-25 03:08:43 +00:00
2020-04-02 04:17:21 +01:00
2020-04-11 23:29:19 +01:00
const mapDispatchToProps = (dispatch) => ({
2020-04-02 04:17:21 +01:00
2020-04-11 23:29:19 +01:00
})
2020-04-02 04:17:21 +01:00
export default
2020-04-16 07:00:43 +01:00
@connect(null, mapDispatchToProps)
2020-04-02 04:17:21 +01:00
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,
autoFocus: PropTypes.bool,
value: PropTypes.string,
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-05-02 07:25:55 +01:00
markdownText: '',
plainText: '',
2020-03-31 17:04:50 +01:00
editorState: EditorState.createEmpty(compositeDecorator),
2020-03-25 03:08:43 +00:00
}
2020-05-02 07:25:55 +01:00
static getDerivedStateFromProps(nextProps, prevState) {
// if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
// return {
// fetched: true
// }
// }
return null
}
// EditorState.createWithContent(ContentState.createFromText('Hello'))
2020-03-25 03:08:43 +00:00
onChange = (editorState) => {
this.setState({ editorState })
2020-04-22 06:00:11 +01:00
const content = this.state.editorState.getCurrentContent();
const text = content.getPlainText('\u0001')
2020-04-16 07:00:43 +01:00
const selectionState = editorState.getSelection()
const selectionStart = selectionState.getStartOffset()
2020-03-25 03:08:43 +00:00
2020-04-22 06:00:11 +01:00
const rawObject = convertToRaw(content);
const markdownString = draftToMarkdown(rawObject);
// const markdownString = draftToMarkdown(rawObject, {
// trigger: '#',
// separator: ' ',
// });
console.log("markdownString:", markdownString)
this.props.onChange(null, text, selectionStart, markdownString)
2020-03-31 17:04:50 +01:00
}
2020-05-02 07:25:55 +01:00
// **bold**
// *italic*
// __underline__
// ~strikethrough~
// # title
// > quote
// `code`
// ```code```
2020-04-22 06:00:11 +01:00
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
}
2020-04-16 07:00:43 +01:00
handleOnTogglePopoutEditor = () => {
//
}
2020-03-31 17:04:50 +01:00
onTab = (e) => {
const maxDepth = 4
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth))
}
setRef = (n) => {
this.textbox = n
2020-03-25 03:08:43 +00:00
}
render() {
2020-03-31 17:04:50 +01:00
const {
inputRef,
disabled,
placeholder,
autoFocus,
2020-05-02 07:25:55 +01:00
value,
2020-03-31 17:04:50 +01:00
onChange,
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-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
pt5: small,
pb5: small,
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-05-01 06:50:27 +01:00
{ /** : todo : */
!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-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
}