mode.mediawiki: rename mnemonic to html-entity and deprecate variants

This removes treating an HTML entity in a template name as a separate
token, and thus deprecates the .cm-mw-template-name-mnemonic CSS class.

In CM6 we have to register tokens for them to show, and this one seems
of little use to begin with. HTML entities should always be styled as a
such, especially in page titles where they are treated post-processing.
i.e. [[/dev/null]] links to [[/dev/null]].

The rename to .cm-html-entity and associated code is to better reflect
what it is. $rarr; is a mnemonic form while / is not, but both are
entities.  Deprecations are noted in the README, with the old classes
to be removed later after on-wiki usage has been updated.

Bug: T348019
Change-Id: I1184fb5d7d37084c80af1abd5f3cb5f2091b085c

README.md

@@ -50,3 +50,9 @@ Some may be removed pending user feedback:
 
 * Closing HTML tags that highlighted as an error now also highlight the closing '>'
 * Allow link titles to be both emboldened and italicized.
+
+### Deprecations
+
+* The `.cm-mw-mnemonic` CSS class has been renamed to `.cm-mw-html-entity`
+* The `.cm-mw-template-name-mnemonic` class has been removed.
+  Use `.cm-mw-template-ground.cm-html-entity` instead.

resources/mode/mediawiki/mediawiki.less

@@ -40,7 +40,8 @@ stylistic/selector-list-comma-newline-after
 .cm-mw-doubleUnderscore,
 .cm-mw-double-underscore,
 .cm-mw-signature, .cm-mw-hr { color: @wikitext-formatting-color; font-weight: bold; background-color: #eee; }
-.cm-mw-mnemonic { color: @xml-tag-color; }
+// TODO: Deprecate .cm-mw-mnemonic in favor of -html-entity
+.cm-mw-mnemonic, .cm-mw-html-entity { color: @xml-tag-color; }
 .cm-mw-comment { color: @comment-color; font-weight: normal; }
 .cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic { color: @wikitext-formatting-color; }
 .cm-mw-strong { font-weight: bold; }
@@ -68,6 +69,7 @@ pre.CodeMirror-line-like.cm-mw-section-6 {
 }
 
 .cm-mw-template { color: @template-color; font-weight: normal; }
+// TODO: deprecate/remove after CM6 upgrade
 .cm-mw-template-name-mnemonic { font-weight: normal; }
 .cm-mw-template-name,
 .cm-mw-template-argument-name,

src/codemirror.mode.mediawiki.config.js

@@ -124,10 +124,10 @@ class CodeMirrorModeMediaWikiConfig {
 			extGround: 'mw-ext-ground',
 			freeExtLink: 'mw-free-extlink',
 			freeExtLinkProtocol: 'mw-free-extlink-protocol',
+			htmlEntity: 'mw-html-entity',
 			link: 'mw-link',
 			linkGround: 'mw-link-ground',
 			linkPageName: 'mw-link-pagename',
-			mnemonic: 'mw-mnemonic',
 			pageName: 'mw-pagename',
 			skipFormatting: 'mw-skipformatting',
 			strong: 'mw-strong',
@@ -158,10 +158,10 @@ class CodeMirrorModeMediaWikiConfig {
 			[ this.tags.extGround ]: Tag.define(),
 			[ this.tags.freeExtLink ]: Tag.define(),
 			[ this.tags.freeExtLinkProtocol ]: Tag.define(),
+			[ this.tags.htmlEntity ]: Tag.define(),
 			[ this.tags.link ]: Tag.define(),
 			[ this.tags.linkGround ]: Tag.define(),
 			[ this.tags.linkPageName ]: Tag.define(),
-			[ this.tags.mnemonic ]: Tag.define(),
 			[ this.tags.pageName ]: Tag.define(),
 			[ this.tags.skipFormatting ]: Tag.define(),
 			[ this.tags.strong ]: Tag.define(),
@@ -380,6 +380,10 @@ class CodeMirrorModeMediaWikiConfig {
 				tag: context.tokenTable[ this.tags.freeExtLinkProtocol ],
 				class: 'cm-mw-free-extlink-protocol'
 			},
+			{
+				tag: context.tokenTable[ this.tags.htmlEntity ],
+				class: 'cm-mw-html-entity'
+			},
 			{
 				tag: context.tokenTable[ this.tags.linkGround ],
 				class: 'cm-mw-link-ground'
@@ -388,10 +392,6 @@ class CodeMirrorModeMediaWikiConfig {
 				tag: context.tokenTable[ this.tags.linkPageName ],
 				class: 'cm-mw-link-pagename'
 			},
-			{
-				tag: context.tokenTable[ this.tags.mnemonic ],
-				class: 'cm-mw-mnemonic'
-			},
 			{
 				tag: context.tokenTable[ this.tags.pageName ],
 				class: 'cm-mw-pagename'

src/codemirror.mode.mediawiki.js

@@ -27,7 +27,7 @@ class CodeMirrorModeMediaWiki {
 		this.oldTokens = [];
 	}
 
-	eatMnemonic( stream, style, mnemonicStyle ) {
+	eatHtmlEntity( stream, style ) {
 		let ok;
 		if ( stream.eat( '#' ) ) {
 			if ( stream.eat( 'x' ) ) {
@@ -39,8 +39,7 @@ class CodeMirrorModeMediaWiki {
 			ok = stream.eatWhile( /[\w.\-:]/ ) && stream.eat( ';' );
 		}
 		if ( ok ) {
-			mnemonicStyle += ' ' + modeConfig.tags.mnemonic;
-			return mnemonicStyle;
+			return modeConfig.tags.htmlEntity;
 		}
 		return style;
 	}
@@ -178,7 +177,7 @@ class CodeMirrorModeMediaWiki {
 				}
 				return null; // style is null
 			}
-			return this.eatWikiText( '', '' )( stream, state );
+			return this.eatWikiText( '' )( stream, state );
 		};
 	}
 
@@ -210,7 +209,7 @@ class CodeMirrorModeMediaWiki {
 			state.tokenize = state.stack.pop();
 			return this.makeLocalStyle( modeConfig.tags.templateVariableBracket, state );
 		}
-		return this.eatWikiText( modeConfig.tags.templateVariable, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.templateVariable )( stream, state );
 	}
 
 	inParserFunctionName( stream, state ) {
@@ -226,7 +225,7 @@ class CodeMirrorModeMediaWiki {
 			state.tokenize = state.stack.pop();
 			return this.makeLocalStyle( modeConfig.tags.parserFunctionBracket, state, 'nExt' );
 		}
-		return this.eatWikiText( modeConfig.tags.parserFunction, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.parserFunction )( stream, state );
 	}
 
 	inParserFunctionArguments( stream, state ) {
@@ -238,7 +237,7 @@ class CodeMirrorModeMediaWiki {
 			state.tokenize = state.stack.pop();
 			return this.makeLocalStyle( modeConfig.tags.parserFunctionBracket, state, 'nExt' );
 		}
-		return this.eatWikiText( modeConfig.tags.parserFunction, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.parserFunction )( stream, state );
 	}
 
 	eatTemplatePageName( haveAte ) {
@@ -269,10 +268,7 @@ class CodeMirrorModeMediaWiki {
 				}
 				return this.makeLocalStyle( modeConfig.tags.templateName, state );
 			}
-			return this.eatWikiText(
-				modeConfig.tags.templateName,
-				`${ modeConfig.tags.templateName }-mnemonic`
-			)( stream, state );
+			return this.eatWikiText( modeConfig.tags.templateName )( stream, state );
 		};
 	}
 
@@ -293,7 +289,7 @@ class CodeMirrorModeMediaWiki {
 				state.tokenize = state.stack.pop();
 				return this.makeLocalStyle( modeConfig.tags.templateBracket, state, 'nTemplate' );
 			}
-			return this.eatWikiText( modeConfig.tags.template, '' )( stream, state );
+			return this.eatWikiText( modeConfig.tags.template )( stream, state );
 		};
 	}
 
@@ -339,7 +335,7 @@ class CodeMirrorModeMediaWiki {
 			}
 			return this.makeStyle( modeConfig.tags.extLink, state );
 		}
-		return this.eatWikiText( modeConfig.tags.extLink, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.extLink )( stream, state );
 	}
 
 	inExternalLinkText( stream, state ) {
@@ -356,7 +352,7 @@ class CodeMirrorModeMediaWiki {
 		if ( stream.match( /^[^'\]{&~<]+/ ) ) {
 			return this.makeStyle( modeConfig.tags.extLinkText, state );
 		}
-		return this.eatWikiText( modeConfig.tags.extLinkText, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.extLinkText )( stream, state );
 	}
 
 	inLink( stream, state ) {
@@ -411,7 +407,7 @@ class CodeMirrorModeMediaWiki {
 			// state.ImInBlock.push( 'LinkTrail' );
 			// }
 		}
-		return this.eatWikiText( modeConfig.tags.linkToSection, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.linkToSection )( stream, state );
 	}
 
 	eatLinkText() {
@@ -446,7 +442,7 @@ class CodeMirrorModeMediaWiki {
 			if ( stream.match( /^[^'\]{&~<]+/ ) ) {
 				return this.makeStyle( tmpstyle, state );
 			}
-			return this.eatWikiText( tmpstyle, '' )( stream, state );
+			return this.eatWikiText( tmpstyle )( stream, state );
 		};
 	}
 
@@ -496,7 +492,7 @@ class CodeMirrorModeMediaWiki {
 				state.tokenize = state.stack.pop();
 				return this.makeLocalStyle( modeConfig.tags.htmlTagBracket, state );
 			}
-			return this.eatWikiText( modeConfig.tags.htmlTagAttribute, '' )( stream, state );
+			return this.eatWikiText( modeConfig.tags.htmlTagAttribute )( stream, state );
 		};
 	}
 
@@ -523,7 +519,7 @@ class CodeMirrorModeMediaWiki {
 				state.tokenize = state.stack.pop();
 				return this.makeLocalStyle( 'mw-exttag-bracket mw-ext-' + name, state );
 			}
-			return this.eatWikiText( 'mw-exttag-attribute mw-ext-' + name, '' )( stream, state );
+			return this.eatWikiText( 'mw-exttag-attribute mw-ext-' + name )( stream, state );
 		};
 	}
 
@@ -600,7 +596,7 @@ class CodeMirrorModeMediaWiki {
 			state.tokenize = this.inTable.bind( this );
 			return this.inTable( stream, state );
 		}
-		return this.eatWikiText( modeConfig.tags.tableDefinition, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.tableDefinition )( stream, state );
 	}
 
 	inTableCaption( stream, state ) {
@@ -608,7 +604,7 @@ class CodeMirrorModeMediaWiki {
 			state.tokenize = this.inTable.bind( this );
 			return this.inTable( stream, state );
 		}
-		return this.eatWikiText( modeConfig.tags.tableCaption, '' )( stream, state );
+		return this.eatWikiText( modeConfig.tags.tableCaption )( stream, state );
 	}
 
 	inTable( stream, state ) {
@@ -639,7 +635,7 @@ class CodeMirrorModeMediaWiki {
 				return this.makeLocalStyle( modeConfig.tags.tableDelimiter, state );
 			}
 		}
-		return this.eatWikiText( '', '' )( stream, state );
+		return this.eatWikiText( '' )( stream, state );
 	}
 
 	eatTableRow( isStart, isHead ) {
@@ -667,7 +663,7 @@ class CodeMirrorModeMediaWiki {
 				}
 			}
 			const tag = isHead ? modeConfig.tags.strong : '';
-			return this.eatWikiText( tag, tag )( stream, state );
+			return this.eatWikiText( tag )( stream, state );
 		};
 	}
 
@@ -706,10 +702,9 @@ class CodeMirrorModeMediaWiki {
 
 	/**
 	 * @param {string} style
-	 * @param {string} mnemonicStyle
 	 * @return {string|Function}
 	 */
-	eatWikiText( style, mnemonicStyle ) {
+	eatWikiText( style ) {
 		return ( stream, state ) => {
 			let ch, tmp, mt, name, isCloseTag, tagname;
 			const sol = stream.sol();
@@ -799,7 +794,7 @@ class CodeMirrorModeMediaWiki {
 			switch ( ch ) {
 				case '&':
 					return this.makeStyle(
-						this.eatMnemonic( stream, style, mnemonicStyle ),
+						this.eatHtmlEntity( stream, style ),
 						state
 					);
 				case '\'':
@@ -1042,7 +1037,7 @@ class CodeMirrorModeMediaWiki {
 			 */
 			startState: () => {
 				return {
-					tokenize: this.eatWikiText( '', '' ),
+					tokenize: this.eatWikiText( '' ),
 					stack: [],
 					inHtmlTag: [],
 					extName: false,

tests/jest/codemirror.mode.mediawiki.test.js

@@ -125,6 +125,11 @@ const testCases = [
 		title: 'multi-line tag',
 		input: '<div\nid="foo"\n>bar</div>',
 		output: '<div class="cm-line"><span class="cm-mw-htmltag-bracket">&lt;</span><span class="cm-mw-htmltag-name">div</span></div><div class="cm-line"><span class="cm-mw-htmltag-attribute">id="foo"</span></div><div class="cm-line"><span class="cm-mw-htmltag-bracket">&gt;</span>bar<span class="cm-mw-htmltag-bracket">&lt;/</span><span class="cm-mw-htmltag-name">div</span><span class="cm-mw-htmltag-bracket">&gt;</span></div>'
+	},
+	{
+		title: 'HTML entities',
+		input: '&#x2014;\n[[&#47;dev/null]]',
+		output: '<div class="cm-line"><span class="cm-mw-html-entity">&amp;#x2014;</span></div><div class="cm-line"><span class="cm-mw-link-ground cm-mw-link-bracket">[[</span><span class="cm-mw-link-ground cm-mw-html-entity">&amp;#47;</span><span class="cm-mw-link-ground cm-mw-link-pagename cm-mw-pagename">dev/null</span><span class="cm-mw-link-ground cm-mw-link-bracket">]]</span></div>'
 	}
 ];
 
@@ -210,10 +215,10 @@ describe( 'CodeMirrorModeMediaWiki', () => {
 			'extGround',
 			'freeExtLink',
 			'freeExtLinkProtocol',
+			'htmlEntity',
 			'link',
 			'linkGround',
 			'linkPageName',
-			'mnemonic',
 			'pageName',
 			'skipFormatting',
 			'strong',