Wrap editor editor in additonal div with quill v2.x

[thomasgebets]

I'd like to wrap the editor in it's own div to being able to have max-height on the ql.container and hide overflow of the resizor module but at the same time show the bubble toolbar, even if it overflows. As i saw, some of the QuillViewHTMLComponent is deprecated. Is there an alternative for v2. and onwards? Thanks a lot for all the great work!!

[KillerCodeMonkey]

just use the quill-view component. the view-html component was just a hacky alternative to not init a real quill instance to show the html.

But since quill v2 and using getSemanticHTML some formats are not working anymore just using innerHTML.

The part with the additional div i do not really get. sorry :D

[thomasgebets]

Thanks for the quick reply, i think i misunderstood the purpose of the ViewComponent here - my issue is that if i use the quill editor with bubble toolbar together with the image resizor module and want to limit the max-height, i always end up in trouble. Either the bubble toolbar will be cut of at the container border or the resize selector will overflow. I wrote a hacky workaround custom module with MutationObserver to check whether the resize selector is visible and then change the overflow but this method seems iffy.

My idea was to wrap the ql-editor element and the ql-tooltip element in separate divs to set one container to overflow: hidden and the other to overflow: visible

Thanks! :)

[KillerCodeMonkey]

But this additional wrapping needs to be done in quilljs i guess. since the logic is there how those nodes are created and nested

[KillerCodeMonkey]

maybe you can achieve something when just creating your own theme extending the bubble theme? https://github.com/slab/quill/blob/5d752e3fa8155a9b1ea1ddd99a9ae2d9a04f0ade/packages/quill/src/themes/bubble.ts

[thomasgebets]

Thanks for the hints, i guess i'll stay with the current approach sind i would need to wrap both editor and toolbar to make it work. Then it might not be enough to adapt the theme..

Another thing that came to my mind regarding the image resizor - shouldn't the resize selector vanish if you click somewhere else on the page? Currently it only vanishes if you press somewhere within the editor. I can also create a new issue in the image resizor topic. :)

[KillerCodeMonkey]

image resizor would be a better place. but keep in mind this project there only exists because it has blocked other users toupgrade to quill v2. And i will not invest that much time in it.

so feel free instead of creating issues. create prs with possible solutions ;-)

[thomasgebets]

Alright, thanks - i'll have a look at it tomorrow and PR if possible :)

[KillerCodeMonkey]

i guess it is a little bit harder to implement it, because if you put the listener on "body" you need to check, if the element that was clicked, is an image and is inside the current editor, which will be hard to check, because the clicks in quilljs are bubbling. i guess that is why the click listener is only on the current editor element.

BTW: closed for ngx-quill repo

[thomasgebets]

Hm, that would make sense, we will have a look in the next weeks :) At least the border should vanish if there is some scroll event in the current editor (currently will stay at the same place while the picture moves..)

Thanks for carrying! :)

[thomasgebets]

Hm i found a method quill.hasFocus that correctly will throw me a boolean on focus/blur - i guess this could be useful?

EDIT: ah but it doesn't recognize the resizor as part of the editor :/

[KillerCodeMonkey]

I do not know if this works better than in quill v1. There were some issues when clicking an input or Button Element outside of the editor, Focus was true in that case