Inconsistent quill-view behaviour

[MatteoOstermeier]

First of all, thanks a lot for this great package! I'm experiencing a little issue with the quill view. I'm running ngx-quill 19.0.1 with angular 14.2.12 and ionic 6.4.1 (capacitor).

The root of the problem is that while the quill editor works like a charm the quill view is eating up some html tags - and even doing differently on first load vs. second time the view is opened.

Here is a test content: Quill-Editor:

Quill-View on first load after ionic serve: This is only displayed correctly the first time a quill-view is displayed in the app. If I open another dataset first, it does not display the content correctly (see next point).

Quill-View on any subsequent load:

At some stage, quill-view is removing the h1 tags. Similar things also happen with line breaks.

Any idea on how I can fix this?

Tanks a lot!

[KillerCodeMonkey]

Nope never had such an issue and I can not image why the quill view should behave different when loading a second or third time.

In my demo repo it is working. Maybe you can check it out and create a demo repo for the problem.

Another thing is: is it a quilljs issue or an issue with the ngx-quill quill-view component.

MatteoOstermeier @.***> schrieb am Di., 3. Jan. 2023, 20:53:

First of all, thanks a lot for this great package! I'm experiencing a little issue with the quill view. I'm running ngx-quill 19.0.1 with angular 14.2.12 and ionic 6.4.1 (capacitor).

The root of the problem is that while the quill editor works like a charm the quill view is eating up some html tags - and even doing differently on first load vs. second time the view is opened.

Here is a test content: Quill-Editor: [image: image] https://user-images.githubusercontent.com/50016431/210430444-7b14bb97-709d-4d8e-8561-b9479f6aa9ed.png

Quill-View on first load after ionic serve: [image: image] https://user-images.githubusercontent.com/50016431/210430618-762fa0c9-c354-47da-9665-eb0616c39fe9.png This is only displayed correctly the first time a quill-view is displayed in the app. If I open another dataset first, it does not display the content correctly (see next point).

Quill-View on any subsequent load: [image: image] https://user-images.githubusercontent.com/50016431/210430786-b16ce025-17e6-443a-9934-7d7daafa28f0.png

At some stage, quill-view is removing the h1 tags. Similar things also happen with line breaks.

Any idea on how I can fix this?

Tanks a lot!

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill-ionic/issues/45, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YB4FLTQEOHCY5UHXFTWQR7VJANCNFSM6AAAAAATQBBXMU . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[KillerCodeMonkey]

But it seems you have a bunch of js-errors in your browsers js console.

Those js errors can break js execution.

So maybe those things are not rendered correctly.

Bengt Weiße @.***> schrieb am Di., 3. Jan. 2023, 20:57:

Nope never had such an issue and I can not image why the quill view should behave different when loading a second or third time.

In my demo repo it is working. Maybe you can check it out and create a demo repo for the problem.

Another thing is: is it a quilljs issue or an issue with the ngx-quill quill-view component.

MatteoOstermeier @.***> schrieb am Di., 3. Jan. 2023, 20:53:

First of all, thanks a lot for this great package! I'm experiencing a little issue with the quill view. I'm running ngx-quill 19.0.1 with angular 14.2.12 and ionic 6.4.1 (capacitor).

The root of the problem is that while the quill editor works like a charm the quill view is eating up some html tags - and even doing differently on first load vs. second time the view is opened.

Here is a test content: Quill-Editor: [image: image] https://user-images.githubusercontent.com/50016431/210430444-7b14bb97-709d-4d8e-8561-b9479f6aa9ed.png

Quill-View on first load after ionic serve: [image: image] https://user-images.githubusercontent.com/50016431/210430618-762fa0c9-c354-47da-9665-eb0616c39fe9.png This is only displayed correctly the first time a quill-view is displayed in the app. If I open another dataset first, it does not display the content correctly (see next point).

Quill-View on any subsequent load: [image: image] https://user-images.githubusercontent.com/50016431/210430786-b16ce025-17e6-443a-9934-7d7daafa28f0.png

At some stage, quill-view is removing the h1 tags. Similar things also happen with line breaks.

Any idea on how I can fix this?

Tanks a lot!

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill-ionic/issues/45, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YB4FLTQEOHCY5UHXFTWQR7VJANCNFSM6AAAAAATQBBXMU . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[MatteoOstermeier]

Good morning! Thanks a lot for your reply! The errors were actually missing image sources, as I had originally been testing my thumbnail creation functions with weird image types. I can confirm that the same happens without any errors in the console.

The behaviour, though, seems to change if I remove custom css classes from quill-view. For demo, i have added a div showing the real html code to the view.

Test 1: quill-view with custom CSS: Is consistently showing the "wrong" format without the h1 tags.

Test 2: quill-view without custom CSS First time opening the ion-modal:

Second time opening the ion-modal

My Custom CSS is used to modify the size of h1 and h2 tags, margins as well as setting the ngx-quill colours to match the app colour scheme. custom.css.txt

Tiny remark: I've updated ngx-quill to 20.0.1, and angular to 15 but that did not help...

[KillerCodeMonkey]

i guess this is something like a timing problem or maybe even with ionic, because maybe it is rendered during the modal transition.

could you please try to initialize quill-view in ionViewDidEnder?

[MatteoOstermeier]

How can I initialize Quill-View? Sorry, but I'm lacking that.

---

The modal seems to be the problem. I'm currently importing Quill in two locations. One is the app.module.ts, one a shared-components-module.

app.module.ts:

shared-components.module.ts:

Quill view is working like expected when shown on a "normal" page which is importing the SharedComponents Module.

In the modal it's not working. Here's how its opened:

page "my-stories.page" is opening a Modal with a ViewStoryComponent. my-stories.module is importing the SharedComponentsModule. The Same is done with the CreateStoryComponent including the Quill Editor.

The quill view is displayed indirectly: View-story-component.html. Still, the same is done in the working example on the main page.

Story-content-component.html:

I've uploaded the current code to https://beta.1day1story.com/ if that helps...

[KillerCodeMonkey]

just use *ngIf inside of the modal html and set a property to true after ionViewDidEnter was executed.

@Component({ ... })
class Component {
  isEntered = false

  ionViewDidEnter() {
    this.isEntered = true
  }
}

<quill-view *ngIf="isEntered"></quill-view>

[KillerCodeMonkey]

btw: there is also a quill-view-html component, that simply renders the html with some additions for sanitizing and so on.

[MatteoOstermeier]

Good evening! Initializing on DidEnter did not solve the issue. But the quill-view-html works as I'd expect it to do ;)

So thanks a lot!