remove change, fold into editor (#2337)

#### Is this adding or improving a _feature_ or fixing a _bug_?

Improvement / debt.

#### What's the new behavior?

This pull request removes the `Change` object as we know it, and folds all of its behaviors into the new `Editor` controller instead, simplifying a lot of the confusion around what is a "change vs. editor" and when to use which. It makes the standard API a **lot** nicer to use I think.

---

###### NEW

**The `editor.command` and `editor.query` methods can take functions.** Previously they only accepted a `type` string and would look up the command or query by type. Now, they also accept a custom function. This is helpful for plugin authors, who want to accept a "command option", since it gives users more flexibility to write one-off commands or queries. For example a plugin could be passed either:

```js
Hotkey({
  hotkey: 'cmd+b',
  command: 'addBoldMark',
})
```

Or a custom command function:

```js
Hotkey({
  hotkey: 'cmd+b',
  command: editor => editor.addBoldMark().moveToEnd()
})
```

###### BREAKING

**The `Change` object has been removed.** The `Change` object as we know it previously has been removed, and all of its behaviors have been folded into the `Editor` controller. This includes the top-level commands and queries methods, as well as methods like `applyOperation` and `normalize`. _All places that used to receive `change` now receive `editor`, which is API equivalent._

**Changes are now flushed to `onChange` asynchronously.** Previously this was done synchronously, which resulted in some strange race conditions in React environments. Now they will always be flushed asynchronously, just like `setState`.

**The `render*` and `decorate*` middleware signatures have changed!** Previously the `render*` and `decorate*` middleware was passed `(props, next)`. However now, for consistency with the other middleware they are all passed `(props, editor, next)`. This way, all middleware always receive `editor` and `next` as their final two arguments.

**The `normalize*` and `validate*` middleware signatures have changed!** Previously the `normalize*` and `validate*` middleware was passed `(node, next)`. However now, for consistency with the other middleware they are all passed `(node, editor, next)`. This way, all middleware always receive `editor` and `next` as their final two arguments.

**The `editor.event` method has been removed.** Previously this is what you'd use when writing tests to simulate events being fired—which were slightly different to other running other middleware. With the simplification to the editor and to the newly-consistent middleware signatures, you can now use `editor.run` directly to simulate events:

```js
editor.run('onKeyDown', { key: 'Tab', ... })
```

###### DEPRECATED

**The `editor.change` method is deprecated.** With the removal of the `Change` object, there's no need anymore to create the small closures with `editor.change()`. Instead you can directly invoke commands on the editor in series, and all of the changes will be emitted asynchronously on the next tick.

```js
editor
  .insertText('word')
  .moveFocusForward(10)
  .addMark('bold')
```

**The `applyOperations` method is deprecated.** Instead you can loop a set of operations and apply each one using `applyOperation`. This is to reduce the number of methods exposed on the `Editor` to keep it simpler.

**The `change.call` method is deprecated.** Previously this was used to call a one-off function as a change method. Now this behavior is equivalent to calling `editor.command(fn)` instead.

---

Fixes: https://github.com/ianstormtaylor/slate/issues/2334
Fixes: https://github.com/ianstormtaylor/slate/issues/2282

docs/walkthroughs/adding-event-handlers.md

@@ -41,7 +41,7 @@ class App extends React.Component {
   }
 
   // Define a new handler which prints the key that was pressed.
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     console.log(event.key)
     return next()
   }
@@ -74,7 +74,7 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     // Return with no changes if the keypress is not '&'
     if (event.key !== '&') return next()
 
@@ -82,7 +82,7 @@ class App extends React.Component {
     event.preventDefault()
 
     // Change the value by inserting 'and' at the cursor's position.
-    change.insertText('and')
+    editor.insertText('and')
     return true
   }
 
@@ -100,7 +100,7 @@ class App extends React.Component {
 
 With that added, try typing `&`, and you should see it suddenly become `and` instead!
 
-This offers a sense of what can be done with Slate's event handlers. Each one will be called with the `event` object, and a `change` object that lets you perform changes to the editor's value. Simple!
+This offers a sense of what can be done with Slate's event handlers. Each one will be called with the `event` object, and the `editor` that lets you perform commands. Simple!
 
 <br/>
 <p align="center"><strong>Next:</strong><br/><a href="./defining-custom-block-nodes.md">Defining Custom Block Nodes</a></p>

docs/walkthroughs/applying-custom-formatting.md

@@ -20,12 +20,12 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (event.key != '`' || !event.ctrlKey) return next()
     event.preventDefault()
-    const isCode = change.value.blocks.some(block => block.type == 'code')
+    const isCode = editor.value.blocks.some(block => block.type == 'code')
 
-    change.setBlocks(isCode ? 'paragraph' : 'code')
+    editor.setBlocks(isCode ? 'paragraph' : 'code')
     return true
   }
 
@@ -40,7 +40,7 @@ class App extends React.Component {
     )
   }
 
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return <CodeNode {...props} />
@@ -63,7 +63,7 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (!event.ctrlKey) return next()
 
     // Decide what to do based on the key code...
@@ -71,15 +71,13 @@ class App extends React.Component {
       // When "B" is pressed, add a "bold" mark to the text.
       case 'b': {
         event.preventDefault()
-        change.addMark('bold')
-        return true
+        editor.addMark('bold')
       }
       // When "`" is pressed, keep our existing code block logic.
       case '`': {
-        const isCode = change.value.blocks.some(block => block.type == 'code')
+        const isCode = editor.value.blocks.some(block => block.type == 'code')
         event.preventDefault()
-        change.setBlocks(isCode ? 'paragraph' : 'code')
-        return true
+        editor.setBlocks(isCode ? 'paragraph' : 'code')
       }
       // Otherwise, let other plugins handle it.
       default: {
@@ -99,7 +97,7 @@ class App extends React.Component {
     )
   }
 
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return <CodeNode {...props} />
@@ -139,20 +137,18 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (!event.ctrlKey) return next()
 
     switch (event.key) {
       case 'b': {
         event.preventDefault()
-        change.toggleMark('bold')
-        return true
+        editor.toggleMark('bold')
       }
       case '`': {
-        const isCode = change.value.blocks.some(block => block.type == 'code')
+        const isCode = editor.value.blocks.some(block => block.type == 'code')
         event.preventDefault()
-        change.setBlocks(isCode ? 'paragraph' : 'code')
-        return true
+        editor.setBlocks(isCode ? 'paragraph' : 'code')
       }
       default: {
         return next()
@@ -173,7 +169,7 @@ class App extends React.Component {
     )
   }
 
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return <CodeNode {...props} />
@@ -183,7 +179,7 @@ class App extends React.Component {
   }
 
   // Add a `renderMark` method to render marks.
-  renderMark = (props, next) => {
+  renderMark = (props, editor, next) => {
     switch (props.mark.type) {
       case 'bold':
         return <BoldMark {...props} />

docs/walkthroughs/defining-custom-block-nodes.md

@@ -20,11 +20,10 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (event.key != '&') return next()
     event.preventDefault()
-    change.insertText('and')
-    return true
+    editor.insertText('and')
   }
 
   render() {
@@ -82,11 +81,10 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (event.key != '&') return next()
     event.preventDefault()
-    change.insertText('and')
-    return true
+    editor.insertText('and')
   }
 
   render() {
@@ -102,7 +100,7 @@ class App extends React.Component {
   }
 
   // Add a `renderNode` method to render a `CodeNode` for code blocks.
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return <CodeNode {...props} />
@@ -133,7 +131,7 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     // Return with no changes if it's not the "`" key with ctrl pressed.
     if (event.key != '`' || !event.ctrlKey) return next()
 
@@ -141,8 +139,7 @@ class App extends React.Component {
     event.preventDefault()
 
     // Otherwise, set the currently selected blocks type to "code".
-    change.setBlocks('code')
-    return true
+    editor.setBlocks('code')
   }
 
   render() {
@@ -156,7 +153,7 @@ class App extends React.Component {
     )
   }
 
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return <CodeNode {...props} />
@@ -191,17 +188,16 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (event.key != '`' || !event.ctrlKey) return next()
 
     event.preventDefault()
 
     // Determine whether any of the currently selected blocks are code blocks.
-    const isCode = change.value.blocks.some(block => block.type == 'code')
+    const isCode = editor.value.blocks.some(block => block.type == 'code')
 
     // Toggle the block type depending on `isCode`.
-    change.setBlocks(isCode ? 'paragraph' : 'code')
-    return true
+    editor.setBlocks(isCode ? 'paragraph' : 'code')
   }
 
   render() {
@@ -215,7 +211,7 @@ class App extends React.Component {
     )
   }
 
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return <CodeNode {...props} />

docs/walkthroughs/saving-and-loading-html-content.md

@@ -264,7 +264,7 @@ class App extends React.Component {
     )
   }
 
-  renderNode = (props, next) => {
+  renderNode = (props, editor, next) => {
     switch (props.node.type) {
       case 'code':
         return (
@@ -286,7 +286,7 @@ class App extends React.Component {
   }
 
   // Add a `renderMark` method to render marks.
-  renderMark = (props, next) => {
+  renderMark = (props, editor, next) => {
     const { mark, attributes } = props
     switch (mark.type) {
       case 'bold':

docs/walkthroughs/using-plugins.md

@@ -22,11 +22,10 @@ class App extends React.Component {
     this.setState({ value })
   }
 
-  onKeyDown = (event, change, next) => {
+  onKeyDown = (event, editor, next) => {
     if (event.key != 'b' || !event.ctrlKey) return next()
     event.preventDefault()
-    change.toggleMark('bold')
-    return true
+    editor.toggleMark('bold')
   }
 
   render() {
@@ -40,7 +39,7 @@ class App extends React.Component {
     )
   }
 
-  renderMark = (props, next) => {
+  renderMark = (props, editor, next) => {
     switch (props.mark.type) {
       case 'bold':
         return <strong {...props.attributes}>{props.children}</strong>
@@ -72,7 +71,7 @@ function MarkHotkey(options) {
 
   // Return our "plugin" object, containing the `onKeyDown` handler.
   return {
-    onKeyDown(event, change, next) {
+    onKeyDown(event, editor, next) {
       // If it doesn't match our `key`, let other plugins handle it.
       if (!event.ctrlKey || event.key != key) return next()
 
@@ -80,8 +79,7 @@ function MarkHotkey(options) {
       event.preventDefault()
 
       // Toggle the mark `type`.
-      change.toggleMark(type)
-      return true
+      editor.toggleMark(type)
     },
   }
 }
@@ -122,7 +120,7 @@ class App extends React.Component {
     )
   }
 
-  renderMark = (props, next) => {
+  renderMark = (props, editor, next) => {
     switch (props.mark.type) {
       case 'bold':
         return <strong>{props.children}</strong>
@@ -167,7 +165,7 @@ class App extends React.Component {
     )
   }
 
-  renderMark = (props, next) => {
+  renderMark = (props, editor, next) => {
     switch (props.mark.type) {
       case 'bold':
         return <strong>{props.children}</strong>