Quill: Get the index position based on the element

[lughino]

I'm trying to create an image editing capabilities.
The scenario is this: if the user clicks on the image inside editor appears a modal where you can change the title and the image size.
The problem is that I do not have the correct index of where the image that the user wants to modify.
If I take the range from getSelection(true) method I take the position of the cursor.
How can I take the correct position starting from the element?

Steps for Reproduction

1. go to codepen
2. write something
3. insert image
4. position cursor at the start
5. go to console, range index refer to cursor

Platforms: all

Version: 1.1.4

[RobAley]

I have the same question (I think). I have a custom inline format (although this applies to the standard formats like bold). If a user applies the format to a range, and then decides they want to remove it from that range, I want them to be able to click anywhere in the range (and not have to manually select the whole range exactly), click a button and then my code identifies what the range should be and formatText(....false) to remove the style.

I have managed to get the node/element & blot corresponding to the current selection thus

var my_node = quill.selection.getNativeRange().start.node;
var my_blot = Parchment.find(my_node);

which I think is where Lughino is at (he knows which element he wants to work with). But I don't know how to get the index of the start of that node/blot so that I can do

quill.formatText(start,my_blot.length(),'my_format', false);

to remove the inline blot/format.

[jhchen]

Unofficially at the moment, you can do something like this from an event handler:

function handler(event) {
  let blot = Parchment.find(event.target);
  let index = blot.offset(quill.scroll);
}

The reason I say unofficially is because quill.scroll is not documented, and the variable name or visibility may change in the future (though none is planned). But find and offset are both part of Parchment's API. There may be an official API for Quill in the future for this use case as well.

[gztchan]

For now, it should be quill.root or quill.container, right?

[jhchen]

Not quill.root is the DOM node, quill.container is the DOM parent of quill.root and elements not just the editor part but any for modules like the clipboard. quill.scroll is the blot counterpart of quill.root (Parchment.find(quill.root) === quill.scroll).

[Nomia]

@jhchen is Parchment a global variable or imported object,
How can i import Parchment, thx, cannot find in the doc

[Nomia]

I found the usage in the js file under node_modules/quill/blots folder

import Parchment from 'parchment'

[KamilOcean]

Hey, guys, my dears. I specially found this issue to save time for somebody. You should know, If you use Quill develop version, than this doesn't work: let blot = Parchment.find(event.target);

_Actually newest Parchment even can't import in this way_

And now just use Quill.find(event.target). You should invoke the static method find of quill. It means, firstly you should import Quill. In result your code will be like this:

import Quill from 'quill'
...
function handler(event) {
  let blot = Quill.find(event.target);
  let index = blot.offset(quill.scroll);
}

I spend all day to find out the solution. I hope it'll help someone.