Interface Freezes After Image Upload in Ionic

[mschmermer]

Description: I have encountered a bug in Ionic 7, Angular 16, and ngx-quill 22.1.0, where the interface freezes after uploading an image. This issue occurs when uploading an image using the Quill Editor. While the uploaded image is displayed, the user interface becomes unresponsive, and the entire screen is locked.

Steps to Reproduce the Issue:

Launch the Ionic application with the mentioned versions and configurations. Open the Quill Editor within the application. Click the image upload button and select an image from the gallery. Expected Behavior: The selected image should be successfully displayed in the Quill Editor, and the user interface should continue to respond to user input, allowing other elements in the application to be interacted with.

Observed Behavior: After uploading an image, the image is displayed in the Quill Editor, but the interface freezes, and no other elements can be interacted with. The application becomes unresponsive.

Additional Information: It is worth noting that this issue does not occur when I use the camera module and then load an image from the gallery. The problem only arises when uploading an image directly from the Quill Editor.

I hope this bug can be addressed promptly as it significantly impacts the usability of the application. If further information or testing is needed, I am available to assist.

Thank you in advance for your support in resolving this issue.

https://github.com/KillerCodeMonkey/ngx-quill/assets/14105293/e57d3c51-4e5f-4d89-ae78-fc64706e4fac

https://github.com/KillerCodeMonkey/ngx-quill/assets/14105293/e21baea4-2f18-4167-b94a-76f3af8c7639

[KillerCodeMonkey]

please provide a stackblitz or repo for minimal reproduction. In general your described behavior does not mean this is a bug of the component. It could be even a native quilljs problem or an issue with our implementation.

[KillerCodeMonkey]

in your first screen recording it looks like the gallery is opened twice.

I would guess that there is a native layer over you app.

Just use remote debugging to check what is blocking the user interaction.

[mschmermer]

In your initial screen recording, it appears that the gallery is being opened twice. I would suspect there might be a native layer on top of your app. Simply use remote debugging to check what's blocking the user interaction.

The issue has only occurred since the update from Ionic 5 to 7, Angular 14 to 16, Capacitor 4 to 5, and ngx-quill 19.0.1 to 22.1. It also seems like the gallery dialog isn't properly closing or something is overlaying it. Unfortunately, I don't see any logs or other hints in remote debugging that point to this issue. Everything is functioning correctly in the browser.

the code:

import { Component, Input, ViewChild } from '@angular/core';
import { AlertController, ModalController } from '@ionic/angular';
import { QuillEditorComponent } from 'ngx-quill';

@Component({
  selector: 'app-quill-editor',
  templateUrl: './quill-editor.component.html',
  styleUrls: ['./quill-editor.component.scss'],
})
export class QuillFullEditorComponent {

  maxLength: number = 500000;

  @Input() description: any;
  @ViewChild(QuillEditorComponent) editor: QuillEditorComponent;

  constructor(
    public modalController: ModalController,
    public alertController: AlertController,
  ) { 
  }

  contentChanged(event) {
    if (this.description.length > this.maxLength) {
      this.alertController.create({
        header: 'Maximale Zeichenanzahl erreicht',
        message: 'Die maximale Zeichenanzahl wurde erreicht.',
        cssClass: 'custom-alert danger',
        buttons: ['OK']
      }).then(alert => {
        alert.present();
      });
    }
  }

  Round(): number {
    const x = (this.description.length/this.maxLength)*100;
    return Math.round(x);
  }

  clear() {
    this.editor.quillEditor.setText('');
    this.description = this.editor.quillEditor.getText();
  }

  popoverClose() {
    this.modalController.dismiss({data: this.description});
  }
}

<ion-content>
    <quill-editor style="display: flex;
    flex-flow: column;
    height: 100%;"
    [(ngModel)]="description"
    (onContentChanged)="contentChanged($event)">
    </quill-editor>
</ion-content>
<ion-footer  class="ion-no-border"
    style="bottom:var(--ion-safe-area-bottom, 0px);">

    <p class="limit"> {{Round()}}% der maximalen Zeichen</p>
    <ion-button (click)="popoverClose()" color="danger" expand="block" fill="solid"
    [disabled]="this.description.length > this.maxLength">
        Schließen
    </ion-button>
</ion-footer>

__ app.module.ts

    QuillConfigModule.forRoot({
      format: 'json',
      placeholder: 'Schreibe deinen Text  ...',
      modules: {
        syntax: false,
        toolbar: [
          ['bold', 'italic', 'underline'],        // toggled buttons
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],      
          [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
          [{ 'align': [] }],
          ['clean'],                                         // remove formatting button
          ['link', 'image']                         // link and image, video
        ]
      }
    }),

Please let me know if you need further assistance with this problem.

[KillerCodeMonkey]

i will not debug your code. :)

so in your case i would try to just upgrade ngx-quill and angular as far as i can without touching the other parts.

In general there are no changes in ngx-quill in the latest major versions except support of newer angular versions.

please just try the ngx-quill online demo when selecting images everthing is working. For me on android it is working.

And like i said just debug you code/html and check javascript console, if you find some hints, what is failing.

or share a reproduction repo.

[mschmermer]

You dont need to debug my Code there is nothing special as you can see :D

The error only occurs after updating all the packages:

ionic 5 -> 7 angular 14 -> 16 capacitor 4 -> 5 quill 19 -> 21

And yes, there might be something in the native layer causing the issue. The error only occurs in iOS; I can successfully test it on Android or in the browser.

No logs are displayed in the iOS emulator after the call, so there's nothing to find there for now.

[KillerCodeMonkey]

you should... because the issue section on repositories is not there that the maintainer of a lib is checking or debugging problems user have with their implementation.

So check if you get js errors in our console when you get stuck in the ui. do not upgrade all deps at once. Check if file picking is working with my online demo.... And provide a reproduction example.

if you are repeating again what you have done, i will just close the issue and you can try your luck asking at stack overflow if someone is solving your problems