Updated content script to use the beforeinput event.

scripts/manifests/dev.json

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

scripts/manifests/firefox.json

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

src/content_scripts/autocorrect.js

@@ -198,9 +198,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) {
@@ -211,26 +210,29 @@ 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 inserted = insert;
 		let output = false;
-		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 :colon: Emoji Shortcodes and/or Emoticon Emojis and/or Unicode Symbols
 		if (regexResult) {
-			const text = value.slice(caretposition < longest ? 0 : caretposition - longest, caretposition);
+			const length = longest - 1;
+			const text = value.slice(caretposition < length ? 0 : caretposition - length, caretposition) + inserted;
 			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]] + inserted;
+				deletecount = regexResult[0].length;
 				output = true;
 			}
 		} else {
 			// Autocomplete :colon: Emoji Shortcodes
 			if (autocomplete) {
 				// Emoji Shortcode
 				const re = /:[a-z0-9-+_]+$/;
-				const text = value.slice(caretposition < (longest - 1) ? 0 : caretposition - (longest - 1), caretposition);
+				const length = longest - 2;
+				const text = value.slice(caretposition < length ? 0 : caretposition - length, caretposition) + inserted;
 				const regexResult = re.exec(text);
 				if (regexResult) {
 					const aregexResult = Object.keys(emojiShortcodes).filter((item) => item.indexOf(regexResult[0]) === 0);
@@ -247,13 +249,17 @@ function autocorrect(event) {
 			}
 		}
 		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 + inserted;
+			console.debug("Autocorrect: “%s” was replaced with “%s”.", deletedText, insertedText);
 
 			lastTarget = target;
 			lastCaretPosition = caretposition - deletecount + insert.length;
@@ -268,9 +274,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;
@@ -280,6 +286,7 @@ function undoAutocorrect(event) {
 			event.preventDefault();
 
 			if (insertedText) {
+				lastTarget = null;
 				deleteCaret(target, insertedText);
 			}
 			if (deletedText) {
@@ -289,7 +296,8 @@ function undoAutocorrect(event) {
 		}
 	}
 
-	lastTarget = null;
+		lastTarget = null;
+	}
 }
 
 /**
@@ -325,6 +333,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("AwesomeEmoji autocorrect module loaded.");

src/manifest.json

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