forked from blocks/blocks
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathEditor.js
More file actions
executable file
·78 lines (66 loc) · 1.87 KB
/
Copy pathEditor.js
File metadata and controls
executable file
·78 lines (66 loc) · 1.87 KB
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
import React, { Component } from 'react'
import { Editor } from 'slate-react'
import { ThemeProvider } from 'theme-ui'
import schema from '../lib/schema'
import { deserialize } from '@blocks/serializer'
import { Context } from './context'
import defaultTheme from './theme'
import defaultPlugins from '../plugins'
import defaultBlocks from './blocks'
//import Toolbar from './Toolbar'
const initialValue = '# Welcome to Blocks!'
class BlockEditor extends Component {
constructor(props) {
super(props)
console.log(deserialize(props.initialValue || initialValue))
this.state = {
value: deserialize(props.initialValue || initialValue)
}
}
emitChange = () => {
const { value } = this.state
this.props.onChange({ value })
}
// think this can be a renderEditor plugin
handleChange = ({ value }) => {
this.setState({ value }, this.emitChange)
}
render() {
const { plugins, theme, components } = this.props
const allComponents = {
...defaultBlocks,
...components
}
const context = {
components: allComponents
}
return (
<div style={{ minHeight: '100vh' }}>
<Context.Provider value={context}>
<Editor
{...this.props}
components={allComponents}
theme={theme}
schema={schema}
placeholder="Write some MDX..."
plugins={plugins}
value={this.state.value}
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
onPaste={this.handlePaste}
/>
</Context.Provider>
</div>
)
}
}
BlockEditor.defaultProps = {
components: {},
theme: defaultTheme,
plugins: defaultPlugins,
renderEditor: (props, editor, next) => {
const children = next()
return <ThemeProvider theme={props.theme}>{children}</ThemeProvider>
}
}
export default BlockEditor