mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-21 22:45:18 +02:00
Code Issues Releases Wiki Activity

Examples: Use ctrlKey instead of metaKey (for Windows compatibility) (#1601)

Browse Source 
* Change example to ctrlKey for Windows

metaKey + B is already mapped to a shortcut on Windows, so this example fails (tested on Chrome, Edge)

* Docs: use ctrlKey to allow custom formatting example to work on Windows

* Docs: change metaKey examples from other walkthroughs for consistency

* Docs: change a missed metaKey
This commit is contained in:
Nicholas
2018-02-07 06:09:49 +08:00
committed by Ian Storm Taylor
parent 329787a07a
commit 3fa2fde253
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/walkthroughs/applying-custom-formatting.md
View File

@@ -23,7 +23,7 @@ class App extends React.Component {
} }
onKeyDown = (event, change) => { onKeyDown = (event, change) => {
if (event.key != '`' || !event.metaKey) return if (event.key != '`' || !event.ctrlKey) return
event.preventDefault() event.preventDefault()
const isCode = change.value.blocks.some(block => block.type == 'code') 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 ```js
class App extends React.Component { class App extends React.Component {
@@ -65,7 +65,7 @@ class App extends React.Component {
} }
onKeyDown = (event, change) => { onKeyDown = (event, change) => {
if (!event.metaKey) return if (!event.ctrlKey) return
// Decide what to do based on the key code... // Decide what to do based on the key code...
switch (event.key) { 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: 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) => { onKeyDown = (event, change) => {
if (!event.metaKey) return if (!event.ctrlKey) return
switch (event.key) { switch (event.key) {
case 'b': { 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!
<br/> <br/>
<p align="center"><strong>Next:</strong><br/><a href="./using-plugins.md">Using Plugins</a></p> <p align="center"><strong>Next:</strong><br/><a href="./using-plugins.md">Using Plugins</a></p>

4
docs/walkthroughs/using-plugins.md
View File

@@ -25,7 +25,7 @@ class App extends React.Component {
} }
onKeyDown = (event, change) => { onKeyDown = (event, change) => {
if (event.key != 'b' || !event.metaKey) return if (event.key != 'b' || !event.ctrlKey) return
event.preventDefault() event.preventDefault()
change.toggleMark('bold') change.toggleMark('bold')
return true return true
@@ -74,7 +74,7 @@ function MarkHotkey(options) {
return { return {
onKeyDown(event, change) { onKeyDown(event, change) {
// Check that the key pressed matches our `key` option. // 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. // Prevent the default characters from being inserted.
event.preventDefault() event.preventDefault()