Don't use stale readOnly prop. (Fix bug #3321)

[kena0ki]

Is this adding or improving a feature or fixing a bug?

Bug #3321

What's the new behavior?

Even after readOnly is switched from true to false, onChange is called.

Demo after fixed:
https://issue3321-test-slate.netlify.com/examples/read-only
kena0ki@566432e#diff-3377000c0769495e84953bfcdd9bb9fc (Source code)

How does this change work?

In order for onDOMSelectionChange and onDOMBeforeInput to be updated, I added dependencies to the second argument of two useCallback hooks and two useIsomorphicLayoutEffect hooks.

Although dependencies I added to useIsomorphicLayoutEffect hooks is onDOMSelectionChange and onDOMBeforeInput, an undefined variable error occurs if they are at the current location. So I moved them down below where they are defined.

Have you checked that...?

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn fix.)
• The relevant examples still work. (Run examples with yarn start.)

Does this fix any issues or need any specific reviewers?

Fixes: #3321
Reviewers: @ianstormtaylor

[Jmaharman]

I was having a problem with editors having an initial readOnly state of true, then being changed to false, where by the editor was not editable.

This has resolved that and neatly solves any issue of onDOMSelectionChange or onDOMBeforeInput having other dependencies changed in the future without similar issues arising.

[ryanmitts]

This will also provide a resolution to #3412

[ryanmitts]

The debounce for this function will somehow need to be cleared too, otherwise it's possible it memoizes and uses the stale value while it's waiting during debouncing.

[ryanmitts]

This PR will fix that it looks like, so all good if both are merged.

[cameracker]

Thanks for fixing this readonly bug, really appreciate the contribution @kena0ki