/
index.js
106 lines (94 loc) · 2.82 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, { Component } from 'react';
import Editor, { createWithText } from 'draft-js-plugin-editor';
import hashtagPlugin from 'draft-js-hashtag-plugin';
import stickerPlugin from 'draft-js-sticker-plugin';
import linkifyPlugin from 'draft-js-linkify-plugin';
import historyPlugin from 'draft-js-history-plugin';
import { EditorState } from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import StatePreview from '../StatePreview';
import Hashtag from './Hashtag';
import Link from './Link';
// import Sticker from './Sticker';
// const stickerPluginInstance = stickerPlugin({ stickers, Sticker });
const stickerPluginInstance = stickerPlugin({ stickers, hasRemove: false });
const hashtagPluginInstance = hashtagPlugin({ Hashtag });
const linkifyPluginInstance = linkifyPlugin({ Link });
const historyPluginInstance = historyPlugin();
const { UndoButton, RedoButton } = historyPluginInstance;
const { StickerSelect } = stickerPluginInstance;
const plugins = [
hashtagPluginInstance,
stickerPluginInstance,
linkifyPluginInstance,
];
export default class UnicornEditor extends Component {
state = {
editorState: createWithText('Hello World!', plugins),
showState: false,
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.refs.editor.focus();
};
undo = () => {
this.setState({
editorState: EditorState.undo(this.state.editorState),
});
};
redo = () => {
this.setState({
editorState: EditorState.redo(this.state.editorState),
});
};
toggleShowState = () => {
this.setState({
showState: !this.state.showState,
});
};
render() {
const stateButton = this.state.showState ? styles.pressedStateButton : styles.stateButton;
return (
<div className={ styles.root }>
<div className={ styles.editor } onClick={ this.focus }>
<Editor
editorState={ this.state.editorState }
onChange={ this.onChange }
plugins={ plugins }
spellCheck
className="waaahhh"
ref="editor"
/>
</div>
<div>
<div className={ styles.stickerSelect }>
<StickerSelect editor={ this } />
</div>
<UndoButton
editorState={ this.state.editorState }
onChange={ this.onChange }
/>
<RedoButton
editorState={ this.state.editorState }
onChange={ this.onChange }
/>
<button
className={ stateButton }
onClick={ this.toggleShowState }
>
Toggle State Preview
</button>
</div>
<StatePreview
editorState={ this.state.editorState }
collapsed={ !this.state.showState }
/>
</div>
);
}
}