Last active
July 14, 2025 06:48
-
-
Save fanuch/1511dd5423e0c68bb9d66f63b3a9c875 to your computer and use it in GitHub Desktop.
Block Click to Edit on Jira Issue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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); | |
})(); |
Doesn't work anymore 😢
@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
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.
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);
});
})();
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for this!