Nav enhancements

src/ts/contentScripts/dispatcher/index.ts

@@ -4,6 +4,7 @@ import {guard, replaceFuzzyDate} from '../fuzzy_date'
 import {createDemo} from '../create-block-demo'
 import {updateShortcuts} from '../shortcuts'
 import {Roam} from '../../roam/roam'
+import { getFirstTopLevelBlock, getActiveEditElement } from '../../utils/dom'
 
 /**
  * Be cautious to reference functions on the objects via anonymous functions (e.g. see Roam.deleteBlock)
@@ -20,6 +21,47 @@ const dispatchMap = new Map([
 
 browser.runtime.onMessage.addListener(command => dispatchMap.get(command)?.())
 
+const enhanceNavigation = (event: KeyboardEvent) => {
+    const isEditingTitle = event.target?.parentElement instanceof HTMLHeadingElement
+    const isNoBlockActive = !Roam.getActiveRoamNode()
+    const isTopBlockActive = getActiveEditElement() === getFirstTopLevelBlock()
+    const isInSearch = event.target instanceof HTMLInputElement
+
+    // Don't mess with arrow nav in search results
+    if (isInSearch) return;
+
+    switch (event.key) {
+        case 'Enter':
+            if (isEditingTitle || isNoBlockActive) {
+                Roam.activateTopBlock()
+            }
+            break
+        case 'ArrowUp':
+            if (isNoBlockActive || isTopBlockActive) {
+                if (event.getModifierState("Shift")) {
+                    // Break to avoid interfering with block selection
+                    break
+                }
+                Roam.activateTitle()
+            }
+            break
+        case 'ArrowDown':
+            if (isEditingTitle || isNoBlockActive) {
+                if (event.getModifierState("Shift")) {
+                    // Break to avoid interfering with block selection
+                    break
+                }
+                Roam.activateTopBlock()
+            }
+            break
+    }
+}
+
+document.addEventListener('keydown', ev => {
+    // When used with 'keyup', this function fires twice. 🤔
+    enhanceNavigation(ev)
+})
+
 document.addEventListener('keyup', ev => {
     if (ev.key === guard) replaceFuzzyDate()
 })

src/ts/roam/roam.ts

@@ -1,7 +1,7 @@
 import {RoamNode, Selection} from './roam-node'
-import {getActiveEditElement, getFirstTopLevelBlock, getInputEvent, getLastTopLevelBlock} from '../utils/dom'
 import {Keyboard} from '../utils/keyboard'
 import {Mouse} from '../utils/mouse'
+import { getActiveEditElement, getFirstTopLevelBlock, getInputEvent, getLastTopLevelBlock, getTitleElement } from '../utils/dom'
 
 export const Roam = {
     save(roamNode: RoamNode) {
@@ -46,6 +46,15 @@ export const Roam = {
         return Promise.reject("We're currently not inside roam block")
     },
 
+    async activateTitle() {
+        await Mouse.leftClick(getTitleElement())
+    },
+
+    async activateTopBlock() {
+        await Mouse.leftClick(getFirstTopLevelBlock())
+        this.moveCursorToStart()
+    },
+
     async activateBlock(element: HTMLElement) {
         if (element.classList.contains('roam-block')) {
             await Mouse.leftClick(element)

src/ts/utils/dom.ts

@@ -19,6 +19,10 @@ export function getActiveEditElement(): ValueElement {
     return element as ValueElement
 }
 
+export function getTitleElement() {
+    return document.querySelector('.rm-title-display') as HTMLElement
+}
+
 export function getTopLevelBlocks() {
     return document.querySelector('.roam-article div .flex-v-box') as HTMLElement
 }