slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.89k stars 3.41k forks source link

V2: Format toggling via keyboard is not being reflected in the toolbar #4305

Open juanedi opened 4 months ago

juanedi commented 4 months ago

After upgrading to v2, the toolbar doesn't reflect formats being toggled via the keyboard until the user starts typing.

Steps for Reproduction

  1. Visit quilljs.com
  2. Clear all text in the demo editor
  3. Press CMD+B (or Ctrl+B?) to enable bold formatting without typing anything

Expected behavior: The toolbar does not reflect the new format being enabled. It's only after you start typing that the "bold" button in the toolbar changes to its "enabled" state.

Actual behavior: The toolbar should reflect the enabled format right away, giving feedback to the user and informing them what format will be applies when they write.

This is how pretty much all editors I have used work, and its also how Quill used to work before v2. You can even try the steps for reproduction in https://v1.quilljs.com/ and see that it works differently.

Platforms:

I have observed this in macos using Chrome, Safari and Firefox. Would be surprised if it worked differently in other platforms.

Version:

2.0.2

Worked will in v1.3.7

juanedi commented 4 months ago

FWIW I am currently working around this by overriding the default keybindings, copying their behavior and manually updating the toolbar (which isn't great of course). Something like this:

new Quill(this._quillHost, {
  // ...
  keyboard: {
    bindings: {
      bold: {
        key: 'b',
        shortKey: true,
        handler: function (range, context) {
          this.quill.format('bold', !context.format['bold'], Quill.sources.USER);
          this.quill.getModule("toolbar").update(range);
        }
      }
    }
  }
);