Don't autosize textarea in diff view (#26233) (#26244)

Backport #26233 by @silverwind

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: silverwind <me@silverwind.io>

diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index 109f1679672d398f9e9b50571343691e3d8ccbe4..8565deb168596dd7b64789c4d3f7202096a91de3 100644 (file)
--- 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 4c1742d21f1a125341eb1d4ff9304bf780c2811d..9715d0ef0108ec6e028a138d645143598fb68500 100644 (file)
--- 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 103e71daae4730bfb3f514b11b320cc126f91ce3..48e3ca5bd24c2b1716acc52a1d0242bb2ce268b4 100644 (file)
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -68,7 +68,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);
@@ -246,7 +249,7 @@ class ComboMarkdownEditor {
     } else {
       this.textarea.value = v;
     }
-    this.textareaAutosize.resizeToFit();
+    this.textareaAutosize?.resizeToFit();
   }
 
   focus() {