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

241 lines
5.2 KiB
JavaScript

import {
Editor,
EditorState,
CompositeDecorator,
RichUtils,
convertToRaw,
convertFromRaw
} from 'draft-js'
import { draftToMarkdown } from 'markdown-draft-js'
// import draftToMarkdown from 'draftjs-to-markdown'
import { urlRegex } from '../features/ui/util/url_regex'
import classNames from 'classnames/bind'
import RichTextEditorBar from './rich_text_editor_bar'
import '!style-loader!css-loader!draft-js/dist/Draft.css'
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;
const mapDispatchToProps = (dispatch) => ({
})
export default
@connect(null, mapDispatchToProps)
class Composer extends PureComponent {
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,
small: PropTypes.bool,
}
state = {
markdownText: '',
plainText: '',
editorState: EditorState.createEmpty(compositeDecorator),
}
static getDerivedStateFromProps(nextProps, prevState) {
// if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
// return {
// fetched: true
// }
// }
return null
}
// EditorState.createWithContent(ContentState.createFromText('Hello'))
onChange = (editorState) => {
this.setState({ editorState })
const content = this.state.editorState.getCurrentContent();
const text = content.getPlainText('\u0001')
const selectionState = editorState.getSelection()
const selectionStart = selectionState.getStartOffset()
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)
}
// **bold**
// *italic*
// __underline__
// ~strikethrough~
// # title
// > quote
// `code`
// ```code```
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
}
handleOnTogglePopoutEditor = () => {
//
}
onTab = (e) => {
const maxDepth = 4
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth))
}
setRef = (n) => {
this.textbox = n
}
render() {
const {
inputRef,
disabled,
placeholder,
autoFocus,
value,
onChange,
onKeyDown,
onKeyUp,
onFocus,
onBlur,
onPaste,
small,
} = this.props
const { editorState } = this.state
const editorContainerClasses = cx({
default: 1,
cursorText: 1,
text: 1,
colorPrimary: 1,
fs16PX: !small,
fs14PX: small,
pt15: !small,
px15: !small,
px10: small,
pt5: small,
pb5: small,
pb10: !small,
})
return (
<div className={_s.default}>
{ /** : todo : */
!small &&
<RichTextEditorBar
editorState={editorState}
onChange={this.onChange}
/>
}
<div
onClick={this.focus}
className={editorContainerClasses}
>
<Editor
blockStyleFn={getBlockStyle}
// customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
onTab={this.onTab}
placeholder={placeholder}
ref={this.setRef}
readOnly={disabled}
/>
</div>
</div>
)
}
}