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

update docs for removal of commands

Browse Source
This commit is contained in:
Ian Storm Taylor
2019-12-19 14:34:34 -05:00
parent 922d03e006
commit dae32cd473
6 changed files with 122 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
docs/walkthroughs/05-executing-commands.md
View File

@@ -76,7 +76,7 @@ const App = () => {
It has the concept of "code blocks" and "bold formatting". But these things are all defined in one-off cases inside the `onKeyDown` handler. If you wanted to reuse that logic elsewhere you'd need to extract it.
We can instead implement these domain-specific concepts by extending the `editor` object:
We can instead implement these domain-specific concepts by creating custom functions:
```js
// Create a custom editor plugin function that will augment the editor.
@@ -154,39 +154,6 @@ Since we haven't yet defined (or overridden) any commands in `withCustom`, nothi
However, now we can start extract bits of logic into reusable methods:
```js
const withCustom = editor => {
const { exec } = editor
editor.exec = command => {
// Define a command to toggle the bold formatting.
if (command.type === 'toggle_bold_mark') {
const isActive = CustomEditor.isBoldMarkActive(editor)
Transforms.setNodes(
editor,
{ bold: isActive ? null : true },
{ match: n => Text.isText(n), split: true }
)
}
// Define a command to toggle the code block formatting.
else if (command.type === 'toggle_code_block') {
const isActive = CustomEditor.isCodeBlockActive(editor)
Transforms.setNodes(
editor,
{ type: isActive ? null : 'code' },
{ match: n => Editor.isBlock(editor, n) }
)
}
// Otherwise, fall back to the built-in `exec` logic for everything else.
else {
exec(command)
}
}
return editor
}
// Define our own custom set of helpers for active-checking queries.
const CustomEditor = {
isBoldMarkActive(editor) {
@@ -205,10 +172,28 @@ const CustomEditor = {
return !!match
},
toggleBoldMark(editor) {
const isActive = CustomEditor.isBoldMarkActive(editor)
Transforms.setNodes(
editor,
{ bold: isActive ? null : true },
{ match: n => Text.isText(n), split: true }
)
},
toggleCodeBlock(editor) {
const isActive = CustomEditor.isCodeBlockActive(editor)
Transforms.setNodes(
editor,
{ type: isActive ? null : 'code' },
{ match: n => Editor.isBlock(editor, n) }
)
},
}
const App = () => {
const editor = useMemo(() => withCustom(withReact(createEditor())), [])
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -243,13 +228,13 @@ const App = () => {
switch (event.key) {
case '`': {
event.preventDefault()
editor.exec({ type: 'toggle_code_block' })
CustomEditor.toggleCodeBlock(editor)
break
}
case 'b': {
event.preventDefault()
editor.exec({ type: 'toggle_bold_mark' })
CustomEditor.toggleBoldMark(editor)
break
}
}
@@ -264,7 +249,7 @@ Now our commands are clearly defined and you can invoke them from anywhere we ha
```js
const App = () => {
const editor = useMemo(() => withCustom(withReact(createEditor())), [])
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -292,7 +277,7 @@ const App = () => {
<button
onMouseDown={event => {
event.preventDefault()
editor.exec({ type: 'toggle_bold_mark' })
CustomEditor.toggleBoldMark(editor)
}}
>
Bold
@@ -300,7 +285,7 @@ const App = () => {
<button
onMouseDown={event => {
event.preventDefault()
editor.exec({ type: 'toggle_code_block' })
CustomEditor.toggleCodeBlock(editor)
}}
>
Code Block
@@ -318,13 +303,13 @@ const App = () => {
switch (event.key) {
case '`': {
event.preventDefault()
editor.exec({ type: 'toggle_code_block' })
CustomEditor.toggleCodeBlock(editor)
break
}
case 'b': {
event.preventDefault()
editor.exec({ type: 'toggle_bold_mark' })
CustomEditor.toggleBoldMark(editor)
break
}
}
@@ -337,20 +322,4 @@ const App = () => {
That's the benefit of extracting the logic.
And you don't necessarily need to define it all in the same plugin. You can use the plugin pattern to add logic and behaviors to an editor from elsewhere.
For example, you can use the `slate-history` package to add a history stack to your editor, like so:
```js
import { Editor } from 'slate'
import { withHistory } from 'slate-history'
const editor = useMemo(
() => withCustom(withHistory(withReact(createEditor()))),
[]
)
```
And there you have it! We just added a ton of functionality to the editor with very little work. And we can keep all of our command logic tested and isolated in a single place, making the code easier to maintain.
That's why plugins are awesome. They let you get really expressive while also making your codebase easier to manage. And since Slate is built with plugins as a primary consideration, using them is dead simple!