From d9547c7310d86005ee469b2146a40155520cae0c Mon Sep 17 00:00:00 2001
From: Zihua Li <i@zihua.li>
Date: Thu, 25 Jan 2024 17:52:47 +0800
Subject: [PATCH] Fix IME not working correctly in Safari

---
 CHANGELOG.md                           |  2 ++
 packages/quill/src/core/composition.ts |  7 ++++++-
 packages/quill/test/e2e/list.spec.ts   | 13 +++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c161712fa..55462781b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # [Unreleased]
 
+- Fix IME not working correctly in Safari.
+
 # 2.0.0-beta.1
 
 - Fix syntax label from "Javascript" to "JavaScript".
diff --git a/packages/quill/src/core/composition.ts b/packages/quill/src/core/composition.ts
index 73c9904455..dd79ffabe0 100644
--- a/packages/quill/src/core/composition.ts
+++ b/packages/quill/src/core/composition.ts
@@ -21,7 +21,12 @@ class Composition {
 
     this.scroll.domNode.addEventListener('compositionend', (event) => {
       if (this.isComposing) {
-        this.handleCompositionEnd(event);
+        // Webkit makes DOM changes after compositionend, so we use microtask to
+        // ensure the order.
+        // https://bugs.webkit.org/show_bug.cgi?id=31902
+        queueMicrotask(() => {
+          this.handleCompositionEnd(event);
+        });
       }
     });
   }
diff --git a/packages/quill/test/e2e/list.spec.ts b/packages/quill/test/e2e/list.spec.ts
index 687c047dcf..ca84d87e5d 100644
--- a/packages/quill/test/e2e/list.spec.ts
+++ b/packages/quill/test/e2e/list.spec.ts
@@ -123,6 +123,19 @@ test.describe('list', () => {
           { insert: '\n', attributes: { list } },
         ]);
       });
+
+      test('typing in an empty editor with IME and press Backspace', async ({
+        page,
+        editorPage,
+        composition,
+      }) => {
+        await editorPage.setContents([{ insert: '\n' }]);
+
+        await editorPage.setSelection(9, 0);
+        await editorPage.typeWordWithIME(composition, '我');
+        await page.keyboard.press('Backspace');
+        expect(await editorPage.getContents()).toEqual([{ insert: '\n' }]);
+      });
     });
   }