2019-10-05 08:44:49 +00:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
|
|
|
|
|
|
import { Value, ValueJSON } from 'slate'
|
|
|
|
|
import { Editor } from 'slate-react'
|
2019-10-13 16:37:56 +00:00
|
|
|
import randomColor from 'randomcolor'
|
2019-10-05 08:44:49 +00:00
|
|
|
|
|
|
|
|
import styled from '@emotion/styled'
|
|
|
|
|
|
|
|
|
|
import ClientPlugin from '@slate-collaborative/client'
|
|
|
|
|
|
|
|
|
|
import defaultValue from './defaultValue'
|
|
|
|
|
|
|
|
|
|
import { Instance, ClientFrame, Title, H4, Button } from './elements'
|
|
|
|
|
|
|
|
|
|
interface ClienProps {
|
|
|
|
|
name: string
|
|
|
|
|
id: string
|
|
|
|
|
slug: string
|
|
|
|
|
removeUser: (id: any) => void
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class Client extends Component<ClienProps> {
|
|
|
|
|
editor: any
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
|
value: Value.fromJSON(defaultValue as ValueJSON),
|
2019-10-13 16:37:56 +00:00
|
|
|
isOnline: false,
|
2019-10-05 08:44:49 +00:00
|
|
|
plugins: []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
2019-10-13 16:37:56 +00:00
|
|
|
const color = randomColor({
|
|
|
|
|
luminosity: 'dark',
|
|
|
|
|
format: 'rgba',
|
|
|
|
|
alpha: 1
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const options = {
|
2019-10-05 08:44:49 +00:00
|
|
|
url: `http://localhost:9000/${this.props.slug}`,
|
|
|
|
|
connectOpts: {
|
|
|
|
|
query: {
|
|
|
|
|
name: this.props.name,
|
|
|
|
|
token: this.props.id,
|
|
|
|
|
slug: this.props.slug
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-10-13 16:37:56 +00:00
|
|
|
annotationDataMixin: {
|
|
|
|
|
name: this.props.name
|
|
|
|
|
},
|
|
|
|
|
cursorStyle: {
|
|
|
|
|
background: color
|
|
|
|
|
},
|
|
|
|
|
caretStyle: {
|
|
|
|
|
background: color
|
|
|
|
|
},
|
|
|
|
|
selectionStyle: {
|
|
|
|
|
background: color.slice(0, -2) + '0.2)'
|
|
|
|
|
},
|
|
|
|
|
renderCursor: data => data.get('name'),
|
|
|
|
|
// renderPreloader: () => <div>PRELOADER!!!!!!</div>,
|
2019-10-05 08:44:49 +00:00
|
|
|
onConnect: this.onConnect,
|
|
|
|
|
onDisconnect: this.onDisconnect
|
2019-10-13 16:37:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const plugin = ClientPlugin(options)
|
2019-10-05 08:44:49 +00:00
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
plugins: [plugin]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { plugins, isOnline, value } = this.state
|
|
|
|
|
const { id, name } = this.props
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Instance online={isOnline}>
|
|
|
|
|
<Title>
|
|
|
|
|
<Head>Editor: {name}</Head>
|
|
|
|
|
<Button type="button" onClick={this.toggleOnline}>
|
|
|
|
|
Go {isOnline ? 'offline' : 'online'}
|
|
|
|
|
</Button>
|
|
|
|
|
<Button type="button" onClick={() => this.props.removeUser(id)}>
|
|
|
|
|
Remove
|
|
|
|
|
</Button>
|
|
|
|
|
</Title>
|
|
|
|
|
<ClientFrame>
|
|
|
|
|
<Editor
|
|
|
|
|
value={value}
|
|
|
|
|
ref={this.ref}
|
|
|
|
|
plugins={plugins}
|
|
|
|
|
onChange={this.onChange}
|
|
|
|
|
/>
|
|
|
|
|
</ClientFrame>
|
|
|
|
|
</Instance>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onChange = ({ value }: any) => {
|
|
|
|
|
this.setState({ value })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onConnect = () => this.setState({ isOnline: true })
|
|
|
|
|
|
|
|
|
|
onDisconnect = () => this.setState({ isOnline: false })
|
|
|
|
|
|
|
|
|
|
ref = node => {
|
|
|
|
|
this.editor = node
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleOnline = () => {
|
|
|
|
|
const { isOnline } = this.state
|
|
|
|
|
const { connect, disconnect } = this.editor.connection
|
|
|
|
|
|
|
|
|
|
isOnline ? disconnect() : connect()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Client
|
|
|
|
|
|
|
|
|
|
const Head = styled(H4)`
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
`
|
