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 <#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 > <#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!