A userscript to block dead keys in Overleaf to allow typing accented letters on an Apple keyboard.

block-dead-keys.user.js

// ==UserScript==
// @name         Fix Overleaf for Typing Accented Characters
// @namespace    https://github.com/alberti42/
// @version      1.7
// @description  Block dead keys in Overleaf to allow for typing of accented letters. It also allows typing ß. It blocks undesired key combinations.
// @author       Andrea Alberti
// @match        https://www.overleaf.com/*
// @grant        none
// ==/UserScript==
//
// This script is designed for macOS users working in Overleaf who encounter issues
// with typing accented letters due to dead keys. It blocks dead key events to allow
// proper input of accented characters when using dead keys. To install this script
// in Greasemonkey (for Firefox) or Violentmonkey (for Chrome/Firefox/Edge),
// simply copy and paste it into a new userscript in your userscript manager.
// For more information on how to use dead keys to type accented characters on a Mac,
// please refer to the official Apple guide: https://support.apple.com/en-ph/guide/mac-help/mh27474/mac
//


(function() {
  'use strict';

  // Global debug variable
  const debug = false;  // Set to true for logging, false to disable logs

  // Function to log messages if debug is enabled
  function logDebug(message, ...optionalParams) {
    if (debug) {
      console.log(message, ...optionalParams);
    }
  }

  // Function to insert text into a contenteditable element at the cursor position
  function insertTextInContentEditable(text) {

    // Get the active element and check if it's contenteditable
    var activeElement = document.activeElement;
    if (!activeElement || !activeElement.getAttribute('contenteditable')) {
      console.error("Active element is not contenteditable or not found");
      return;
    }

    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);  // Get the range at the current cursor position
    range.deleteContents();  // Remove any selected text
    const textNode = document.createTextNode(text);  // Create a text node for the 'ß' character
    range.insertNode(textNode);  // Insert the 'ß' character at the current position
    range.setStartAfter(textNode);  // Move the cursor after the inserted character
    range.setEndAfter(textNode);
    selection.removeAllRanges();  // Clear all current selections
    selection.addRange(range);  // Add the new range (after the inserted character)
  }

  // Event listener to block dead keys and accented letters
  function handleKeydown(e) {
    // Log the event details for debugging
    if(debug) {
      console.log("Event Triggered:");
      console.log("Key: ", e.key);
      console.log("Code: ", e.code);
      console.log("Alt Key: ", e.altKey);
      console.log("Key Code: ", e.keyCode);
      console.log("Shift Key: ", e.shiftKey);
      console.log("Ctrl Key: ", e.ctrlKey);
      console.log("Meta Key: ", e.metaKey);
    }

    // Block dead keys
    if (e.key === 'Dead') {
      e.preventDefault();  // Block the key
      logDebug("Blocked dead key");
    }
    // Block Alt + ArrowDown and Alt + ArrowUp combinations
    else if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
      e.preventDefault();  // Block the key
      logDebug("Blocked arrow up/down keys");
    }
    // Allow Alt + S for typing the character 'ß'
    else if (e.altKey && e.keyCode === 83 && e.key === 'ß') {
      e.preventDefault();  // Prevent the default action
      logDebug("Alt+S Detected: allow typing 'ß'");
      insertTextInContentEditable('ß');  // Insert 'ß' at the current cursor position
    }
    // Allow Alt + Shift + 2 for typing the character '€'
    else if (e.altKey && e.shiftKey && e.keyCode === 50 && e.key === '€') {
      e.preventDefault();  // Prevent the default action
      logDebug("Alt+Shift+2 Detected: allow typing '€'");
      insertTextInContentEditable('€');  // Insert 'ß' at the current cursor position
    }
  }

  // Attach the event listener to the document
  document.addEventListener('keydown', handleKeydown, true);

})();