Slate Debugging Tips

This document is a result of the task for allowing a user to type in the middle of inserter shortcuts. It required a lot of Slate debugging, so it might be useful to have some of the debugging approaches used for future tasks that require a fair amount of Slate work.

Zero-width spaces

Zero-width spaces are put at both the beginning and the end of Slate Inline nodes. They are rendered so the selection can still be placed at the beginning/end of Inline nodes. Some cases where these spaces have been known to cause trouble are:

• Copying/pasting
• Selection manipulation after operations on nodes
• Arrow key navigation within the Inline

To debug some of the issues we had with zero-width spaces, we instead rendered the key of the Text node containing the zero-width space into the editor instead of nothing. This proved to be useful to visualize where these spaces actually are and how they change over the course of different operations. To make this change, change line line 148 of /src/lib/slate/components/leaf.js from

return <span data-slate-zero-width>{space}</span>

to

return <span data-slate-zero-width>{node.key}</span>

This is an example of what the editor could look like after this change:

Transforms

A Slate Transform is used to apply a series of operations to either the Selection or the Document. When handling any type of programatic manipulation of the Slate DOM, a Transform is probably used. Two useful debugging things we found with transforms were:

• Logging transform.state. This is the State that will be set in the editor after transform.apply() is called. This can be useful for seeing what the Slate DOM will look like before the operations are actually finished
• Logging transform.operations. This can be useful for seeing which operations are actually chained onto the Transform, and what their respective inverses are.

Inspecting the Slate Document

Many cases might arise during debugging where seeing the nodes in the document could be useful. The Slate Document has a tree-like structure, e.g.

| Document
|--- Block
|------- Text
|------- Text
|--- Block
|------- Text
|------- Inline
|------- Text
|---------- Text
|------- Text
|------- Inline
|---------- Text
|------- Text
|--- Block
|------- Text
|--- ...

Sometimes, it might be useful to inspect the Document in this native tree structure. To do so, log state.document.toJSON().nodes in the console to get the hierarchy.

If the tree structure is not important, here is a recursive function to get all the nodes in the Document all into one flattened array:

function getAllNodes(nodes) {
    let allNodes = [];
    nodes.forEach(node => {
        allNodes.push(node);
        if (node.nodes) {
            allNodes = allNodes.concat(getAllNodes(node.nodes));
        }
    });
    return allNodes;
}
// Usage
getAllNodes(state.document.toJSON().nodes); // state is the Slate State object