Wykop.pl Emoji Picker

wykop_emoji_picker.user.js

// ==UserScript==
// @name         Emoji picker
// @namespace    https://gist.github.com/patrolez/
// @version      2025-01-02
// @description  try to take over the world!
// @author       patrolez
// @match        https://www.wykop.pl/*
// @match        https://wykop.pl/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wykop.pl
// @require      https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js
// @grant        none
// ==/UserScript==


// https://github.com/missive/emoji-mart
(async function() {
    'use strict';

    function create_click_handling_to_input(elem_with_cursor) {
        return (picked_emoji) => {
            var pos = elem_with_cursor.selectionStart;
            const val = elem_with_cursor.value;
            let prefix = val.substring(0, pos);
            const inserted = picked_emoji.native;
            const suffix = val.substring(pos);
            elem_with_cursor.value =
                prefix +
                inserted +
                suffix;
            elem_with_cursor.focus();
            elem_with_cursor.selectionEnd = pos + inserted.length;
            elem_with_cursor.dispatchEvent(new Event('input', { bubbles: true, cancelable: true, }));
        };
    }

    function process_elems(elms) {
        setTimeout(() => { elms.forEach((el) => el.setAttribute('spellcheck', 'true')); _process_elems(elms); }, 0);
    }

    function _process_elems(elms) {
        elms.forEach((el) => {
            el.is_in_picker_mode = false;
            el.picker_mode_selection_idx = -1;
            el.parentNode.querySelector(".pickerExt")?.remove();

            const pickerOptions = {
                parent: el.parentNode,
                dynamicWidth: true,
                onEmojiSelect: create_click_handling_to_input(el),
                theme:  document.body.dataset.nightMode ? 'dark' : 'light'
            };
            const picker = new EmojiMart.Picker(pickerOptions);
            picker.classList.add("pickerExt");
            picker.style.width = '100%';

            el.addEventListener('focus', (event) => {
            });
            el.addEventListener('blur', (event) => {
            });
        });
    }

    function get_elms_to_watch(el) {
        if(el instanceof HTMLElement || el instanceof Document)
        {
            return [...el.querySelectorAll("textarea")];
        }
        return [];
    }


    var dom_observer = new MutationObserver(function (mutationRecords) {
        for (const mut of mutationRecords) {
            const nds = [...mut.addedNodes];
            nds.forEach((el) => {
                window.input_element_to_watch = process_elems(get_elms_to_watch(el))
            });
            nds.forEach((el) => {
                if (el.nodeName == "TEXTAREA") {
                    process_elems([el,]);
                }
            });
        }
    });
    var container = document.body;
    var config = { subtree: true, childList: true };

    process_elems(get_elms_to_watch(document));
    dom_observer.observe(container, config);

})();