☰

HTML Markup in junon.io | EN

Allows to paste HTML+CSS elements into chat

// ==UserScript==
// @name         HTML Markup in junon.io | EN
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Allows to paste HTML+CSS elements into chat
// @author       Belogvardeec
// @license      MIT
// @match        *://junon.io/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function convertContentToHTMLCSS(element) {
        if (element.id === 'chat_input') return; // ignoring chat input for better experience

        let content = element.value || element.textContent;
        const regex = /#(.*?)#/g;

        if (!regex.test(content)) return; // if no #...# found, then do nothing

        // deleting previous custom element for not copying
        element.querySelectorAll('.custom-content').forEach(el => el.remove());

        // adding one style for one time
        if (!document.querySelector('.custom-style')) {
            const style = document.createElement('style');
            style.className = 'custom-style';
            style.innerHTML = `
                .custom-content {
                    color: white;
                    font-size: 16px;
                }
            `;
            document.head.appendChild(style);
        }

        // replace #...# on HTML+CSS content
        const newContent = content.replace(regex, (_, p1) => {
            return `<span class="custom-content">${p1}</span>`;
        });

        // inputs except chat_input are enabled too, for preview
        if (element.tagName.toLowerCase() === 'input') {
            let output = element.parentNode.querySelector('.custom-content-container');
            if (!output) {
                output = document.createElement('div');
                output.className = 'custom-content-container';
                element.insertAdjacentElement('afterend', output);
            }
            output.innerHTML = newContent;
        } else {
            element.innerHTML = newContent;
        }

        // set element as converted
        element.dataset.converted = "true";
    }

    function processElements() {
        document.querySelectorAll('input, .chat_content').forEach(element => {
            convertContentToHTMLCSS(element);
        });
    }

    setInterval(processElements, 450);

})();