UNPKG

similiquedicta

Version:
131 lines (114 loc) 3.07 kB
import React, { Component } from 'react'; import { convertFromRaw, EditorState } from 'draft-js'; import Editor, { composeDecorators } from '@draft-js-plugins/editor'; import createImagePlugin from '@draft-js-plugins/image'; import createAlignmentPlugin from '@draft-js-plugins/alignment'; import createFocusPlugin from '@draft-js-plugins/focus'; import createResizeablePlugin from '@draft-js-plugins/resizeable'; import createBlockDndPlugin from '@draft-js-plugins/drag-n-drop'; import createDragNDropUploadPlugin from '@draft-js-plugins/drag-n-drop-upload'; import editorStyles from './editorStyles.module.css'; import mockUpload from './mockUpload'; const focusPlugin = createFocusPlugin(); const resizeablePlugin = createResizeablePlugin(); const blockDndPlugin = createBlockDndPlugin(); const alignmentPlugin = createAlignmentPlugin(); const { AlignmentTool } = alignmentPlugin; const decorator = composeDecorators( resizeablePlugin.decorator, alignmentPlugin.decorator, focusPlugin.decorator, blockDndPlugin.decorator ); const imagePlugin = createImagePlugin({ decorator }); const dragNDropFileUploadPlugin = createDragNDropUploadPlugin({ handleUpload: mockUpload, addImage: imagePlugin.addImage, }); const plugins = [ dragNDropFileUploadPlugin, blockDndPlugin, focusPlugin, alignmentPlugin, resizeablePlugin, imagePlugin, ]; /* eslint-disable */ const initialState = { entityMap: { 0: { type: 'IMAGE', mutability: 'IMMUTABLE', data: { src: '/images/canada-landscape-small.jpg', }, }, }, blocks: [ { key: '9gm3s', text: 'You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins.', type: 'unstyled', depth: 0, inlineStyleRanges: [], entityRanges: [], data: {}, }, { key: 'ov7r', text: ' ', type: 'atomic', depth: 0, inlineStyleRanges: [], entityRanges: [ { offset: 0, length: 1, key: 0, }, ], data: {}, }, { key: 'e23a8', text: 'See advanced examples further down …', type: 'unstyled', depth: 0, inlineStyleRanges: [], entityRanges: [], data: {}, }, ], }; /* eslint-enable */ export default class CustomImageEditor extends Component { state = { editorState: EditorState.createWithContent(convertFromRaw(initialState)), }; onChange = (editorState) => { this.setState({ editorState, }); }; 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; }} /> <AlignmentTool /> </div> </div> ); } }