Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
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>
This commit is contained in:
silverwind 2023-07-31 00:11:15 +02:00 committed by GitHub
parent 4244ce0d28
commit aa723dea9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
templates/repo/diff/comment_form.tmpl
View file

@ -17,6 +17,7 @@
"TextareaName" "content" "TextareaName" "content"
"TextareaPlaceholder" ($.locale.Tr "repo.diff.comment.placeholder") "TextareaPlaceholder" ($.locale.Tr "repo.diff.comment.placeholder")
"DropzoneParentContainer" "form" "DropzoneParentContainer" "form"
"DisableAutosize" "true"
)}} )}}
<div class="field footer gt-mx-3"> <div class="field footer gt-mx-3">

3
templates/shared/combomarkdowneditor.tmpl
View file

@ -10,6 +10,7 @@ Template Attributes:
* TextareaPlaceholder: placeholder attribute for the textarea * TextareaPlaceholder: placeholder attribute for the textarea
* TextareaAriaLabel: aria-label attribute for the textarea * TextareaAriaLabel: aria-label attribute for the textarea
* DropzoneParentContainer: container for file upload (leave it empty if no upload) * 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}}"> <div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
{{if .MarkdownPreviewUrl}} {{if .MarkdownPreviewUrl}}
@ -45,7 +46,7 @@ Template Attributes:
</div> </div>
</markdown-toolbar> </markdown-toolbar>
<text-expander keys=": @" suffix=""> <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> </text-expander>
<script> <script>
if (localStorage?.getItem('markdown-editor-monospace') === 'true') { if (localStorage?.getItem('markdown-editor-monospace') === 'true') {

5
web_src/js/features/comp/ComboMarkdownEditor.js
View file

@ -69,7 +69,10 @@ class ComboMarkdownEditor {
this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`; this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e)); this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e));
this.applyEditorHeights(this.textarea, this.options.editorHeights); this.applyEditorHeights(this.textarea, this.options.editorHeights);
if (this.textarea.getAttribute('data-disable-autosize') !== 'true') {
this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130}); this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
}
this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar'); this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id); this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
@ -247,7 +250,7 @@ class ComboMarkdownEditor {
} else { } else {
this.textarea.value = v; this.textarea.value = v;
} }
this.textareaAutosize.resizeToFit(); this.textareaAutosize?.resizeToFit();
} }
focus() { focus() {