<Editable>
component.renderElement
prop:🤖 Be sure to mix inprops.attributes
and renderprops.children
in your custom components! The attributes must be added to the top-level DOM element inside the component, as they are required for Slate's DOM helper functions to work. And the children are the actual text content of your document which Slate manages for you automatically.
renderLeaf
prop:renderElement
. Since text formatting tends to be fairly simple, we've opted to ditch the switch
statement and just toggle on/off a few styles instead. (But there's nothing preventing you from using custom components if you'd like!)<strike>
to that text, you might have to rearrange the closing tags yet again. Rendering leaves in Slate is similar—you can't guarantee that even though a word has one type of formatting applied to it that that leaf will be contiguous, because it depends on how it overlaps with other formatting.Range
of the document instead of being associated with a given text node.useSlate
hook.<Toolbar>
uses the useSlate
hook to retrieve the context, it will re-render whenever the editor changes, so that the active state of the buttons stays in sync.