Angular Installation No error, but does not work

[KunLee]

Hi,

I am trying to use quill-blot-formatter2 into my angular 19 project. But it does not work.

"quill": "^2.0.3",
"@enzedonline/quill-blot-formatter2": "^2.3.0",

In my component, register code and quill setup is like below.

import Quill from 'quill';
import ImageDropAndPaste from 'quill-image-drop-and-paste';
import BlotFormatter2 from '@enzedonline/quill-blot-formatter2'

Quill.register('modules/blotFormatter2', BlotFormatter2);
Quill.register('modules/imageDropAndPaste', ImageDropAndPaste);


this.quillEditor = new Quill(this.editorElement.nativeElement, {
      theme: 'snow',
      placeholder: 'Write your content here...',
      modules: {
        toolbar: {
          container: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline'],
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
            ['image'], 
            ['clean'],
          ],
          imageResize: {}, 
          handlers: {
            image: () => {
              const input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.setAttribute('accept', 'image/*');
              input.click();
    
              input.onchange = () => {
                const file = input.files?.[0];
                if (!file) return;
    
                const reader = new FileReader();
                reader.onload = () => {
                  const base64Image = reader.result as string;
                  const range = this.quillEditor.getSelection();
                  this.quillEditor.insertEmbed(range?.index || 0, 'image', base64Image);
                };
                reader.readAsDataURL(file);
              };
            }
          }
        },
        imageDropAndPaste: {
          handler: (dataUrl: string, type: string) => {
            const range = this.quillEditor.getSelection();
            this.quillEditor.insertEmbed(range!.index, 'image', dataUrl);
          }
        },
        blotFormatter2: {
          video: {
            registerCustomVideoBlot: true
          },
          resize: {
            useRelativeSize: true,
            allowResizeModeChange: true,
            imageOversizeProtection: true
          },
          image: {
            registerImageTitleBlot: true,
            allowCompressor: true,
            compressorOptions: {
              jpegQuality: 0.7,
              maxWidth: 1000
            }
          }
        }
      }
    });

[enzedonline]

Hi. Is that 19.0 or 19.1 Angular that you are using? I see that 19.0 is only compatible with TS >=5.5.0 <5.7.0, this project is using 5.7.3 which would require Angular 19.1.

I'd be surprised if this would cause it to stop working entirely though ... Is there any console error or anything to indicate cause of failure?

Out of interest, try registering with

Quill.register("modules/blotFormatter2", QuillBlotFormatter2.default);

[KunLee]

Hi enzed,
Thanks for replying.
It is 19.1.
"dependencies": {
"@angular/animations": "^19.1.5",
"@angular/cdk": "^19.1.3",
"@angular/common": "^19.1.5",
"@angular/compiler": "^19.1.5",
"@angular/core": "^19.1.5",
"@angular/forms": "^19.1.5",
"@angular/material": "^19.1.3",
"@angular/material-moment-adapter": "^19.1.3",
"@angular/platform-browser": "^19.1.5",
"@angular/platform-browser-dynamic": "^19.1.5",
"@angular/router": "^19.1.5",
"@enzedonline/quill-blot-formatter2": "^2.3.0",
"@microsoft/signalr": "^8.0.7",
"@stripe/stripe-js": "^5.6.0",
"cookie": "^1.0.2",
"moment": "^2.30.1",
"nanoid": "^5.0.8",
"quill": "^2.0.3",
"quill-image-drop-and-paste": "^2.0.1",
"rxjs": "~7.8.0",
"swiper": "^11.2.1",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
}

And I can't register by BlotFormatter2.default, Property 'default' does not exist on type 'typeof BlotFormatter'

import BlotFormatter2 from '@enzedonline/quill-blot-formatter2'

Quill.register('modules/blotFormatter2', BlotFormatter2);
Quill.register('modules/imageDropAndPaste', ImageDropAndPaste);
Quill.register("modules/blotFormatter2", BlotFormatter2.default); // error