Asana quote reply and code formatting - TamperMonkey script

asana_comment_formatting.js

// ==UserScript==
// @name         Asana quote reply style
// @namespace    http://tampermonkey.net/
// @version      2024-07-17
// @description  Turn comments that start with `>` into "quote reply" style like Github
// @author       Rafael Steil
// @match        https://app.asana.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=asana.com
// @grant        none
// ==/UserScript==

(function() {
  'use strict'

  const prettyAsana = () => {
    const textNodes = document.querySelectorAll('.TaskPane-feed > .TaskStoryFeed > .TaskStoryFeed-blockStory .BlockStoryStructure-body .RichText3-paragraph')

    for (const node of textNodes) {
      const childNodes = node.childNodes

      if (node.textContent[0] === '>') {
        formatQuoteReply(node)
      } else if (childNodes[0].nodeName === 'CODE' && childNodes[childNodes.length - 1].nodeName === 'CODE') {
        formatLineCode(childNodes[0])
      }
    }
  }

  // If a node begins and ends with <code>, then apply a special style to
  // make it look better, especially if it's followed by more code.
  const formatLineCode = (node) => {
    node.style.cssText = `
      background-color: #3a3a3a;
      color: #fff;
      border-style: none;
      border-radius: 0;
      padding: 4px;
      display: block;
      line-height: 14px;
    `
  }

  const formatQuoteReply = (node) => {
    if (node.textContent[0] === '>') {
      node.textContent = node.textContent.substring(1).trim() // Remove '>'
    }

    node.style.cssText = `
      padding: 10px 20px;
      margin: 5px 0;
      border-left: 5px solid #ccc;
      background-color: #eaeaea;
      font-style: italic;
      color: #555;
    `
  }

  const reactToDomChanges = () => {
    const observer = new MutationObserver((mutationList, observer) => {
      prettyAsana()
    })

    const observedNode = document.querySelector("body")
    observer.observe(observedNode, {
      attributes: false,
      childList: true,
      subtree: true
    })
  }

  reactToDomChanges()
})();