From 8d60c7d5685a5486afba4f7c21074ae751c92805 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Sat, 22 Jun 2024 23:47:36 +0800
Subject: [PATCH] Switch to "Write" tab when edit comment again (#31445)
 (#31461)

Backport #31445 by wxiaoguang

Fix #19031

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 .../js/features/comp/ComboMarkdownEditor.js   | 28 +++++++++++--------
 web_src/js/features/repo-issue-edit.js        |  1 +
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js
index d3fab375a9396..e3ebc758bbab9 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -131,22 +131,22 @@ class ComboMarkdownEditor {
   }
 
   setupTab() {
-    const $container = $(this.container);
-    const tabs = $container[0].querySelectorAll('.tabular.menu > .item');
+    const tabs = this.container.querySelectorAll('.tabular.menu > .item');
 
     // Fomantic Tab requires the "data-tab" to be globally unique.
     // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
-    const tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
-    const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
-    tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
-    tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
-    const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
-    const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
+    this.tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
+    this.tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
+    this.tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
+    this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
+
+    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
+    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
     panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
     panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
     elementIdCounter++;
 
-    tabEditor.addEventListener('click', () => {
+    this.tabEditor.addEventListener('click', () => {
       requestAnimationFrame(() => {
         this.focus();
       });
@@ -154,11 +154,11 @@ class ComboMarkdownEditor {
 
     $(tabs).tab();
 
-    this.previewUrl = tabPreviewer.getAttribute('data-preview-url');
-    this.previewContext = tabPreviewer.getAttribute('data-preview-context');
+    this.previewUrl = this.tabPreviewer.getAttribute('data-preview-url');
+    this.previewContext = this.tabPreviewer.getAttribute('data-preview-context');
     this.previewMode = this.options.previewMode ?? 'comment';
     this.previewWiki = this.options.previewWiki ?? false;
-    tabPreviewer.addEventListener('click', async () => {
+    this.tabPreviewer.addEventListener('click', async () => {
       const formData = new FormData();
       formData.append('mode', this.previewMode);
       formData.append('context', this.previewContext);
@@ -170,6 +170,10 @@ class ComboMarkdownEditor {
     });
   }
 
+  switchTabToEditor() {
+    this.tabEditor.click();
+  }
+
   prepareEasyMDEToolbarActions() {
     this.easyMDEToolbarDefault = [
       'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3',
diff --git a/web_src/js/features/repo-issue-edit.js b/web_src/js/features/repo-issue-edit.js
index abf2d31221024..e633b42fdf82a 100644
--- a/web_src/js/features/repo-issue-edit.js
+++ b/web_src/js/features/repo-issue-edit.js
@@ -172,6 +172,7 @@ async function onEditContent(event) {
   if (!comboMarkdownEditor.value()) {
     comboMarkdownEditor.value(rawContent.textContent);
   }
+  comboMarkdownEditor.switchTabToEditor();
   comboMarkdownEditor.focus();
 }