add preventDefault to all examples

docs/walkthroughs/adding-event-handlers.md

@@ -88,15 +88,15 @@ class App extends React.Component {
     // Return with no changes if it's not the "7" key with shift pressed.
     if (event.which != 55 || !event.shiftKey) return
       
-    // Otherwise, transform the state by inserting "and" at the cursor's position.
+    // Prevent the ampersand character from being inserted.
+    event.preventDefault()
+
+    // Transform the state by inserting "and" at the cursor's position.
     const newState = state
       .transform()
       .insertText('and')
       .apply()
     
-    // Prevent the ampersand character from being inserted.
-    event.preventDefault()
-    
     // Return the new state, which will cause the editor to update it.
     return newState
   }

docs/walkthroughs/applying-custom-formatting.md

@@ -29,6 +29,7 @@ class App extends React.Component {
 
   onKeyDown = (event, data, state) => {
     if (event.which != 192 || !event.metaKey) return
+    event.preventDefault()
     const isCode = state.blocks.some(block => block.type == 'code')
 
     return state
@@ -77,6 +78,7 @@ class App extends React.Component {
     switch (event.which) {
       // When "B" is pressed, add a "bold" mark to the text.
       case 66: {
+        event.preventDefault()
         return state
           .transform()
           .addMark('bold')
@@ -85,6 +87,7 @@ class App extends React.Component {
       // When "`" is pressed, keep our existing code block logic.
       case 192: {
         const isCode = state.blocks.some(block => block.type == 'code')
+        event.preventDefault()
         return state
           .transform()
           .setBlock(isCode ? 'paragraph' : 'code')
@@ -151,6 +154,7 @@ class App extends React.Component {
 
     switch (event.which) {
       case 66: {
+        event.preventDefault()
         return state
           .transform()
           .toggleMark('bold')
@@ -158,6 +162,7 @@ class App extends React.Component {
       }
       case 192: {
         const isCode = state.blocks.some(block => block.type == 'code')
+        event.preventDefault()
         return state
           .transform()
           .setBlock(isCode ? 'paragraph' : 'code')

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

@@ -25,6 +25,8 @@ class App extends React.Component {
   onKeyDown = (event, data, state) => {
     if (event.which != 55 || !event.shiftKey) return
       
+    event.preventDefault()
+
     const newState = state
       .transform()
       .insertText('and')
@@ -91,6 +93,8 @@ class App extends React.Component {
   onKeyDown = (event, data, state) => {
     if (event.which != 55 || !event.shiftKey) return
       
+    event.preventDefault()
+
     const newState = state
       .transform()
       .insertText('and')
@@ -140,6 +144,9 @@ class App extends React.Component {
     // Return with no changes if it's not the "`" key with cmd/ctrl pressed.
     if (event.which != 192 || !event.metaKey) return
     
+    // Prevent the "`" from being inserted by default.
+    event.preventDefault()
+
     // Otherwise, set the currently selected blocks type to "code".
     return state
       .transform()
@@ -188,6 +195,8 @@ class App extends React.Component {
   onKeyDown = (event, data, state) => {
     if (event.which != 192 || !event.metaKey) return
     
+    event.preventDefault()
+
     // Determine whether any of the currently selected blocks are code blocks.
     const isCode = state.blocks.some(block => block.type == 'code')
 

docs/walkthroughs/using-plugins.md

@@ -31,6 +31,7 @@ class App extends React.Component {
 
   onKeyDown = (event, data, state) => {
     if (!event.metaKey || event.which != 66) return
+    event.preventDefault()
     return state
       .transform()
       .toggleMark('bold')
@@ -76,6 +77,9 @@ function MarkHotkey(options) {
       // Check that the key pressed matches our `code` option.
       if (!event.metaKey || event.which != code) return
 
+      // Prevent the default characters from being inserted.
+      event.preventDefault()
+
       // Toggle the mark `type`.
       return state
         .transform()
@@ -214,6 +218,7 @@ function MarkHotkey(options) {
     onKeyDown(event, data, state) {
       // Change the comparison to use the key name.
       if (!event.metaKey || keycode(event.which) != key) return
+      event.preventDefault()
       return state
         .transform()
         .toggleMark(type)