Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include current node in iterator of node.getClosest #2436

Conversation

Dundercover
Copy link
Contributor

Is this adding or improving a feature or fixing a bug?

Improving a feature

What's the new behavior?

Node methods getClosest, getClosestBlock, getClosestInline and getClosestVoid will now return the current node if it is a match (so it matches the behaviour of the DOM's native Element.closest().

How does this change work?

Add the current node to the list of nodes that will be iterated over in node.getClosest.

Also added some tests for node.getClosest.

Have you checked that...?

  • The new code matches the existing patterns and styles.
  • The tests pass with yarn test.
  • The linter passes with yarn lint. (Fix errors with yarn prettier.)
  • The relevant examples still work. (Run examples with yarn watch.)

Does this fix any issues or need any specific reviewers?

Fixes: #2111

@Dundercover
Copy link
Contributor Author

By the way! Shouldn't getFurthest methods now also include current node?

Copy link
Owner

@ianstormtaylor ianstormtaylor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Dundercover this looks good! Thank so very much for taking the time to do this. I think you're right about furthest—as long as that's what the DOM does, not sure. Would you be willing to add that to this PR?

I'm going to mark this with a new next label since it's breaking, as something to merge in the next breaking change. Thanks!

export const input = (
<value>
<document>
<quote key="a" {...{ className: 'slate-node' }}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why write these like this with the object spreading? Instead of just writing className=? Even better might be to use thing="value" or something more abstract just to avoid confusion with DOM stuff.

<text key="c">one</text>
</paragraph>
</quote>
<paragraph key="d" {...{ className: 'slate-node' }}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also no need to include key= on all elements here. We only need it on the specific node we're targeting in the test itself. That way we reduce maintenance burden.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good!

@Dundercover
Copy link
Contributor Author

@ianstormtaylor I'm actually not aware of a furthest method in DOM land, do you know what you would use for that?

@ianstormtaylor
Copy link
Owner

Ah, I didn't realize there wasn't one. I'd use the same logic—including ancestors and the node itself. And then just search top-down instead of bottom-up.

@ianstormtaylor ianstormtaylor mentioned this pull request Nov 14, 2019
@ianstormtaylor
Copy link
Owner

Fixed by #3093.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

change .getClosest to include the node itself
2 participants