Disable automatic emoticon → emoji conversion in WhatsApp Web

whatsapp-emoticon-preserver.user.js

// ==UserScript==
// @name			WhatsApp Emoticon Preserver
// @namespace		https://gist.github.com/sakehl/4a843a22f7cdb58942d635784e8152c7
// @version			0.6
// @author			varkor, sakehl
// @description		Disable automatic emoticon → emoji conversion in WhatsApp Web
// @match			https://web.whatsapp.com/
// @grant			none
// ==/UserScript==

(() => {
  "use strict";
  if (window.location.hostname !== "web.whatsapp.com") {
    window.location = "https://web.whatsapp.com/";
  } else {
    const fixed = new Set();
    const volatile = ["(y)", "(Y)", "(n)", "(N)", ":-)", ":)", ":-(", ":(", ":'(", ":-p", ":p", ":-P", ":P", ":O", "8)", ":-|", ":|", ":-\\", ":\\", ":-D", ":D", ":-*", "<3", "^_^", ">_<", ";-)"];
    const fix = function () {
      const input = document.querySelector('[data-testid=conversation-compose-box-input]');

      if (input && !fixed.has(input)) {

        input.addEventListener("beforeinput", (event) => {
          const selection = window.getSelection();
          if (selection.rangeCount >= 1) {
            const range = selection.getRangeAt(0);
            let containers = [range.startContainer, range.endContainer];
            let start = range.startOffset;
            let end = range.endOffset;

            const walker = document.createTreeWalker(input, NodeFilter.SHOW_TEXT);
            let node;
            while (node = walker.nextNode()) {
              if(containers[0] == node && containers[1] == node){
                let possible_smiley = node.nodeValue.slice(start-2, start) + event.data;
                let found_smiley = volatile.find(smiley => possible_smiley.endsWith(smiley));

                if(!(found_smiley === undefined)){
                  node.nodeValue = node.nodeValue + "\u200B"
                  start += 1;
                  end += 1;

                  selection.removeAllRanges();
                  const range = document.createRange();
                  range.setStart(containers[0], start);
                  range.setEnd(containers[1], end);
                  selection.addRange(range);
                }
              }
            }
          }
        });
        fixed.add(input);
      }
    };
    window.addEventListener("click", fix);
    // window.addEventListener("paste", () => setTimeout(fix, 400));
    fix();
  }
})();

Thank you!

thank you god

a small downside of this is that the searching for emojis e.g. :smile breaks when the search term starts with an "emoji"
e.g. I can't search for :pray because the script kills the :p

I have never written tampermonkey scripts myself and have no clue how to address this, but maybe someone here has an idea 👀

You, sir, are a legend 🫡 Thank you for fixing this script!

I've created an alternative script that takes a different approach and instead of manipulating the DOM it patches the webpack chunks/functions that do the conversion so instead of undoing the converted emojis it prevents the app from changing them in the first place. Should also fix @jemand771's issue as well as copy-pasting. Will not work by copy-pasting it into the console as it has to be executed before any other javascript loads.

Script here: https://gist.github.com/shark0der/5cae3356dddd21573aaef6d4933ca43c

I've created an alternative script that takes a different approach and instead of manipulating the DOM it patches the webpack chunks/functions that do the conversion so instead of undoing the converted emojis it prevents the app from changing them in the first place. Should also fix @jemand771's issue as well as copy-pasting. Will not work by copy-pasting it into the console as it has to be executed before any other javascript loads.

Script here: https://gist.github.com/shark0der/5cae3356dddd21573aaef6d4933ca43c

Ah, that looks great thanks! This is indeed a very ad-hoc fix, since I did not find out where the conversion exactly happened, and your approach just removes it completely. Great job, thanks!

Perfect! Thanks :D