copy phab title with rich text

copy-phab-title.js

const copySelectedPhabs = () => {
  let selection = window.getSelection();
  if (selection.rangeCount <= 0) {
    return
  }
  const div = document.createElement('div')
  Array.from(document.querySelectorAll('.phui-oi-frame'))
    .filter(el => selection.containsNode(el, true))
    .forEach(el => {
      const tmp = el.cloneNode(true)
      const name = tmp.querySelector('.phui-oi-name')
      const time = tmp.querySelector('.phui-oi-icon-label')
      const author = tmp.querySelector('.phui-oi-byline').querySelector('a')
      time.innerText = convertTime(time.querySelector('.screen-only').innerText)
      name.appendChild(document.createTextNode(" / "))
      name.appendChild(author)
      name.appendChild(document.createTextNode(" / "))
      name.appendChild(time)
      div.appendChild(name)
    })
  document.body.appendChild(div)
  const existingRange = selection.getRangeAt(0);
  selection.removeAllRanges();
  let range = document.createRange();
  range.selectNode(div);
  selection.addRange(range);
  document.execCommand("copy");
  div.remove()
  selection.removeAllRanges();
  selection.addRange(existingRange)
}

const getReadable = (num, unit) => num ? (' ' + num + ' ' + unit + (num > 1 ? 's' : '')) : ''

const convertTime = (timestamp) => {
  const curDate = new Date()
  let date = new Date(timestamp)
  const y = curDate.getFullYear()
  const mm = date.getMonth()
  const d = date.getDate()
  const h = date.getHours()
  const m = date.getMinutes()
  date = new Date(y, mm, d, h, m)
  if (date > curDate) {
    date = new Date(y - 1, mm, d, h, m)
  }
  const sec = (curDate - date) / 1000
  const mDiff = Math.floor(sec / 60)
  const hDiff = Math.floor(sec / 3600)
  const dDiff = Math.floor(sec / 3600 / 24)
  return `${timestamp} / updated ${(getReadable(dDiff, 'day') || getReadable(hDiff % 24, 'hour') || getReadable(mDiff % 60, 'min'))} ago`
}

const copyCurrentPhab = () => {
  let selection = window.getSelection();
  const div = document.createElement('div')
  if (!document.querySelector('.phabricator-last-crumb .phui-crumb-name') || !document.querySelector('h1.phui-header-view .phui-header-header')) {
    return
  }
  const id = document.querySelector('.phabricator-last-crumb .phui-crumb-name').textContent.replaceAll(' ', '')
  const phabName = document.querySelector('h1.phui-header-view .phui-header-header').textContent
  const title = document.createElement('div')
  title.classList.add('phui-oi-name')
  title.innerHTML = `
  <span class="phui-oi-objname">${id}</span> <a href="/${id}" class="phui-oi-link" title="${phabName}">${phabName}</a>
  `
  const authorAndTime = document.querySelector('.phui-two-column-subheader .phui-head-thing-view')
  .cloneNode(true)
  const author = authorAndTime.querySelector('a.phui-handle.phui-link-person')
  const tokens = authorAndTime.textContent.split(' on ')
  const time = document.createElement('span')
  const timestring = tokens[tokens.length - 1].replace(".", "")
  time.innerText = convertTime(timestring)
  title.appendChild(document.createTextNode(" / "))
  title.appendChild(author)
  title.appendChild(document.createTextNode(" / "))
  title.appendChild(time)
  div.appendChild(title)
  document.body.appendChild(div)
  selection.removeAllRanges();
  let range = document.createRange();
  range.selectNode(div);
  selection.addRange(range);
  document.execCommand("copy");
  div.remove()
  selection.removeAllRanges();
}

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'c') {
    event.preventDefault();
    if (window.location.href.startsWith('https://phabricator.twitter.biz/D')) {
      copyCurrentPhab()
    } else {
      copySelectedPhabs()
    }
  }
})