☰

HTML Markup in junon.io | EN

Allows to paste HTML+CSS elements into chat

  1. // ==UserScript==
  2. // @name         HTML Markup in junon.io | EN
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1
  5. // @description  Allows to paste HTML+CSS elements into chat
  6. // @author       Belogvardeec
  7. // @license      MIT
  8. // @match        *://junon.io/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function convertContentToHTMLCSS(element) {
  16.         if (element.id === 'chat_input') return; // ignoring chat input for better experience
  17.  
  18.         let content = element.value || element.textContent;
  19.         const regex = /#(.*?)#/g;
  20.  
  21.         if (!regex.test(content)) return; // if no #...# found, then do nothing
  22.  
  23.         // deleting previous custom element for not copying
  24.         element.querySelectorAll('.custom-content').forEach(el => el.remove());
  25.  
  26.         // adding one style for one time
  27.         if (!document.querySelector('.custom-style')) {
  28.             const style = document.createElement('style');
  29.             style.className = 'custom-style';
  30.             style.innerHTML = `
  31.                 .custom-content {
  32.                     color: white;
  33.                     font-size: 16px;
  34.                 }
  35.             `;
  36.             document.head.appendChild(style);
  37.         }
  38.  
  39.         // replace #...# on HTML+CSS content
  40.         const newContent = content.replace(regex, (_, p1) => {
  41.             return `<span class="custom-content">${p1}</span>`;
  42.         });
  43.  
  44.         // inputs except chat_input are enabled too, for preview
  45.         if (element.tagName.toLowerCase() === 'input') {
  46.             let output = element.parentNode.querySelector('.custom-content-container');
  47.             if (!output) {
  48.                 output = document.createElement('div');
  49.                 output.className = 'custom-content-container';
  50.                 element.insertAdjacentElement('afterend', output);
  51.             }
  52.             output.innerHTML = newContent;
  53.         } else {
  54.             element.innerHTML = newContent;
  55.         }
  56.  
  57.         // set element as converted
  58.         element.dataset.converted = "true";
  59.     }
  60.  
  61.     function processElements() {
  62.         document.querySelectorAll('input, .chat_content').forEach(element => {
  63.             convertContentToHTMLCSS(element);
  64.         });
  65.     }
  66.  
  67.     setInterval(processElements, 450);
  68.  
  69. })();