When viewing a code file, how to disable the blinking cursor?

[concretevitamin]

Select Topic Area

Product Feedback

Body

Recently GitHub updated its UI so that when viewing a code file, dragging the mouse to select some text, or just clicking somewhere on the page, would make a blinking cursor appear.

I found this behavior distracting since I just want to view the file, not edit it. Any way to turn it off?

[round-corgi]

Yes please. The second I select some code or even accidentally click anywhere on the code page, I have to find an off-screen area to click before I can even use back/forward buttons.

This makes browsing code files really annoying, as I never want to edit code directly in GitHub, it's just there to view.

[yangle]

Another annoyance from the new behavior is that pressing Home moves the blinking cursor to the start of the line rather than moving the viewport to the top of the page.

[sd3412]

Github, you need to urgently remove the idiotic cursor feature which does not serve any purpose other than preventing me from navigating my browser with the keyboard.

I really do not understand who in your organization conceived the notion of placing a cursor into text which is not meant to be edited.

I am very tired of unfortunately having come to rely on tools of the craft which are captive to organizations that hire zoomers and are obsessed with yassifying everything.

If someone had a custom css/tamperscript to offer I'd be very grateful.

[bombela]

It breaks all keyboard navigation, it's infuriating. I get caught up every single time. I use Vimium, and every-time I press jk to move up/down while the blinking cursor is active, I get a popup hard to dismiss stating that the file is readonly. As if it wasn't obvious.

[montchr]

It's also made it almost impossible to copy the permalink for a multiple-line region of code without the addition of a column number. Who asked for column numbers? To me, it only overcomplicates an important feature of the code view, which means now I have to edit the URL to remove the column indicators since they give the false impression that they are meaningful.

[tankorsmash]

I'd love to have the ability to press Up and Down to control the scrollbar, like before. Or being able to hit Escape to go out of cursor mode into traditional browser page.

[Sebas-h]

Quite annoying indeed. I also use Vimium (as @bombela) and so after my cursor interacts with the code textarea it breaks any further convenient keyboard navigation

I've put together the below Userscript as a workaround fix (@sd3412)
(well "I"... probably should be prefixed with "A")

Userscript (tested on Firefox using Tampermonkey)

// ==UserScript==
// @name         GitHub SPA Userscript
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Run a script on GitHub and react to SPA navigation
// @author       You
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  // Function to wait for an element by its CSS selector
  function waitForElement(selector, timeout = 3000, interval = 500) {
    return new Promise((resolve, reject) => {
      const startTime = Date.now();
      const endTime = Date.now() + timeout;

      // Function to check for the element
      const checkForElement = () => {
        const element = document.querySelector(selector);
        if (element) {
          console.log(`[My-UserScript] element found in ${Date.now() - startTime}ms`);
          resolve(element); // Element found
        } else if (Date.now() > endTime) {
          reject(new Error(`[My-UserScript] Element with selector "${selector}" not found within ${timeout}ms`)); // Timeout
        } else {
          setTimeout(checkForElement, interval); // Retry after interval
        }
      };

      checkForElement(); // Initial call
    });
  }

  // Function to execute your logic
  function runScript() {
    // Attempt to find an element and do something with it
    waitForElement('textarea[id*="cursor"][id*="text"][id*="area"]', 3000, 500)
      .then((textarea) => {
        // Create a new <div> element
        const div = document.createElement("div");
        // Copy all attributes from the textarea to the div
        for (const attr of textarea.attributes) {
          div.setAttribute(attr.name, attr.value);
        }
        // Copy the inner text or child elements
        div.innerHTML = textarea.innerHTML;
        // Replace the textarea with the new div
        textarea.replaceWith(div);
      })
      .catch((error) => {
        console.warn(error.message);
      });
  }

  // Run the script on page load
  runScript();

  // Monitor for SPA navigation changes
  const observeUrlChange = () => {
    let lastUrl = location.href;
    new MutationObserver(() => {
      const currentUrl = location.href;
      if (currentUrl !== lastUrl) {
        lastUrl = currentUrl;
        console.log("[My-UserScript] URL changed:", currentUrl);
        runScript(); // Run the script again on navigation
      }
    }).observe(document, { subtree: true, childList: true });
  };

  observeUrlChange();
})();

A short explanation of the code

• It mainly relies on converting the <textarea> element the code resides in to a <div> which seems to prevent the cursor from appearing after interacting with the code.
• Secondly it runs the Userscript on each URL change, for which it uses location.href to check this (bc github.com is a SPA)
• Lastly it runs a retry Promise to search for the <textarea> element, bc it often can't find it immediately after URL change or page load (it runs for 3 seconds, checking every 500ms for the element)

[michaele-blend]

your script breaks the viewer for me on chromium when I click on the page too quickly after load, or when the URL contains fragments which cause a re-draw after load.

it's also really chatty.

here's a version with no promises and no chatter. which avoids hacky DOM mutations by simply setting disabled on the textarea. this has two effects, the cursor is never grabbed because the input is disabled, and prevents firing of cursor-related events (because there's no focus and no cursor).
it's also portable, tested on chromium and firefox.

// ==UserScript==
// @name         GitHub Disable Editor Userscript
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Disable GitHub editor features by adding the `disabled` attribute
// @author       Michael Evans
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(() => {
    const disable = () => {
        for (const el of document.querySelectorAll('textarea#read-only-cursor-text-area')) {
            el.disabled = true;
        }
    }
    disable();
    let lastUrl = location.href;
    new MutationObserver(() => {
        const currentUrl = location.href;
        if (currentUrl !== lastUrl) {
            disable()
        }
    }).observe(document, { subtree: true, childList: true });
})()