violentMonkey용 롤20 채팅 자동 서식 적용

뭐라고 불러야 할지 모르겠네요

gif랑 똑같은 기능입니다

 

`1 다음에 글을 쓰고 `로 막으면 그 사이의 텍스트가 롤20 텍스트 서식 채팅 [텍스트](# " style=") 로 바뀌어요~

다른 단축어나 디자인을 적용하고 싶으시면 hashMap 부분과 아래 regex 부분을 바꿔 써주세요 (어케 바꾸냐는 문의는 받지 않습니다!!)

// ==UserScript==
// @name         채팅 서식 자동 변환
// @namespace    채팅 서식 자동 변환
// @version      1.1
// @description  롤20 챗 서식을 빠르게 바꿔줘요
// @match        https://app.roll20.net/editor/*
// @grant        none
// ==/UserScript==
(function () {
  'use strict';

  const hashMap = {
    '`1': 'text-decoration:none; font-size: 20px; font-weight:bold; font-family:myongjo; font-style:normal; color:black;',
    '`2': 'text-decoration:none; font-weight:bold; color:#dd0000; font-family:myongjo; font-style:normal;',
    '`3': 'text-decoration:none; text-shadow: 0px 0px 3px black; color: white; font-weight:bold;',
    '`4': 'text-decoration:none; border: 1px solid black; background: white; color: black; padding: 0px 4px; font-style:italic;'
  };

  const hashList = Object.keys(hashMap);

  function escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }

  function processText(text) {
    let changed = false;

    for (let tag of hashList) {
      const style = hashMap[tag];
      const regex = new RegExp(`${escapeRegExp(tag)}(.*?)\``, 'g');

      if (regex.test(text)) {
        text = text.replace(regex, (_, inner) => {
          changed = true;
          return `[${inner}](#" style="${style}" )`;
        });
      }
    }

    return changed ? text : null;
  }

  function handleInput(e) {
    const el = e.currentTarget;
    const original = el.value;
    const caretPos = el.selectionStart;

    const replaced = processText(original);
    if (replaced === null) return;

    el.value = replaced;

    el.setSelectionRange(replaced.length, replaced.length);
  }

  // 대상 감시
  const observer = new MutationObserver(() => {
    const wrapper = document.getElementById('textchat-input');
    if (!wrapper) return;

    const target = wrapper.querySelector('textarea[contenteditable="true"]');
    if (target && !target.dataset.hashWatcherAttached) {
      target.dataset.hashWatcherAttached = "true";
      target.addEventListener('input', handleInput);
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
})();