Block Click to Edit on Jira Issue

userscript.js

// ==UserScript==
// @name         Disable Jira Click Edit
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Disable click edit in Jira issue descriptions
// @author       fanuch
// @match        https://*.atlassian.net/browse/*
// @match        https://*.atlassian.net/jira/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
// @grant        none
// ==/UserScript==

/**
 * Toggles the double-click-to-edit functionality in Jira issue descriptions.
 * The script creates a toggle button that allows the user to enable or disable editing.
 * The button uses emoji icons to represent the current state:
 * - 🔒 (locked) indicates that editing is disabled
 * - ✏️ (pencil) indicates that editing is enabled
 * Taken from https://gist.github.com/fanuch/1511dd5423e0c68bb9d66f63b3a9c875 and customised
 * to work on /jira/ as well as just /browse/.
 * Also moved button from next to top search bar to next to Description heading
 */
(function() {
    'use strict';
    let isDoubleClickEnabled = false; // Set initial value to false

    /**
     * Creates the toggle button and inserts it into the Jira issue description UI.
     */
    function createToggleButton() {
        const parentDiv = document.querySelector('[data-testid="issue-view-base.common.description.heading-wrapper"]');
        if (parentDiv && parentDiv.firstElementChild) {
            const toggleButton = parentDiv.firstElementChild.cloneNode(true);
            const editorDiv = document.querySelector('[data-testid="ak-editor-main-toolbar"]');
            if(editorDiv){
                //editor is already opened
                isDoubleClickEnabled = true;
                toggleButton.textContent = '✏️';
            }else{
                toggleButton.textContent = '🔒';
            }
            toggleButton.id = 'toggle-edit-desc-button';
            delete toggleButton.dataset.testid;
            toggleButton.removeAttribute("class");
            toggleButton.style.cursor = "pointer";
            toggleButton.style.paddingLeft = "5px";
            toggleButton.addEventListener('click', toggleDoubleClickEdit);
            parentDiv.firstElementChild.after(toggleButton);
            parentDiv.style.justifyContent = 'unset';
        }
    }

    /**
     * Toggles the double-click-to-edit functionality when the toggle button is clicked.
     * Updates the button icon and adds/removes the event listener on the description element.
     */
    function toggleDoubleClickEdit() {
        isDoubleClickEnabled = !isDoubleClickEnabled;
        const button = document.getElementById('toggle-edit-desc-button');
        const descriptionElement = document.querySelector('.ak-renderer-document');

        if (isDoubleClickEnabled) {
            button.textContent = '✏️';
            descriptionElement.removeEventListener('click', handleClick, true);
        } else {
            button.textContent = '🔒';
            descriptionElement.addEventListener('click', handleClick, true);
        }
    }

    /**
     * Handles the click event on the Jira issue description element.
     * Stops the event propagation to prevent the default double-click-to-edit behavior.
     * @param {Event} e - The click event object.
     */
    function handleClick(e) {
        e.stopPropagation();
        console.log("Blocked click-edit of Jira issue description. You're welcome.");
    }

    function watchForElement(selector, callback) {
        /// Keep track of elements we've already processed
        const processedElements = new WeakSet();

        // First check if element exists
        const element = document.querySelector(selector);
        if (element && !processedElements.has(element)) {
            processedElements.add(element);
            const existingButton = document.getElementById('toggle-edit-desc-button');
            if(!existingButton){
                callback(element);
            }
        }

        // Set up observer
        const observer = new MutationObserver(mutations => {
            const element = document.querySelector(selector);
            if (element && !processedElements.has(element)) {
                processedElements.add(element);
                 const existingButton = document.getElementById('toggle-edit-desc-button');
                if(!existingButton){
                    callback(element);
                }
            }
        });

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

        return observer;
    }

    // Wait for the Jira issue description UI to load before creating the toggle button
    watchForElement('div.ak-renderer-document', descriptionDiv => {
        createToggleButton();
        descriptionDiv.addEventListener('click', handleClick, true);
    });
})();