-
-
Save varkor/ca697f6fd59f60b5b9a8aeaa6d7cb341 to your computer and use it in GitHub Desktop.
| // ==UserScript== | |
| // @name WhatsApp Emoticon Preserver | |
| // @namespace https://gist.github.com/varkor/ca697f6fd59f60b5b9a8aeaa6d7cb341 | |
| // @version 0.5 | |
| // @author varkor | |
| // @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 fix = function () { | |
| const input = document.querySelector('[data-tab="1"]'); | |
| if (input && !fixed.has(input)) { | |
| const volatile = new RegExp(["(y)", "(n)", ":-)", ":)", ":-(", ":(", ":-p", ":p", ":-|", ":|", ":-\\", ":-d", ":d", ":-*", "<3", "^_^", ">_<", ";-)"].map((string) => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")).join("|"), "gi"); | |
| input.addEventListener("input", (event) => { | |
| const selection = window.getSelection(); | |
| let containers = null; | |
| let start = null; | |
| let end = null; | |
| if (selection.rangeCount >= 1) { | |
| const range = selection.getRangeAt(0); | |
| containers = [range.startContainer, range.endContainer]; | |
| start = range.startOffset; | |
| end = range.endOffset; | |
| } | |
| const walker = document.createTreeWalker(input, NodeFilter.SHOW_TEXT); | |
| let node; | |
| while (node = walker.nextNode()) { | |
| node.nodeValue = node.nodeValue.replace(volatile, (match, offset) => { | |
| if (containers !== null) { | |
| if (containers[0] === node && start > offset) { | |
| start += Math.min(match.length - 1, start - offset); | |
| } | |
| if (containers[1] === node && end > offset) { | |
| end += Math.min(match.length - 1, end - offset); | |
| } | |
| } | |
| return match.split("").join("\u200B"); | |
| }); | |
| } | |
| if (containers !== null) { | |
| 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(); | |
| } | |
| })(); |
@Flick1: Are you on the latest version of Firefox? I think older versions of JavaScript were stricter about the form of functions — I'll try to address the issue directly later, but updating is something to try if you haven't already.
Edit: This issue should be fixed for older versions of Firefox now.
I tried this script yesterday and it worked. not anymore today... did whatsapp change something?
@lucidBrot: What browser are you using? I modified the script slightly to fix an issue in some browsers, but it appears to be working in all the browsers I've tested. Are you using the user script or the bookmarklet?
@varkor I updated my firefox and everything works fine now. Thanks a lot!
A heads up: even the updated script version did not work on my older firefox version, 30 something. I don't think that is a huge problem though.
Any way this can be applied to Franz? ( http://meetfranz.com/ ) they have a Plugin-API afaik
@pfreak — Franz plugins currently only allow the application to be extended with more services (e.g. messaging clients). It won't be possible to use this script with Franz until they add user-script support (which is an existing feature request).
@varkor I was using the bookmarklet in chrome. (Also tried the RunJS plugin with a slightly modified version). But I'm even more confused r/n... I just tried the bookmarklet again and it worked. Then I tried again by reloading the page (without using the bookmarklet) and it still worked. Then I opened a clean install of firefox and it STILL worked. (working = it did not replace ":P" with an emoji)
I mean nice if it works now but I'm confused.... did whatsapp change their interface?
@lucidBrot — It seems WhatsApp have rolled back some of their changes to their emoticon conversion. Now they no longer convert emoticons without noses (e.g. :) won't be converted, but :-) will be, etc.). Other emoticons such as ^_^ and >_< are still converted. It's less aggressive now, but it hasn't been completely removed.
(The full list of emoticons that are still converted are: (y), (n), :-), :-(, :-p, :-|, :-\\, :-d, :-*, <3, ^_^, >_<, ;-))
@varkor The d should be uppercase in :-d --> :-D
It's happening again. Now even without noses. Seems like they changed the page structure quite a lot so this script is broken.
Just found this as well.. This is so annoying. There's a difference when using emojis and normal smileys. They don't get it.
If anyone is keen enough to recreate this for the current WhatsApp website, please link it here. (Or if anyone finds something working, please link it as well.)
It's so annoying that they don't simply add an option to turn it off in the settings. Why do they have to be such a pain in the a**...
When I try typing an emoticon on WhatsApp web, it will automatically convert to an emoji, but if I press backspace, it will revert to the emoticon. It's still a little annoying, but at least it doesn't prevent the use of emoticons altogether. Is this also others' experience? If so, I personally am not so motivated to fix the issue, because it's easy enough to press backspace, and it would take some time to figure out how WhatsApp have modified their page structure in the meantime.
@varkor Same experience here, though it's annoying enough that I stumbled upon your script. Oh well, time for me to contact their support, I guess :)
Is this also others' experience?
This drives me crazy. Same for people over on reddit.
@varkor yes backspace is possible, but as others commented it's very annoying. I tried to write a script myself a couple days ago but seems like they really don't want you to. It's easy to get a query selector to the input (which is now a role="textbox" div) via [data-tab="10"][role="textbox"] but any change will be reverted back instantly.
Can't someone write a script which will file a feedback report constantly? I have given feedback through all possible means but to no avail.
Edited it a bit to make it work for the new web WhatsApp. Can be found here:
https://gist.github.com/sakehl/4a843a22f7cdb58942d635784e8152c7
Does not seem to work on firefox at all, tried all 3 methods. Error message in console:
SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function
Greasemonkey doesn't seem to do anything, the bookmark does not even open whatsapp web and does nothing either. Anything I can do? Pretty annoyed by the autoconversion right now!