filterDescendants and findDescendant with slate.js

javascript, slate.js, wysiwyg

Solution

Slate.js author here.

You'll like want to do something like:

state.document.getBlocks().find(block => block.text != '')

This will search through the leaf block nodes in the document (in this case your paragraphs, headers, etc.) and find the first one that isn't empty.

The Slate data model is built with Immutable.js, so reading up on how that library works is very helpful for using Slate. In this case `getBlocks()` returns an immutable `List`, which has a `find` method.

Hope that helps!

Problem

I'm working on making a wysiwyg editor using slate.js I'm in a situation where I'm trying to find the first node with text. This picture below shows what I'm talking about: Slate.js find first text pic In my picture, I'd want to find the node that contains "this is my title.", even if there's several empty lines before it. Basically if I have a bunch of text written in the editor, how do I find the first text that's not an empty string? Looking through the docs, I've found the filterDescendants and findDescendants functions which seem to do what I'm looking for. However, I'm unclear how to use them. I've tried something like this: `this.state.state.startBlock.findDescendant((d) => d.text !== "")` But this just returns `null` The docs say that `findDescendant` will "Deeply find a descendant node by iterator", where `iterator` is a function, but there's no examples provided for what sort of function you'd pass here. Does anyone have any ideas or examples?

Original source