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

Use mark functions for docs and examples (#5441)

Browse Source 
When documenting how to apply character-level styling, use `addMark` and `removeMark` instead of `setNodes`. This avoids new users creating code that only works in the simplest cases.

Similarly, update the Hovering Toolbar example to apply marks instead of setting nodes.

This change was prompted by a discussion on Slack where the developer was disappointed that `markableVoid` did not appear to be working. The problem was they were using `setNodes` to apply Marks, and did not use the same `match` function that `addMark` uses.
This commit is contained in:
Brian Bucknam
2023-06-12 15:08:10 -07:00
committed by GitHub
parent a94d64ec09
commit 5eb589dbbb
5 changed files with 36 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/walkthroughs/04-applying-custom-formatting.md
View File

@@ -98,13 +98,7 @@ const App = () => {
// When "B" is pressed, bold the text in the selection.
case 'b': {
event.preventDefault()
Transforms.setNodes(
editor,
{ bold: true },
// Apply it to text nodes, and split the text node up if the
// selection is overlapping only part of it.
{ match: n => Text.isText(n), split: true }
)
Editor.addMark(editor, 'bold', true)
break
}
}
@@ -115,9 +109,11 @@ const App = () => {
}
```
Unlike the code format from the previous step, which is a block-level format, bold is a character-level format. Slate manages text contained within blocks (or any other element) using "leaves". Slate's character-level formats/styles are called "marks". Adjacent text with the same marks (styles) applied will be grouped within the same "leaf". When we use `addMark` to add our bold mark to the selected text, Slate will automatically break up the "leaves" using the selection boundaries and produce a new "leaf" with the bold mark added.
Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting `Ctrl-B`, you won't notice any change. That's because we haven't told Slate how to render a "bold" mark.
For every format you add, Slate will break up the text content into "leaves", and you need to tell Slate how to read it, just like for elements. So let's define a `Leaf` component:
For every format you add, you need to tell Slate how to render it, just like for elements. So let's define a `Leaf` component:
```jsx
// Define a React component to render leaves with bold text.
@@ -189,11 +185,7 @@ const App = () => {
case 'b': {
event.preventDefault()
Transforms.setNodes(
editor,
{ bold: true },
{ match: n => Text.isText(n), split: true }
)
Editor.addMark(editor, 'bold', true)
break
}
}