Improve scrolling behaviour

- Focusing a document or terminal scrolls it into view
- Automatic scrolling leaves some room around the target
- Aside: fix terminal shortcut giving input to xtermjs

src/app/editor.ts

@@ -44,6 +44,7 @@ const fixedHeightEditor = EditorView.theme({
         minWidth: "8em",
         flex: "none",
         fontSize: "16px",
+        scrollMargin: "100px",
     },
     ".cm-scroller": { overflow: "auto scroll" },
 });
@@ -144,6 +145,7 @@ export class Editor implements Displayable {
                 // lintKeymap,
             ],
         });
+        this.view.dom.addEventListener("focusin", () => this.focus());
 
         van.derive(() => {
             LanguageDescription.matchFilename(languages, file.filePath.val)
@@ -169,7 +171,7 @@ export class Editor implements Displayable {
     }
 
     focus() {
-        this.view.dom.scrollIntoView();
+        this.view.dom.scrollIntoView({ behavior: "smooth", });
         this.view.focus();
     }
 

src/app/editorgrid.ts

@@ -91,8 +91,15 @@ export const EditorTabs = v.div(
 vanX.list(TabBar, editors, TabHeader);
 vanX.list(EditorTabs, editors, EditorGrid);
 
-document.addEventListener("keyup", (e) => {
+function shortcutHandler(e: KeyboardEvent) {
     if (e.key === "t" && e.altKey) {
-        addTerminal();
+        if (e.type === "keydown") {
+            addTerminal();
+        }
+        e.preventDefault();
+
     }
-});
+}
+
+document.addEventListener("keyup", shortcutHandler, { capture: true, });
+document.addEventListener("keydown", shortcutHandler, { capture: true, });

src/app/terminal.ts

@@ -33,7 +33,9 @@ export class Terminal implements Displayable {
         this.fitAddon = new FitAddon();
         this.term.loadAddon(this.fitAddon);
 
-        this.dom = v.div({ class: "h-full w-lg resize-x overflow-x-hidden" });
+        this.dom = v.div({ class: "h-full w-lg resize-x overflow-x-hidden scroll-m-[100px]" });
+        this.dom.addEventListener("focusin", () => this.focus());
+
         const loaded = van.state(false);
 
         van.derive(() => {
@@ -108,7 +110,7 @@ export class Terminal implements Displayable {
     }
 
     focus() {
-        this.dom.scrollIntoView();
+        this.dom.scrollIntoView({ behavior: "smooth" });
         this.term.focus();
     }