question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Catching blot clicks (on selection-change) in readonly editor?

See original GitHub issue

I’ve got a Blot where I catch clicks using on('selection-change') and offer to change that blot with a menu. I’d now like to make the editor readonly, apart from changes made by the clicks on those blots. But if it’s readonly, on('selection-change') is never hit, since source === "user".

You can “reproduce” this by doing quill.disable() on quilljs.com and trying to edit a link, which also seems to use on('selection-change').

Is there a way to have a “readonly-light”, where users can’t modify text by typing, but they can by clicking on blots? I see there is this function

https://github.com/quilljs/quill/blob/131db2b98d1fcabf8586ecd1b493345ea2bb1002/core/quill.js#L431

which never emits anything if the editor is disabled and source is user, so I’m guessing there’s nothing implemented to do what I want using selection-change. But maybe there’s a different way I could get what I want?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

7reactions
jhchencommented, Feb 1, 2018

If your goal is to find the blot would something like this work:

static create() {
  let node = super.create();
  node.addEventListener('click', function(e) {
    // e.target should always be node since it is attached to node
    let blot = Quill.find(node);
    // Do what you want with blot
  });
  // ...
}
1reaction
unhammercommented, Feb 1, 2018

I was unsure if just the blot element would have enough info to safely remove/unwrap the blot, or change the text contents in it, but after looking through https://github.com/quilljs/parchment/#blots I see I can use Quill.find(node).offset(quill.scroll) to get the the beginning/offset, and Quill.find(node).length()) to get the length, so I believe that gives me all the information I need 😃

Thanks! I’ll close this then; using a normal DOM click event seems like a better solution than a “partial readonly” state.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Events Available for TinyMCE | Docs
List of common editor events. ... Click the event name for details (links open MDN Web Docs). ... The available modes are “design”...
Read more >
Bypass read only cells in DataGridView when pressing TAB key
Overriding the SelectionChanged event is the right approach. ... Optionally override WndProc to filter mouse clicks on readonly cells. (See DataGridView.
Read more >
Canceling DataGridView Selection Change - MSDN - Microsoft
I want to be able to cancel a row selection in a DataGridView under certain circumstances but there doesn't seem to be an...
Read more >
Selection and Block Selection - Editor View Features
Block selections can be made via the mouse or the keyboard. To make a block selection with the mouse, hold the Alt key,...
Read more >
API - Quill Rich Text Editor
text-change; selection-change; editor-change; off; on; once ... Note even when Quill is empty, there is still a blank line in the editor, so...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found