-
Notifications
You must be signed in to change notification settings - Fork 31
Open
Description
Hi,
I am not able to make draft-js-emoji-picker-plugin work:
import React, { Component } from 'react'
import { render } from 'react-dom' // eslint-disable-line no-unused-vars
import Editor, { composeDecorators } from 'draft-js-plugins-editor'
import { EditorState, convertFromRaw, convertToRaw } from 'draft-js'
import { fromJS } from 'immutable';
/* Emoji plugin */
import createEmojiPlugin from 'draft-js-emoji-plugin'
import emojiPickerPlugin from 'draft-js-emoji-picker-plugin'
import 'draft-js-emoji-plugin/lib/plugin.css'
const emojiPlugin = createEmojiPlugin()
// const { EmojiSuggestions } = emojiPlugin
const decorator = composeDecorators(
// resizeablePlugin.decorator,
)
/* Toolbar */
import createToolbarPlugin from 'last-draft-js-toolbar-plugin'
import 'last-draft-js-toolbar-plugin/lib/plugin.css'
const toolbarPlugin = createToolbarPlugin()
const { Toolbar } = toolbarPlugin
/* Side Toolbar */
import createSidebarPlugin from 'last-draft-js-sidebar-plugin'
import 'last-draft-js-sidebar-plugin/lib/plugin.css'
const sidebarPlugin = createSidebarPlugin()
const { Sidebar } = sidebarPlugin
/* init the plugins */
const plugins = [
emojiPlugin,
emojiPickerPlugin,
toolbarPlugin,
sidebarPlugin,
]
/* init the state, either from raw, html or text */
import { raw } from './initialState/raw'
/* from raw */
const content = convertFromRaw(raw)
let STATE = EditorState.createWithContent(content)
export default class Example extends Component {
state = {
editorState: STATE
}
onChange = (editorState) => {
this.setState({ editorState })
let raw = convertToRaw(editorState.getCurrentContent())
this.logState('raw state:', raw)
}
logState (type, raw) {
// console.log(type)
console.log(JSON.stringify(raw))
}
focus = () => {
this.editor.focus()
}
render () {
return (
<div>
<div className='editor'>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref={(element) => { this.editor = element }}
/>
<Sidebar />
</div>
</div>
)
}
}
Any thoughts or help is welcome!
Metadata
Metadata
Assignees
Labels
No labels