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

merge

Browse Source
This commit is contained in:
Sunny Hirai
2021-04-01 18:13:48 -07:00
parent 8b44646fa7 7ab63d803a
commit a47c35cd95
45 changed files with 733 additions and 911 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/walkthroughs/03-defining-custom-elements.md
View File

@@ -1,4 +1,4 @@
# Defining Custom Block Nodes
# Defining Custom Elements
In our previous example, we started with a paragraph, but we never actually told Slate anything about the `paragraph` block type. We just let it use its internal default renderer, which uses a plain old `<div>`.
@@ -114,7 +114,7 @@ const DefaultElement = props => {
}
```
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 `` Ctrl-` `` 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 ``Ctrl-``` shortcut that does just that:
```jsx
// Import the `Editor` and `Transforms` helpers from Slate.
@@ -172,9 +172,9 @@ const DefaultElement = props => {
}
```
Now, if you press `` Ctrl-` `` the block your cursor is in should turn into a code block! Magic!
Now, if you press ``Ctrl-``` the block your cursor is in should turn into a code block! Magic!
But we forgot one thing. When you hit `` Ctrl-` `` 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 ``Ctrl-``` 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:
```jsx
const App = () => {
@@ -220,4 +220,4 @@ const App = () => {
}
```
And there you have it! If you press `` Ctrl-` `` while inside a code block, it should turn back into a paragraph!
And there you have it! If you press ``Ctrl-``` while inside a code block, it should turn back into a paragraph!