@docsector/docsector-reader 4.4.5 → 4.4.6

package/bin/docsector.js

@@ -24,7 +24,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '4.4.5'
+const VERSION = '4.4.6'
 const AUTHORING_SKILL_NAME = 'docsector-documentation-authoring'
 const AUTHORING_SKILL_DESCRIPTION = 'Author Docsector documentation with Markdown, custom blocks, MCP, and WebMCP.'
 const AUTHORING_SKILL_PUBLIC_PATH = `/.well-known/agent-skills/${AUTHORING_SKILL_NAME}/SKILL.md`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "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/DBlockSourceCode.vue

@@ -1,10 +1,16 @@
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import { useStore } from 'vuex'
 import Prism from './code-block-highlighting'
+import {
+  buildSourceCodeLineAnchorId,
+  resolveSourceCodeLineHref,
+  shouldHandleSourceCodeLineActivation
+} from './source-code-anchor'
 import { countRenderedCodeLines } from './source-code-lines'
 import { looksLikeFileName, resolveFileIconUrl } from '../composables/useFileIcon'
+import useNavigator from '../composables/useNavigator'
 
 defineOptions({
   name: 'DBlockSourceCode'
@@ -38,15 +44,17 @@ const props = defineProps({
 })
 
 const $q = useQuasar()
-const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const { anchor: scrollToAnchor } = useNavigator()
 
 const copyBtnDisabled = ref(false)
 const copyBtnColor = ref(null)
 const copyBtnIcon = ref('content_copy')
 const codeRef = ref(null)
 const activeTab = ref(0)
+const lineAnchorTopOffset = 34
 
-const href = computed(() => `${store.state.page.absolute}#${anchor.value}`)
 const coloring = computed(() => $q.dark.isActive ? 'dark' : 'white')
 const anchor = computed(() => printToLetter(props.index + 1))
 
@@ -155,6 +163,38 @@ function copyCode() {
   }
 }
 
+function buildLineAnchorId(line) {
+  return buildSourceCodeLineAnchorId(anchor.value, line)
+}
+
+function buildLineHref(line) {
+  return resolveSourceCodeLineHref(router, route.path, route.query, buildLineAnchorId(line))
+}
+
+async function navigateToLineAnchor(event, line) {
+  if (!shouldHandleSourceCodeLineActivation(event)) {
+    return
+  }
+
+  const hash = `#${buildLineAnchorId(line)}`
+
+  event.preventDefault()
+
+  if (route.hash === hash) {
+    scrollToAnchor(hash, false)
+    return
+  }
+
+  await router.push({
+    path: route.path,
+    query: route.query,
+    hash
+  })
+
+  await nextTick()
+  scrollToAnchor(hash, false)
+}
+
 function printToLetter(number) {
   const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
   let result = ''
@@ -245,9 +285,9 @@ function printToLetter(number) {
     <div class="code" :class="coloring">
       <div class="lines" v-if="lines && lines > 1">
         <template v-for="(line, index) in lines" :key="index">
-          <a class="line" :href="href+line">
+          <a class="line" :href="buildLineHref(line)" @click="navigateToLineAnchor($event, line)">
             <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
-            <span :id="`${anchor}${line}`">{{ line }}</span>
+            <span :id="buildLineAnchorId(line)" :data-anchor-offset-top="lineAnchorTopOffset">{{ line }}</span>
           </a>
         </template>
       </div>

package/src/components/source-code-anchor.js

@@ -0,0 +1,15 @@
+export function buildSourceCodeLineAnchorId(anchorPrefix, line) {
+  return `${anchorPrefix}${line}`
+}
+
+export function resolveSourceCodeLineHref(router, routePath, routeQuery, anchorId) {
+  return router.resolve({
+    path: routePath,
+    query: routeQuery,
+    hash: `#${anchorId}`
+  }).href
+}
+
+export function shouldHandleSourceCodeLineActivation(event) {
+  return !(event.defaultPrevented || event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+}

package/src/composables/useNavigator.js

@@ -11,6 +11,62 @@ export default function useNavigator() {
   const route = useRoute()
   const selected = ref(null)
 
+  const normalizeScrollTarget = (target) => {
+    if (target === document.body || target === document.documentElement) {
+      return window
+    }
+
+    return target
+  }
+
+  const getScrollTargetTop = (target) => {
+    if (target === window) {
+      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+    }
+
+    return target?.scrollTop || 0
+  }
+
+  const getScrollTargetRectTop = (target) => {
+    if (target === window) {
+      return 0
+    }
+
+    return target?.getBoundingClientRect?.().top || 0
+  }
+
+  const getAnchorTopOffset = (anchorEl) => {
+    if (!(anchorEl instanceof HTMLElement)) {
+      return 0
+    }
+
+    const explicitOffset = Number.parseFloat(anchorEl.dataset.anchorOffsetTop || '')
+
+    if (Number.isFinite(explicitOffset)) {
+      return Math.max(0, explicitOffset)
+    }
+
+    return 0
+  }
+
+  const resolveAnchorScrollState = (anchorEl) => {
+    if (!(anchorEl instanceof HTMLElement)) {
+      return null
+    }
+
+    const pageScrollContainer = anchorEl.closest('.q-scrollarea__container')
+    const scrollTarget = normalizeScrollTarget(pageScrollContainer || scroll.getScrollTarget(anchorEl))
+    const anchorRect = anchorEl.getBoundingClientRect()
+    const scrollTop = getScrollTargetTop(scrollTarget)
+    const targetRectTop = getScrollTargetRectTop(scrollTarget)
+    const anchorTopOffset = getAnchorTopOffset(anchorEl)
+
+    return {
+      scrollTarget,
+      offsetTop: Math.max(0, ((anchorRect.top - targetRectTop) + scrollTop) - anchorTopOffset)
+    }
+  }
+
   const normalizeDomAnchorId = (id) => {
     if (id === null || id === undefined || id === false) {
       return ''
@@ -62,10 +118,11 @@ export default function useNavigator() {
     const Anchor = document.getElementById(anchorId)
 
     if (Anchor !== null && typeof Anchor === 'object') {
-      const ScrollTarget = scroll.getScrollTarget(Anchor)
-      const AnchorOffsetTop = Anchor.offsetTop
+      const scrollState = resolveAnchorScrollState(Anchor)
 
-      scroll.setVerticalScrollPosition(ScrollTarget, AnchorOffsetTop, 300)
+      if (scrollState !== null) {
+        scroll.setVerticalScrollPosition(scrollState.scrollTarget, scrollState.offsetTop, 300)
+      }
 
       setTimeout(() => {
         store.commit('page/setScrolling', true)
@@ -98,7 +155,7 @@ export default function useNavigator() {
         const Anchor = document.getElementById(domAnchorId)
 
         if (Anchor !== null && typeof Anchor === 'object') {
-          return Anchor.offsetTop
+          return resolveAnchorScrollState(Anchor)?.offsetTop
         }
 
         return undefined