From c56b2d35ff23f785c14eb1799ad8076d0702dc33 Mon Sep 17 00:00:00 2001
From: Grigor Tonikyan <grigor.tonikyan@gmail.com>
Date: Fri, 4 Sep 2026 03:32:11 +0400
Subject: [PATCH] enhance(web): hide attachment dropzone on preview tab in
 combo editor (#39204)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/issue/fields/textarea.tmpl     |  2 +-
 templates/repo/upload.tmpl                    |  2 +-
 web_src/css/editor/combomarkdowneditor.css    |  5 +++++
 .../js/features/comp/ComboMarkdownEditor.ts   | 22 ++++++++++++++-----
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/templates/repo/issue/fields/textarea.tmpl b/templates/repo/issue/fields/textarea.tmpl
index 128da0b7dd9..0788baaa669 100644
--- a/templates/repo/issue/fields/textarea.tmpl
+++ b/templates/repo/issue/fields/textarea.tmpl
@@ -16,7 +16,7 @@
 		)}}
 
 		{{if .root.IsAttachmentEnabled}}
-		<div class="tw-mt-4 form-field-dropzone tw-hidden">
+		<div class="tw-mt-4 form-field-dropzone tw-hidden">{{/*TODO: need to refactor the "repo/upload" template and remove this wrapper */}}
 			{{template "repo/upload" .root}}
 		</div>
 		{{end}}
diff --git a/templates/repo/upload.tmpl b/templates/repo/upload.tmpl
index eef51994ab7..6b29838868d 100644
--- a/templates/repo/upload.tmpl
+++ b/templates/repo/upload.tmpl
@@ -1,5 +1,5 @@
 <div
-	class="ui dropzone"
+	class="dropzone"
 	data-link-url="{{.UploadLinkUrl}}"
 	data-upload-url="{{.UploadUrl}}"
 	data-remove-url="{{.UploadRemoveUrl}}"
diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css
index c073948a8fd..d6338d1dc58 100644
--- a/web_src/css/editor/combomarkdowneditor.css
+++ b/web_src/css/editor/combomarkdowneditor.css
@@ -95,3 +95,8 @@
 .combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
   font-size: 0.85em;
 }
+
+.combo-editor-container[data-combo-editor-page="previewer"] .form-field-dropzone,
+.combo-editor-container[data-combo-editor-page="previewer"] .dropzone {
+  display: none;
+}
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.ts b/web_src/js/features/comp/ComboMarkdownEditor.ts
index 7764f42192e..57aa149d8ae 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.ts
+++ b/web_src/js/features/comp/ComboMarkdownEditor.ts
@@ -86,6 +86,7 @@ export class ComboMarkdownEditor {
 
   buttonMonospace!: HTMLButtonElement;
 
+  dropzoneParentContainer: HTMLElement | null = null;
   dropzone: HTMLElement | null = null;
   attachedDropzoneInst?: Dropzone;
 
@@ -117,11 +118,17 @@ export class ComboMarkdownEditor {
     if (heights.maxHeight) el.style.maxHeight = heights.maxHeight;
   }
 
+  updateEditorContainerTabPage(page: 'writer' | 'previewer') {
+    this.dropzoneParentContainer?.classList.add('combo-editor-container');
+    this.dropzoneParentContainer?.setAttribute('data-combo-editor-page', page);
+  }
+
   setupContainer() {
     this.supportEasyMDE = this.container.getAttribute('data-support-easy-mde') === 'true';
     this.previewMode = this.container.getAttribute('data-content-mode')!;
     this.previewUrl = this.container.getAttribute('data-preview-url')!;
     this.previewContext = this.container.getAttribute('data-preview-context')!;
+    this.updateEditorContainerTabPage('writer');
     initTextExpander(this.container.querySelector('text-expander')!);
   }
 
@@ -170,9 +177,10 @@ export class ComboMarkdownEditor {
   }
 
   async setupDropzone() {
-    const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
-    if (!dropzoneParentContainer) return;
-    this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container')!)?.querySelector('.dropzone') ?? null;
+    const containerSelector = this.container.getAttribute('data-dropzone-parent-container');
+    if (!containerSelector) return;
+    this.dropzoneParentContainer = this.container.closest(containerSelector);
+    this.dropzone = this.dropzoneParentContainer?.querySelector('.dropzone') ?? null;
     if (!this.dropzone) return;
 
     this.attachedDropzoneInst = await initDropzone(this.dropzone);
@@ -210,7 +218,7 @@ export class ComboMarkdownEditor {
     this.tabEditor = this.container.querySelector('[data-tab-for="markdown-writer"]')!;
     this.tabPreviewer = this.container.querySelector('[data-tab-for="markdown-previewer"]')!;
     const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
-    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
+    const panelPreviewer = this.container.querySelector<HTMLElement>('.ui.tab[data-tab-panel="markdown-previewer"]')!;
 
     // 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.
@@ -222,12 +230,16 @@ export class ComboMarkdownEditor {
     initTabSwitcher(elTabular);
 
     this.tabEditor.addEventListener('click', () => {
+      this.updateEditorContainerTabPage('writer');
       requestAnimationFrame(() => {
         this.focus();
       });
     });
 
     this.tabPreviewer.addEventListener('click', async () => {
+      // use capture to get the event before Fomantic Tab switches the tab, so that we can set the minHeight of the previewer panel to avoid flickering.
+      panelPreviewer.style.minHeight = `${panelEditor?.clientHeight}px`;
+      this.updateEditorContainerTabPage('previewer');
       const formData = new FormData();
       formData.append('mode', this.previewMode);
       formData.append('context', this.previewContext);
@@ -249,7 +261,7 @@ export class ComboMarkdownEditor {
           triggerEditorContentChanged(this.container);
         });
       }
-    });
+    }, {capture: true});
   }
 
   generateMarkdownTable(rows: number, cols: number): string {