@docsector/docsector-reader 0.5.7 → 0.5.9

package/bin/docsector.js

@@ -11,9 +11,9 @@
  *   docsector help         — Show help information
  */
 
-import { execSync, spawn } from 'child_process'
+import { spawn } from 'child_process'
 import { existsSync, mkdirSync, writeFileSync, copyFileSync } from 'fs'
-import { resolve, dirname, basename } from 'path'
+import { resolve, dirname } from 'path'
 import { fileURLToPath } from 'url'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '0.5.4'
+const VERSION = '0.5.9'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -71,7 +71,7 @@ function getTemplatePackageJson (name) {
       serve: 'docsector serve'
     },
     dependencies: {
-      '@docsector/docsector-reader': '^0.5.4',
+      '@docsector/docsector-reader': '^0.5.9',
       '@quasar/extras': '^1.16.12',
       'quasar': '^2.16.6',
       'vue': '^3.5.13',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
@@ -89,7 +89,82 @@ const resetPageScroll = () => {
   }
 }
 
+const getPageScrollContainer = () => {
+  return pageScrollArea.value?.$el?.querySelector('.q-scrollarea__container') || null
+}
+
+const isEditableTarget = (target) => {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable) {
+    return true
+  }
+
+  return ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)
+}
+
+const handleMainScrollKeys = (event) => {
+  const handledKeys = ['Home', 'End', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown']
+
+  if (!handledKeys.includes(event.key)) {
+    return
+  }
+
+  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+    return
+  }
+
+  if (isEditableTarget(event.target)) {
+    return
+  }
+
+  const container = getPageScrollContainer()
+  if (!container) {
+    return
+  }
+
+  const currentTop = container.scrollTop
+  const maxTop = Math.max(0, container.scrollHeight - container.clientHeight)
+  const lineStep = Math.max(40, Math.floor(container.clientHeight * 0.08))
+  const pageStep = Math.max(120, Math.floor(container.clientHeight * 0.9))
+
+  let nextTop = currentTop
+  switch (event.key) {
+    case 'Home':
+      nextTop = 0
+      break
+    case 'End':
+      nextTop = maxTop
+      break
+    case 'PageUp':
+      nextTop = Math.max(0, currentTop - pageStep)
+      break
+    case 'PageDown':
+      nextTop = Math.min(maxTop, currentTop + pageStep)
+      break
+    case 'ArrowUp':
+      nextTop = Math.max(0, currentTop - lineStep)
+      break
+    case 'ArrowDown':
+      nextTop = Math.min(maxTop, currentTop + lineStep)
+      break
+  }
+
+  event.preventDefault()
+
+  if (pageScrollArea.value?.setScrollPosition) {
+    pageScrollArea.value.setScrollPosition('vertical', nextTop, 0)
+    return
+  }
+
+  container.scrollTop = nextTop
+}
+
 onMounted(() => {
+  window.addEventListener('keydown', handleMainScrollKeys)
+
   router.beforeEach((to, from, next) => {
     resetPageScroll()
 
@@ -102,6 +177,10 @@ onMounted(() => {
     next()
   })
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleMainScrollKeys)
+})
 </script>
 
 <template>