userscript to show variation selectors on slack

show-vs.user.js

// ==UserScript==
// @name         show variation selectors on slack
// @author       Jeremy <jer.app>
// @version      1.0.1
// @match        https://app.slack.com/*
// @grant        none
// @run-at       document-start
// @updateURL    https://gist.githubusercontent.com/jeremy46231/fd7668b3e23449b0368e1a7ba7111502/raw/show-vs.user.js
// @downloadURL  https://gist.githubusercontent.com/jeremy46231/fd7668b3e23449b0368e1a7ba7111502/raw/show-vs.user.js
// @namespace    jer.app
// ==/UserScript==

;(() => {
  const vsRegex = /[\uFE00-\uFE0F]|\uDB40[\uDD00-\uDDEF]/gu

  const formatCodePoint = cp =>
    `[${cp.toString(16).toUpperCase().padStart(4, '0')}]`

  const replaceVS = str =>
    str.replace(vsRegex, char =>
      formatCodePoint(char.codePointAt(0)),
    )

  const replaceInTextNode = node => {
    const value = node.nodeValue
    if (!value) return
    if (!vsRegex.test(value)) return
    vsRegex.lastIndex = 0
    node.nodeValue = replaceVS(value)
  }

  const walk = root => {
    const walker = document.createTreeWalker(
      root,
      NodeFilter.SHOW_TEXT,
    )

    let node
    while ((node = walker.nextNode())) {
      replaceInTextNode(node)
    }

    // root.querySelectorAll?.('input, textarea').forEach(replaceInInput)
  }

  const start = () => {
    if (!document.body) return false

    // Initial scan
    walk(document.body)

    // Observe future changes
    const observer = new MutationObserver(mutations => {
      for (const m of mutations) {
        if (m.type === 'characterData') {
          replaceInTextNode(m.target)
        }

        for (const node of m.addedNodes) {
          if (node.nodeType === Node.TEXT_NODE) {
            replaceInTextNode(node)
          } else if (node.nodeType === Node.ELEMENT_NODE) {
            walk(node)
          }
        }
      }
    })

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

    return true
  }

  // If body already exists, start immediately
  if (!start()) {
    // Otherwise wait until it exists
    const wait = new MutationObserver(() => {
      if (start()) wait.disconnect()
    })

    wait.observe(document.documentElement, {
      childList: true,
    })
  }
})()