diff --git a/docs/walkthroughs/applying-custom-formatting.md b/docs/walkthroughs/applying-custom-formatting.md index ab0ed22b4..1fd9e4aa6 100644 --- a/docs/walkthroughs/applying-custom-formatting.md +++ b/docs/walkthroughs/applying-custom-formatting.md @@ -23,7 +23,7 @@ class App extends React.Component { } onKeyDown = (event, change) => { - if (event.key != '`' || !event.metaKey) return + if (event.key != '`' || !event.ctrlKey) return event.preventDefault() const isCode = change.value.blocks.some(block => block.type == 'code') @@ -51,7 +51,7 @@ class App extends React.Component { } ``` -And now, we'll edit the `onKeyDown` handler to make it so that when you press `⌘-B`, it will add a "bold" mark to the currently selected text: +And now, we'll edit the `onKeyDown` handler to make it so that when you press `control-B`, it will add a "bold" mark to the currently selected text: ```js class App extends React.Component { @@ -65,7 +65,7 @@ class App extends React.Component { } onKeyDown = (event, change) => { - if (!event.metaKey) return + if (!event.ctrlKey) return // Decide what to do based on the key code... switch (event.key) { @@ -105,7 +105,7 @@ class App extends React.Component { } ``` -Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting `⌘-B`, you won't notice any change. That's because we haven't told Slate how to render a "bold" mark. +Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting `control-B`, you won't notice any change. That's because we haven't told Slate how to render a "bold" mark. For every mark type you want to add to your schema, you need to give Slate a "renderer" for that mark, just like nodes. So let's define our `bold` mark: @@ -136,7 +136,7 @@ class App extends React.Component { } onKeyDown = (event, change) => { - if (!event.metaKey) return + if (!event.ctrlKey) return switch (event.key) { case 'b': { @@ -182,7 +182,7 @@ class App extends React.Component { } ``` -Now, if you try selecting a piece of text and hitting `⌘-B` you should see it turn bold! Magic! +Now, if you try selecting a piece of text and hitting `control-B` you should see it turn bold! Magic!

Next:
Using Plugins

diff --git a/docs/walkthroughs/using-plugins.md b/docs/walkthroughs/using-plugins.md index e30213106..70f6bece8 100644 --- a/docs/walkthroughs/using-plugins.md +++ b/docs/walkthroughs/using-plugins.md @@ -25,7 +25,7 @@ class App extends React.Component { } onKeyDown = (event, change) => { - if (event.key != 'b' || !event.metaKey) return + if (event.key != 'b' || !event.ctrlKey) return event.preventDefault() change.toggleMark('bold') return true @@ -74,7 +74,7 @@ function MarkHotkey(options) { return { onKeyDown(event, change) { // Check that the key pressed matches our `key` option. - if (!event.metaKey || event.key != key) return + if (!event.ctrlKey || event.key != key) return // Prevent the default characters from being inserted. event.preventDefault()