wp/wp-includes/js/comment-reply.js
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
--- a/wp/wp-includes/js/comment-reply.js	Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-includes/js/comment-reply.js	Tue Dec 15 13:49:49 2020 +0100
@@ -14,12 +14,13 @@
 
 	// Settings.
 	var config = {
-		commentReplyClass : 'comment-reply-link',
-		cancelReplyId     : 'cancel-comment-reply-link',
-		commentFormId     : 'commentform',
-		temporaryFormId   : 'wp-temp-form-div',
-		parentIdFieldId   : 'comment_parent',
-		postIdFieldId     : 'comment_post_ID'
+		commentReplyClass   : 'comment-reply-link',
+		commentReplyTitleId : 'reply-title',
+		cancelReplyId       : 'cancel-comment-reply-link',
+		commentFormId       : 'commentform',
+		temporaryFormId     : 'wp-temp-form-div',
+		parentIdFieldId     : 'comment_parent',
+		postIdFieldId       : 'comment_post_ID'
 	};
 
 	// Cross browser MutationObserver.
@@ -95,6 +96,21 @@
 		cancelElement.addEventListener( 'touchstart', cancelEvent );
 		cancelElement.addEventListener( 'click',      cancelEvent );
 
+		// Submit the comment form when the user types [Ctrl] or [Cmd] + [Enter].
+		var submitFormHandler = function( e ) {
+			if ( ( e.metaKey || e.ctrlKey ) && e.keyCode === 13 ) {
+				commentFormElement.removeEventListener( 'keydown', submitFormHandler );
+				e.preventDefault();
+				// The submit button ID is 'submit' so we can't call commentFormElement.submit(). Click it instead.
+				commentFormElement.submit.click();
+				return false;
+			}
+		};
+
+		if ( commentFormElement ) {
+			commentFormElement.addEventListener( 'keydown', submitFormHandler );
+		}
+
 		var links = replyLinks( context );
 		var element;
 
@@ -156,8 +172,17 @@
 		getElementById( config.parentIdFieldId ).value = '0';
 
 		// Move the respond form back in place of the temporary element.
-		temporaryElement.parentNode.replaceChild( respondElement ,temporaryElement );
+		var headingText = temporaryElement.textContent;
+		temporaryElement.parentNode.replaceChild( respondElement, temporaryElement );
 		cancelLink.style.display = 'none';
+
+		var replyHeadingElement  = getElementById( config.commentReplyTitleId );
+		var replyHeadingTextNode = replyHeadingElement && replyHeadingElement.firstChild;
+
+		if ( replyHeadingTextNode && replyHeadingTextNode.nodeType === Node.TEXT_NODE && headingText ) {
+			replyHeadingTextNode.textContent = headingText;
+		}
+
 		event.preventDefault();
 	}
 
@@ -169,11 +194,14 @@
 	 * @param {Event} event The calling event.
 	 */
 	function clickEvent( event ) {
+		var replyNode = getElementById( config.commentReplyTitleId );
+		var defaultReplyHeading = replyNode && replyNode.firstChild.textContent;
 		var replyLink = this,
 			commId    = getDataAttribute( replyLink, 'belowelement'),
 			parentId  = getDataAttribute( replyLink, 'commentid' ),
-			respondId = getDataAttribute( replyLink, 'respondelement'),
-			postId    = getDataAttribute( replyLink, 'postid'),
+			respondId = getDataAttribute( replyLink, 'respondelement' ),
+			postId    = getDataAttribute( replyLink, 'postid' ),
+			replyTo   = getDataAttribute( replyLink, 'replyto' ) || defaultReplyHeading,
 			follow;
 
 		if ( ! commId || ! parentId || ! respondId || ! postId ) {
@@ -188,7 +216,7 @@
 		 * Third party comments systems can hook into this function via the global scope,
 		 * therefore the click event needs to reference the global scope.
 		 */
-		follow = window.addComment.moveForm(commId, parentId, respondId, postId);
+		follow = window.addComment.moveForm( commId, parentId, respondId, postId, replyTo );
 		if ( false === follow ) {
 			event.preventDefault();
 		}
@@ -206,7 +234,7 @@
 
 		var observerOptions = {
 			childList: true,
-			subTree: true
+			subtree: true
 		};
 
 		observer = new MutationObserver( handleChanges );
@@ -240,9 +268,9 @@
 	 * @since 5.1.0
 	 *
 	 * @param {HTMLElement} Element DOM element with the attribute.
-	 * @param {String}      Attribute the attribute to get.
+	 * @param {string}      Attribute the attribute to get.
 	 *
-	 * @return {String}
+	 * @return {string}
 	 */
 	function getDataAttribute( element, attribute ) {
 		if ( supportsDataset ) {
@@ -273,12 +301,13 @@
 	 *
 	 * @memberOf addComment
 	 *
-	 * @param {String} addBelowId HTML ID of element the form follows.
-	 * @param {String} commentId  Database ID of comment being replied to.
-	 * @param {String} respondId  HTML ID of 'respond' element.
-	 * @param {String} postId     Database ID of the post.
+	 * @param {string} addBelowId HTML ID of element the form follows.
+	 * @param {string} commentId  Database ID of comment being replied to.
+	 * @param {string} respondId  HTML ID of 'respond' element.
+	 * @param {string} postId     Database ID of the post.
+	 * @param {string} replyTo    Form heading content.
 	 */
-	function moveForm( addBelowId, commentId, respondId, postId ) {
+	function moveForm( addBelowId, commentId, respondId, postId, replyTo ) {
 		// Get elements based on their IDs.
 		var addBelowElement = getElementById( addBelowId );
 		respondElement  = getElementById( respondId );
@@ -288,11 +317,18 @@
 		var postIdField     = getElementById( config.postIdFieldId );
 		var element, cssHidden, style;
 
+		var replyHeading         = getElementById( config.commentReplyTitleId );
+		var replyHeadingTextNode = replyHeading && replyHeading.firstChild;
+
 		if ( ! addBelowElement || ! respondElement || ! parentIdField ) {
 			// Missing key elements, fail.
 			return;
 		}
 
+		if ( 'undefined' === typeof replyTo ) {
+			replyTo = replyHeadingTextNode && replyHeadingTextNode.textContent;
+		}
+
 		addPlaceHolder( respondElement );
 
 		// Set the value of the post.
@@ -305,11 +341,15 @@
 		cancelElement.style.display = '';
 		addBelowElement.parentNode.insertBefore( respondElement, addBelowElement.nextSibling );
 
+		if ( replyHeadingTextNode && replyHeadingTextNode.nodeType === Node.TEXT_NODE ) {
+			replyHeadingTextNode.textContent = replyTo;
+		}
+
 		/*
 		 * This is for backward compatibility with third party commenting systems
 		 * hooking into the event using older techniques.
 		 */
-		cancelElement.onclick = function(){
+		cancelElement.onclick = function() {
 			return false;
 		};
 
@@ -372,6 +412,8 @@
 	function addPlaceHolder( respondElement ) {
 		var temporaryFormId  = config.temporaryFormId;
 		var temporaryElement = getElementById( temporaryFormId );
+		var replyElement = getElementById( config.commentReplyTitleId );
+		var initialHeadingText = replyElement ? replyElement.firstChild.textContent : '';
 
 		if ( temporaryElement ) {
 			// The element already exists, no need to recreate.
@@ -381,6 +423,7 @@
 		temporaryElement = document.createElement( 'div' );
 		temporaryElement.id = temporaryFormId;
 		temporaryElement.style.display = 'none';
+		temporaryElement.textContent = initialHeadingText;
 		respondElement.parentNode.insertBefore( temporaryElement, respondElement );
 	}