Launch reference editors from ve.ce.MWReferencesListNode

Bug: T54750
Depends-On: I502358a3229fbda44950f7f7513548d49d25e0c9
Change-Id: Idea26ffbc5ee859f6ad9456029af4180226c1a07

modules/ve-cite/ve.ce.MWReferencesListNode.js

@@ -72,6 +72,16 @@ ve.ce.MWReferencesListNode.static.getDescription = function ( model ) {
 	return model.getAttribute( 'refGroup' );
 };
 
+/**
+ * @inheritdoc ve.ce.FocusableNode
+ */
+ve.ce.MWReferencesListNode.prototype.getExtraHighlightClasses = function () {
+	var extraClasses = ve.ce.FocusableNode.prototype.getExtraHighlightClasses.apply( this, arguments );
+	return extraClasses.concat( [
+		've-ce-mwReferencesListNode-highlight'
+	] );
+};
+
 /* Methods */
 
 /**
@@ -225,8 +235,7 @@ ve.ce.MWReferencesListNode.prototype.update = function () {
 		this.$refmsg.text( emptyText );
 		this.$element.append( this.$refmsg );
 	} else {
-		for ( var i = 0, iLen = nodes.indexOrder.length; i < iLen; i++ ) {
+		nodes.indexOrder.forEach( function ( index ) {
-			var index = nodes.indexOrder[ i ];
 			var firstNode = nodes.firstNodes[ index ];
 
 			var key = internalList.keys[ index ];
@@ -238,7 +247,7 @@ ve.ce.MWReferencesListNode.prototype.update = function () {
 			} );
 
 			if ( !keyedNodes.length ) {
-				continue;
+				return;
 			}
 
 			var $li = $( '<li>' )
@@ -258,11 +267,41 @@ ve.ce.MWReferencesListNode.prototype.update = function () {
 					$( '<span>' )
 						.addClass( 've-ce-mwReferencesListNode-muted' )
 						.text( ve.msg( 'cite-ve-referenceslist-missingref-in-list' ) )
-				);
+				).addClass( 've-ce-mwReferencesListNode-missingRef' );
+			}
+
+			if ( this.getRoot() ) {
+				var surface = this.getRoot().getSurface().getSurface();
+				$li.on( 'mousedown', function ( e ) {
+					if ( modelNode && modelNode.length ) {
+						var items = ve.ui.contextItemFactory.getRelatedItems( [ firstNode ] );
+						if ( items.length ) {
+							var contextItem = ve.ui.contextItemFactory.lookup( items[ 0 ].name );
+							if ( contextItem ) {
+								var command = surface.commandRegistry.lookup( contextItem.static.commandName );
+								if ( command ) {
+									var fragmentArgs = {
+										fragment: surface.getModel().getLinearFragment( firstNode.getOuterRange(), true ),
+										selectFragmentOnClose: false
+									};
+									var newArgs = ve.copy( command.args );
+									if ( command.name === 'reference' ) {
+										newArgs[ 1 ] = fragmentArgs;
+									} else {
+										ve.extendObject( newArgs[ 0 ], fragmentArgs );
+									}
+									command.execute( surface, newArgs );
+								}
+							}
+						}
+					}
+					e.preventDefault();
+				} );
 			}
 
 			this.$reflist.append( $li );
-		}
+		}.bind( this ) );
+
 		this.updateClasses();
 		this.$element.append( this.$reflist );
 	}

modules/ve-cite/ve.ce.MWReferencesListNode.less

@@ -17,4 +17,30 @@
 		color: #72777d;
 		font-style: italic;
 	}
+
+	.mw-references > li {
+		&:hover {
+			cursor: pointer;
+			background: fade( #6da9f7, 15% );
+		}
+
+		> * {
+			pointer-events: none;
+		}
+	}
+
+	&-missingRef {
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		user-select: none;
+		pointer-events: none;
+	}
+}
+
+.ve-ce-mwReferencesListNode-highlight {
+	.ve-ce-surface-highlights-focused & {
+		background: transparent;
+		pointer-events: none;
+		box-shadow: inset 0 0 0 1px #4c76ac, 0 0 0 2px #4c76ac;
+	}
 }

modules/ve-cite/ve.ui.MWReferencesListContextItem.js

@@ -41,6 +41,8 @@ ve.ui.MWReferencesListContextItem.static.modelClasses = [ ve.dm.MWReferencesList
 
 ve.ui.MWReferencesListContextItem.static.commandName = 'referencesList';
 
+ve.ui.MWReferencesListContextItem.static.embeddable = false;
+
 /* Methods */
 
 /**