Greasemonkey script to disable Code view <textarea> on Github

disable_textarea_github.js

// ==UserScript==
// @name         Github: Disable codeview Textarea
// @author       Duologic
// @match        https://*.github.com/*
// @run-at       document-end
// ==/UserScript==

console.log('Github: Disable codeview Textarea');

const selector = '#read-only-cursor-text-area';

function callback(mutationList, observer) {
    mutationList.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.querySelector && node.querySelector(selector)) {
                node.querySelector(selector).disabled=true;
                console.log('disabled textarea');
            }
        })
    });
}

const observer = new MutationObserver(callback);

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

Even better: add elm.style.cursor = 'text';.

Replace the .then and remove the textarea altogether:

  .then(elm => {
    elm.remove();
    Array.from(document.querySelectorAll('.react-code-text')).forEach(x => { x.style.pointerEvents = 'auto'; });
    Array.from(document.querySelectorAll('[data-code-text]')).forEach(x => {
        x.innerText = x.dataset.codeText;
        delete x.dataset.codeText;
    });

The textarea makes no sense to me since the above code is possible and no functionality is lost from what I can see. Why have two layers of the same text?!

Edit: I forgot the cursor textarea thing is solely for symbols. I don't care about losing that feature.

Updated the script, turns out the Promise only works on initial load but when switching between code and Markdown preview, the textarea gets recreated. This update ensure we continuously check if there is a textarea on each change.