custom button in toolbar and custom handler: unable to connect together

[zeno-mioso]

Hi,

i'm working on a project (Angular 16) and with ngx-quill i'd like to have a function to attach file and render its clickable link in content.
I created a custom handler to manage file upload to backend, but right now i cannot attach it to a custom button in toolbar. I read everything among previous issues and ngx-quill-sample repo, but nothing get me pointed to a solution.

To be more precise, my app.module.ts contains this:

QuillModule.forRoot({
      modules: {
        syntax: false,
      },
      customModules:  [
        {
          implementation: AttachmentHandler,
          path: 'modules/attachmentHandler',
        }
      ],
      suppressGlobalRegisterWarning: false,
    } as QuillConfig)

this is my custom toolbar:

<div quill-editor-toolbar>
    <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
      <button class="ql-attachment" id="attachment">
        <mat-icon>attach_file</mat-icon>
      </button>
    </span>
  </div>

(this also reporting "quill:toolbar ignoring attaching to nonexistent format attachment" in console, but as i read i understood that this is referred to the fact that the button is non-standard for quill)

this is the wrapper of the toolbar:

<quill-editor
              formControlName="update_text"
              [modules]="modules_update"
              (onEditorCreated)="getEditorInstance($event)"
>

that get initiated with:

modules_update: any = {
    syntax: false,
    toolbar: {
      container: "[quill-editor-toolbar]",
    },
    attachmentHandler: {
      upload: async (file: File) => {
       return await lastValueFrom(this.backendSrvc.uploadFile(file)).then( (value: any) => {
          return `${environment.storageUrl}/${value.path}`;
        });
      },
      accepts: ['pdf']
    } as Options
  };

and the relative bootstrapping method, that is correctly triggering:

getEditorInstance(editorInstance: Quill) {

      let attachmentButton = document.querySelector('#attachment');

      attachmentButton?.addEventListener('click', function() {
        console.log('attachmentControl was clicked');
      });

    }

Any suggest that can point me to the solution?

Thanks

[KillerCodeMonkey]

that is a good question. never did it. maybe you find helpful issues at the quilljs repo for it?

Or you can check how other formats are build like the image/link module/format?

[zeno-mioso]

Thanks for you reply,

i already checked quilljs repo but i will try again, just to be sure to not lose everything useful.

Over this, i checked also format builds and I'm almost sure that it is correct: i build it based on other quilljs modules. Not 100% sure... but 99% . I will check it again during the next steps.

Thanks again for you precious time and your precious contribute to the community with this plugin.

[KillerCodeMonkey]

if i follow the quill docs your handler needs to be added under handlers + the name of your format.

https://quilljs.com/docs/modules/toolbar#handlers

so if your format/buttom class name "ql-attachment"
you should configure the handler like

{
  toolbar: {
    container: "[quill-editor-toolbar]",
    handlers: {
      attachment: () => {}
    }
  }
}

[KillerCodeMonkey]

Any updates