Updated content script to use the beforeinput event

README.md

@@ -13,7 +13,7 @@ For instance, it converts quotes like `"these"` to `“these”`, which are typo
 Additionally, you can convert text into more than 20 different font styles and casing changes.
 You can enable and disable any features in the options and adjust more settings regarding the behavior of the add-on.
 
-This extension works with modern Firefox v78 or higher, Chromium/Chrome and Thunderbird v78 or higher.
+This extension works with modern Firefox v87 or higher, Chromium/Chrome and Thunderbird v87 or higher.
 
 ## Download
 

assets/texts/en/amoDescription.html

@@ -83,7 +83,7 @@
 The add-on is free/libre open-source software and developed on GitHub. <a href="https://github.com/rugk/unicodify">Fork it on GitHub</a> and contribute.
 <a href="https://github.com/rugk/unicodify/contribute">There are some easy issues to start with.</a>
 
-This extension works with modern Firefox and Thunderbird v78 or higher.
+This extension works with modern Firefox and Thunderbird v87 or higher.
 
 
 <b>🙋‍♀️ Contribute 🙋‍♀️</b>

scripts/manifests/dev.json

@@ -44,7 +44,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "78.0"
+      "strict_min_version": "87.0"
     }
   }
 }

scripts/manifests/firefox.json

@@ -42,7 +42,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "78.0"
+      "strict_min_version": "87.0"
     }
   }
 }

scripts/manifests/thunderbirdmanifest.json

@@ -45,7 +45,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "78.0"
+      "strict_min_version": "87.0"
     }
   }
 }

src/content_scripts/autocorrect.js

@@ -266,9 +266,8 @@ function firstDifferenceIndex(a, b) {
  * @returns {void}
  */
 function autocorrect(event) {
-    // console.log('keydown', event.key, event.key.length, event.keyCode);
-    // Exclude all keys that do not produce a single Unicode character
-    if (!((event.key.length === 0 || event.key.length === 1 || event.keyCode === 13 || event.key === "Unidentified") && !event.ctrlKey && !event.metaKey && !event.altKey)) {
+    // console.log('beforeinput', event.inputType, event.data);
+    if (!(event.inputType === "insertText" || event.inputType === "insertCompositionText" || event.inputType === "insertParagraph" || event.inputType === "insertLineBreak")) {
         return;
     }
     if (!symbolpatterns) {
@@ -279,63 +278,67 @@ function autocorrect(event) {
     if (caretposition) {
         const value = target.value || target.innerText;
         let deletecount = 0;
-        let insert = value.slice(caretposition - 1, caretposition); // event.key;
+        let insert = event.inputType === "insertLineBreak" || event.inputType === "insertParagraph" ? "\n" : event.data;
+        const ainsert = insert;
         let output = false;
         // Use Unicode smart quotes
         if (quotes && (insert === "'" || insert === '"')) {
-            const previouschar = value.slice(caretposition < 2 ? 0 : caretposition - 2, caretposition - 1);
+            const previouschar = value.slice(caretposition < 1 ? 0 : caretposition - 1, caretposition);
             // White space
             const re = /^\s*$/;
             if (insert === "'") {
                 insert = re.test(previouschar) ? "‘" : "’";
             } else if (insert === '"') {
                 insert = re.test(previouschar) ? "“" : "”";
             }
-            deletecount = 1;
             output = true;
         }
-        const previousText = value.slice(caretposition < (longest + 1) ? 0 : caretposition - (longest + 1), caretposition - 1);
+        const previousText = value.slice(caretposition < longest ? 0 : caretposition - longest, caretposition);
         const regexResult = symbolpatterns.exec(previousText);
         // Autocorrect Unicode Symbols
         if (regexResult) {
-            const text = value.slice(caretposition < longest ? 0 : caretposition - longest, caretposition);
+            const text = value.slice(caretposition < (longest - 1) ? 0 : caretposition - (longest - 1), caretposition) + ainsert;
             const aregexResult = symbolpatterns.exec(text);
             const aaregexResult = antipatterns.exec(text);
             if (!aaregexResult && (!aregexResult || (caretposition <= longest ? regexResult.index < aregexResult.index : regexResult.index <= aregexResult.index))) {
-                insert = autocorrections[regexResult[0]] + (event.keyCode === 13 ? "\n" : insert);
-                deletecount = regexResult[0].length + 1;
+                insert = autocorrections[regexResult[0]] + ainsert;
+                deletecount = regexResult[0].length;
                 output = true;
             }
         } else {
             // Convert fractions and mathematical constants to Unicode characters
             if (!output && fracts) {
                 // Numbers: https://regex101.com/r/7jUaSP/2
                 const numberRegex = /[0-9]+(\.[0-9]+)?$/;
-                const previousText = value.slice(0, caretposition - 1);
+                const previousText = value.slice(0, caretposition);
                 const regexResult = numberRegex.exec(previousText);
                 if (regexResult) {
-                    const text = value.slice(0, caretposition);
+                    const text = value.slice(0, caretposition) + ainsert;
                     const aregexResult = numberRegex.exec(text);
                     if (!aregexResult) {
                         const label = outputLabel(regexResult[0], regexResult[1]);
                         const index = firstDifferenceIndex(label, regexResult[0]);
                         if (index >= 0) {
-                            insert = label.slice(index) + (event.keyCode === 13 ? "\n" : insert);
-                            deletecount = regexResult[0].length - index + 1;
+                            insert = label.slice(index) + ainsert;
+                            deletecount = regexResult[0].length - index;
                             output = true;
                         }
                     }
                 }
             }
         }
         if (output) {
-            const text = value.slice(caretposition - deletecount, caretposition);
-            deleteCaret(target, text);
+            event.preventDefault();
+
+            const text = deletecount ? value.slice(caretposition - deletecount, caretposition) : "";
+            if (text) {
+                deleteCaret(target, text);
+            }
             insertAtCaret(target, insert);
-            console.debug("Autocorrect: “%s” was replaced with “%s”.", text, insert);
 
             insertedText = insert;
-            deletedText = text;
+            deletedText = text + ainsert;
+            console.debug("Autocorrect: “%s” was replaced with “%s”.", deletedText, insertedText);
 
             lastTarget = target;
             lastCaretPosition = caretposition - deletecount + insert.length;
@@ -350,9 +353,9 @@ function autocorrect(event) {
  * @returns {void}
  */
 function undoAutocorrect(event) {
-    // console.log('keyup', event.key, event.key.length, event.keyCode);
+    // console.log('beforeinput', event.inputType, event.data);
     // Backspace
-    if (!(event.keyCode === 8 && !event.ctrlKey && !event.metaKey && !event.altKey)) {
+    if (event.inputType !== "deleteContentBackward") {
         return;
     }
     const target = event.target;
@@ -362,16 +365,17 @@ function undoAutocorrect(event) {
             event.preventDefault();
 
             if (insertedText) {
+                lastTarget = null;
                 deleteCaret(target, insertedText);
             }
             if (deletedText) {
                 insertAtCaret(target, deletedText);
             }
             console.debug("Undo autocorrect: “%s” was replaced with “%s”.", insertedText, deletedText);
         }
-    }
 
-    lastTarget = null;
+        lastTarget = null;
+    }
 }
 
 /**
@@ -406,6 +410,6 @@ function handleError(error) {
 
 browser.runtime.sendMessage({ "type": AUTOCORRECT_CONTENT }).then(handleResponse, handleError);
 browser.runtime.onMessage.addListener(handleResponse);
-window.addEventListener("keydown", undoAutocorrect, true);
-window.addEventListener("keyup", autocorrect, true);
+window.addEventListener("beforeinput", undoAutocorrect, true);
+window.addEventListener("beforeinput", autocorrect, true);
 console.log("Unicodify autocorrect module loaded.");

src/manifest.json

@@ -44,7 +44,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "78.0"
+      "strict_min_version": "87.0"
     }
   }
 }