ui: editor auto-resize

packages/ui-default/components/editor/index.js

@@ -40,7 +40,6 @@ export default class Editor extends DOMAttachedObject {
     const hasFocus = $dom.is(':focus');
     const origin = $dom.get(0);
     const ele = document.createElement('div');
-    $(ele).height(550);
     $(ele).width('100%');
     $(ele).addClass('textbox');
     $dom.hide();
@@ -50,20 +49,25 @@ export default class Editor extends DOMAttachedObject {
       onChange, language = 'markdown',
       theme = UserContext.monacoTheme || 'vs-light',
       model = `file://model-${Math.random().toString(16)}`,
+      autoResize = $dom.hasClass('auto-resize'),
     } = this.options;
     this.model = typeof model === 'string' ? monaco.editor.createModel(value, language, monaco.Uri.parse(model)) : model;
-    this.editor = monaco.editor.create(
-      ele,
-      {
-        theme,
-        lineNumbers: true,
-        glyphMargin: true,
-        lightbulb: {
-          enabled: true,
-        },
-        model: this.model,
-      }
-    );
+    const cfg = {
+      theme,
+      lineNumbers: true,
+      glyphMargin: true,
+      lightbulb: { enabled: true },
+      model: this.model,
+      automaticLayout: true,
+    };
+    if (autoResize) {
+      cfg.scrollbar = {
+        vertical: 'hidden',
+        handleMouseWheel: false,
+      };
+      cfg.scrollBeyondLastLine = false;
+    }
+    this.editor = monaco.editor.create(ele, cfg);
     this.editor.addAction({
       id: 'theme-dark',
       label: 'Use dark theme',
@@ -74,6 +78,26 @@ export default class Editor extends DOMAttachedObject {
       label: 'Use light theme',
       run: () => monaco.editor.setTheme('vs-light'),
     });
+
+    let prevHeight = 0;
+    const updateEditorHeight = () => {
+      const editorElement = this.editor.getDomNode();
+      if (!editorElement) return;
+      const lineHeight = this.editor.getOption(monaco.editor.EditorOption.lineHeight);
+      const lineCount = this.editor.getModel()?.getLineCount() || 1;
+      const height = this.editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+      if (prevHeight !== height) {
+        prevHeight = height;
+        editorElement.style.height = `${height}px`;
+        this.editor.layout();
+      }
+    };
+
+    this.editor.onDidChangeModelDecorations(() => {
+      updateEditorHeight(); // typing
+      requestAnimationFrame(updateEditorHeight); // folding
+    });
+
     this._subscription = this.editor.onDidChangeModelContent(() => {
       const val = this.editor.getValue();
       $dom.val(val);

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.6.32",
+  "version": "4.6.33",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/templates/partials/discussion_edit_form.html

@@ -42,5 +42,6 @@
       hotkeys:'ctrl+enter:submit',
       markdown:true,
       required:true,
-      extra_style:'height: 500px'
+      extra_style:'height: 500px',
+      extra_class:'auto-resize'
     }) }}

packages/ui-default/templates/problem_edit.html

@@ -9,7 +9,7 @@
             <div class="medium-7 columns">
               <label>
                 {{ _('Title') }}
-                <input name="title" placeholder="{{ _('title') }}" value="{{ pdoc['title']|default('') }}" class="textbox" autofocus>
+                <input name="title" placeholder="{{ _('title') }}" value="{{ pdoc['title']|default('') }}" class="textbox"{% if page_name == 'problem_create' %} autofocus{% endif %}>
               </label>
             </div>
             <div class="medium-3 columns">
@@ -49,7 +49,7 @@
             </ul>
             </div>
           </div>
-          <div><textarea data-editor class="nojs--hide"></textarea></div>
+          <div><textarea data-editor{% if page_name == 'problem_edit' %} autofocus{% endif %} class="textbox auto-resize nojs--hide"></textarea></div>
           <textarea name="content" class="textbox hasjs--hide" data-markdown-upload style="height: 500px">{% if pdoc %}{{ pdoc['content']|toString }}{% else %}{% include 'partials/problem_default.md' %}{% endif %}</textarea>
           <div class="row"><div class="columns">
             <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">