GH#123: preserve WP ULike controls after inline Save

DESIGN.md

@@ -300,6 +300,7 @@ Follow:
 - Keep focus in the inline editor after a failed request and announce the returned message through its status region.
 - Disable every editor action while a save or deletion is in progress, then restore the relevant controls on a retryable failure.
 - Keep the optional Quicktags toolbar within the editor width and allow its native buttons to wrap on narrow screens.
+- Preserve WP ULike's existing automatic comment-control nodes when replacing saved text, including top/bottom placement, live vote state, and handlers. Do not duplicate controls if the response also includes their markup; do not change the post's like button or other comments.
 
 Avoid:
 

README.md

@@ -324,6 +324,16 @@ See "Styles" section.
 
 ## WordPress Filters
 
+### WP ULike comment controls after Save
+
+WP ULike does not automatically render its frontend comment buttons in SCE's
+admin-AJAX Save response. SCE retains the existing automatic `.wpulike` controls
+for the edited comment instead of discarding them with the old text. Their DOM
+nodes, vote state and handlers remain intact, including top, bottom and
+top-and-bottom placement. Returned copies are removed to avoid duplicates.
+Controls for the post or other comments are not moved. No extra permission or
+Save requests are introduced, and Cancel does not replace comment content.
+
 ### sce_loading_img - Change the loading image
 ```php
 /**

readme.txt

@@ -113,6 +113,7 @@ You can report security bugs through the Patchstack Vulnerability Disclosure Pro
 == Changelog ==
 
 = Unreleased =
+* Fix: Preserve WP ULike comment buttons, their vote state, and their top/bottom placement after inline comment saves.
 * New: Add a repeat-safe, root-scoped initializer for AJAX/lazy-loaded comment controls and an opt-in guest ownership hook for validated AJAX submissions.
 * New: Add an optional native Quicktags toolbar and lifecycle hooks for external comment editors.
 * Docs: Add supported custom-field, custom-loop, button HTML, and inline action-row integration examples.

src/js/comment-editing/editing.js

@@ -106,6 +106,38 @@ const setup = () => {
 		return data.error || data.message || responseData.error || fallback;
 	};
 
+	/**
+	 * Replace saved text without discarding live WP ULike comment controls.
+	 *
+	 * WP ULike omits its frontend buttons from admin-AJAX responses. Reuse
+	 * the original nodes to retain their vote state and registered handlers.
+	 *
+	 * @param {string} commentId The comment ID.
+	 * @param {string} html      The server-formatted comment content.
+	 */
+	const updateCommentContent = ( commentId, html ) => {
+		const comment = document.querySelector( `#sce-comment${ commentId }` );
+		const likeSelector = `[data-ulike-type="comment"][data-ulike-id="${ commentId }"]`;
+		const isCommentLike = ( node ) => 1 === node.nodeType && node.matches( '.wpulike' ) && node.querySelector( likeSelector );
+		const leadingLikes = [];
+		const trailingLikes = [];
+		let hasContent = false;
+		comment.childNodes.forEach( ( node ) => {
+			if ( isCommentLike( node ) ) {
+				( hasContent ? trailingLikes : leadingLikes ).push( node );
+			} else if ( 1 === node.nodeType || ( 3 === node.nodeType && node.textContent.trim() ) ) {
+				hasContent = true;
+			}
+		} );
+		comment.innerHTML = html;
+		if ( leadingLikes.length || trailingLikes.length ) {
+			// A response filter may also render buttons; never add duplicates.
+			Array.from( comment.children ).filter( isCommentLike ).forEach( ( node ) => node.remove() );
+			comment.prepend( ...leadingLikes );
+			comment.append( ...trailingLikes );
+		}
+	};
+
 	/**
 	 * Shows an editor status message without rendering server content as HTML.
 	 *
@@ -725,7 +757,7 @@ const setup = () => {
 						const { data } = response;
 						if ( data && true === data.success && data.data && 'string' === typeof data.data.comment_text ) {
 							// Update comment HTML.
-							document.querySelector( `#sce-comment${ commentId }` ).innerHTML = data.data.comment_text;
+							updateCommentContent( commentId, data.data.comment_text );
 
 							// Update textarea placeholder.
 							textareas[ commentId ] = document.querySelector( `#sce-edit-comment${ commentId } textarea` ).value;