Value is not updated when start writing with greek capital letter with accent

[orestisioakeimidis]

Hello,

When I start writing in the editor with a greek capital letter with accent (e.g. Έ), the text is rendered on top of the placeholder text and the model value is not updated. You can see the effect in the screenshot below.

I tried it in the live demo you have https://killercodemonkey.github.io/ngx-quill-example/

Any ideas on how to fix that? Thanks in advance!

Regards, Orestis

[KillerCodeMonkey]

Could you plesae try it in the plain quilljs playground: https://quilljs.com/playground/snow ?

[orestisioakeimidis]

@KillerCodeMonkey I tried it and it works fine there. Sorry, forgot to mention that it has this behaviour on Safari MacOS. It works fine on Chrome MacOS.

[KillerCodeMonkey]

strange because then it should not work in quilljs either.
i do not have any special or additional styling or logic for that.

Maybe safari has some problems with shadow dom or what ever when rendering angular specific stuff.

Honestly.. i have no idea :D.

[KillerCodeMonkey]

Since i even have no mac it would be nice, if you could do some debugging :S

[BBboy01]

Some clues:

In Safari, after open terminal, everything is fine... This might be some Safari optimize problem.

CleanShot.2025-03-18.at.15.54.41.mp4

I consoled log every quill event, and i found only after open terminal, 'text-change' event had triggered

opened terminal

not opened terminal

[BBboy01]

I fixed it by patch quill:

diff --git a/core/composition.js b/core/composition.js
index 9984cc43ac60bc47b135d6bbd80cbe4efd7b909d..eadc28851e625c76e8e524bbcb59232054e8a5f3 100644
--- a/core/composition.js
+++ b/core/composition.js
@@ -18,7 +18,7 @@ class Composition {
         // Webkit makes DOM changes after compositionend, so we use microtask to
         // ensure the order.
         // https://bugs.webkit.org/show_bug.cgi?id=31902
-        queueMicrotask(() => {
+        setTimeout(() => {
           this.handleCompositionEnd(event);
         });
       }

maybe in safari the micro task execution orders are different between requestAnimationFrame of ngx-quill and queueMicrotask of quill

[BBboy01]

or replace queueMicrotask with requestAnimationFrame