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?

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?

• javascript
• wysiwyg
• slate.js

1 Answer 1

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!