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>
This commit is contained in:
parent
4244ce0d28
commit
aa723dea9b
3 changed files with 8 additions and 3 deletions
|
@ -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">
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
|
@ -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);
|
||||||
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 = 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() {
|
||||||
|
|
Loading…
Reference in a new issue