☰

Fix kbin Code Blocks

Fix for kbin code blocks federated from Lemmy. Strips out the weird <span> tags on each line.

  1. // ==UserScript==
  2. // @name         Fix kbin Code Blocks
  3. // @namespace    pamasich-kbin
  4. // @version      2.0.1
  5. // @description  Fix for kbin code blocks federated from Lemmy. Strips out the weird <span> tags on each line.
  6. // @author       Pamasich
  7. // @match        https://kbin.social/*
  8. // @match        https://kbin.earth/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=kbin.social
  10. // @license      MIT
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. /*
  15.     This script fixes code blocks on kbin that originate from Lemmy.
  16.     When federating code blocks, Lemmy includes additional <span> tags
  17.     which kbin currently does not expect, so it just renders them in plaintext.
  18.     The script removes those tags from code blocks.
  19. */
  20.  
  21. /** @type {String} */
  22. const STYLEPATTERN = "((font-style:italic|font-weight:bold);)?color:#[0-9a-fA-F]{6};";
  23.  
  24. function setup () {
  25.     getCodeBlocks().forEach((code) => fix(code));
  26. }
  27.  
  28. /**
  29.  * Repairs a given code block.
  30.  * @param {HTMLElement} original The code block that needs to be fixed
  31.  */
  32. function fix (original) {
  33.     if (!isErroneousCode(original)) return;
  34.     const fixed = document.createElement("code");
  35.     original.after(fixed);
  36.  
  37.     const start = new RegExp(`^\\n?<span style="${STYLEPATTERN}">`);
  38.     const end = new RegExp(`\\n<\\/span>\\n?$`);
  39.     const combined = new RegExp(`<\\/span><span style="${STYLEPATTERN}">`, "g");
  40.  
  41.     fixed.textContent = original.textContent
  42.         .replace(start, "")
  43.         .replaceAll(combined, "")
  44.         .replace(end, "");
  45.  
  46.     original.style.display = "none";
  47. }
  48.  
  49. /**
  50.  * Checks whether a given code block needs to be fixed.
  51.  * @param {HTMLElement} code
  52.  * @returns {Boolean}
  53.  */
  54. function isErroneousCode (code) {
  55.     const pattern = new RegExp(`^\\n?<span style="${STYLEPATTERN}">(.+\\n)+<\\/span>\\n?$`);
  56.     return pattern.test(code.textContent);
  57. }
  58.  
  59. /**
  60.  * @returns {HTMLElement[]} A list of all the code blocks on the page
  61.  */
  62. function getCodeBlocks () {
  63.     return Array.from(document.querySelectorAll("pre code"));
  64. }
  65.  
  66. setup();
  67.  
  68. const observer = new MutationObserver((mutations) => {
  69.     // the filter ensures the script only looks for new code blocks to fix if new comments were added or the user navigated to a different thread
  70.     const codeBlocks = mutations.flatMap((mutation) => Array.from(mutation.addedNodes))
  71.         .filter((node) => node.nodeName == "BLOCKQUOTE" || node.nodeName == "BODY")
  72.         .flatMap((node) => Array.from(node.querySelectorAll("pre code")));
  73.     // codeBlocks at this point might contain the same node twice, so the Set constructor is used to get unique nodes
  74.     new Set(codeBlocks).forEach(fix);
  75. });
  76. // observing the entire document because of turbo mode
  77. observer.observe(document, { childList: true, subtree: true });