Merge "CodeMirrorModeMediaWikiConfig: add missing tokens for nested templates"

src/codemirror.mode.mediawiki.config.js

@@ -16,27 +16,39 @@ class CodeMirrorModeMediaWikiConfig {
 	}
 
 	/**
-	 * Register a tag in CodeMirror. The generated CSS class will be of the form 'cm-mw-ext-tagname'
+	 * Register a token for the given tag in CodeMirror. The generated CSS class will be of
-	 * This is for internal use to dynamically register tags from other MediaWiki extensions.
+	 * the form 'cm-mw-ext-tagname'. This is for internal use to dynamically register tags
+	 * from other MediaWiki extensions.
 	 *
 	 * @see https://www.mediawiki.org/wiki/Extension:CodeMirror#Extension_integration
 	 * @param {string} tag
-	 * @param {Tag} parent
+	 * @param {Tag} [parent]
 	 * @internal
 	 */
-	addTag( tag, parent ) {
+	addTag( tag, parent = null ) {
 		if ( this.tokenTable[ `mw-tag-${ tag }` ] ) {
 			return;
 		}
-		this.tokenTable[ `mw-tag-${ tag }` ] = Tag.define( parent );
+		this.addToken( `mw-tag-${ tag }`, parent );
-		this.tokenTable[ `mw-ext-${ tag }` ] = Tag.define( parent );
+		this.addToken( `mw-ext-${ tag }`, parent );
+	}
+
+	/**
+	 * Dynamically register a token in CodeMirror.
+	 * This is solely for use by this.addTag() and CodeMirrorModeMediaWiki.makeLocalStyle().
+	 *
+	 * @param {string} token
+	 * @param {Tag} [parent]
+	 * @internal
+	 */
+	addToken( token, parent = null ) {
+		if ( this.tokenTable[ token ] ) {
+			return;
+		}
+		this.tokenTable[ token ] = Tag.define( parent );
 		this.extHighlightStyles.push( {
-			tag: this.tokenTable[ `mw-tag-${ tag }` ],
+			tag: this.tokenTable[ token ],
-			class: `cm-mw-tag-${ tag }`
+			class: `cm-${ token }`
-		} );
-		this.extHighlightStyles.push( {
-			tag: this.tokenTable[ `mw-ext-${ tag }` ],
-			class: `cm-mw-ext-${ tag }`
 		} );
 	}
 
@@ -152,7 +164,6 @@ class CodeMirrorModeMediaWikiConfig {
 		return {
 			em: 'mw-em',
 			error: 'mw-error',
-			extGround: 'mw-ext-ground',
 			extNowiki: 'mw-ext-nowiki',
 			extPre: 'mw-ext-pre',
 			extTag: 'mw-exttag',
@@ -163,7 +174,6 @@ class CodeMirrorModeMediaWikiConfig {
 			freeExtLinkProtocol: 'mw-free-extlink-protocol',
 			htmlEntity: 'mw-html-entity',
 			link: 'mw-link',
-			linkGround: 'mw-link-ground',
 			linkPageName: 'mw-link-pagename',
 			nowiki: 'mw-tag-nowiki',
 			pageName: 'mw-pagename',
@@ -172,14 +182,7 @@ class CodeMirrorModeMediaWikiConfig {
 			skipFormatting: 'mw-skipformatting',
 			strong: 'mw-strong',
 			tableCaption: 'mw-table-caption',
-			templateGround: 'mw-template-ground',
+			templateVariableDelimiter: 'mw-templatevariable-delimiter'
-			templateExtGround: 'mw-template-ext-ground',
-			templateLinkGround: 'mw-template-link-ground',
-			templateVariableDelimiter: 'mw-templatevariable-delimiter',
-			template2ExtGround: 'mw-template2-ext-ground',
-			template2Ground: 'mw-template2-ground',
-			template3ExtGround: 'mw-template3-ext-ground',
-			template3Ground: 'mw-template3-ground'
 		};
 	}
 
@@ -197,7 +200,6 @@ class CodeMirrorModeMediaWikiConfig {
 		return {
 			[ this.tags.em ]: Tag.define(),
 			[ this.tags.error ]: Tag.define(),
-			[ this.tags.extGround ]: Tag.define(),
 			[ this.tags.extNowiki ]: Tag.define(),
 			[ this.tags.extPre ]: Tag.define(),
 			[ this.tags.extTag ]: Tag.define(),
@@ -208,7 +210,6 @@ class CodeMirrorModeMediaWikiConfig {
 			[ 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.nowiki ]: Tag.define(),
 			[ this.tags.pageName ]: Tag.define(),
@@ -217,14 +218,7 @@ class CodeMirrorModeMediaWikiConfig {
 			[ this.tags.skipFormatting ]: Tag.define(),
 			[ this.tags.strong ]: Tag.define(),
 			[ this.tags.tableCaption ]: Tag.define(),
-			[ this.tags.templateGround ]: Tag.define(),
+			[ this.tags.templateVariableDelimiter ]: Tag.define()
-			[ this.tags.templateExtGround ]: Tag.define(),
-			[ this.tags.templateLinkGround ]: Tag.define(),
-			[ this.tags.templateVariableDelimiter ]: Tag.define(),
-			[ this.tags.template2ExtGround ]: Tag.define(),
-			[ this.tags.template2Ground ]: Tag.define(),
-			[ this.tags.template3ExtGround ]: Tag.define(),
-			[ this.tags.template3Ground ]: Tag.define()
 		};
 	}
 
@@ -419,10 +413,6 @@ class CodeMirrorModeMediaWikiConfig {
 				tag: context.tokenTable[ this.tags.error ],
 				class: 'cm-mw-error'
 			},
-			{
-				tag: context.tokenTable[ this.tags.extGround ],
-				class: 'cm-mw-ext-ground'
-			},
 			{
 				tag: context.tokenTable[ this.tags.extNowiki ],
 				class: 'cm-mw-ext-nowiki'
@@ -459,10 +449,6 @@ class CodeMirrorModeMediaWikiConfig {
 				tag: context.tokenTable[ this.tags.htmlEntity ],
 				class: 'cm-mw-html-entity'
 			},
-			{
-				tag: context.tokenTable[ this.tags.linkGround ],
-				class: 'cm-mw-link-ground'
-			},
 			{
 				tag: context.tokenTable[ this.tags.linkPageName ],
 				class: 'cm-mw-link-pagename'
@@ -495,38 +481,10 @@ class CodeMirrorModeMediaWikiConfig {
 				tag: context.tokenTable[ this.tags.tableCaption ],
 				class: 'cm-mw-table-caption'
 			},
-			{
-				tag: context.tokenTable[ this.tags.templateGround ],
-				class: 'cm-mw-template-ground'
-			},
-			{
-				tag: context.tokenTable[ this.tags.templateExtGround ],
-				class: 'cm-mw-template-ext-ground'
-			},
-			{
-				tag: context.tokenTable[ this.tags.templateLinkGround ],
-				class: 'cm-mw-template-link-ground'
-			},
 			{
 				tag: context.tokenTable[ this.tags.templateVariableDelimiter ],
 				class: 'cm-mw-templatevariable-delimiter'
 			},
-			{
-				tag: context.tokenTable[ this.tags.template2ExtGround ],
-				class: 'cm-mw-template2-ext-ground'
-			},
-			{
-				tag: context.tokenTable[ this.tags.template2Ground ],
-				class: 'cm-mw-template2-ground'
-			},
-			{
-				tag: context.tokenTable[ this.tags.template3ExtGround ],
-				class: 'cm-mw-template3-ext-ground'
-			},
-			{
-				tag: context.tokenTable[ this.tags.template3Ground ],
-				class: 'cm-mw-template3-ground'
-			},
 
 			...this.extHighlightStyles
 		];

src/codemirror.mode.mediawiki.js

@@ -33,11 +33,53 @@ class CodeMirrorModeMediaWiki {
 		this.tokens = [];
 		this.oldTokens = [];
 		this.tokenTable = modeConfig.tokenTable;
+		this.registerGroundTokens();
 
 		// Dynamically register any tags that aren't already in CodeMirrorModeMediaWikiConfig
 		Object.keys( this.config.tags ).forEach( ( tag ) => modeConfig.addTag( tag ) );
 	}
 
+	/**
+	 * Register the ground tokens. These aren't referenced directly in the StreamParser, nor do
+	 * they have a parent Tag, so we don't need them as constants like we do for other tokens.
+	 * See this.makeLocalStyle() for how these tokens are used.
+	 */
+	registerGroundTokens() {
+		[
+			'mw-ext-ground',
+			'mw-ext-link-ground',
+			'mw-ext2-ground',
+			'mw-ext2-link-ground',
+			'mw-ext3-ground',
+			'mw-ext3-link-ground',
+			'mw-link-ground',
+			'mw-template-ext-ground',
+			'mw-template-ext-link-ground',
+			'mw-template-ext2-ground',
+			'mw-template-ext2-link-ground',
+			'mw-template-ext3-ground',
+			'mw-template-ext3-link-ground',
+			'mw-template-ground',
+			'mw-template-link-ground',
+			'mw-template2-ext-ground',
+			'mw-template2-ext-link-ground',
+			'mw-template2-ext2-ground',
+			'mw-template2-ext2-link-ground',
+			'mw-template2-ext3-ground',
+			'mw-template2-ext3-link-ground',
+			'mw-template2-ground',
+			'mw-template2-link-ground',
+			'mw-template3-ext-ground',
+			'mw-template3-ext-link-ground',
+			'mw-template3-ext2-ground',
+			'mw-template3-ext2-link-ground',
+			'mw-template3-ext3-ground',
+			'mw-template3-ext3-link-ground',
+			'mw-template3-ground',
+			'mw-template3-link-ground'
+		].forEach( ( ground ) => modeConfig.addToken( ground ) );
+	}
+
 	eatHtmlEntity( stream, style ) {
 		let ok;
 		if ( stream.eat( '#' ) ) {
@@ -67,44 +109,6 @@ class CodeMirrorModeMediaWiki {
 
 	makeLocalStyle( style, state, endGround ) {
 		let ground = '';
-		/**
-		 * List out token names in a comment for search purposes.
-		 *
-		 * Tokens used here include:
-		 * - mw-ext-ground
-		 * - mw-ext-link-ground
-		 * - mw-ext2-ground
-		 * - mw-ext2-link-ground
-		 * - mw-ext3-ground
-		 * - mw-ext3-link-ground
-		 * - mw-link-ground
-		 * - mw-template-ext-ground
-		 * - mw-template-ext-link-ground
-		 * - mw-template-ext2-ground
-		 * - mw-template-ext2-link-ground
-		 * - mw-template-ext3-ground
-		 * - mw-template-ext3-link-ground
-		 * - mw-template-link-ground
-		 * - mw-template2-ext-ground
-		 * - mw-template2-ext-link-ground
-		 * - mw-template2-ext2-ground
-		 * - mw-template2-ext2-link-ground
-		 * - mw-template2-ext3-ground
-		 * - mw-template2-ext3-link-ground
-		 * - mw-template2-ground
-		 * - mw-template2-link-ground
-		 * - mw-template3-ext-ground
-		 * - mw-template3-ext-link-ground
-		 * - mw-template3-ext2-ground
-		 * - mw-template3-ext2-link-ground
-		 * - mw-template3-ext3-ground
-		 * - mw-template3-ext3-link-ground
-		 * - mw-template3-ground
-		 * - mw-template3-link-ground
-		 *
-		 * NOTE: these should be defined in CodeMirrorModeMediaWikiConfig.tokenTable()
-		 *   and CodeMirrorModeMediaWikiConfig.highlightStyle()
-		 */
 		switch ( state.nTemplate ) {
 			case 0:
 				break;

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

@@ -148,6 +148,11 @@ const testCases = [
 		input: 'Soft­hyphen\nzero-width​space\nnon-breaking space\nnarrow nbsp',
 		// i18n messages are the keys because we don't stub mw.msg() in this test.
 		output: '<div class="cm-line">Soft<img class="cm-widgetBuffer" aria-hidden="true"><span class="cm-specialChar" title="codemirror-control-character" aria-label="codemirror-control-character">•</span><img class="cm-widgetBuffer" aria-hidden="true">hyphen</div><div class="cm-line">zero-width<img class="cm-widgetBuffer" aria-hidden="true"><span class="cm-specialChar" title="codemirror-special-char-zero-width-space" aria-label="codemirror-special-char-zero-width-space">•</span><img class="cm-widgetBuffer" aria-hidden="true">space</div><div class="cm-line">non-breaking<img class="cm-widgetBuffer" aria-hidden="true"><span class="cm-special-char-nbsp" title="codemirror-special-char-nbsp" aria-label="codemirror-special-char-nbsp">·</span><img class="cm-widgetBuffer" aria-hidden="true">space</div><div class="cm-line">narrow<img class="cm-widgetBuffer" aria-hidden="true"><span class="cm-special-char-nbsp" title="codemirror-special-char-narrow-nbsp" aria-label="codemirror-special-char-narrow-nbsp">·</span><img class="cm-widgetBuffer" aria-hidden="true">nbsp</div>'
+	},
+	{
+		title: 'Nested template calls',
+		input: '{{foo|{{bar|[[Test]]|{{baz|[[Test2]]}}}}}}',
+		output: '<div class="cm-line"><span class="cm-mw-template-ground cm-mw-template-bracket">{{</span><span class="cm-mw-template-ground cm-mw-pagename cm-mw-template-name">foo</span><span class="cm-mw-template-ground cm-mw-template-delimiter">|</span><span class="cm-mw-template2-ground cm-mw-template-bracket">{{</span><span class="cm-mw-template2-ground cm-mw-pagename cm-mw-template-name">bar</span><span class="cm-mw-template2-ground cm-mw-template-delimiter">|</span><span class="cm-mw-template2-link-ground cm-mw-link-bracket">[[</span><span class="cm-mw-template2-link-ground cm-mw-link-pagename cm-mw-pagename">Test</span><span class="cm-mw-template2-link-ground cm-mw-link-bracket">]]</span><span class="cm-mw-template2-ground cm-mw-template-delimiter">|</span><span class="cm-mw-template3-ground cm-mw-template-bracket">{{</span><span class="cm-mw-template3-ground cm-mw-pagename cm-mw-template-name">baz</span><span class="cm-mw-template3-ground cm-mw-template-delimiter">|</span><span class="cm-mw-template3-link-ground cm-mw-link-bracket">[[</span><span class="cm-mw-template3-link-ground cm-mw-link-pagename cm-mw-pagename">Test2</span><span class="cm-mw-template3-link-ground cm-mw-link-bracket">]]</span><span class="cm-mw-template3-ground cm-mw-template-bracket">}}</span><span class="cm-mw-template2-ground cm-mw-template-bracket">}}</span><span class="cm-mw-template-ground cm-mw-template-bracket">}}</span></div>'
 	}
 ];
 
@@ -242,7 +247,6 @@ describe( 'CodeMirrorModeMediaWiki', () => {
 			// Custom tags
 			'em',
 			'error',
-			'extGround',
 			'extNowiki',
 			'extPre',
 			'extTag',
@@ -253,7 +257,6 @@ describe( 'CodeMirrorModeMediaWiki', () => {
 			'freeExtLinkProtocol',
 			'htmlEntity',
 			'link',
-			'linkGround',
 			'linkPageName',
 			'nowiki',
 			'pageName',
@@ -262,14 +265,7 @@ describe( 'CodeMirrorModeMediaWiki', () => {
 			'skipFormatting',
 			'strong',
 			'tableCaption',
-			'templateGround',
+			'templateVariableDelimiter'
-			'templateExtGround',
-			'templateLinkGround',
-			'templateVariableDelimiter',
-			'template2ExtGround',
-			'template2Ground',
-			'template3ExtGround',
-			'template3Ground'
 		] );
 	} );
 } );