/
Image.js
66 lines (56 loc) · 1.92 KB
/
Image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React, { Component } from 'react'
import { convertFromRaw, EditorState } from 'draft-js'
import Editor, { composeDecorators } from 'draft-js-plugins-editor'
import createImagePlugin from 'draft-js-image-plugin'
import createAlignmentPlugin from 'draft-js-alignment-plugin'
import createFocusPlugin from 'draft-js-focus-plugin'
import createResizeablePlugin from 'draft-js-resizeable-plugin'
import createDndPlugin from 'draft-js-dnd-plugin'
/*
import focusStyles from './Focus.css'
import alignmentStyles from './Alignment.css'
const focusPlugin = createFocusPlugin({ theme: focusStyles })
const alignmentPlugin = createAlignmentPlugin({ theme: alignmentStyles })
*/
import 'draft-js-alignment-plugin/lib/plugin.css'
import 'draft-js-focus-plugin/lib/plugin.css'
const focusPlugin = createFocusPlugin()
const alignmentPlugin = createAlignmentPlugin()
const resizeablePlugin = createResizeablePlugin()
const dndPlugin = createDndPlugin()
const { AlignmentTool } = alignmentPlugin
const decorator = composeDecorators(
resizeablePlugin.decorator,
alignmentPlugin.decorator,
focusPlugin.decorator,
dndPlugin.decorator
)
import { initialState } from './initialState'
const imagePlugin = createImagePlugin({ decorator })
const plugins = [dndPlugin, focusPlugin, alignmentPlugin, resizeablePlugin, imagePlugin]
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='editor' onClick={this.focus}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref={(element) => { this.editor = element; }}
/>
<AlignmentTool />
</div>
</div>
)
}
}