use autosize package

package.json

@@ -20,6 +20,7 @@
     "add-asset-webpack-plugin": "2.0.1",
     "ansi-to-html": "0.7.2",
     "asciinema-player": "3.2.0",
+    "autosize": "6.0.1",
     "clippie": "3.1.4",
     "css-loader": "6.7.3",
     "dropzone": "6.0.0-beta.2",

web_src/css/editor-markdown.css

@@ -24,6 +24,7 @@
   width: 100%;
   min-height: 200px;
   max-height: calc(100vh - 200px);
+  resize: vertical; /* TODO: even if we set this, the `autosize` package doesn't support manually resize vertically */
 }
 
 .combo-markdown-editor .CodeMirror-scroll {

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -6,6 +6,7 @@ import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
 import {initMarkupContent} from '../../markup/content.js';
 import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
 import {attachRefIssueContextPopup} from '../contextpopup.js';
+import autosize from 'autosize';
 
 let elementIdCounter = 0;
 
@@ -64,12 +65,10 @@ class ComboMarkdownEditor {
     this.textarea = this.container.querySelector('.markdown-text-editor');
     this.textarea._giteaComboMarkdownEditor = this;
     this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
-    this.textarea.addEventListener('input', (e) => {
-      this.textareaAutoResize();
-      this.options?.onContentChanged?.(this, e);
-    });
+    this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e));
     this.applyEditorHeights(this.textarea, this.options.editorHeights);
-    this.textareaAutoResize();
+    autosize(this.textarea);
+
     this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
     this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
 
@@ -265,7 +264,6 @@ class ComboMarkdownEditor {
       this.easyMDE.value(v);
     } else {
       this.textarea.value = v;
-      this.textareaAutoResize();
     }
   }
 
@@ -277,21 +275,6 @@ class ComboMarkdownEditor {
     }
   }
 
-  textareaAutoResize() {
-    if (this.textareaInitalHeight === undefined) {
-      this.textareaInitalHeight = this.textarea.offsetHeight;
-      new ResizeObserver(() => this.textareaInitalHeight = this.textarea.offsetHeight).observe(this.textarea);
-    }
-    const offset = this.textarea.offsetHeight - this.textarea.clientHeight;
-    if (!this.lastValue || !this.textarea.value.startsWith(this.lastValue)) {
-      // the value has changed a lot, so reset the height to calculate the real scroll height, it's slow and might cause slight flickering.
-      this.textarea.style.height = 'auto';
-    }
-    // make sure the height is not smaller than the initial height
-    this.textarea.style.height = `${Math.max(this.textareaInitalHeight, this.textarea.scrollHeight + offset)}px`;
-    this.lastValue = this.textarea.value;
-  }
-
   moveCursorToEnd() {
     this.textarea.focus();
     this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);