Skip to content

Commit

Permalink
Don't autosize textarea in diff view (go-gitea#26233)
Browse files Browse the repository at this point in the history
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 go-gitea#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>
  • Loading branch information
silverwind and GiteaBot authored Jul 30, 2023
1 parent 4244ce0 commit aa723de
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 3 deletions.
1 change: 1 addition & 0 deletions templates/repo/diff/comment_form.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"TextareaName" "content"
"TextareaPlaceholder" ($.locale.Tr "repo.diff.comment.placeholder")
"DropzoneParentContainer" "form"
"DisableAutosize" "true"
)}}

<div class="field footer gt-mx-3">
Expand Down
3 changes: 2 additions & 1 deletion templates/shared/combomarkdowneditor.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down Expand Up @@ -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') {
Expand Down
7 changes: 5 additions & 2 deletions web_src/js/features/comp/ComboMarkdownEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -247,7 +250,7 @@ class ComboMarkdownEditor {
} else {
this.textarea.value = v;
}
this.textareaAutosize.resizeToFit();
this.textareaAutosize?.resizeToFit();
}

focus() {
Expand Down

0 comments on commit aa723de

Please sign in to comment.