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
|
import React, { Fragment, PureComponent } from 'react';
import { convertFromRaw, EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import draftToMarkdown from 'draftjs-to-markdown';
import EditorStyle from 'ba-styles/TextEditor.scss';
import 'ba-styles/vendors/react-draft-wysiwyg/react-draft-wysiwyg.css';
import { Grid, Typography } from '@material-ui/core';
const content = {
blocks: [{
key: '637gr',
text: 'Lorem ipsum dolor sit amet 😀',
type: 'unstyled',
depth: 0,
inlineStyleRanges: [],
entityRanges: [],
data: {}
}],
entityMap: {}
};
class Wysiwyg extends PureComponent {
constructor(props) {
super(props);
const contentBlock = convertFromRaw(content);
if (contentBlock) {
const editorState = EditorState.createWithContent(contentBlock);
this.state = {
editorState,
};
}
}
onEditorStateChange = editorState => {
this.setState({
editorState,
});
};
render() {
const { editorState } = this.state;
return (
<Fragment>
<Grid
container
alignItems="flex-start"
justify="space-around"
direction="row"
spacing={3}
>
<Grid item xs={12}>
<Editor
editorState={editorState}
editorClassName={EditorStyle.TextEditor}
toolbarClassName={EditorStyle.ToolbarEditor}
onEditorStateChange={this.onEditorStateChange}
/>
</Grid>
<Grid item md={4} xs={12}>
<Typography variant="button">JSON Result :</Typography>
<textarea
className={EditorStyle.textPreview}
disabled
value={JSON.stringify(editorState, null, 4)}
/>
</Grid>
<Grid item md={4} xs={12}>
<Typography variant="button">HTML Result :</Typography>
<textarea
className={EditorStyle.textPreview}
disabled
value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
/>
</Grid>
<Grid item md={4} xs={12}>
<Typography variant="button">Markdown Result :</Typography>
<textarea
className={EditorStyle.textPreview}
disabled
value={editorState && draftToMarkdown(convertToRaw(editorState.getCurrentContent()))}
/>
</Grid>
</Grid>
</Fragment>
);
}
}
export default Wysiwyg;
|
