Show Bubble theme toolbar on single click

[bleutzinn]

For the user to see the Bubble theme toolbar he has to select text first.
However, to insert an image and to 'turn on' bold or italic writing there is no need to select text.

So, I think, it would be nice to have an option to let the toolbar show on a single click in the editor area.

[jhchen]

I'm not sure the insert image button inside the Bubble tooltip is a good user experience for the reason you mentioned. The problem with opening on click is users typically click around while reading and the persistent tooltip would be very annoying. I would suggest adding external UI like Medium does for inserting images.

[mauteri]

Old and closed topic, but thought I'd share my two cents. Though I agree a single left click can be a strange UI, I feel a single right-click would be a good UI for a such a think... That said this is the solution I came up with. There might be a better one for doing the same thing, but I'm still pretty new to Quill...

$(document).on('contextmenu', '#quill-editor-container', function(e) {
	e.preventDefault();
	quill.theme.tooltip.edit();
	quill.theme.tooltip.show();
	return false;
});

I found quill.theme.tooltip.edit() puts the Bubble editor in the correct position, while quill.theme.tooltip.show() showed it in the right context. If there's a better way, would love to know it. Thx!

[madhavan-sundararaj]

Thanks for the solution @mauteri, how to make editor show the selected formats?

[yaayes]

Thank you @mauteri helped me a lot, one thing to note, when the editor is empty and you try to add a link without any selected text things go weird! the placeholder persists and console shows errors, in addition to your solution we should add a custom handler for link and prevent applying link format on nothing!

handlers: {
  link: value => {
    // Prevent links format when no text is selected
    let range = this.quill.getSelection();
    if(!range || range.length == 0){
      return;
    }

    if (!value) {
      this.quill.format("link", false);
    } else {
      this.quill.theme.tooltip.edit();
    }
  }
}

[mkamalkayani]

The Bubble theme can be extended to achieve the single click behaviour. Here is how I have implemented it.

const BubbleTheme = Quill.import('themes/bubble');

class ExtendBubbleTheme extends BubbleTheme {
  constructor(quill, options) {
    super(quill, options);

    quill.on('selection-change', range => {
      if (range) {
        quill.theme.tooltip.show();
        quill.theme.tooltip.position(quill.getBounds(range));
      }
    });
  }
}

Quill.register('themes/bubble', ExtendBubbleTheme);