Skip to content

Instantly share code, notes, and snippets.

@fanuch

fanuch/userscript.js

Last active September 9, 2025 12:13
Show Gist options
  • Save fanuch/1511dd5423e0c68bb9d66f63b3a9c875 to your computer and use it in GitHub Desktop.
Save fanuch/1511dd5423e0c68bb9d66f63b3a9c875 to your computer and use it in GitHub Desktop.
Download ZIP
Block Click to Edit on Jira Issue
Raw
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/*
// @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
*/
(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 listDivs = document.querySelectorAll('div[role="list"]');
if (listDivs.length >= 2 && listDivs[1].firstElementChild) {
const toggleButton = listDivs[1].firstElementChild.cloneNode(true);
toggleButton.textContent = 'πŸ”’';
toggleButton.id = 'toggle-button';
toggleButton.addEventListener('click', toggleDoubleClickEdit);
listDivs[1].insertBefore(toggleButton, listDivs[1].firstChild);
}
}
/**
* 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-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.");
}
// Wait for the Jira issue description UI to load before creating the toggle button
setTimeout(function() {
createToggleButton();
const descriptionElement = document.querySelector('.ak-renderer-document');
if (descriptionElement) {
descriptionElement.addEventListener('click', handleClick, true);
}
}, 200);
})();
@dakrone
Copy link

dakrone commented Aug 29, 2024

Thank you for this!

@marvk
Copy link

marvk commented Jul 4, 2025

Doesn't work anymore 😒

@fanuch
Copy link
Author

fanuch commented Jul 7, 2025

@marvk unfortunately, Atlassian have a habit of making terrible JIRA UI changes that break user scripts 😒

I will update the script when I have a chance

@lgescobar
Copy link

I made a try to adapt it.

// ==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/*
// @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
 */
(function() {
    'use strict';

    let isDoubleClickEnabled = false; // Set initial value to false
    let initialized = false;

    /**
     * Creates the toggle button and inserts it into the Jira issue description UI.
     */
    function createToggleButton() {
        const listDivs = document.querySelectorAll('nav[aria-label="Actions"] [role="list"]');

        if (listDivs.length > 1) {
            console.error('Cannot locate actions item list');
        } else if (listDivs[0].firstElementChild) {
            const toggleButton = document.createElement('div');
            toggleButton.id = 'toggle-button';
            toggleButton.setAttribute('role', 'listitem');
            toggleButton.textContent = 'πŸ”’';
            toggleButton.style.cursor = 'pointer';
            toggleButton.addEventListener('click', toggleDoubleClickEdit);
            listDivs[0].insertBefore(toggleButton, listDivs[0].firstChild);
        }
    }

    /**
     * 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-button');

        const descriptionElement = document.querySelector('[data-editor-container-id="issue-description-editor"]');

        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 processMutations(mutations) {
        if (initialized) {
            observer.disconnect();
            return;
        }

        mutations.forEach(mutation => {
            if( document.querySelector('[data-editor-container-id="issue-description-editor"]') ) {
                initialize();
            }
        });
    }

    const observer = new MutationObserver(processMutations);
    window.debugMutationObserver = observer;

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

    function initialize() {
        if (initialized) {
            observer.disconnect();
            return;
        }

        initialized = true;
        observer.disconnect();
        createToggleButton();

        const descriptionElement = document.querySelector('[data-editor-container-id="issue-description-editor"]');
        if (descriptionElement) {
            descriptionElement.addEventListener('click', handleClick, true);
        }
    }
})();

Feel free to test it.

@gukandrew
Copy link

зобраТСння

Modifed it a bit for new elements structure on Jira:

// ==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.views.issue-base.common.description.label"]').firstElementChild.firstElementChild;
        if (parentDiv && parentDiv.firstElementChild) {
            const toggleButton = parentDiv.firstElementChild.cloneNode(true);
            const editorDiv = document.querySelector('[data-testid="issue.views.field.rich-text.editor-container"]');
            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.before(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);
    });
})();

@tpit-transdev
Copy link

Sadly all of these don't work anymore. I've dug deep into my soal and went on with my basic jscript knowledge and the help of F12 / console / chatgpt.com

Below is working as per today: september 9th 2025

// ==UserScript==
// @name         Jira Disable Inline Edit with Toggle
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Toggle click-to-edit on Jira issues including title and body
// @author       You
// @match        https://transdev-nl.atlassian.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ----------------------
    // Config
    // ----------------------
    const bodySelector = '.ak-renderer-document';
    const titleSelector = 'h1[data-testid="issue.views.issue-base.foundation.summary.heading"]';

    let editBlocked = true; // start met blokkeren

    // ----------------------
    // Toggle knop toevoegen
    // ----------------------
    function addToggleButton() {
        const header = document.querySelector('#jira-issue-header'); // parent element voor knop
        if (!header) return;

        if (document.getElementById('edit-block-toggle')) return; // knop al aanwezig

        const btn = document.createElement('button');
        btn.id = 'edit-block-toggle';
        btn.innerText = editBlocked ? 'πŸ”’' : 'πŸ”“';
        btn.style.marginLeft = '10px';
        btn.style.cursor = 'pointer';
        btn.title = 'Toggle Click-to-Edit Block';

        btn.addEventListener('click', () => {
            editBlocked = !editBlocked;
            btn.innerText = editBlocked ? 'πŸ”’' : 'πŸ”“';
            console.log('[Jira-edit-block] Edit mode', editBlocked ? 'blocked' : 'allowed');
        });

        header.appendChild(btn);
    }

    // ----------------------
    // Click-to-edit blokkeren
    // ----------------------
    function blockClicks(e) {
        if (!editBlocked) return;

        if (e.target.closest(bodySelector) || e.target.closest(titleSelector)) {
            e.stopImmediatePropagation();
            e.preventDefault();
            console.log('[Jira-edit-block] Click-to-edit blocked on', e.target);
        }
    }

    // ----------------------
    // Observer om pagina wijzigingen te volgen
    // ----------------------
    const observer = new MutationObserver(() => {
        addToggleButton();
    });

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

    // Event listener voor blokkeren
    document.addEventListener('click', blockClicks, true); // capture=true zodat we eerder zijn dan Jira

})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment