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

How to select text/node inside block programmatically? #13976

Closed
tonyAndr opened this issue Feb 20, 2019 · 2 comments
Closed

How to select text/node inside block programmatically? #13976

tonyAndr opened this issue Feb 20, 2019 · 2 comments
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.

Comments

@tonyAndr
Copy link

I'm looking for any alternative to TinyMCE's editor.selection.select() functionality or any other way to select DOM node or text by it's position in the document.

In my case: I have a plugin, which shows all links from the article's content in the sidebar panel.
When I click on any of those links, I want it to be selected (highlighted) in the editor.

The problem is, I can't find any documentation about selection functionality in Gutenberg, and standart
window.getSelection/addRange isn't working as expected (it works once, but then there is no way to remove selection - .removeRange / .removeAllRanges or addRange(someNewRange) make no effect when another link clicked in the sidebar).

What is the best way to find a piece of text or DOM node (by selector), which could be in any block and then select it (not a whole block, only particular text/node)?

@ellatrix
Copy link
Member

This is currently not possible with Gutenberg APIs, as the selection state is local to the RichText component. There are plans to move this state to the editor state, which would make it possible to alter it. See also #12002.

I think you could use the browser API as well if you're fine with trying to find the right nodes etc. I'm a bit surprised that it doesn't work. It should work just like user selection. We don't have any logic separating user selection vs selection with the browser API. Maybe I can help more if I see an example in code.

@ellatrix ellatrix added [Type] Enhancement A suggestion for improvement. [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Feb 20, 2019
@mtias
Copy link
Member

mtias commented Aug 30, 2020

@ellatrix can this one be closed?

@ellatrix ellatrix closed this as completed Sep 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants