LivePreview: Support live diff for new section creation

Test plan: Have live preview enabled. Compare diff outputs of
new section creation (`?action=edit&section=new`) with this patch
(no refresh) and without it (with page reload).

Bug: T293930
Change-Id: Ib5d64c911c51a9dcc3cbd22203777aeaf32479f9

resources/src/mediawiki.action/mediawiki.action.edit.preview.js

@@ -48,23 +48,17 @@
 	 * @param {jQuery.Event} e
 	 */
 	function doLivePreview( e ) {
-		var isDiff, section, $editform, $textbox, preview, $wikiPreview;
+		var isDiff, $editform, $textbox, preview, $wikiPreview;
 
 		preview = require( 'mediawiki.page.preview' );
 		isDiff = ( e.target.name === 'wpDiff' );
 		$wikiPreview = $( '#wikiPreview' );
 		$editform = $( '#editform' );
 		$textbox = $editform.find( '#wpTextbox1' );
 
-		section = $editform.find( '[name="wpSection"]' ).val();
-
 		if ( $textbox.length === 0 ) {
 			return;
 		}
-		// Show changes for a new section is not yet supported
-		if ( isDiff && section === 'new' ) {
-			return;
-		}
 
 		e.preventDefault();
 

resources/src/mediawiki.page.preview.js

@@ -18,11 +18,16 @@
 	 * @private
 	 * @param {jQuery} $formNode
 	 * @param {Object} response
+	 * @param {boolean} isDiff Whether this is diff view, where summary node should be hidden
 	 */
-	function showEditSummary( $formNode, response ) {
+	function showEditSummary( $formNode, response, isDiff ) {
 		var $summaryPreview = $formNode.find( '.mw-summary-preview' ).empty();
 		var parse = response.parse;
 
+		if ( isDiff ) {
+			return;
+		}
+
 		if ( !parse || !parse.parsedsummary ) {
 			return;
 		}
@@ -467,10 +472,11 @@
 	 * @param {Object} response
 	 */
 	function parseDiffResponse( config, response ) {
-		var diff = response.compare.bodies;
 		var $table = config.$diffNode.find( 'table.diff' );
 
-		if ( diff.main ) {
+		if ( response && response[ 0 ].compare.bodies.main ) {
+			var diff = response[ 0 ].compare.bodies;
+
 			$table.find( 'tbody' ).html( diff.main );
 			mw.hook( 'wikipage.diff' ).fire( $table );
 		} else {
@@ -571,21 +577,45 @@
 		$loadingElements.addClass( [ 'mw-preview-loading-elements', 'mw-preview-loading-elements-loading' ] );
 
 		var parseRequest = getParseRequest( config, section ),
-			diffRequest;
+			diffRequest = null;
 
 		if ( config.showDiff ) {
 			config.$previewNode.hide();
 			// Hide the table of contents, in case it was previously shown after previewing.
 			mw.hook( 'wikipage.tableOfContents' ).fire( [] );
 
+			var contents = config.$textareaNode.textSelection( 'getContents' ),
+				sectionTitle = config.summary;
+
+			if ( section === 'new' ) {
+				// T293930: Hack to show live diff for new section creation.
+
+				// We concatenate the section heading with the edit box text and pass it to
+				// the diff API as the full input text. This is roughly what the server-side
+				// does when difference is requested for section edit.
+				// The heading is always prepended, we do not bother with editing old rev
+				// at this point (`?action=edit&oldid=xxx&section=new`) -- which will require
+				// mid-text insertion of the section -- because creation of new section is only
+				// possible on latest revision.
+
+				// The section heading text is unconditionally wrapped in <h2> heading and
+				// ends with double newlines, except when it's empty. This is for parity with the
+				// server-side rendering of the same case.
+				sectionTitle = sectionTitle === '' ? '' : '== ' + sectionTitle + ' ==\n\n';
+
+				// Prepend section heading to section text.
+				contents = sectionTitle + contents;
+
+			}
+
 			var diffPar = {
 				action: 'compare',
 				fromtitle: config.title,
 				totitle: config.title,
 				toslots: 'main',
 				// Remove trailing whitespace for consistency with EditPage diffs.
 				// TODO trimEnd() when we can use that.
-				'totext-main': config.$textareaNode.textSelection( 'getContents' ).replace( /\s+$/, '' ),
+				'totext-main': contents.replace( /\s+$/, '' ),
 				'tocontentmodel-main': mw.config.get( 'wgPageContentModel' ),
 				topst: true,
 				slots: 'main',
@@ -602,17 +632,21 @@
 				diffPar[ 'fromcontentmodel-main' ] = mw.config.get( 'wgPageContentModel' );
 				diffPar[ 'fromtext-main' ] = '';
 			}
-			diffRequest = api.post( diffPar );
+
+			if ( contents !== '' ) {
+				diffRequest = api.post( diffPar );
+			}
+
 		} else if ( config.$diffNode ) {
 			config.$diffNode.hide();
 		}
 
 		return $.when( parseRequest, diffRequest )
 			.done( function ( response, diffResponse ) {
-				showEditSummary( config.$formNode, response[ 0 ] );
+				showEditSummary( config.$formNode, response[ 0 ], config.showDiff );
 
 				if ( config.showDiff ) {
-					parseDiffResponse( config, diffResponse[ 0 ] );
+					parseDiffResponse( config, diffResponse );
 				} else {
 					parseResponse( config, response[ 0 ], section !== '' );
 				}