MediaWiki:Gadget-FDEditDiagramLink.js - Revision history

Hash: Correct an overstated comment: the timing was a browser-automation artifact, the state observation was not

2026-09-11T02:43:01Z

Correct an overstated comment: the timing was a browser-automation artifact, the state observation was not

← Older revision		Revision as of 02:43, 11 September 2026
Line 72:		Line 72:
	// content replacement - but it cannot be relied on alone here. Embedding a		// content replacement - but it cannot be relied on alone here. Embedding a
	// Mermaid or DOT diagram forces the whole page into ResourceLoader debug		// Mermaid or DOT diagram forces the whole page into ResourceLoader debug
	// mode, ~~under which~~ mediawiki.page.ready ~~can sit~~ in state ~~"executing" for~~		// mode, and mediawiki.page.ready has been observed still in state
	// ~~minutes and never fire~~ the hook~~. That is precisely the page this~~ gadget		// "executing" with the hook not yet fired, so a gadget hung off it alone
	// ~~exists for, so~~ DOM-ready drives the first pass.		// inserted nothing. DOM-ready drives the first pass instead.
	$( function () {		$( function () {
	run( document );		run( document );

Hash: Drive from DOM-ready too: wikipage.content never fires on debug-mode pages, which is exactly where this gadget is needed

2026-09-11T02:27:18Z

Drive from DOM-ready too: wikipage.content never fires on debug-mode pages, which is exactly where this gadget is needed

← Older revision		Revision as of 02:27, 11 September 2026
Line 60:		Line 60:
	}		}

	function ~~init~~( ~~$content~~ ) {		function run( root ) {
	if ( DIAGRAM_NAMESPACES.indexOf( mw.config.get( 'wgNamespaceNumber' ) ) !== -1 ) {		if ( DIAGRAM_NAMESPACES.indexOf( mw.config.get( 'wgNamespaceNumber' ) ) !== -1 ) {
	return;		return;
	}		}
	Array.prototype.forEach.call(		Array.prototype.forEach.call( root.querySelectorAll( SELECTOR ), addLink );
	~~$content[ 0 ]~~.querySelectorAll( SELECTOR ),
	addLink
	);
	}		}

	// ~~Fires~~ on ~~first render~~ and ~~again after any~~ dynamic content replacement,		// Driven from two triggers on purpose, with alreadyLinked() de-duplicating.
	// ~~hence~~ the ~~alreadyLinked~~() ~~guard.~~		//
	mw.hook( 'wikipage.content' ).add( ~~init~~ );		// wikipage.content is the idiomatic hook, and is what catches dynamic
			// content replacement - but it cannot be relied on alone here. Embedding a
			// Mermaid or DOT diagram forces the whole page into ResourceLoader debug
			// mode, under which mediawiki.page.ready can sit in state "executing" for
			// minutes and never fire the hook. That is precisely the page this gadget
			// exists for, so DOM-ready drives the first pass.
			$( function () {
			run( document );
			} );

			mw.hook( 'wikipage.content' ).add( function ( $content ) {
			run( $content[ 0 ] );
			} );
	}() );		}() );

Hash: Gadget: edit-diagram link on embedded FlexDiagrams diagrams

2026-09-11T02:24:29Z

Gadget: edit-diagram link on embedded FlexDiagrams diagrams

New page

/*
* Gadget-FDEditDiagramLink.js
*
* Adds an "Edit diagram" link above every diagram embedded in a page with
* {{#display_diagram:}}, opening that diagram's own editor in a new tab.
*
* FlexDiagrams renders an embedded diagram as a bare container with no route
* back to the page it came from, so editing one otherwise means reading the
* page name out of the wikitext and assembling a URL by hand.
*
* The page-name attribute differs by format: BPMN, Gantt, Mermaid and DOT use
* data-wiki-page (Mermaid and DOT only because of the local patch to
* FD_DisplayDiagram.php that adds it); Drawio uses data-mw-flexdiagrams-page.
*/
( function () {
'use strict';

// The diagram namespaces themselves: BPMN, Gantt, Mermaid, Drawio, DOT.
// Those pages already have an "Edit diagram" tab, so a second affordance
// there would just be noise.
var DIAGRAM_NAMESPACES = [ 740, 742, 744, 746, 748 ];

var SELECTOR = [
'.mermaid[data-wiki-page]',
'.dotText[data-wiki-page]',
'#canvas[data-wiki-page]', // BPMN and Gantt
'[data-mw-flexdiagrams-page]' // Drawio
].join( ',' );

function pageNameOf( el ) {
return el.getAttribute( 'data-wiki-page' ) ||
el.getAttribute( 'data-mw-flexdiagrams-page' );
}

function alreadyLinked( el ) {
var prev = el.previousElementSibling;
return !!prev && prev.classList.contains( 'fd-editlink' );
}

function addLink( el ) {
var pageName = pageNameOf( el );
if ( !pageName || alreadyLinked( el ) ) {
return;
}

var link = document.createElement( 'a' );
link.href = mw.util.getUrl( pageName, { action: 'editdiagram' } );
link.target = '_blank';
link.rel = 'noopener';
link.title = 'Opens in a new tab';
// Underscores are how the name appears in the wikitext, spaces are how
// it reads; show the readable form.
link.textContent = '✎ Edit diagram: ' + pageName.replace( /_/g, ' ' );

var wrapper = document.createElement( 'div' );
wrapper.className = 'fd-editlink';
wrapper.appendChild( link );

el.parentNode.insertBefore( wrapper, el );
}

function init( $content ) {
if ( DIAGRAM_NAMESPACES.indexOf( mw.config.get( 'wgNamespaceNumber' ) ) !== -1 ) {
return;
}
Array.prototype.forEach.call(
$content[ 0 ].querySelectorAll( SELECTOR ),
addLink
);
}

// Fires on first render and again after any dynamic content replacement,
// hence the alreadyLinked() guard.
mw.hook( 'wikipage.content' ).add( init );
}() );