Basecamp Inline Code Styling Userscript

basecamp-inline-code-styling-userscript.js

// ==UserScript==
// @name        Inline Code Styling - basecamp.com
// @namespace   Violentmonkey Scripts
// @match       https://*.basecamp.com/*
// @grant       GM_addStyle
// @version     1.0
// @author      -
// @description 3/29/2023, 12:42:11 PM
// ==/UserScript==

/* CSS Style for Inline Code Blocks */
GM_addStyle(`
  code {
    padding: 3px 4px 2px;
    border-radius: 6px;
    font-size: 0.8em;
    background-color: var(--color-uncolor-20);
  }
`)

function addTrixInlineStyle() {
  Trix.config.textAttributes.inlineCode = {
    tagName: "code",
    inheritable: true
  }

  addEventListener("trix-initialize", event => {
    const element = event.target
    const { toolbarElement, editor } = element

    // 'trix-initialize' appears to execute multiple times in some cases
    // resulting in multiple inlineCode buttons to be added to the toolbar
    const hasInit = toolbarElement.querySelector("[data-trix-attribute=inlineCode]") != undefined

    console.log(toolbarElement.querySelector("[data-trix-attribute=inlineCode]"), hasInit)

    if (hasInit) return

    const blockCodeButton = toolbarElement.querySelector("[data-trix-attribute=code]")
    const inlineCodeButton = blockCodeButton.cloneNode(true)

    inlineCodeButton.hidden = true
    inlineCodeButton.dataset.trixAttribute = "inlineCode"
    blockCodeButton.insertAdjacentElement("afterend", inlineCodeButton)

    element.addEventListener("trix-selection-change", _ => {
      const type = getCodeFormattingType()
      blockCodeButton.hidden = type == "inline"
      inlineCodeButton.hidden = type == "block"
    })

    function getCodeFormattingType() {
      if (editor.attributeIsActive("code")) return "block"
      if (editor.attributeIsActive("inlineCode")) return "inline"

      const range = editor.getSelectedRange()
      if (range[0] == range[1]) return "block"

      const text = editor.getSelectedDocument().toString().trim()
      return /\n/.test(text) ? "block" : "inline"
    }
  })
}

document.addEventListener("trix-before-initialize", () => {
  addTrixInlineStyle()
})