constructor(props) {
super(props)
this.state = {}
this.tmp = {}
this.tmp.updates = 0
this.tmp.resolves = 0
// Resolve the plugins and create a stack and schema from them.
const plugins = this.resolvePlugins(props.plugins, props.schema)
const stack = Stack.create({ plugins })
const schema = Schema.create({ plugins })
this.state.schema = schema
this.state.stack = stack
// Run `onChange` on the passed-in value because we need to ensure that it
// is normalized, and queue the resulting change.
const change = props.value.change()
stack.run('onChange', change, this)
this.queueChange(change)
this.state.value = change.value
// Create a bound event handler for each event.
EVENT_HANDLERS.forEach(handler => {
this[handler] = (...args) => {
this.onEvent(handler, ...args)
}
})
}
componentWillReceiveProps = (props) => {
let { schema, stack } = this
// Increment the updates counter as a baseline.
this.tmp.updates++
// If the plugins or the schema have changed, we need to re-resolve the
// plugins, since it will result in a new stack and new validations.
if (props.plugins != this.props.plugins || props.schema != this.props.schema) {
const plugins = this.resolvePlugins(props.plugins, props.schema)
stack = Stack.create({ plugins })
schema = Schema.create({ plugins })
this.setState({ schema, stack })
// Increment the resolves counter.
this.tmp.resolves++
// If we've resolved a few times already, and it's exactly in line with
// the updates, then warn the user that they may be doing something wrong.
if (this.tmp.resolves > 5 && this.tmp.resolves == this.tmp.updates) {
logger.warn('A Slate <Editor> is re-resolving `props.plugins` or `props.schema` on each update, which leads to poor performance. This is often due to passing in a new `schema` or `plugins` prop with each render by declaring them inline in your render function. Do not do this!')
}
}
// Run `onChange` on the passed-in value because we need to ensure that it
// is normalized, and queue the resulting change.
const change = props.value.change()
stack.run('onChange', change, this)
this.queueChange(change)
this.setState({ value: change.value })
}
schema: create('Schema', function (v) {
return slate.Schema.isSchema(v);
}),
schema: create('Schema', v => Schema.isSchema(v)),
module.exports = function(plugin, change) {
const schema = Slate.Schema.create(plugin.schema);
return change
.normalize(schema);
};