feat: add support for nested tabbers in Codex (#95)

* refactor: Apply some code cleanup

* feat: WIP dynamic nested tabber in codex

* feat: Make deeply nested tabbers work

* doc: fix comment position

---------

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>

composer.json

@@ -34,7 +34,8 @@
 	},
 	"scripts": {
 		"fix": [
-			"minus-x fix ."
+			"minus-x fix .",
+			"phpcbf"
 		],
 		"test": [
 			"parallel-lint . --exclude vendor --exclude node_modules",

includes/Hooks.php

@@ -25,7 +25,7 @@ class Hooks implements ParserFirstCallInitHook {
 	 *
 	 * @param Parser $parser
 	 */
-	public function onParserFirstCallInit( $parser ) {
+	public function onParserFirstCallInit( $parser ): void {
 		$parser->setHook( 'tabber', Tabber::class . '::parserHook' );
 		$parser->setHook( 'tabbertransclude', TabberTransclude::class . '::parserHook' );
 	}

includes/Tabber.php

@@ -14,40 +14,53 @@ declare( strict_types=1 );
 
 namespace MediaWiki\Extension\TabberNeue;
 
+use JsonException;
 use MediaWiki\MediaWikiServices;
 use Parser;
 use PPFrame;
 
 class Tabber {
+	/**
+	 * Critical rendering styles
+	 * See ext.tabberNeue.inline.less
+	 *
+	 * @var string
+	 */
+	public static $criticalInlineStyle = '.client-js .tabber__header{height:2.6em;box-shadow:inset 0 -1px 0 0;opacity:.1}.client-js .tabber__header:after{position:absolute;width:16ch;height:.5em;border-radius:40px;margin-top:1em;margin-left:.75em;background:#000;content:""}.client-js .tabber__noscript,.client-js .tabber__panel:not( :first-child ){display:none}';
+
+	/**
+	 * Flag that checks if this is a nested tabber
+	 * @var bool
+	 */
+	private static $isNested = false;
+
+	private static $useCodex = false;
+
 	/**
 	 * Parser callback for <tabber> tag
 	 *
-	 * @param string $input
+	 * @param string|null $input
 	 * @param array $args
 	 * @param Parser $parser Mediawiki Parser Object
 	 * @param PPFrame $frame Mediawiki PPFrame Object
 	 *
 	 * @return string HTML
 	 */
-	public static function parserHook( string $input, array $args, Parser $parser, PPFrame $frame ) {
-		$tabber = new Tabber();
-		$html = $tabber->render( $input, $parser, $frame );
+	public static function parserHook( ?string $input, array $args, Parser $parser, PPFrame $frame ) {
+		self::$useCodex = MediaWikiServices::getInstance()->getMainConfig()->get( 'TabberNeueUseCodex' );
+
+		$html = self::render( $input, $parser, $frame );
 
 		if ( $input === null ) {
-			return;
+			return '';
 		}
 
-		$useCodex = MediaWikiServices::getInstance()->getMainConfig()->get( 'TabberNeueUseCodex' );
-
-		if ( $useCodex === true ) {
+		if ( self::$useCodex === true ) {
 			$parser->getOutput()->addModules( [ 'ext.tabberNeue.codex' ] );
 		} else {
-			// Critial rendering styles
+			// Critical rendering styles
 			// See ext.tabberNeue.inline.less
-			$style = sprintf(
-				'<style id="tabber-style">%s</style>',
-				'.client-js .tabber__header{height:2.6em;box-shadow:inset 0 -1px 0 0;opacity:.1}.client-js .tabber__header:after{position:absolute;width:16ch;height:.5em;border-radius:40px;margin-top:1em;margin-left:.75em;background:#000;content:""}.client-js .tabber__noscript,.client-js .tabber__panel:not( :first-child ){display:none}'
-			);
+			$style = sprintf( '<style id="tabber-style">%s</style>', self::$criticalInlineStyle );
 			$parser->getOutput()->addHeadItem( $style, true );
 			$parser->getOutput()->addModules( [ 'ext.tabberNeue.legacy' ] );
 		}
@@ -65,18 +78,28 @@ class Tabber {
 	 *
 	 * @return string HTML
 	 */
-	public static function render( $input, Parser $parser, PPFrame $frame ) {
-		$arr = explode( "|-|", $input );
+	public static function render( string $input, Parser $parser, PPFrame $frame ): string {
+		$arr = explode( '|-|', $input );
 		$htmlTabs = '';
 		foreach ( $arr as $tab ) {
 			$htmlTabs .= self::buildTab( $tab, $parser, $frame );
 		}
 
-		$html = '<div class="tabber">' .
+		if ( self::$useCodex && self::$isNested ) {
+			$tab = rtrim( implode( '},', explode( '}', $htmlTabs ) ), ',' );
+			$tab = strip_tags( html_entity_decode( $tab ) );
+			$tab = str_replace( ',,', ',', $tab );
+			$tab = str_replace( ',]', ']', $tab );
+
+			return sprintf( '[%s]', $tab );
+		}
+		$htmlTabs = preg_replace( '/\\\n/', '', $htmlTabs );
+		$htmlTabs = preg_replace( '/\\\*/', '', $htmlTabs );
+		$htmlTabs = str_replace( [ '"[', ']"' ], [ '[', ']' ], $htmlTabs );
+
+		return '<div class="tabber">' .
 			'<header class="tabber__header"></header>' .
 			'<section class="tabber__section">' . $htmlTabs . '</section></div>';
-
-		return $html;
 	}
 
 	/**
@@ -87,27 +110,47 @@ class Tabber {
 	 * @param PPFrame $frame Mediawiki PPFrame Object
 	 *
 	 * @return string HTML
+	 * @throws JsonException
 	 */
-	private static function buildTab( $tab, Parser $parser, PPFrame $frame ) {
+	private static function buildTab( string $tab, Parser $parser, PPFrame $frame ): string {
 		if ( empty( trim( $tab ) ) ) {
 			return '';
 		}
-
 		// Use array_pad to make sure at least 2 array values are always returned
-		list( $tabName, $tabBody ) = array_pad( explode( '=', $tab, 2 ), 2, '' );
+		[ $tabName, $tabBody ] = array_pad( explode( '=', $tab, 2 ), 2, '' );
 
 		// Use language converter to get variant title and also escape html
 		$tabName = $parser->getTargetLanguageConverter()->convertHtml( trim( $tabName ) );
-		$tabBody = $parser->recursiveTagParse( trim( $tabBody ), $frame );
+		$tabBody = trim( $tabBody );
+
+		// A nested tabber which should return json in codex
+		if ( self::$useCodex && strpos( $tabBody, '{{#tag:tabber' ) !== false ) {
+			self::$isNested = true;
+			$tabBody = $parser->recursiveTagParse( $tabBody, $frame );
+			self::$isNested = false;
+		// The outermost tabber that must be parsed fully in codex for correct json
+		} elseif ( self::$useCodex ) {
+			$tabBody = $parser->recursiveTagParseFully( $tabBody, $frame );
+		// Normal mode
+		} else {
+			$tabBody = $parser->recursiveTagParse( $tabBody, $frame );
+		}
+
+		if ( self::$useCodex && self::$isNested ) {
+			return json_encode( [
+				'label' => $tabName,
+				'content' => $tabBody
+			],
+				JSON_THROW_ON_ERROR
+			);
+		}
 
 		// If $tabBody does not have any HTML element (i.e. just a text node), wrap it in <p/>
-		if ( substr( $tabBody, 0, 1 ) !== '<' ) {
+		if ( $tabBody[0] !== '<' ) {
 			$tabBody = '<p>' . $tabBody . '</p>';
 		}
 
-		$tab = '<article class="tabber__panel" data-title="' . $tabName .
+		return '<article class="tabber__panel" data-title="' . $tabName .
 			'">' . $tabBody . '</article>';
-
-		return $tab;
 	}
 }

includes/TabberParsoid.php

@@ -35,47 +35,45 @@ class TabberParsoid extends ExtensionTagHandler implements ExtensionModule {
 	/** @inheritDoc */
 	public function sourceToDom( ParsoidExtensionAPI $extApi, string $src, array $extArgs ) {
 		$html = self::render( $extApi, $src );
-		$extApi->addModules( [ 'ext.tabberNeue.codex' ] );
+		$extApi->getMetadata()->addModules( [ 'ext.tabberNeue.codex' ] );
 		return $extApi->htmlToDom( $html );
 	}
 
 	/**
 	 * Renders the necessary HTML for a <tabber> tag.
 	 *
-	 * @param PParsoidExtensionAPI $extApi
+	 * @param ParsoidExtensionAPI $extApi
 	 * @param string $src The input URL between the beginning and ending tags.
 	 *
 	 * @return string HTML
 	 */
-	public static function render( ParsoidExtensionAPI $extApi, string $src ) {
-		$arr = explode( "|-|", $src );
+	public static function render( ParsoidExtensionAPI $extApi, string $src ): string {
+		$arr = explode( '|-|', $src );
 		$htmlTabs = '';
 		foreach ( $arr as $tab ) {
 			$htmlTabs .= self::buildTab( $extApi, $tab );
 		}
 
-		$html = '<div class="tabber">' .
+		return '<div class="tabber">' .
 			'<header class="tabber__header"></header>' .
 			'<section class="tabber__section">' . $htmlTabs . "</section></div>";
-
-		return $html;
 	}
 
 	/**
 	 * Build individual tab.
 	 *
-	 * @param PParsoidExtensionAPI $extApi
+	 * @param ParsoidExtensionAPI $extApi
 	 * @param string $tab Tab information
 	 *
 	 * @return string HTML
 	 */
-	private static function buildTab( ParsoidExtensionAPI $extApi, string $tab ) {
+	private static function buildTab( ParsoidExtensionAPI $extApi, string $tab ): string {
 		if ( empty( trim( $tab ) ) ) {
 			return '';
 		}
 
 		// Use array_pad to make sure at least 2 array values are always returned
-		list( $tabName, $tabBody ) = array_pad( explode( '=', $tab, 2 ), 2, '' );
+		[ $tabName, $tabBody ] = array_pad( explode( '=', $tab, 2 ), 2, '' );
 
 		/*
 		 * Use language converter to get variant title and also escape html
@@ -84,21 +82,19 @@ class TabberParsoid extends ExtensionTagHandler implements ExtensionModule {
 		*/
 		// $tabName = $parser->getTargetLanguageConverter()->convertHtml( trim( $tabName ) );
 		$tabBody = $extApi->domToHTML(
-				$extApi->wikitextToDOM(
-					$tabBody,
-					[
-						'parseOpts' => [
-							'extTag' => 'tabber',
-							'context' => 'inline',
-						]
-					],
-					true // sol
-				)
-			);
+			$extApi->wikitextToDOM(
+				$tabBody,
+				[
+					'parseOpts' => [
+						'extTag' => 'tabber',
+						'context' => 'inline',
+					]
+				],
+			true // sol
+			)
+		);
 
-		$tab = '<article class="tabber__panel" title="' . $tabName .
+		return '<article class="tabber__panel" title="' . $tabName .
 			'">' . $tabBody . '</article>';
-
-		return $tab;
 	}
 }

includes/TabberTransclude.php

@@ -14,7 +14,7 @@ declare( strict_types=1 );
 
 namespace MediaWiki\Extension\TabberNeue;
 
-use Hooks;
+use Exception;
 use MediaWiki\MediaWikiServices;
 use Parser;
 use PPFrame;
@@ -24,27 +24,23 @@ class TabberTransclude {
 	/**
 	 * Parser callback for <tabbertransclude> tag
 	 *
-	 * @param string $input
+	 * @param string|null $input
 	 * @param array $args
 	 * @param Parser $parser Mediawiki Parser Object
 	 * @param PPFrame $frame Mediawiki PPFrame Object
 	 *
 	 * @return string HTML
 	 */
-	public static function parserHook( string $input, array $args, Parser $parser, PPFrame $frame ) {
-		$tabberTransclude = new TabberTransclude();
-		$html = $tabberTransclude->render( $input, $parser, $frame );
+	public static function parserHook( ?string $input, array $args, Parser $parser, PPFrame $frame ) {
+		$html = self::render( $input, $parser, $frame );
 
 		if ( $input === null ) {
-			return;
+			return '';
 		}
 
-		// Critial rendering styles
+		// Critical rendering styles
 		// See ext.tabberNeue.inline.less
-		$style = sprintf(
-			'<style id="tabber-style">%s</style>',
-			'.client-js .tabber__header{height:2.6em;box-shadow:inset 0 -1px 0 0;opacity:.1}.client-js .tabber__header:after{position:absolute;width:16ch;height:.5em;border-radius:40px;margin-top:1em;margin-left:.75em;background:#000;content:""}.client-js .tabber__noscript,.client-js .tabber__panel:not( :first-child ){display:none}'
-		);
+		$style = sprintf( '<style id="tabber-style">%s</style>', Tabber::$criticalInlineStyle );
 		$parser->getOutput()->addHeadItem( $style, true );
 		$parser->getOutput()->addModules( [ 'ext.tabberNeue.legacy' ] );
 
@@ -61,19 +57,22 @@ class TabberTransclude {
 	 *
 	 * @return string HTML
 	 */
-	public static function render( $input, Parser $parser, PPFrame $frame ) {
+	public static function render( string $input, Parser $parser, PPFrame $frame ): string {
 		$selected = true;
 		$arr = explode( "\n", $input );
 		$htmlTabs = '';
 		foreach ( $arr as $tab ) {
-			$htmlTabs .= self::buildTabTransclude( $tab, $parser, $frame, $selected );
+			try {
+				$htmlTabs .= self::buildTabTransclude( $tab, $parser, $frame, $selected );
+			} catch ( Exception $e ) {
+				// This can happen if a $currentTitle is null
+				continue;
+			}
 		}
 
-		$html = '<div class="tabber">' .
+		return '<div class="tabber">' .
 			'<header class="tabber__header"></header>' .
 			'<section class="tabber__section">' . $htmlTabs . '</section></div>';
-
-		return $html;
 	}
 
 	/**
@@ -85,23 +84,22 @@ class TabberTransclude {
 	 * @param bool &$selected The tab is the selected one
 	 *
 	 * @return string HTML
+	 * @throws Exception
 	 */
-	private static function buildTabTransclude( $tab, Parser $parser, PPFrame $frame, &$selected ) {
+	private static function buildTabTransclude( string $tab, Parser $parser, PPFrame $frame, bool &$selected ): string {
 		if ( empty( trim( $tab ) ) ) {
 			return '';
 		}
 
-		$tabBody = '';
 		$dataProps = [];
 		// Use array_pad to make sure at least 2 array values are always returned
-		list( $pageName, $tabName ) = array_pad( explode( '|', $tab, 2 ), 2, '' );
+		[ $pageName, $tabName ] = array_pad( explode( '|', $tab, 2 ), 2, '' );
 		$title = Title::newFromText( trim( $pageName ) );
 		if ( !$title ) {
 			if ( empty( $tabName ) ) {
 				$tabName = $pageName;
 			}
 			$tabBody = sprintf( '<div class="error">Invalid title: %s</div>', $pageName );
-			$pageName = '';
 		} else {
 			$pageName = $title->getPrefixedText();
 			if ( empty( $tabName ) ) {
@@ -127,11 +125,18 @@ class TabberTransclude {
 					urlencode( $currentTitle->getPrefixedText() ),
 					urlencode( $pageName )
 				);
-				$dataProps['load-url'] = wfExpandUrl( wfScript( 'api' ) . $query,  PROTO_CANONICAL );
+
+				$utils = MediaWikiServices::getInstance()->getUrlUtils();
+				$utils->expand( wfScript( 'api' ) . $query,  PROTO_CANONICAL );
+
+				$dataProps['load-url'] = $utils->expand( wfScript( 'api' ) . $query,  PROTO_CANONICAL );
 				$oldTabBody = $tabBody;
 				// Allow extensions to update the lazy loaded tab
-				Hooks::run( 'TabberNeueRenderLazyLoadedTab', [ &$tabBody, &$dataProps, $parser, $frame ] );
-				if ( $oldTabBody != $tabBody ) {
+				MediaWikiServices::getInstance()->getHookContainer()->run(
+					'TabberNeueRenderLazyLoadedTab',
+					[ &$tabBody, &$dataProps, $parser, $frame ]
+				);
+				if ( $oldTabBody !== $tabBody ) {
 					$parser->getOutput()->recordOption( 'tabberneuelazyupdated' );
 				}
 			}

modules/ext.tabberNeue.codex/App.vue

@@ -45,6 +45,11 @@ module.exports = exports = defineComponent( {
 			default: false
 		}
 	},
+	methods: {
+		escapeId( id ) {
+			return mw.util.escapeIdForAttribute( id )
+		}
+	},
 	data: function () {
 		return {
 			tabsData: this.tabberData.tabsData,

modules/ext.tabberNeue.codex/TabContent.vue

@@ -1,5 +1,19 @@
 <template>
+	<cdx-tabs v-if="isChildTabber && tabsData.length > 0" v-model:active="currentTab">
+		<cdx-tab
+			v-for="( tab, index ) in tabsData"
+			:key="index"
+			:name="escapeId( tab.label )"
+			:label="tab.label"
+		>
+			<tab-content
+				:html="tab.content"
+			>
+			</tab-content>
+		</cdx-tab>
+	</cdx-tabs>
 	<div
+		v-else
 		v-html="html"
 	>
 	</div>
@@ -7,6 +21,7 @@
 
 <script>
 const { defineComponent } = require( 'vue' );
+const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
 
 // @vue/component
 module.exports = exports = defineComponent( {
@@ -17,14 +32,46 @@ module.exports = exports = defineComponent( {
 	compilerOptions: {
 		whitespace: 'condense'
 	},
+	data() {
+		return {
+			tabsData: [],
+
+			currentTab: ''
+		};
+	},
 	props: {
 		html: {
 			type: String,
 			required: true
 		}
 	},
+	components: {
+		CdxTabs: CdxTabs,
+		CdxTab: CdxTab,
+	},
+	methods: {
+		isChildTabber() {
+			return Array.isArray(this.html) || this.html.includes("{\"label\":")
+		},
+		parse() {
+			if (Array.isArray(this.html)) {
+				return this.html
+			} else {
+				const tmp = document.createElement('div');
+				tmp.innerHTML = this.html;
+
+				return JSON.parse( tmp.textContent.trim() );
+			}
+		},
+		escapeId( id ) {
+			return mw.util.escapeIdForAttribute( id )
+		}
+	},
 	mounted: function () {
-		this.$el.parentElement.innerHTML = this.$el.innerHTML;
+		if (this.isChildTabber()) {
+			this.tabsData = this.parse(this.html)
+			this.currentTab = this.escapeId( this.tabsData[0].label )
+		}
 	}
 } );
 </script>

modules/ext.tabberNeue.codex/ext.tabberNeue.codex.js

@@ -17,10 +17,6 @@ function initApp( tabber ) {
 	tabs.forEach( ( tab ) => {
 		const label = tab.getAttribute( 'data-title' );
 
-		if ( tab.querySelector( '.tabber' ) ) {
-			throw new Error( 'Nested Tabber is not supported in Codex mode, please use legacy mode instead.' );
-		}
-
 		tabberData.tabsData.push( {
 			name: mw.util.escapeIdForAttribute( label ),
 			label: label,
@@ -30,7 +26,7 @@ function initApp( tabber ) {
 
 	tabberData.currentTab = tabberData.tabsData[ 0 ].name;
 
-	// @ts-ignore MediaWiki-specific function
+	//@ts-ignore MediaWiki-specific function
 	Vue.createMwApp(
 		App, Object.assign( {
 			tabberData: tabberData
@@ -45,18 +41,8 @@ function initApp( tabber ) {
  */
 function main( document ) {
 	const tabbers = document.querySelectorAll( '.tabber:not( .tabber--live )' );
-	const sortedTabbers = [];
 
-	/* Nested Tabber children needed to be rendered before parents */
-	tabbers.forEach( ( tabber ) => {
-		if ( tabber.querySelector( '.tabber:not( .tabber--live )' ) ) {
-			sortedTabbers.push( tabber );
-		} else {
-			sortedTabbers.unshift( tabber );
-		}
-	} );
-
-	sortedTabbers.forEach( initApp );
+	tabbers.forEach( initApp );
 }
 
 main( document );