Improve markdown editor: width, height, preferred

templates/repo/issue/comment_tab.tmpl

@@ -3,14 +3,16 @@
 {{if not $textareaContent}}{{$textareaContent = .PullRequestTemplate}}{{end}}
 {{if not $textareaContent}}{{$textareaContent = .content}}{{end}}
 
-{{template "shared/combomarkdowneditor" (dict
-	"locale" $.locale
-	"MarkdownPreviewUrl" (print .Repository.Link "/markup")
-	"MarkdownPreviewContext" .RepoLink
-	"TextareaName" "content"
-	"TextareaContent" $textareaContent
-	"DropzoneParentContainer" "form, .ui.form"
-)}}
+<div class="field">
+	{{template "shared/combomarkdowneditor" (dict
+		"locale" $.locale
+		"MarkdownPreviewUrl" (print .Repository.Link "/markup")
+		"MarkdownPreviewContext" .RepoLink
+		"TextareaName" "content"
+		"TextareaContent" $textareaContent
+		"DropzoneParentContainer" "form, .ui.form"
+	)}}
+</div>
 
 {{if .IsAttachmentEnabled}}
 	<div class="field">

web_src/css/editor-markdown.css

@@ -18,8 +18,15 @@
   cursor: pointer;
 }
 
-.combo-markdown-editor .markdown-text-editor {
+.ui.form .combo-markdown-editor textarea.markdown-text-editor,
+.combo-markdown-editor textarea.markdown-text-editor {
   display: block;
   width: 100%;
-  height: 200px;
+  min-height: 200px;
+  max-height: calc(100vh - 200px);
+  resize: none;
+}
+
+.combo-markdown-editor .CodeMirror-scroll {
+  max-height: calc(100vh - 200px);
 }

web_src/css/repository.css

@@ -544,10 +544,6 @@
   margin: 0;
 }
 
-.repository .comment textarea {
-  max-height: none !important;
-}
-
 .repository.new.issue .comment.form .comment .avatar {
   width: 3em;
 }
@@ -1068,11 +1064,6 @@
   min-height: 5rem;
 }
 
-.repository.view.issue .comment-list .comment .ui.form textarea {
-  height: 200px;
-  font-family: var(--fonts-monospace);
-}
-
 .repository.view.issue .comment-list .comment .edit.buttons {
   margin-top: 10px;
 }
@@ -1191,15 +1182,6 @@
   margin-top: -8px;
 }
 
-.repository .comment.form .content textarea {
-  height: 200px;
-  font-family: var(--fonts-monospace);
-}
-
-.repository .comment.form .content .CodeMirror-scroll {
-  max-height: 85vh;
-}
-
 .repository .milestone.list {
   list-style: none;
   padding-top: 15px;
@@ -2129,9 +2111,6 @@
   margin-top: 0;
 }
 
-.repository.wiki .form .CodeMirror-scroll {
-  max-height: 85vh;
-}
 
 @media (max-width: 767px) {
   .repository.wiki .dividing.header .stackable.grid .button {

web_src/css/review.css

@@ -160,8 +160,11 @@
   margin: 0.5em;
 }
 
+.comment-code-cloud .editor-statusbar {
+  display: none;
+}
+
 .comment-code-cloud .footer {
-  border-top: 1px solid var(--color-secondary);
   padding: 10px 0;
 }
 
@@ -248,7 +251,7 @@ a.blob-excerpt:hover {
   }
 }
 
-.review-box-panel .combo-markdown-editor textarea {
+.review-box-panel .combo-markdown-editor {
   width: 730px;
   max-width: calc(100vw - 70px);
 }

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -1,8 +1,8 @@
 import '@github/markdown-toolbar-element';
+import $ from 'jquery';
 import {attachTribute} from '../tribute.js';
 import {hideElem, showElem} from '../../utils/dom.js';
 import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
-import $ from 'jquery';
 import {initMarkupContent} from '../../markup/content.js';
 import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
 import {attachRefIssueContextPopup} from '../contextpopup.js';
@@ -39,31 +39,57 @@ class ComboMarkdownEditor {
   }
 
   async init() {
+    this.prepareEasyMDEToolbarActions();
+
+    this.setupTab();
+    this.setupDropzone();
+
+    this.setupTextarea();
+
+    await attachTribute(this.textarea, {mentions: true, emoji: true});
+
+    if (this.userPreferredEditor === 'easymde') {
+      await this.switchToEasyMDE();
+    }
+  }
+
+  applyEditorHeights(el, heights) {
+    if (!heights) return;
+    if (heights.minHeight) el.style.minHeight = heights.minHeight;
+    if (heights.height) el.style.height = heights.height;
+    if (heights.maxHeight) el.style.maxHeight = heights.maxHeight;
+  }
+
+  setupTextarea() {
     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.options?.onContentChanged?.(this, e)});
+    this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
+    this.textarea.addEventListener('input', (e) => {
+      this.textareaAutoResize();
+      this.options?.onContentChanged?.(this, e);
+    });
+    this.applyEditorHeights(this.textarea, this.options.editorHeights);
+    this.textareaAutoResize();
     this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
     this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
 
-    elementIdCounter++;
-
     this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde');
     this.switchToEasyMDEButton?.addEventListener('click', async (e) => {
       e.preventDefault();
+      this.userPreferredEditor = 'easymde';
       await this.switchToEasyMDE();
     });
 
-    await attachTribute(this.textarea, {mentions: true, emoji: true});
+    if (this.dropzone) {
+      initTextareaImagePaste(this.textarea, this.dropzone);
+    }
+  }
 
+  setupDropzone() {
     const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
     if (dropzoneParentContainer) {
       this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
-      initTextareaImagePaste(this.textarea, this.dropzone);
     }
-
-    this.setupTab();
-    this.prepareEasyMDEToolbarActions();
   }
 
   setupTab() {
@@ -134,7 +160,10 @@ class ComboMarkdownEditor {
         title: 'Add Checkbox (checked)',
       },
       'gitea-switch-to-textarea': {
-        action: this.switchToTextarea.bind(this),
+        action: () => {
+          this.userPreferredEditor = 'textarea';
+          this.switchToTextarea();
+        },
         className: 'fa fa-file',
         title: 'Revert to simple textarea',
       },
@@ -169,7 +198,7 @@ class ComboMarkdownEditor {
     return processed;
   }
 
-  async switchToTextarea() {
+  switchToTextarea() {
     showElem(this.textareaMarkdownToolbar);
     if (this.easyMDE) {
       this.easyMDE.toTextArea();
@@ -218,6 +247,7 @@ class ComboMarkdownEditor {
         }
       },
     });
+    this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
     await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true});
     initEasyMDEImagePaste(this.easyMDE, this.dropzone);
     hideElem(this.textareaMarkdownToolbar);
@@ -235,6 +265,7 @@ class ComboMarkdownEditor {
       this.easyMDE.value(v);
     } else {
       this.textarea.value = v;
+      this.textareaAutoResize();
     }
   }
 
@@ -246,6 +277,24 @@ class ComboMarkdownEditor {
     }
   }
 
+  textareaAutoResize() {
+    if (this.textareaInitalHeight === undefined) {
+      this.textareaInitalHeight = this.textarea.offsetHeight;
+    }
+    const offset = this.textarea.offsetHeight - this.textarea.clientHeight;
+    if (!this.lastValue || Math.abs(this.lastValue.length - this.textarea.value.length) > 2) {
+      // the value has changed a lot, so reset the height to calculate the real scroll height, it might cause UI flickering
+      this.textarea.style.height = 'auto';
+    } else {
+      // try to shrink a little to see if a line is deleted (since the value doesn't change much), it won't cause UI flickering
+      // the magic number is a general number which fits most line-height styles.
+      this.textarea.style.height = `${this.textarea.scrollHeight + offset - 40}px`;
+    }
+    // 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);
@@ -254,6 +303,13 @@ class ComboMarkdownEditor {
       this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0);
     }
   }
+
+  get userPreferredEditor() {
+    return window.localStorage.getItem(`markdown-editor-${this.options.useScene ?? 'default'}`);
+  }
+  set userPreferredEditor(s) {
+    window.localStorage.setItem(`markdown-editor-${this.options.useScene ?? 'default'}`, s);
+  }
 }
 
 export function getComboMarkdownEditor(el) {

web_src/js/features/repo-wiki.js

@@ -44,6 +44,10 @@ async function initRepoWikiFormEditor() {
   renderEasyMDEPreview();
 
   editor = await initComboMarkdownEditor($editorContainer, {
+    useScene: 'wiki',
+    // EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it.
+    // And another benefit is that we only need to write the style once for both editors.
+    editorHeights: {minHeight: '300px', height: 'calc(100vh - 600px)'},
     previewMode: 'gfm',
     previewWiki: true,
     easyMDEOptions: {