MediaWiki:Gadget-FDVEDiagramLink.js - Revision history

Hash: Restore "Change which diagram is shown" for template-wrapped embeds, where the page name is now an editable parameter

2026-09-11T05:28:35Z

Restore "Change which diagram is shown" for template-wrapped embeds, where the page name is now an editable parameter

← Older revision		Revision as of 05:28, 11 September 2026
Line 73:		Line 73:
	*/		*/
	function diagramPageFromModel( model ) {		function diagramPageFromModel( model ) {
			var info = diagramInfoFromModel( model );
			return info ? info.page : null;
			}

			/**
			* @param {ve.dm.MWTransclusionNode} model
			* @return {Object\|null} { page: string, isTemplate: boolean }, or null.
			* isTemplate distinguishes {{Diagram\|page=}} - whose page name is an
			* editable parameter - from a bare {{#display_diagram:}}, whose page name
			* is part of the parser-function target and cannot be edited in VE.
			*/
			function diagramInfoFromModel( model ) {
	var mwData, parts, i, part, target, params, wt, colon;		var mwData, parts, i, part, target, params, wt, colon;

Line 102:		Line 114:
	wt = ( wt === undefined \|\| wt === null ) ? '' : String( wt ).trim();		wt = ( wt === undefined \|\| wt === null ) ? '' : String( wt ).trim();
	if ( wt ) {		if ( wt ) {
	return wt;		return { page: wt, isTemplate: true };
	}		}
	continue;		continue;
Line 119:		Line 131:
	wt = wt.slice( colon + 1 ).trim();		wt = wt.slice( colon + 1 ).trim();
	if ( wt ) {		if ( wt ) {
	return wt;		return { page: wt, isTemplate: false };
	}		}
	}		}
Line 201:		Line 213:

	FDDiagramContextItem.prototype.renderBody = function () {		FDDiagramContextItem.prototype.renderBody = function () {
	var ~~page~~ = ~~diagramPageFromModel~~( this.model ),		var item = this,
			info = diagramInfoFromModel( this.model ),
	url = this.getDiagramEditUrl(),		url = this.getDiagramEditUrl(),
	$edit;		$edit, $change;

	if ( !~~page~~ \|\| !url ) {		if ( !info \|\| !url ) {
	// Should be unreachable - isCompatibleWith already required a page.		// Should be unreachable - isCompatibleWith already required a page.
	FDDiagramContextItem.super.prototype.renderBody.call( this );		FDDiagramContextItem.super.prototype.renderBody.call( this );
Line 211:		Line 224:
	}		}

	// ~~A plain anchor is~~ fine here: the context popup ~~is outside~~ the		// Plain anchors are fine here: the context popup lives OUTSIDE the
	// contenteditable surface, so VE does not suppress the click.		// contenteditable surface, so VE does not suppress the click the way it
			// does inside the node itself.
	$edit = $( '<a>' )		$edit = $( '<a>' )
	.addClass( 'fd-ve-diagramContextItem-edit' )		.addClass( 'fd-ve-diagramContextItem-edit' )
	.attr( { target: '_blank', rel: 'noopener' } )		.attr( { target: '_blank', rel: 'noopener' } )
	.text( 'Edit “' + page.replace( /_/g, ' ' ) + '” ↗' );		.text( 'Edit “' + info.page.replace( /_/g, ' ' ) + '” ↗' );
	ve.setAttributeSafe( $edit[ 0 ], 'href', url, '#' );		ve.setAttributeSafe( $edit[ 0 ], 'href', url, '#' );

	~~// Deliberately the only control here. There was also a "Change which~~
	~~// diagram is shown" link that fell through to the stock transclusion~~
	~~// dialog, but that dialog is empty for this node: #display_diagram is a~~
	~~// parser function, so the diagram page is part of the target string~~
	~~// rather than a parameter, and VE sources its parameter list from~~
	~~// TemplateData, which a parser function has none of. It looked~~
	~~// actionable and was not. To point an article at a different diagram,~~
	~~// edit the page source - it is one obvious line of wikitext.~~
	this.$body.empty().append( $( '<div>' ).append( $edit ) );		this.$body.empty().append( $( '<div>' ).append( $edit ) );

			// Offered ONLY for {{Diagram\|page=}}, where the page name is a real
			// template parameter that VE's transclusion dialog can edit. For a bare
			// {{#display_diagram:}} the same dialog opens empty - the page name is part
			// of the parser-function target, and VE has no setter for a target - so
			// showing this there would be a control that looks actionable and is not.
			//
			// This item replaces the stock transclusion context item (ModeledFactory
			// keeps only the most specific class in an inheritance chain), so without
			// this link there is no route at all to the parameter dialog.
			if ( info.isTemplate ) {
			$change = $( '<a>' )
			.addClass( 'fd-ve-diagramContextItem-change' )
			.attr( 'href', '#' )
			.text( 'Change which diagram is shown' )
			.on( 'click', function ( e ) {
			e.preventDefault();
			ve.ui.MWTransclusionContextItem.prototype.onEditButtonClick.call( item );
			} );
			this.$body.append( $( '<div>' ).append( $change ) );
			}
	};		};

Hash: Recognise {{Diagram|page=}} as well as the bare parser function, so converted embeds keep double-click-to-edit

2026-09-11T05:11:13Z

Recognise {{Diagram|page=}} as well as the bare parser function, so converted embeds keep double-click-to-edit

← Older revision		Revision as of 05:11, 11 September 2026
Line 65:		Line 65:
	* upgrade reverts that patch.		* upgrade reverts that patch.
	*		*
	* ~~target~~.wt "#display_diagram:Mermaid:~~Some_Page"~~		* Two shapes are recognised:
	* target.~~function "display_diagram"~~		* {{Diagram\|page=Mermaid:Foo}} -> params.page.wt (VE-editable)
			* {{#display_diagram:Mermaid:Foo}} -> target.wt after ':' (legacy, still valid)
	*		*
	* @param {ve.dm.MWTransclusionNode} model		* @param {ve.dm.MWTransclusionNode} model
Line 72:		Line 73:
	*/		*/
	function diagramPageFromModel( model ) {		function diagramPageFromModel( model ) {
	var mwData, parts, i, target, wt, colon;		var mwData, parts, i, part, target, params, wt, colon;

	try {		try {
Line 85:		Line 86:

	for ( i = 0; i < parts.length; i++ ) {		for ( i = 0; i < parts.length; i++ ) {
	~~target~~ = parts[ i ] && parts[ i ].template && ~~parts[ i ].template~~.target;		part = parts[ i ] && parts[ i ].template;
	if ( !target ~~\|\| target.function !== 'display_diagram'~~ ) {		target = part && part.target;
			if ( !target ) {
	continue;		continue;
	}		}
	wt = ~~String~~( target.wt \|\| '' );
	~~colon = wt~~.~~indexOf~~( ~~':'~~ );		// Shape 1 - {{Diagram\|page=Mermaid:Foo}}. Parsoid gives a template part
	if ( ~~colon === -1~~ ) {		// a target.href and NO target.function, putting the page name in
			// params.page. This is the shape VE can actually edit - parameters are
			// editable, a parser-function target is not - which is the whole reason
			// Template:Diagram exists.
			if ( normaliseTemplateName( target ) === WRAPPER_TEMPLATE ) {
			params = part.params;
			wt = params && params.page && params.page.wt;
			wt = ( wt === undefined \|\| wt === null ) ? '' : String( wt ).trim();
			if ( wt ) {
			return wt;
			}
	continue;		continue;
	}		}
	// Everything after "#display_diagram:" is the diagram page, which
	// itself contains a namespace colon.		// Shape 2 - a bare {{#display_diagram:Mermaid:Foo}}. Still supported:
	wt = wt.slice( colon + 1 ).trim();		// embeds predating the template use it, and it remains legal wikitext.
	if ( wt ) {		if ( target.function === 'display_diagram' ) {
	return wt;		wt = String( target.wt \|\| '' );
			colon = wt.indexOf( ':' );
			if ( colon === -1 ) {
			continue;
			}
			// Everything after "#display_diagram:" is the diagram page, which
			// itself contains a namespace colon.
			wt = wt.slice( colon + 1 ).trim();
			if ( wt ) {
			return wt;
			}
	}		}
	}		}
	return null;		return null;
			}

			// Name of the wrapper template, normalised (see normaliseTemplateName).
			var WRAPPER_TEMPLATE = 'diagram';

			/**
			* Reduce a transclusion target to a bare, comparable template name.
			* Parsoid hrefs look like "./Template:Diagram"; hand-written wikitext may say
			* "Template:Diagram", "diagram" or use underscores.
			*
			* @param {Object} target
			* @return {string} lower-cased name with no namespace prefix
			*/
			function normaliseTemplateName( target ) {
			return String( ( target && ( target.href \|\| target.wt ) ) \|\| '' )
			.replace( /^\.\//, '' )
			.replace( /^Template:/i, '' )
			.replace( /_/g, ' ' )
			.trim()
			.toLowerCase();
	}		}

Hash: Remove the dead "Change which diagram is shown" link: the transclusion dialog is empty for a parser function, so it was a false affordance

2026-09-11T04:49:54Z

Remove the dead "Change which diagram is shown" link: the transclusion dialog is empty for a parser function, so it was a false affordance

← Older revision		Revision as of 04:49, 11 September 2026
Line 159:		Line 159:

	FDDiagramContextItem.prototype.renderBody = function () {		FDDiagramContextItem.prototype.renderBody = function () {
	var ~~item = this,~~		var page = diagramPageFromModel( this.model ),
	page = diagramPageFromModel( this.model ),
	url = this.getDiagramEditUrl(),		url = this.getDiagramEditUrl(),
	$edit~~, $change~~;		$edit;

	if ( !page \|\| !url ) {		if ( !page \|\| !url ) {
Line 178:		Line 177:
	ve.setAttributeSafe( $edit[ 0 ], 'href', url, '#' );		ve.setAttributeSafe( $edit[ 0 ], 'href', url, '#' );

	// ~~Overriding onEditButtonClick costs~~ the ~~normal route to changing~~ which		// Deliberately the only control here. There was also a "Change which
	// diagram is ~~embedded, so offer it explicitly.~~		// diagram is shown" link that fell through to the stock transclusion
	~~$change = $( '<~~a~~>' )~~		// dialog, but that dialog is empty for this node: #display_diagram is a
	~~.addClass( 'fd-ve-diagramContextItem-change' )~~		// parser function, so the diagram page is part of the target string
	~~.attr( 'href'~~, ~~'#' )~~		// rather than a parameter, and VE sources its parameter list from
	~~.text( 'Change which~~ diagram is ~~shown' )~~		// TemplateData, which a parser function has none of. It looked
	~~.on( 'click'~~, function ~~( e ) {~~		// actionable and was not. To point an article at a different diagram,
	e.~~preventDefault();~~		// edit the page source - it is one obvious line of wikitext.
	~~ve.ui.MWTransclusionContextItem.prototype.onEditButtonClick~~.~~call( item );~~		this.$body.empty().append( $( '<div>' ).append( $edit ) );
	~~} );~~

	this.$body.empty().append(
	$( '<div>' ).append( $edit ),
	~~$( '<div>' ).append( $change )~~
	);
	};		};

Hash: Warn loudly if the VE classes are missing instead of failing silently

2026-09-11T04:37:44Z

Warn loudly if the VE classes are missing instead of failing silently

← Older revision		Revision as of 04:37, 11 September 2026
Line 28:		Line 28:
	'use strict';		'use strict';

			if ( typeof ve === 'undefined' \|\| !ve.ui \|\| !ve.dm ) {
			// Not inside VisualEditor - nothing to do, and nothing worth saying.
			return;
			}

			// VE loads plugin modules as SIBLINGS of its own modules, not after them:
			// ve.init.mw.ArticleTargetLoader builds
			// [ 'ext.visualEditor.articleTarget', ...conf.pluginModules ]
			// and loads that as one batch, so there is no ordering guarantee. The classes
			// below therefore have to be pulled in through this gadget's own
			// dependencies= in MediaWiki:Gadgets-definition
			// (ext.visualEditor.core, ext.visualEditor.mwtransclusion).
			//
			// If that wiring is ever lost, this file would silently do nothing and the
			// stock template context item would take over again - which is exactly how
			// this failed the first time - so say so out loud.
	if (		if (
	~~typeof ve === 'undefined' \|\| !ve.ui \|\| !ve.dm \|\|~~
	!ve.ui.MWTransclusionContextItem \|\|		!ve.ui.MWTransclusionContextItem \|\|
	!ve.ui.contextItemFactory \|\|		!ve.ui.contextItemFactory \|\|
	!ve.dm.MWTransclusionNode		!ve.dm.MWTransclusionNode
	) {		) {
	// ~~Not inside~~ VisualEditor~~, or VE moved on~~ - ~~do nothing~~.		// eslint-disable-next-line no-console
			console.warn( 'FDVEDiagramLink: VisualEditor classes not available at ' +
			'plugin execution time; check dependencies= in MediaWiki:Gadgets-definition. ' +
			'Diagram nodes will fall back to the stock template context item.' );
	return;		return;
	}		}

Hash: VE plugin: double-click an embedded diagram to open its editor in a new tab

2026-09-11T04:27:13Z

VE plugin: double-click an embedded diagram to open its editor in a new tab

New page

/*
* Gadget-FDVEDiagramLink.js
*
* Makes an embedded FlexDiagrams diagram actionable inside VisualEditor:
* double-click it (or use the context popup) to open that diagram's own editor
* in a new tab.
*
* Why a plugin rather than a link: VE deliberately neutralises links inside
* focusable nodes. ve.ce.FocusableNode.js binds a click handler that
* preventDefault()s left-clicks on anything not content-editable, with the
* comment "preventing default on mousedown doesn't suppress click events, so
* link navigation would still occur". The context popup, however, lives OUTSIDE
* the contenteditable surface, which is why plain anchors work there - see
* ve.ui.LinkContextItem.
*
* Loaded into VisualEditor through $wgVisualEditorPluginModules, so this file
* executes before the editor toolbar is built. The compact placeholder that
* replaces the raw diagram source is CSS, in [[MediaWiki:Common.css]].
*
* Maintainer note: VE here is the REL1_43 bundle and reports no version number,
* so there is nothing to gate on - the guard below feature-detects instead.
* APIs relied on: ve.ui.MWTransclusionContextItem, ve.ui.contextItemFactory,
* ve.dm.MWTransclusionNode, ve.ui.ModeledFactory's most-specific-wins rule, and
* ve.ce.MWTransclusionNode.executeCommand delegating to the context item.
* Re-check those after a MediaWiki upgrade.
*/
( function () {
'use strict';

if (
typeof ve === 'undefined' || !ve.ui || !ve.dm ||
!ve.ui.MWTransclusionContextItem ||
!ve.ui.contextItemFactory ||
!ve.dm.MWTransclusionNode
) {
// Not inside VisualEditor, or VE moved on - do nothing.
return;
}

/**
* Recover the diagram's page name from a transclusion model.
*
* Read from data-mw rather than the rendered DOM: it is the canonical model
* data, it covers all five diagram formats uniformly, and unlike the
* data-wiki-page attribute it does not depend on the local patch to
* FD_DisplayDiagram.php - so this keeps working even if an extension
* upgrade reverts that patch.
*
* target.wt "#display_diagram:Mermaid:Some_Page"
* target.function "display_diagram"
*
* @param {ve.dm.MWTransclusionNode} model
* @return {string|null} e.g. "Mermaid:Some_Page"
*/
function diagramPageFromModel( model ) {
var mwData, parts, i, target, wt, colon;

try {
mwData = model.getAttribute( 'mw' );
} catch ( e ) {
return null;
}
parts = mwData && mwData.parts;
if ( !Array.isArray( parts ) ) {
return null;
}

for ( i = 0; i < parts.length; i++ ) {
target = parts[ i ] && parts[ i ].template && parts[ i ].template.target;
if ( !target || target.function !== 'display_diagram' ) {
continue;
}
wt = String( target.wt || '' );
colon = wt.indexOf( ':' );
if ( colon === -1 ) {
continue;
}
// Everything after "#display_diagram:" is the diagram page, which
// itself contains a namespace colon.
wt = wt.slice( colon + 1 ).trim();
if ( wt ) {
return wt;
}
}
return null;
}

/**
* Context item shown when an embedded diagram is selected in VE.
*
* Subclasses the stock transclusion item on purpose: ve.ui.ModeledFactory
* keeps only the most specific class in an inheritance chain, so this
* replaces the template context item for diagram nodes and leaves every
* other template alone.
*
* @class
* @extends ve.ui.MWTransclusionContextItem
* @constructor
*/
function FDDiagramContextItem() {
FDDiagramContextItem.super.apply( this, arguments );
this.$element.addClass( 'fd-ve-diagramContextItem' );
}

OO.inheritClass( FDDiagramContextItem, ve.ui.MWTransclusionContextItem );

FDDiagramContextItem.static.name = 'fdDiagram';
FDDiagramContextItem.static.icon = 'articles';
FDDiagramContextItem.static.label = 'Diagram';
FDDiagramContextItem.static.modelClasses = [ ve.dm.MWTransclusionNode ];

FDDiagramContextItem.static.isCompatibleWith = function ( model ) {
return model instanceof ve.dm.MWTransclusionNode &&
!!diagramPageFromModel( model );
};

/**
* @return {string|null} URL of this diagram's editor
*/
FDDiagramContextItem.prototype.getDiagramEditUrl = function () {
var page = diagramPageFromModel( this.model );
return page ? mw.util.getUrl( page, { action: 'editdiagram' } ) : null;
};

FDDiagramContextItem.prototype.openDiagramEditor = function () {
var url = this.getDiagramEditUrl();
if ( url ) {
window.open( url, '_blank', 'noopener' );
}
};

/**
* Hijack the primary action. ve.ce.MWTransclusionNode.executeCommand looks
* for a context item that is an instanceof ve.ui.MWTransclusionContextItem
* and calls onEditButtonClick() on it, so overriding this also gives us
* double-click and Enter on the node for free.
*/
FDDiagramContextItem.prototype.onEditButtonClick = function () {
this.openDiagramEditor();
};

FDDiagramContextItem.prototype.renderBody = function () {
var item = this,
page = diagramPageFromModel( this.model ),
url = this.getDiagramEditUrl(),
$edit, $change;

if ( !page || !url ) {
// Should be unreachable - isCompatibleWith already required a page.
FDDiagramContextItem.super.prototype.renderBody.call( this );
return;
}

// A plain anchor is fine here: the context popup is outside the
// contenteditable surface, so VE does not suppress the click.
$edit = $( '<a>' )
.addClass( 'fd-ve-diagramContextItem-edit' )
.attr( { target: '_blank', rel: 'noopener' } )
.text( 'Edit “' + page.replace( /_/g, ' ' ) + '” ↗' );
ve.setAttributeSafe( $edit[ 0 ], 'href', url, '#' );

// Overriding onEditButtonClick costs the normal route to changing which
// diagram is embedded, so offer it explicitly.
$change = $( '<a>' )
.addClass( 'fd-ve-diagramContextItem-change' )
.attr( 'href', '#' )
.text( 'Change which diagram is shown' )
.on( 'click', function ( e ) {
e.preventDefault();
ve.ui.MWTransclusionContextItem.prototype.onEditButtonClick.call( item );
} );

this.$body.empty().append(
$( '<div>' ).append( $edit ),
$( '<div>' ).append( $change )
);
};

/* Registration */
ve.ui.contextItemFactory.register( FDDiagramContextItem );
}() );