replace selection with zwsp for emoji

Readme.md

zwsp emoji joiner

UserScript which adds to menu that joins space between text emoji codes with zwsp (zero witdth space). tested with mastodon web UI.
:nyancat_body: :nyancat_face: 같은 공백이 끼어있는 emoji 코드를 zwsp 로 :nyancat_body:​:nyancat_face: 이렇게 공백이 없는 것처럼 합쳐주는 컨텍스트 메뉴를 추가하는 유저스크립트입니다. 마스토돈용으로 만들어서 다른 곳에서는 테스트해보지 않았습니다.

1. install tampermonkey or compatable browser extension
   tampermonkey 나 호환되는 브라우저 확장기능을 설치하세요.
2. install this script (click this)
   해당 확장기능에 이 스크립트를 설치하세요. (위의 링크를 누르시면 설치 창이 뜰겁니다.)
3. from the input box, select emoji texts and open context menu.
   (마스토돈의) 입력 창에서 zwsp(폭 없는 공백)로 합치려는 텍스트를 선택한 뒤, 마우스 우클릭 메뉴에서 Tampermonkey -> 메뉴를 따라들어가서 선택하세요.

zswp_emoji_joiner.user.js

// ==UserScript==
// @name         zwsp_emoji_joiner
// @namespace    https://sftblw.moe/don.naru.cafe
// @version      0.1
// @description  joins selected custom emoji with zwsp. only works inside of textarea and input
// @author       sftblw & stackoverflow
// @match        https://*/*
// @exclude      file://*
// @grant        GM_registerMenuCommand
// ==/UserScript==


(function() {
    'use strict';

    // only works on textbox & textarea
    // https://stackoverflow.com/q/42800590/4394750
    // https://stackoverflow.com/a/3997896/4394750

    // for react
    // https://stackoverflow.com/a/61110332/4394750

    function replaceSelected(replaceFn) {
        let curElem = document.activeElement;
        if (curElem instanceof HTMLTextAreaElement || curElem instanceof HTMLInputElement) {
            let text_all = curElem.value;

            let sel_start = curElem.selectionStart;
            let sel_end = curElem.selectionEnd;

            let text_head = text_all.substring(0, sel_start);
            let text_body = text_all.substring(sel_start, sel_end);
            let text_tail = text_all.substring(sel_end, text_all.length);

            let text_body_replaced = replaceFn(text_body);

            let text_full_replaced = text_head + text_body_replaced + text_tail;

            let proto = (curElem instanceof HTMLTextAreaElement
                         ? window.HTMLTextAreaElement.prototype
                         : window.HTMLInputElement.prototype
                        );

            let nativeSetter = Object.getOwnPropertyDescriptor(
                proto,
                "value"
            ).set;

            nativeSetter.call(curElem, text_full_replaced);

            const event = new Event('input', { bubbles: true });
            curElem.dispatchEvent(event);

            curElem.setSelectionRange(sel_start, sel_start + text_body_replaced.length);
        }
    }

    function replaceFn(inStr) {
        return (
            inStr
                .split('\n')
                .map(
                    line => line.split(' ').map(it => it.trim()).filter(it => it !='').join('\u200b')
                ).join('\n')
        );
    }

    GM_registerMenuCommand("emoji join with zwsp", () => replaceSelected(replaceFn), "rr");
})();