diff --git a/docs/walkthroughs/applying-custom-formatting.md b/docs/walkthroughs/applying-custom-formatting.md index bf610ca2c..f791fc7d5 100644 --- a/docs/walkthroughs/applying-custom-formatting.md +++ b/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 diff --git a/docs/walkthroughs/defining-custom-block-nodes.md b/docs/walkthroughs/defining-custom-block-nodes.md index 21ca55f3c..c89197f34 100644 --- a/docs/walkthroughs/defining-custom-block-nodes.md +++ b/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!

Next:
Applying Custom Formatting

diff --git a/docs/walkthroughs/using-plugins.md b/docs/walkthroughs/using-plugins.md index 25034a8a9..575a43fa4 100644 --- a/docs/walkthroughs/using-plugins.md +++ b/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' })