mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add multiple Editors example (#6031)
This commit is contained in:
parent
3299db9758
commit
68ceef68e1
22
examples/with-slate/CustomKeygenEditor/index.js
Normal file
22
examples/with-slate/CustomKeygenEditor/index.js
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Plain from 'slate-plain-serializer'
|
||||||
|
import { KeyUtils } from 'slate'
|
||||||
|
import { Editor } from 'slate-react'
|
||||||
|
|
||||||
|
class CustomKeygenEditor extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props)
|
||||||
|
let key = 0
|
||||||
|
const keygen = () => {
|
||||||
|
key += 1
|
||||||
|
return props.uniqueId + key // custom keys
|
||||||
|
}
|
||||||
|
KeyUtils.setGenerator(keygen)
|
||||||
|
this.initialValue = Plain.deserialize(props.content)
|
||||||
|
}
|
||||||
|
render () {
|
||||||
|
return <Editor placeholder='Enter some plain text...' defaultValue={this.initialValue} style={this.props.style} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CustomKeygenEditor
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
import Plain from 'slate-plain-serializer'
|
import Plain from 'slate-plain-serializer'
|
||||||
import { Editor } from 'slate-react'
|
import { Editor } from 'slate-react'
|
||||||
import { KeyUtils } from 'slate'
|
import { KeyUtils } from 'slate'
|
||||||
|
@ -21,11 +22,16 @@ class Index extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<Editor
|
<React.Fragment>
|
||||||
placeholder='Enter some plain text...'
|
<Link href='/multiple'>
|
||||||
value={this.state.value}
|
<a>Go to multiple</a>
|
||||||
onChange={this.onChange}
|
</Link>
|
||||||
/>
|
<Editor
|
||||||
|
placeholder='Enter some plain text...'
|
||||||
|
value={this.state.value}
|
||||||
|
onChange={this.onChange}
|
||||||
|
/>
|
||||||
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
25
examples/with-slate/pages/multiple.js
Normal file
25
examples/with-slate/pages/multiple.js
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import CustomKeygenEditor from './CustomKeygenEditor'
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
'first-editor': 'This example shows how to have multiple instances of the editor.',
|
||||||
|
'second-editor': 'Without a custom key generator, you could not focus here.'
|
||||||
|
}
|
||||||
|
|
||||||
|
class MultipleEditors extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Link href='/'>
|
||||||
|
<a>Go to Home</a>
|
||||||
|
</Link>
|
||||||
|
{Object.keys(content).map((key, idx) => (
|
||||||
|
<CustomKeygenEditor key={idx} uniqueId={key} content={content[key]} style={{ margin: 20 }} />
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MultipleEditors
|
Loading…
Reference in a new issue