Fix markup init after issue comment editing (#35536) (#35537)

Backport #35536 by wxiaoguang

Fix #35533

Co-authored-by: wxiaoguang <[email protected]>

Author: GiteaBot

routers/web/repo/issue_comment.go

@@ -9,12 +9,14 @@ import (
 	"html/template"
 	"net/http"
 	"strconv"
+	"strings"
 
 	issues_model "code.gitea.io/gitea/models/issues"
 	"code.gitea.io/gitea/models/renderhelper"
 	user_model "code.gitea.io/gitea/models/user"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/gitrepo"
+	"code.gitea.io/gitea/modules/htmlutil"
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/markup/markdown"
 	repo_module "code.gitea.io/gitea/modules/repository"
@@ -287,9 +289,10 @@ func UpdateCommentContent(ctx *context.Context) {
 			ctx.ServerError("RenderString", err)
 			return
 		}
-	} else {
-		contentEmpty := fmt.Sprintf(`<span class="no-content">%s</span>`, ctx.Tr("repo.issues.no_content"))
-		renderedContent = template.HTML(contentEmpty)
+	}
+
+	if strings.TrimSpace(string(renderedContent)) == "" {
+		renderedContent = htmlutil.HTMLFormat(`<span class="no-content">%s</span>`, ctx.Tr("repo.issues.no_content"))
 	}
 
 	ctx.JSON(http.StatusOK, map[string]any{

templates/repo/issue/view_content.tmpl

@@ -168,10 +168,6 @@
 {{template "repo/issue/view_content/reference_issue_dialog" .}}
 {{template "shared/user/block_user_dialog" .}}
 
-<div class="tw-hidden" id="no-content">
-	<span class="no-content">{{ctx.Locale.Tr "repo.issues.no_content"}}</span>
-</div>
-
 <div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}

web_src/js/features/repo-issue-edit.ts

@@ -13,10 +13,10 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
   if (!clickTarget) return;
 
   e.preventDefault();
-  const segment = clickTarget.closest('.comment-header').nextElementSibling;
-  const editContentZone = segment.querySelector('.edit-content-zone');
-  const renderContent = segment.querySelector('.render-content');
-  const rawContent = segment.querySelector('.raw-content');
+  const commentContent = clickTarget.closest('.comment-header').nextElementSibling;
+  const editContentZone = commentContent.querySelector('.edit-content-zone');
+  let renderContent = commentContent.querySelector('.render-content');
+  const rawContent = commentContent.querySelector('.raw-content');
 
   let comboMarkdownEditor : ComboMarkdownEditor;
 
@@ -47,30 +47,32 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
 
       const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
       const data = await response.json();
-      if (response.status === 400) {
-        showErrorToast(data.errorMessage);
+      if (!response.ok) {
+        showErrorToast(data?.errorMessage ?? window.config.i18n.error_occurred);
         return;
       }
+
       reinitializeAreYouSure(editContentZone.querySelector('form')); // the form is no longer dirty
       editContentZone.setAttribute('data-content-version', data.contentVersion);
-      if (!data.content) {
-        renderContent.innerHTML = document.querySelector('#no-content').innerHTML;
-        rawContent.textContent = '';
-      } else {
-        renderContent.innerHTML = data.content;
-        rawContent.textContent = comboMarkdownEditor.value();
-        const refIssues = renderContent.querySelectorAll<HTMLElement>('p .ref-issue');
-        attachRefIssueContextPopup(refIssues);
-      }
-      const content = segment;
-      if (!content.querySelector('.dropzone-attachments')) {
+
+      // replace the render content with new one, to trigger re-initialization of all features
+      const newRenderContent = renderContent.cloneNode(false) as HTMLElement;
+      newRenderContent.innerHTML = data.content;
+      renderContent.replaceWith(newRenderContent);
+      renderContent = newRenderContent;
+
+      rawContent.textContent = comboMarkdownEditor.value();
+      const refIssues = renderContent.querySelectorAll<HTMLElement>('p .ref-issue');
+      attachRefIssueContextPopup(refIssues);
+
+      if (!commentContent.querySelector('.dropzone-attachments')) {
         if (data.attachments !== '') {
-          content.insertAdjacentHTML('beforeend', data.attachments);
+          commentContent.insertAdjacentHTML('beforeend', data.attachments);
         }
       } else if (data.attachments === '') {
-        content.querySelector('.dropzone-attachments').remove();
+        commentContent.querySelector('.dropzone-attachments').remove();
       } else {
-        content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
+        commentContent.querySelector('.dropzone-attachments').outerHTML = data.attachments;
       }
       comboMarkdownEditor.dropzoneSubmitReload();
     } catch (error) {