feat: add focusNextBlock util

2 files changed, 26 insertions, 1 deletions

diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 01463c0..d7c822a 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -175,6 +175,22 @@ function switchToNextLayout(reverse = false) {
   this.container.setAttribute("data-layout", nextLayout.name)
 }
 
+function focusNextBlock(reverse = false) {
+  const blocks = this.blocks.filter(b=>b.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true,
+  }))
+  const currentBlock = blocks.find(b=>b.classList.contains('focus'))
+  const currentIndex = blocks.indexOf(currentBlock)
+  const padding = reverse ? -1 : 1
+  const nextIndex = currentIndex === -1 ? 0 : (currentIndex + padding + blocks.length) % blocks.length
+  const nextBlock = blocks[nextIndex]
+  blocks.forEach(b=>b.classList.remove('focus'))
+  nextBlock?.classList?.add('focus')
+  nextBlock.scrollIntoView({behavior: 'smooth', block: "nearest"})
+}
+
 export const generateMaps = (container, callback) => {
   container.classList.add('Dumby')
   const htmlHolder = container.querySelector('.SemanticHtml') ?? container
diff --git a/src/editor.mjs b/src/editor.mjs
index 550f626..f4fadb4 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -552,15 +552,24 @@ document.onkeydown = (e) => {
     return null
   }
   if (!cm.hasFocus()) {
-    e.preventDefault()
     if (!dumbymap) return
 
     if (e.key === 'Tab') {
+      e.preventDefault()
       dumbymap.utils.focusNextMap(e.shiftKey)
     }
     if (e.key === 'x') {
+      e.preventDefault()
       dumbymap.utils.switchToNextLayout()
     }
+    if (e.key === 'n') {
+      e.preventDefault()
+      dumbymap.utils.focusNextBlock()
+    }
+    if (e.key === 'p') {
+      e.preventDefault()
+      dumbymap.utils.focusNextBlock(true)
+    }
   }
 }