Rich Text Editor (WIP) x4

This commit is contained in:
mgabdev
2020-06-17 16:27:58 -04:00
parent 1a506327db
commit b93ecc7095
11 changed files with 384 additions and 10 deletions

View File

@@ -4,9 +4,11 @@ import {
CompositeDecorator,
RichUtils,
convertToRaw,
convertFromRaw,
ContentState,
} from 'draft-js'
import draftToMarkdown from '../features/ui/util/draft-to-markdown'
import markdownToDraft from '../features/ui/util/markdown-to-draft'
import { urlRegex } from '../features/ui/util/url_regex'
import classNames from 'classnames/bind'
import RichTextEditorBar from './rich_text_editor_bar'
@@ -81,6 +83,7 @@ export default class Composer extends PureComponent {
disabled: PropTypes.bool,
placeholder: PropTypes.string,
value: PropTypes.string,
valueMarkdown: PropTypes.string,
onChange: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyUp: PropTypes.func,
@@ -95,6 +98,24 @@ export default class Composer extends PureComponent {
plainText: this.props.value,
}
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,
})
}
}
componentDidUpdate() {
if (this.state.plainText !== this.props.value) {
let editorState