Changed hotkey for code block in the walkthrough due to lack of support hotkey ⌘-C in Chrome on Mac (#741)

docs/walkthroughs/applying-custom-formatting.md

@@ -28,7 +28,7 @@ class App extends React.Component {
   }
 
   onKeyDown = (event, data, state) => {
-    if (event.which != 192 || !event.metaKey) return
+    if (event.which != 67 || !event.metaKey || !event.altKey) return
     event.preventDefault()
     const isCode = state.blocks.some(block => block.type == 'code')
 
@@ -84,7 +84,8 @@ class App extends React.Component {
           .apply()
       }
       // When "`" is pressed, keep our existing code block logic.
-      case 192: {
+      case 67: {
+        if (!event.altKey) return
         const isCode = state.blocks.some(block => block.type == 'code')
         event.preventDefault()
         return state
@@ -159,7 +160,8 @@ class App extends React.Component {
           .toggleMark('bold')
           .apply()
       }
-      case 192: {
+      case 67: {
+        if (!event.altKey) return
         const isCode = state.blocks.some(block => block.type == 'code')
         event.preventDefault()
         return state

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

@@ -118,7 +118,7 @@ class App extends React.Component {
 }
 ```
 
-Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `⌘-\`` shortcut that does just that:
+Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `⌘-Alt-C` shortcut that does just that:
 
 ```js
 function CodeNode(props) {
@@ -142,7 +142,7 @@ class App extends React.Component {
 
   onKeyDown = (event, data, state) => {
     // Return with no changes if it's not the "`" key with cmd/ctrl pressed.
-    if (event.which != 192 || !event.metaKey) return
+    if (event.which != 67 || !event.metaKey || !event.altKey) return
     
     // Prevent the "`" from being inserted by default.
     event.preventDefault()
@@ -168,9 +168,9 @@ class App extends React.Component {
 }
 ```
 
-Now, if you press `⌘-\``, the block your cursor is in should turn into a code block! Magic!
+Now, if you press `⌘-Alt-C`, the block your cursor is in should turn into a code block! Magic!
 
-But we forgot one thing. When you hit `⌘-\`` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
+But we forgot one thing. When you hit `⌘-Alt-C` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
 
 ```js
 function CodeNode(props) {
@@ -193,7 +193,7 @@ class App extends React.Component {
   }
 
   onKeyDown = (event, data, state) => {
-    if (event.which != 192 || !event.metaKey) return
+    if (event.which != 67 || !event.metaKey || !event.altKey) return
     
     event.preventDefault()
 
@@ -222,7 +222,7 @@ class App extends React.Component {
 }
 ```
 
-And there you have it! If you press `⌘-\`` while inside a code block, it should turn back into a paragraph!
+And there you have it! If you press `⌘-Alt-C` while inside a code block, it should turn back into a paragraph!
 
 <br/>
 <p align="center"><strong>Next:</strong><br/><a href="./applying-custom-formatting.md">Applying Custom Formatting</a></p>

docs/walkthroughs/using-plugins.md

@@ -57,7 +57,7 @@ Let's write a new function, that takes a set of options: the mark `type` to togg
 ```js
 function MarkHotkey(options) {
   // Grab our options from the ones passed in.
-  const { type, code } = options
+  const { type, code, isAltKey = false } = options
 }
 ```
 
@@ -75,7 +75,7 @@ function MarkHotkey(options) {
   return {
     onKeyDown(event, data, state) {
       // Check that the key pressed matches our `code` option.
-      if (!event.metaKey || event.which != code) return
+      if (!event.metaKey || event.which != code || event.altKey != isAltKey) return
 
       // Prevent the default characters from being inserted.
       event.preventDefault()
@@ -148,7 +148,7 @@ Let's add _italic_, `code`, ~~strikethrough~~ and underline marks:
 // Initialize a plugin for each mark...
 const plugins = [
   MarkHotkey({ code: 66, type: 'bold' }),
-  MarkHotkey({ code: 192, type: 'code' }),
+  MarkHotkey({ code: 67, type: 'code', isAltKey: true }),
   MarkHotkey({ code: 73, type: 'italic' }),
   MarkHotkey({ code: 68, type: 'strikethrough' }),
   MarkHotkey({ code: 85, type: 'underline' })
@@ -234,7 +234,7 @@ And now we can make our app code much clearer for the next person who reads it:
 // Use the much clearer key names instead of key codes!
 const plugins = [
   MarkHotkey({ key: 'b', type: 'bold' }),
-  MarkHotkey({ key: '`', type: 'code' }),
+  MarkHotkey({ key: 'c', type: 'code', isAltKey: true }),
   MarkHotkey({ key: 'i', type: 'italic' }),
   MarkHotkey({ key: 'd', type: 'strikethrough' }),
   MarkHotkey({ key: 'u', type: 'underline' })