fix(webapp): synchronize scroll flicker when markdown preview is open (…

…#178)
fynnfluegge · Jan 6, 2025 · 149950c · 149950c
1 parent c426f9a
commit 149950c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 33 deletions.
diff --git a/webapp/src/app/component/editor/editor.component.html b/webapp/src/app/component/editor/editor.component.html
@@ -72,15 +72,32 @@
     </button>
   </div>
 
-  <textarea
-    id="markdownTextarea"
+  <div
+    style="
+      resize: none;
+      margin-top: 4px;
+      display: inline-block;
+      height: 100%;
+      background-color: white;
+    "
     *ngIf="editorMode"
-    [(ngModel)]="content"
     class="variable-textarea"
-    style="resize: none; margin-top: 4px; display: inline-block; height: 100%"
     [style.width]="showPreview ? 'calc(50% - 4px)' : '100%'"
-    (keydown)="onKeydown($event)"
-  ></textarea>
+  >
+    <textarea
+      id="markdownTextarea"
+      class="markdown-textarea"
+      [(ngModel)]="content"
+      (keydown)="onKeydown($event)"
+      style="
+        height: 100%;
+        width: 100%;
+        resize: none;
+        padding: 8px;
+        border: none;
+      "
+    ></textarea>
+  </div>
   <div class="suggestion">{{ suggestion }}</div>
   <markdown
     katex

diff --git a/webapp/src/app/component/editor/editor.component.ts b/webapp/src/app/component/editor/editor.component.ts
@@ -2,7 +2,6 @@ import { Component, Input, VERSION } from '@angular/core';
 import { Auth } from 'aws-amplify';
 import { BasicRestService } from 'src/app/service/basic-rest.service';
 import { ConfigDialogService } from 'src/app/service/config-dialog-service';
-import { Document } from 'src/app/model/document.model';
 import { DocumentTree } from 'src/app/service/document-tree-service';
 import { ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
@@ -184,10 +183,7 @@ export class EditorComponent {
       if (this.showPreview) {
         const previewPanel = document.getElementById('markdownPreview');
         const markdownTextarea = document.getElementById('markdownTextarea');
-        this.addSynchronizedScrollEventListeners(
-          markdownTextarea,
-          previewPanel,
-        );
+        this.addSynchronizedScrollEventListeners(markdownTextarea);
         previewPanel.scrollTop = markdownTextarea.scrollTop;
       }
     }, 100);
@@ -201,24 +197,17 @@ export class EditorComponent {
         // add synchronize scroll event listener
         if (this.showPreview) {
           const markdownTextarea = document.getElementById('markdownTextarea');
-          const previewPanel = document.getElementById('markdownPreview');
-          this.addSynchronizedScrollEventListeners(
-            markdownTextarea,
-            previewPanel,
-          );
+          this.addSynchronizedScrollEventListeners(markdownTextarea);
         }
       }, 100);
       this.initialContent = (' ' + this.content).slice(1);
     }
   }
 
-  addSynchronizedScrollEventListeners(markdownEditor: any, previewPanel: any) {
+  addSynchronizedScrollEventListeners(markdownEditor: any) {
     markdownEditor.addEventListener('scroll', (event: any) =>
       this.synchronizeScroll(event),
     );
-    previewPanel.addEventListener('scroll', (event: any) =>
-      this.synchronizeScroll(event),
-    );
   }
 
   synchronizeScroll(event: any) {
@@ -274,18 +263,6 @@ export class EditorComponent {
       markdownTextarea.value = newValue;
       markdownTextarea.selectionStart = currentPos + 1;
       markdownTextarea.selectionEnd = currentPos + 1;
-      // if cursor is at the bottom of the textarea, scroll down
-      if (
-        markdownTextarea.scrollTop + markdownTextarea.clientHeight >=
-        markdownTextarea.scrollHeight - 32
-      ) {
-        // Scroll the markdownTextarea down by one line (adjust the value as needed)
-        this.disableSynchronizeScroll = true;
-        markdownTextarea.scrollTop += markdownTextarea.clientHeight;
-        setTimeout(() => {
-          this.disableSynchronizeScroll = false;
-        }, 1000);
-      }
     } else if (event.code !== 'Escape') {
       this.startOrResetTimer();
 

diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
@@ -214,7 +214,7 @@ code {
 .variable-textarea {
   border-radius: 5px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  padding: 12px;
+  padding: 18px 12px;
   border: none;
 }
 
@@ -228,6 +228,11 @@ code {
     0 6px 12px 3px rgba(0, 0, 0, 0.09),
     0 2px 3px 1px rgba(0, 0, 0, 0.06);
 }
+
+.markdown-textarea:focus {
+  outline: none !important;
+  border: none;
+}
 // ------------------------------- //
 
 // ---- Tooltips ---- //