Image upload toolbar bug

[cstisa]

The problem seems to be only present in version 2.0.0-rc.2 but not in 1.3.7.

When I click on upload image button, instead of the file explorer, QuillJS opens the same popup as the link upload.

Steps for Reproduction

1. Visit quilljs.com
2. Click on upload image button in the toolbar

Expected behavior:

When clicking on the upload image button in the toolbar, the file explorer pop-up should appear.

Actual behavior: The link upload pop-up appears

Platforms: Tested on Edge, Chrome and Mozilla Each time, the QuillJS upload image button in the toolbar doesn't work in v 2.0.0-rc.2

Version: 2.0.0-rc.2

I don't need to paste some of my code, since this behaviour is happening on the QuillJS website directly.

Does someone has a solution?

[efazenda]

Up this issue

[remyd74]

Maybe use another library ? #Joke

[anisabboud]

I encountered the same issue: When clicking the image button in the toolbar:

• Quill v1.3.7 would open the image upload/selection window, and insert the image into the editor in Base64 format.
• Quill v2.0.0 is opening a text input for URL instead.

Here's a video illustrating the issue (comparing https://quilljs.com vs https://v1.quilljs.com):

https://github.com/quilljs/quill/assets/5672108/37282a24-66f6-4606-96db-2f43cc243aa8

How to revert this behavior? Thank you and congrats on the launch of Quill v2!

[anisabboud]

v1.3.7 handlers: https://github.com/quilljs/quill/blob/0148738cb22d52808f35873adb620ca56b1ae061/themes/base.js#L117-L150

v2.0.0 handlers: https://github.com/quilljs/quill/blob/3454595a2eda53f7990001ec4e0234285ad95f1d/packages/quill/src/themes/base.ts#L191-L219

[anisabboud]

Related pull request ("image selector fix"): https://github.com/quilljs/quill/pull/4120

[anisabboud]

Summarizing the fix suggested in https://github.com/quilljs/quill/pull/4120/files:

Current code

https://github.com/quilljs/quill/blob/3454595a2eda53f7990001ec4e0234285ad95f1d/packages/quill/src/core/quill.ts#L800-L815

Suggested fix by @medi6 https://github.com/quilljs/quill/pull/4120

1. Move const modules ... after the if
2. Replace each modules inside the if with options.modules (5 occurrences)

Result

  // Special case toolbar shorthand
  if (
    options.modules != null &&
    options.modules.toolbar &&
    options.modules.toolbar.constructor !== Object
  ) {
    options.modules.toolbar = {
      container: options.modules.toolbar,
    };
  }
  const modules: ExpandedQuillOptions['modules'] = merge(
    {},
    expandModuleConfig(quillModuleDefaults),
    expandModuleConfig(themeModuleDefaults),
    expandModuleConfig(options.modules),
  );

Note

In the PR, @medi6 also cloned const userOptions = {...options}; to avoid mutating options directly.

[medi6]

Hi @anisabboud ,

you can fix this by code in your app, also, but it' a temporary solution, waiting for a new release.

     // fix temporaire pour les handlers
    if (this.quillEditor?.theme.modules.toolbar && this.quillEditor?.options.theme) {
      if (this.quillEditor?.theme.modules.toolbar.handlers) {
        Object.keys( (<Toolbar>(<Quill>this.quillEditor).options.theme.DEFAULTS.modules.toolbar).handlers).forEach(format => {
          const handler = (<Toolbar>(<Quill>this.quillEditor).options.theme.DEFAULTS.modules.toolbar).handlers?.[format];
          if (handler) {
            (<Toolbar>(<Quill>this.quillEditor).theme.modules.toolbar).addHandler(format, handler);
          }
        });
      }
    } 

[luin]

Closing with #4120