Quill: Select Embeds

[w00fz]

Is it possible to select embeds? I'm looking to allow for an image embed to be selected in order to trigger the attributes configuration changes.
Like for text where the formats get highlighted in the toolbar and you are able to toggle them, I'd like to be able to do the same for images (or any other core/custom embeds) so that I can, for instance, change the source or other properties like alt text and the like.

[DanielHaroldLane]

Yes you can. It'll take a bit of a hack but it can be done.

When instantiating Quill, you can assign custom handlers to blots. So upon instantiating Quill, define a custom handler something like this:

var modules = { toolbar: { handlers: {image: function(image){ //use standard js selection APIs to get a fragment here and whatever it is you need to do }}}};

My example is by no means complete but I have done something similar.

[w00fz]

Yah I am already extending the image handler but I guess I haven't figured out how to select the embed. Is what you are saying to basically add a JS event listener to the click of the embed and then act on it?

I guess I could do that but I was wondering if there were some Quill internal APIs for dealing with it.

[benbro]

As @CapTec said, you can use toolbar handlers.
What do you mean by 'select the embed'?
Something like the 'link' embed where clicking on a link let you edit it?

[jkirkwood]

I think what @w00fz is referring to is the ability to select an image that is already in the editor by clicking on it.

Right now when you click on an image in the editor the selection range does not change. You have to drag the cursor across the image for it to be selected. I would like the editor's selection range to encompass the image with just a single click.

@w00fz did you figure out a way to do this? I'm thinking a click event handler needs to implemented in an extended Image blot. But then how do you communicate this action back up to quill in order to change the selection range via the API?

[w00fz]

That's exactly what I meant. I haven't looked any further unfortunately, but I really hoped this would be easier.

[jkirkwood]

Ok, I think I figured something out:

const ImageBlot = Quill.import('formats/image');
const Parchment = Quill.import('parchment');

this.quill.root.addEventListener('click', (ev) => {
  let image = Parchment.find(ev.target);

  if (image instanceof ImageBlot) {
    this.quill.setSelection(image.offset(this.quill.scroll), 1, 'user');
  }
});

[jhchen]

This appears to be addressed by @jkirkwood . Thanks for the help!