UNPKG

similiquedicta

Version:
53 lines (46 loc) 1.43 kB
import React, { Component } from 'react'; import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor'; import createToolbarPlugin from '@draft-js-plugins/static-toolbar'; import editorStyles from './editorStyles.module.css'; const staticToolbarPlugin = createToolbarPlugin(); const { Toolbar } = staticToolbarPlugin; const plugins = [staticToolbarPlugin]; const text = 'The toolbar above the editor can be used for formatting text, as in conventional static editors …'; export default class SimpleStaticToolbarEditor extends Component { state = { editorState: createEditorStateWithText(text), }; onChange = (editorState) => { this.setState({ editorState, }); }; componentDidMount() { // fixing issue with SSR https://github.com/facebook/draft-js/issues/2332#issuecomment-761573306 // eslint-disable-next-line react/no-did-mount-set-state this.setState({ editorState: createEditorStateWithText(text), }); } focus = () => { this.editor.focus(); }; render() { return ( <div> <div className={editorStyles.editor} onClick={this.focus}> <Editor editorState={this.state.editorState} onChange={this.onChange} plugins={plugins} ref={(element) => { this.editor = element; }} /> <Toolbar /> </div> </div> ); } }