Update walkthrough docs to use change object instead of state (#1062)

docs/walkthroughs/adding-event-handlers.md

@@ -20,7 +20,7 @@ class App extends React.Component {
     state: initialState
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
@@ -45,12 +45,12 @@ class App extends React.Component {
     state: initialState
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
   // Define a new handler which prints the key code that was pressed.
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     console.log(event.which)
   }
 
@@ -80,11 +80,11 @@ class App extends React.Component {
     state: initialState
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     // Return with no changes if it's not the "7" key with shift pressed.
     if (event.which != 55 || !event.shiftKey) return
 
@@ -92,13 +92,8 @@ class App extends React.Component {
     event.preventDefault()
 
     // Change the state by inserting "and" at the cursor's position.
-    const newState = state
+    change.insertText('and')
-      .change()
+    return true
-      .insertText('and')
-      .apply()
-    
-    // Return the new state, which will cause the editor to update it.
-    return newState
   }
 
   render() {

docs/walkthroughs/applying-custom-formatting.md

@@ -23,19 +23,17 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (event.which != 67 || !event.metaKey || !event.altKey) return
     event.preventDefault()
-    const isCode = state.blocks.some(block => block.type == 'code')
+    const isCode = change.state.blocks.some(block => block.type == 'code')
 
-    return state
+    change.setBlock(isCode ? 'paragraph' : 'code')
-      .change()
+    return true
-      .setBlock(isCode ? 'paragraph' : 'code')
-      .apply()
   }
 
   render() {
@@ -66,11 +64,11 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (!event.metaKey) return
 
     // Decide what to do based on the key code...
@@ -78,20 +76,16 @@ class App extends React.Component {
       // When "B" is pressed, add a "bold" mark to the text.
       case 66: {
         event.preventDefault()
-        return state
+        change.addMark('bold')
-          .change()
+        return true
-          .addMark('bold')
-          .apply()
       }
       // When "`" is pressed, keep our existing code block logic.
       case 67: {
         if (!event.altKey) return
-        const isCode = state.blocks.some(block => block.type == 'code')
+        const isCode = change.state.blocks.some(block => block.type == 'code')
         event.preventDefault()
-        return state
+        change.setBlock(isCode ? 'paragraph' : 'code')
-          .change()
+        return true
-          .setBlock(isCode ? 'paragraph' : 'code')
-          .apply()
       }
     }
   }
@@ -147,29 +141,25 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (!event.metaKey) return
 
     switch (event.which) {
       case 66: {
         event.preventDefault()
-        return state
+        change.toggleMark('bold')
-          .change()
+        return true
-          .toggleMark('bold')
-          .apply()
       }
       case 67: {
         if (!event.altKey) return
-        const isCode = state.blocks.some(block => block.type == 'code')
+        const isCode = change.state.blocks.some(block => block.type == 'code')
         event.preventDefault()
-        return state
+        state.setBlock(isCode ? 'paragraph' : 'code')
-          .change()
+        return true
-          .setBlock(isCode ? 'paragraph' : 'code')
-          .apply()
       }
     }
   }

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

@@ -18,21 +18,17 @@ class App extends React.Component {
     state: initialState
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (event.which != 55 || !event.shiftKey) return
 
     event.preventDefault()
 
-    const newState = state
+    change.insertText('and');
-      .change()
+    return true
-      .insertText('and')
-      .apply()
-    
-    return newState
   }
 
   render() {
@@ -86,21 +82,17 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (event.which != 55 || !event.shiftKey) return
 
     event.preventDefault()
 
-    const newState = state
+    change.insertText('and')
-      .change()
+    return true
-      .insertText('and')
-      .apply()
-    
-    return newState
   }
 
   render() {
@@ -136,11 +128,11 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     // Return with no changes if it's not the "`" key with cmd/ctrl pressed.
     if (event.which != 67 || !event.metaKey || !event.altKey) return
 
@@ -148,10 +140,8 @@ class App extends React.Component {
     event.preventDefault()
 
     // Otherwise, set the currently selected blocks type to "code".
-    return state
+    change.setBlock('code')
-      .change()
+    return true
-      .setBlock('code')
-      .apply()
   }
 
   render() {
@@ -188,24 +178,21 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (event.which != 67 || !event.metaKey || !event.altKey) return
 
     event.preventDefault()
 
     // Determine whether any of the currently selected blocks are code blocks.
-    const isCode = state.blocks.some(block => block.type == 'code')
+    const isCode = change.state.blocks.some(block => block.type == 'code')
 
     // Toggle the block type depending on `isCode`.
-    return state
+    change.setBlock(isCode ? 'paragraph' : 'code')
-      .change()
+    return true
-      .setBlock(isCode ? 'paragraph' : 'code')
-      .apply()
-    
   }
 
   render() {

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

@@ -20,7 +20,7 @@ class App extends React.Component {
     state: Plain.deserialize('')
   }
 
-  onChange(state) {
+  onChange({ state }) {
     this.setState({ state })
   }
 
@@ -238,12 +238,12 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
   // When the document changes, save the serialized HTML to Local Storage.
-  onDocumentChange = (document, state) => {
+  onDocumentChange = (document, { state }) => {
     const string = html.serialize(state)
     localStorage.setItem('content', string)
   }

docs/walkthroughs/saving-to-a-database.md

@@ -22,7 +22,7 @@ class App extends React.Component {
     state: Plain.deserialize(initialContent)
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
@@ -55,7 +55,7 @@ class App extends React.Component {
     state: Plain.deserialize(initialContent)
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
 
     // Save the state to Local Storage.
@@ -92,7 +92,7 @@ class App extends React.Component {
     state: Plain.deserialize(initialContent)
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
 
     const content = Plain.serialize(state)
@@ -128,12 +128,12 @@ class App extends React.Component {
     state: Plain.deserialize(initialContent)
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
   // Pull the saving logic out into the `onDocumentChange` handler.
-  onDocumentChange = (document, state) => {
+  onDocumentChange = (document, { state }) => {
     const content = Plain.serialize(state)
     localStorage.setItem('content', content)
   }
@@ -176,11 +176,11 @@ class App extends React.Component {
     state: Raw.deserialize(initialContent, {terse: true})
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onDocumentChange = (document, state) => {
+  onDocumentChange = (document, { state }) => {
     // Switch to using the Raw serializer.
     const content = JSON.stringify(Raw.serialize(state))
     localStorage.setItem('content', content)

docs/walkthroughs/using-plugins.md

@@ -25,17 +25,15 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
-  onKeyDown = (event, data, state) => {
+  onKeyDown = (event, data, change) => {
     if (!event.metaKey || event.which != 66) return
     event.preventDefault()
-    return state
+    change.toggleMark('bold')
-      .change()
+    return true
-      .toggleMark('bold')
-      .apply()
   }
 
   render() {
@@ -73,7 +71,7 @@ function MarkHotkey(options) {
 
   // Return our "plugin" object, containing the `onKeyDown` handler.
   return {
-    onKeyDown(event, data, state) {
+    onKeyDown(event, data, change) {
       // Check that the key pressed matches our `code` option.
       if (!event.metaKey || event.which != code || event.altKey != isAltKey) return
 
@@ -81,10 +79,8 @@ function MarkHotkey(options) {
       event.preventDefault()
 
       // Toggle the mark `type`.
-      return state
+      change.toggleMark(type)
-        .change()
+      return true
-        .toggleMark(type)
-        .apply()
     }
   }
 }
@@ -121,7 +117,7 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
@@ -170,7 +166,7 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }
 
@@ -215,14 +211,12 @@ function MarkHotkey(options) {
   const { type, key, isAltKey = false } = options
 
   return {
-    onKeyDown(event, data, state) {
+    onKeyDown(event, data, change) {
       // Change the comparison to use the key name.
       if (!event.metaKey || keycode(event.which) != key || event.altKey != isAltKey) return
       event.preventDefault()
-      return state
+      change.toggleMark(type)
-        .change()
+      return true
-        .toggleMark(type)
-        .apply()
     }
   }
 }
@@ -255,7 +249,7 @@ class App extends React.Component {
     }
   }
 
-  onChange = (state) => {
+  onChange = ({ state }) => {
     this.setState({ state })
   }