Quill: Clicking or double clicking image should affect selection

[eamodio]

Currently I find it difficult to position the cursor with images. Clicking on an image in quill doesn't cause the cursor to move (imo it should either move to be after the image -- allowing an easy backspace, or move either before or after depending on where you click). Also you can double-click on text to select it, but double-clicking on an image doesn't do anything. It would be great if both of these issues were addressed.

Steps for Reproduction

1. Place an image in the playground or quilljs.com
2. Click on the image

Expected behavior:

The cursor should move

Actual behavior:

Nothing happens

Platforms:

Chrome (55), macOS Sierra (10.12.2)

Version:

1.1.9

[jhchen]

Quill is not doing anything special for text on click or double click as browsers behave correctly but this is evidently not the case for images. The native selection around images is not even visible in some browsers. I agree this user experience is not ideal and the fix would probably involve adding custom UI for images.

[OlivierNguyen]

Not sure that is a good solution, but I tried something like this (I use it with React, so this code may not be usable in condition):

this.refs.quill.getEditor().addEventListener('dblclick', (ev) => {
      const image = Parchment.find(ev.target);
      if (image.statics.blotName === 'image') {
        const indexSelectedImage = this.refs.quill.getEditor().getIndex(image);
        this.refs.quill.getEditor().setSelection(indexSelectedImage);
      }
    });

[jhchen]

This is fixed in 1.3.0. When you click on an image, the selection will move to the image. Furthermore a class is added to the image with a border.

[sebastiansandqvist]

I'm using 1.3.6. When clicking (or double clicking) an image, the selection doesn't move to the image. Did this fix get reverted?

Update:
I fixed it with the following code, similar to what was posted above.

const ImageBlot = Quill.import('formats/image');
const Parchment = Quill.import('parchment');
// ...
quill.root.addEventListener('dblclick', (e) => {
  const img = Parchment.find(e.target);
  if (img instanceof ImageBlot) {
    quill.setSelection(img.offset(quill.scroll), 1, 'user');
  }
});