VE square brackets appear in a span

Some wikis such as eswiki and frwiki prefer to hide the square
brackets by default.  Adding a selector-friendly DOM element around
the brackets supports this customization.

This makes it possible to hide the brackets with CSS:

  .cite-bracket {
    display: none;
  }

And it also becomes possible to hide the brackets but make them
appear in copy-pasted article content:

  .cite-bracket {
    font-size: 0;
  }

Bug: T370512
Depends-On: I56b52c399d2c76689fdcb0bc7fd50a8c0ced28fd
Change-Id: Id8684ccee2e6725af2c861da20fc31af1067e614

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

@@ -129,7 +129,7 @@ ve.ce.MWReferenceNode.prototype.executeCommand = function () {
  * Update the rendering
  */
 ve.ce.MWReferenceNode.prototype.update = function () {
-	this.$text.text( this.model.getIndexLabel() );
+	this.$text.html( this.model.getIndexLabel() );
 	this.$link
 		.attr( 'data-mw-group', this.model.getGroup() || null );
 	this.$element.toggleClass( 've-ce-mwReferenceNode-placeholder', !!this.model.getAttribute( 'placeholder' ) );

modules/ve-cite/ve.dm.MWReferenceNode.js

@@ -266,9 +266,9 @@ ve.dm.MWReferenceNode.static.toDomElements = function ( dataElement, doc, conver
 		// HTML for the external clipboard, it will be ignored by the converter
 		const $link = $( '<a>', doc )
 			.attr( 'data-mw-group', this.getGroup( dataElement ) || null );
-		$( el ).addClass( 'mw-ref reference' ).append(
+		$( el ).addClass( 'mw-ref reference' ).html(
 			$link.append(
-				$( '<span>', doc ).addClass( 'mw-reflink-text' ).text( this.getIndexLabel( dataElement, converter.internalList ) )
+				$( '<span>', doc ).addClass( 'mw-reflink-text' ).html( this.getIndexLabel( dataElement, converter.internalList ) )
 			)
 		);
 	}
@@ -317,14 +317,15 @@ ve.dm.MWReferenceNode.static.getGroup = function ( dataElement ) {
  * @static
  * @param {Object} dataElement Element data
  * @param {ve.dm.InternalList} internalList Internal list
- * @return {string} Reference label
+ * @return {string} Reference label as HTML
  */
 ve.dm.MWReferenceNode.static.getIndexLabel = function ( dataElement, internalList ) {
 	const refGroup = dataElement.attributes.refGroup;
 	const indexNumber = dataElement.attributes.placeholder ? '…' :
 		ve.dm.MWReferenceNode.static.findIndexNumber( dataElement, internalList );
+	const label = ( refGroup ? refGroup + ' ' : '' ) + indexNumber;
 
-	return '[' + ( refGroup ? refGroup + ' ' : '' ) + indexNumber + ']';
+	return `<span class="cite-bracket">[</span>${ label }<span class="cite-bracket">]</span>`;
 };
 
 /**

tests/qunit/ve-cite/ve.dm.citeExample.js

@@ -42,31 +42,31 @@ ve.dm.citeExample.domToDataCases = {
 			<p>
 				Foo
 				<sup about="#mwt1" class="mw-ref reference" data-mw='{"name":"ref","attrs":{"name":"bar"}}' id="cite_ref-bar-1-0" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-bar-1">[1]</a>
+					<a href="#cite_note-bar-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a>
 				</sup>
 				 Baz
 				<sup about="#mwt2" class="mw-ref reference" data-mw='{"name":"ref","body":{"html":"Quux"},"attrs":{"group":"g1","name":":0"}}' id="cite_ref-quux-2-0" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-.3A0-2">[g1 1]</a>
+					<a href="#cite_note-.3A0-2"><span class="cite-bracket">[</span>g1 1<span class="cite-bracket">]</span></a>
 				</sup>
 				 Whee
 				<sup about="#mwt3" class="mw-ref reference" data-mw='{"name":"ref","body":{"html":"
 				<a rel=\\"mw:WikiLink\\" href=\\"./Bar\\">Bar
 				</a>"},"attrs":{"name":"bar"}}' id="cite_ref-bar-1-1" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-bar-1">[1]</a>
+					<a href="#cite_note-bar-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a>
 				</sup>
 				 Yay
 				${ /* This reference has .body.id instead of .body.html */'' }
 				<sup about="#mwt4" class="mw-ref reference" data-mw='{"name":"ref","body":{"id":"mw-cite-3"},"attrs":{"group":"g1"}}' id="cite_ref-1-0" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-3">[g1 2]</a>
+					<a href="#cite_note-3"><span class="cite-bracket">[</span>g1 2<span class="cite-bracket">]</span></a>
 				</sup>
 				 Quux
 				<sup about="#mwt5" class="mw-ref reference" data-mw='{"name":"ref","body":{"html":"Different content"},"attrs":{"name":"bar"}}' id="cite_ref-bar-1-2" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-bar-1">[1]</a>
+					<a href="#cite_note-bar-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a>
 				</sup>
 				 Foo
 				<sup about="#mwt6" class="mw-ref reference" data-mw='{"name":"ref","attrs":{"group":"g1","name":"foo"}}'
 					 id="cite_ref-foo-4" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_ref-foo-4">[g1 3]</a>
+					<a href="#cite_ref-foo-4"><span class="cite-bracket">[</span>g1 3<span class="cite-bracket">]</span></a>
 				</sup>
 			</p>
 			${ /* The HTML below is enriched to wrap reference contents in <span id="mw-cite-[...]"> */'' }
@@ -119,30 +119,30 @@ ve.dm.citeExample.domToDataCases = {
 			<p>
 				Foo
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","attrs":{"name":"bar"}}' class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 				 Baz
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"html":"Quux"},"attrs":{"group":"g1","name":":0"}}' class="mw-ref reference">
-					<a data-mw-group="g1"><span class="mw-reflink-text">[g1 1]</span></a>
+					<a data-mw-group="g1"><span class="mw-reflink-text"><span class="cite-bracket">[</span>g1 1<span class="cite-bracket">]</span></span></a>
 				</sup>
 				 Whee
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"html":"
 				<a href=\\"./Bar\\" rel=\\"mw:WikiLink\\">Bar
 				</a>"},"attrs":{"name":"bar"}}' class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 				 Yay
 				${ /* This reference has .body.id instead of .body.html */'' }
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"id":"mw-cite-3","html":"No name"},"attrs":{"group":"g1"}}' class="mw-ref reference">
-					<a data-mw-group="g1"><span class="mw-reflink-text">[g1 2]</span></a>
+					<a data-mw-group="g1"><span class="mw-reflink-text"><span class="cite-bracket">[</span>g1 2<span class="cite-bracket">]</span></span></a>
 				</sup>
 				 Quux
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"html":"Different content"},"attrs":{"name":"bar"}}' class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 				 Foo
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","attrs":{"group":"g1","name":"foo"}}' class="mw-ref reference">
-					<a data-mw-group="g1"><span class="mw-reflink-text">[g1 3]</span></a>
+					<a data-mw-group="g1"><span class="mw-reflink-text"><span class="cite-bracket">[</span>g1 3<span class="cite-bracket">]</span></span></a>
 				</sup>
 			</p>
 			${ /* The HTML below is enriched to wrap reference contents in <span id="mw-cite-[...]"> */'' }
@@ -151,7 +151,7 @@ ve.dm.citeExample.domToDataCases = {
 				 data-mw='{"name":"references","attrs":{"group":"g1"},"body":{
 				"html":"<sup typeof=\\"mw:Extension/ref\\"
 				 data-mw=&apos;{&amp;quot;name&amp;quot;:&amp;quot;ref&amp;quot;,&amp;quot;attrs&amp;quot;:{&amp;quot;group&amp;quot;:&amp;quot;g1&amp;quot;,&amp;quot;name&amp;quot;:&amp;quot;foo&amp;quot;},&amp;quot;body&amp;quot;:{&amp;quot;html&amp;quot;:&amp;quot;Ref in refs&amp;quot;}}
-				&apos; class=\\"mw-ref reference\\"><a data-mw-group=\\"g1\\"><span class=\\"mw-reflink-text\\">[g1 3]</span></a></sup>"}}'>
+				&apos; class=\\"mw-ref reference\\"><a data-mw-group=\\"g1\\"><span class=\\"mw-reflink-text\\"><span class=\\"cite-bracket\\">[</span>g1 3<span class=\\"cite-bracket\\">]</span></span></a></sup>"}}'>
 					<ol class="mw-references references" data-mw-group="g1">
 						<li style='--footnote-number: "1.";'>
 							<a rel="mw:referencedBy" data-mw-group="g1"><span class="mw-linkback-text">↑ </span></a>
@@ -358,11 +358,11 @@ ve.dm.citeExample.domToDataCases = {
 				<sup about="#mwt1" class="mw-ref reference" data-mw='{"name":"ref","body":{"html":"
 				<a rel=\\"mw:WikiLink\\" href=\\"./Bar\\">Bar
 				</a>"},"attrs":{"name":"bar"}}' id="cite_ref-bar-1-1" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-bar-1">[1]</a>
+					<a href="#cite_note-bar-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a>
 				</sup>
 				 Baz
 				<sup about="#mwt2" class="mw-ref reference" data-mw='{"name":"ref","attrs":{"name":"bar"}}' id="cite_ref-bar-1-3" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-bar-1">[1]</a>
+					<a href="#cite_note-bar-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a>
 				</sup>
 			</p>
 		`,
@@ -384,11 +384,11 @@ ve.dm.citeExample.domToDataCases = {
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"html":"
 				<a href=\\"./Bar\\" rel=\\"mw:WikiLink\\">Bar
 				</a>"},"attrs":{"name":"bar"}}' class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 				 Baz
 				<sup typeof="mw:Extension/ref" data-mw='{"name":"ref","attrs":{"name":"bar"}}' class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 			</p>
 		`,
@@ -471,7 +471,7 @@ ve.dm.citeExample.domToDataCases = {
 				 data-mw='{"name":"ref","body":
 				{"html":"Foo<!-- bar -->"},"attrs":{}}'
 				 id="cite_ref-1-0" rel="dc:references" typeof="mw:Extension/ref">
-					<a href="#cite_note-bar-1">[1]</a>
+					<a href="#cite_note-bar-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a>
 				</sup>
 			</p>
 		`,
@@ -489,7 +489,7 @@ ve.dm.citeExample.domToDataCases = {
 				 data-mw='{"attrs":{},"body":
 			{"html":"Foo<span rel=\\"ve:Comment\\" data-ve-comment=\\" bar \\">&amp;nbsp;</span>"},"name":"ref"}'
 			 class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 			</p>
 		`,
@@ -499,7 +499,7 @@ ve.dm.citeExample.domToDataCases = {
 				 data-mw='{"attrs":{},"body":
 				{"html":"Foo<!-- bar -->"},"name":"ref"}'
 				 class="mw-ref reference">
-					<a><span class="mw-reflink-text">[1]</span></a>
+					<a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a>
 				</sup>
 			</p>
 		`,
@@ -548,7 +548,7 @@ ve.dm.citeExample.domToDataCases = {
 	},
 	'Template generated reflist': {
 		body: ve.dm.example.singleLine`
-			<p><sup about="#mwt2" class="mw-ref reference" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"id":"mw-reference-text-cite_note-1"},"attrs":{"group":"notes"}}'><a href="./Main_Page#cite_note-1" data-mw-group="notes"><span class="mw-reflink-text">[notes 1]</span></a></sup></p>
+			<p><sup about="#mwt2" class="mw-ref reference" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"id":"mw-reference-text-cite_note-1"},"attrs":{"group":"notes"}}'><a href="./Main_Page#cite_note-1" data-mw-group="notes"><span class="mw-reflink-text"><span class="cite-bracket">[</span>notes 1<span class="cite-bracket">]</span></span></a></sup></p>
 			<div class="mw-references-wrap" typeof="mw:Extension/references mw:Transclusion" about="#mwt4" data-mw='{"parts":[{"template":{"target":{"wt":"echo","href":"./Template:Echo"},"params":{"1":{"wt":"<references group=\\"notes\\" />"}},"i":0}}]}'>
 				<ol class="mw-references references" data-mw-group="notes">
 					<li about="#cite_note-1" id="cite_note-1"><a href="./Main_Page#cite_ref-1" data-mw-group="notes" rel="mw:referencedBy"><span class="mw-linkback-text">↑ </span></a> <span id="mw-reference-text-cite_note-1" class="mw-reference-text">Foo</span></li>
@@ -560,7 +560,7 @@ ve.dm.citeExample.domToDataCases = {
 			<span typeof="mw:Transclusion" data-mw='{"parts":[{"template":{"target":{"wt":"echo","href":"./Template:Echo"},"params":{"1":{"wt":"<references group=\\"notes\\" />"}},"i":0}}]}'></span>
 		`,
 		clipboardBody: ve.dm.example.singleLine`
-			<p><sup typeof="mw:Extension/ref" data-mw='{"attrs":{"group":"notes"},"body":{"id":"mw-reference-text-cite_note-1","html":"Foo"},"name":"ref"}' class="mw-ref reference"><a data-mw-group="notes"><span class="mw-reflink-text">[notes 1]</span></a></sup></p>
+			<p><sup typeof="mw:Extension/ref" data-mw='{"attrs":{"group":"notes"},"body":{"id":"mw-reference-text-cite_note-1","html":"Foo"},"name":"ref"}' class="mw-ref reference"><a data-mw-group="notes"><span class="mw-reflink-text"><span class="cite-bracket">[</span>notes 1<span class="cite-bracket">]</span></span></a></sup></p>
 			<div typeof="mw:Extension/references" data-mw='{"parts":[{"template":{"params":{"1":{"wt":"<references group=\\"notes\\" />"}},"target":{"wt":"echo","href":"./Template:Echo"},"i":0}}],"name":"references"}'>
 				${ /* TODO: This should list should get populated on copy */'' }
 				<ol class="mw-references references"></ol>
@@ -630,7 +630,7 @@ ve.dm.citeExample.domToDataCases = {
 	},
 	'Template generated reflist (div wrapped)': {
 		body: ve.dm.example.singleLine`
-			<p><sup about="#mwt2" class="mw-ref reference" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"id":"mw-reference-text-cite_note-1"},"attrs":{}}'><a href="./Main_Page#cite_note-1"><span class="mw-reflink-text">[1]</span></a></sup></p>
+			<p><sup about="#mwt2" class="mw-ref reference" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref" data-mw='{"name":"ref","body":{"id":"mw-reference-text-cite_note-1"},"attrs":{}}'><a href="./Main_Page#cite_note-1"><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a></sup></p>
 			<div about="#mwt3" typeof="mw:Transclusion" data-mw='{"parts":[{"template":{"target":{"wt":"reflist","href":"./Template:Reflist"},"params":{},"i":0}}]}'>
 				<div typeof="mw:Extension/references" about="#mwt5" data-mw='{"name":"references","attrs":{}}'>
 					<ol class="mw-references references">
@@ -644,7 +644,7 @@ ve.dm.citeExample.domToDataCases = {
 			<span typeof="mw:Transclusion" data-mw='{"name":"references","attrs":{}}'></span>
 		`,
 		clipboardBody: ve.dm.example.singleLine`
-			<p><sup typeof="mw:Extension/ref" data-mw='{"attrs":{},"body":{"id":"mw-reference-text-cite_note-1","html":"Foo"},"name":"ref"}' class="mw-ref reference"><a><span class="mw-reflink-text">[1]</span></a></sup></p>
+			<p><sup typeof="mw:Extension/ref" data-mw='{"attrs":{},"body":{"id":"mw-reference-text-cite_note-1","html":"Foo"},"name":"ref"}' class="mw-ref reference"><a><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a></sup></p>
 			<div typeof="mw:Extension/references" data-mw='{"name":"references","attrs":{}}'>
 				<ol class="mw-references references">
 					<li style='--footnote-number: "1.";'>
@@ -728,7 +728,7 @@ ve.dm.citeExample.domToDataCases = {
 				 data-mw='{"name":"ref","body":{"html":"Bar"},"attrs":{"extends":"foo"}}'
 				 class="mw-ref reference">
 					<a>
-						<span class="mw-reflink-text">[1]</span>
+						<span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span>
 					</a>
 				</sup>
 			</p>