Difference of formatting / render between quill-editor and quill-view component

Hi 😃

I’ve got a pretty weird issue and would like to know if you could have some leads on that 😄

You already saw some exemples of what I’m building, with some quill-view to display multiple zones of content and a quill-editor popping on the top of a zone, on click, to modify the content.

My content is stored in DB (legacy) letter by letter with every style attribute attached to it. I made a simple converter to wrap each letters in a span with the relative styling and wrap each sentences in p tags

Something like this :

<p style="text-align: center;">
  <span style="font-size: 35px; color: rgb(115, 115, 115);">H</span>
  <span style="font-size: 35px; color: rgb(115, 115, 115);">E</span>
  <span style="font-size: 35px; color: rgb(115, 115, 115);">L</span>
  <span style="font-size: 35px; color: rgb(115, 115, 115);">L</span>
  <span style="font-size: 35px; color: rgb(115, 115, 115);">0</span>
</p>

What’s nice with quill is that when I open the quill-editor component, the content will be automatically transformed to a nice

<p style="text-align: center;">
  <span style="font-size: 35px; color: rgb(115, 115, 115);">HELLO</span>
</p>

Regrouping all the children element with the same styling together. Neat.

But, it does not seems to make this transform on the quill-view. Or at least it replace things like this :

<p class="ql-align-center">
  <span style="color: rgb(115, 115, 115);">HELLO</span>
</p>

So it transform inline style to classes and remove some of the style. I thought it would be because the quill-view has not access to the modules, but I’ve set the [modules]="modules" on the component.

What’s fun is : when I arrive on the page, the style is broken, then if I open the editor component and modify the content or don’t modify, close, change page and come back to this page, it’s displayed correctly. (By page I don’t mean browser page but in my app I have multiple pages with editable zones)

I tried to trigger manually some quillEditor.clipboard.convert(value) on it but well, with no success from now.

Tried to play around with domSanitizer.sanitize(SecurityContext.HTML, value) too but same result.

If you got some leads on that I’m all ears. Thanks !

[KillerCodeMonkey]

feel free to send me a PR if something is inconsistent between the editor and the view component

[Yexan]

Well not really, I think It might be due to some issues with format registering. It’s the only way I could understand what happen.