Characters are typed twice with both onBeforeChange and onChange

Here’s a fiddle illustrating the behaviour: https://jsfiddle.net/4890mgej/4/

Code:

class MyEditor extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      state: Plain.deserialize('')
    }
  }

  onChange(state) {
    this.setState({ state })
  }
  
  onBeforeChange(state) {
  	return state.transform().setBlock('paragraph').apply()
  }

  render() {
    return (
      <Editor
        placeholder="Enter some text..."
        onChange={state => this.onChange(state)}
        onBeforeChange={state => this.onBeforeChange(state)}
        state={this.state.state}
      />
    )
  }

}

[soulwire]

I have a similar use case, where I need to setNodeByKey on a bunch of custom nodes to update their data (either onBeforeChange or onChange) and there are various reasons why a schema rule isn’t well suited. Unfortunately I’m also getting the duplicate text issue when using either callback.

As with @jatins’ example, being able to insert some transformations between when the next document state is computed from inputs and the render happens is occasionally very useful.

If onBeforeChange’s days are numbered, what about an alternative with a more explicit purpose of finalising state—a blunter instrument than a schema rule—which can be used with the understanding that it might cause suboptimal re-renders?

[soulwire]

If you’re not bothered about summoning the dark lord of hacks, something like this could do the job…

const Plugin = (options) => {
  let checksum
  return {
    schema: {
      rules: [
        {
          match: node => node.kind === 'document',
          validate: node => node.data.get('checksum') !== checksum ? node : null,
          normalize: (transform, node) => transform
            .setNodeByKey(node.key, { data: { checksum } })
            .call(transformAllTheThings)
        }
      ]
    },
    onBeforeChange() {
      checksum = Math.floor(Math.random() * 1e16).toString(32)
    }
  }
}

💻 :trollface:

It doesn’t play well with undo/redo though