From aa723dea9b4e22d93a1df8f38ee572e923756614 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 31 Jul 2023 00:11:15 +0200
Subject: [PATCH] Don't autosize textarea in diff view (#26233)

Resizing the comment editor can be a very expensive operation because it
triggers page reflows, which on large PRs can take upwards of seconds to
complete. Disable this mechanism on the diff page only where we know
that the page can get large.

Fixes https://github.com/go-gitea/gitea/issues/26201 for the textarea
editor.

I don't think this can be fixed for EasyMDE because as far as I can
tell, it exposes no option to disable this resizing.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
---
 templates/repo/diff/comment_form.tmpl           | 1 +
 templates/shared/combomarkdowneditor.tmpl       | 3 ++-
 web_src/js/features/comp/ComboMarkdownEditor.js | 7 +++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index 109f16796..8565deb16 100644
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -17,6 +17,7 @@
 			"TextareaName" "content"
 			"TextareaPlaceholder" ($.locale.Tr "repo.diff.comment.placeholder")
 			"DropzoneParentContainer" "form"
+			"DisableAutosize" "true"
 		)}}
 
 		<div class="field footer gt-mx-3">
diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
index 4c1742d21..9715d0ef0 100644
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -10,6 +10,7 @@ Template Attributes:
 * TextareaPlaceholder: placeholder attribute for the textarea
 * TextareaAriaLabel: aria-label attribute for the textarea
 * DropzoneParentContainer: container for file upload (leave it empty if no upload)
+* DisableAutosize: whether to disable automatic height resizing
 */}}
 <div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
 	{{if .MarkdownPreviewUrl}}
@@ -45,7 +46,7 @@ Template Attributes:
 			</div>
 		</markdown-toolbar>
 		<text-expander keys=": @" suffix="">
-			<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}>{{.TextareaContent}}</textarea>
+			<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
 		</text-expander>
 		<script>
 			if (localStorage?.getItem('markdown-editor-monospace') === 'true') {
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js
index 3d696be75..d61b6b43c 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -69,7 +69,10 @@ class ComboMarkdownEditor {
     this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
     this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e));
     this.applyEditorHeights(this.textarea, this.options.editorHeights);
-    this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
+
+    if (this.textarea.getAttribute('data-disable-autosize') !== 'true') {
+      this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
+    }
 
     this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
     this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
@@ -247,7 +250,7 @@ class ComboMarkdownEditor {
     } else {
       this.textarea.value = v;
     }
-    this.textareaAutosize.resizeToFit();
+    this.textareaAutosize?.resizeToFit();
   }
 
   focus() {