search

KillerCodeMonkey / ngx-quill

Angular (>=2) components for the Quill Rich Text Editor
MIT License
1.77k stars 258 forks source link

slow editing after inserting large image #1927

Closed tsg-tthrash closed 1 week ago

tsg-tthrash commented 2 weeks ago

after inserting/pasting a large image into the editor, editing, such as typing is very slow.

I am testing with this image (copy image and paste into editor): large test image

I am upgrading from ngx-quill 24 to ngx-quill 26.0.8 (latest) and this was not happening on ngx-quill 24.

I also tested on this demo site, and I'm getting same results: https://killercodemonkey.github.io/ngx-quill-example

I also tested on quill playground site running v2, and it is working there: https://quilljs.com/playground/snow

KillerCodeMonkey commented 2 weeks ago

Could you check the Main versions in between to check when it was introduced?

Only think I can imagine is, that the "getSemanticHTML" api call from quilljs V2 is very slow. It is called in ngx-quill on every change. In general you should not use default Image handler of quilljs since it just Puts the base64 representation into the content.

Am 28. August 2024 20:12:17 MESZ schrieb tsg-tthrash @.***>:

after inserting/pasting a large image into the editor, editing, such as typing is very slow.

I am testing with this image (copy image and paste into editor): large test image

I am upgrading from ngx-quill 24 to ngx-quill 26.0.8 (latest) and this was not happening on ngx-quill 24.

I also tested on this demo site, and I'm getting same results: https://killercodemonkey.github.io/ngx-quill-example

I also tested on quill playground site running v2, and it is working there: https://quilljs.com/playground/snow

-- Reply to this email directly or view it on GitHub: https://github.com/KillerCodeMonkey/ngx-quill/issues/1927 You are receiving this because you are subscribed to this thread.

Message ID: @.***>

tsg-tthrash commented 2 weeks ago

It was introduced with version 25.0.0 and with quilljs v2.

KillerCodeMonkey commented 2 weeks ago

Yep then the usage of getSemanticHTML will be the root cause, and it will not be avoidable.

I guess with large editor content it will getting slower and slower and slower.

Am 28. August 2024 21:38:07 MESZ schrieb tsg-tthrash @.***>:

It was introduced with version 25.0.0 and with quilljs v2.

-- Reply to this email directly or view it on GitHub: https://github.com/KillerCodeMonkey/ngx-quill/issues/1927#issuecomment-2316112838 You are receiving this because you commented.

Message ID: @.***>

KillerCodeMonkey commented 2 weeks ago

btw: tested the image on my example demo in "Formula & image resize editor & Keybinding on 'b' and 'shift + b', CodeBlock + Syntax Highlighting" and "default editor with 200px height" without any lagging. (using firefox).

But the main thing changed with the usage of quilljs v2 is that the html content is not just grabbed with "innerHTML", but with the new quilljs API. There the retrieved html is somehow changed and returned by quill. And this will make it slower than the previous version, but as it is the new way to go with quilljs, i will not change it.

BTW: there are already many open issues with the getSemanticHTML method.

what you can try is to override the "valueGetter" (it is an input). the default one is using the new api and you can just copy and paste the function from the editor component do something else :)

https://github.com/KillerCodeMonkey/ngx-quill/blob/master/projects/ngx-quill/src/lib/quill-editor.component.ts#L171

KillerCodeMonkey commented 2 weeks ago

any updates :)?