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

add leaf-based selection change methods #1915

inkubux opened this issue Jun 19, 2018 · 3 comments

add leaf-based selection change methods #1915

inkubux opened this issue Jun 19, 2018 · 3 comments


Copy link

@inkubux inkubux commented Jun 19, 2018

I want to expand my selection to a leaf but none of the available method on the change object is able target the leaves on a node (or maybe I missed it)

collapseTo{Edge}Of{Direction}Text is collapsing to the start of the text node so naturally I thought that there would be a collapseTo{Edge}Of{Direction}Leaf

I ended up creating my own function to get the range of a leaf to update my selection

I was wondering if there was a better way select a leaf other than calculate his range by adding the length of previous leaves on a text node

Here is a small snippet

const leafIndex = 3 ; //arbitrary leaf index that I want to select
const currentText = value.texts.get(0);
const leafIWantToSelect = value.texts.get(0).getLeaves().get(leafIndex);
const leavesBefore =  value.texts.get(0).getLeaves().slice(0, leafIndex);
const textLengthBeforeLeaf = leavesBefore.reduce((a, leaf) => a + leaf.text.length, 0);

const selection = Range.create({		
  	anchorKey: currentText.key, 
        focusKey: currentText.key, 
        focusOffset: textLengthBeforeLeaf +  leafIWantToSelect.text.length
const next = value.change().select(selection).focus();    

I also have a jsfiddle with the code

[](jsfiddle leaf playground)

Thanks a lof for your help

@ianstormtaylor ianstormtaylor changed the title Leaf selection and range add leaf-based selection change methods Jun 19, 2018

This comment has been minimized.

Copy link

@ianstormtaylor ianstormtaylor commented Jun 19, 2018

@inkubux interesting use case, sounds like a reasonable thing to have to me! I'd accept a PR that implements them similarly to how the Text methods work.


This comment has been minimized.

Copy link

@seanlaff seanlaff commented Nov 11, 2018

I think Im running into a similar problem. I have text nodes that have many leaves (each leaf is a slice of the text that corresponds to a token in a query language).

When the user types, I trigger fuzzy autocompletion- which means I have to replace the content of the leaf with the new text. I couldn't find a good way to create a range around the leaf that I wanted to modify though.

My particular solution was to wrap each leaf with a mark. I added the text and offset to the data attribute on each mark . Then I used mark queries to build the range I needed. Something like editor.value.document.getMarksAtRange(editor.value.selection.toRange())

@ianstormtaylor ianstormtaylor mentioned this issue Nov 6, 2019

This comment has been minimized.

Copy link

@ianstormtaylor ianstormtaylor commented Nov 28, 2019

As of #3093 (which was just merged), I believe this issue is no longer applicable, because a lot has changed. I'm going through and closing out any potential issues that are not out of date with the overhaul. Thanks for understanding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.