fix(enhanced-readabilities): incorrect spotlight perservation (#86)

Signed-off-by: Neko Ayaka <[email protected]>
nolebase · Feb 20, 2024 · efd3639 · efd3639
1 parent 70cef08
commit efd3639
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 50 deletions.
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useLocalStorage, useMediaQuery, useMounted } from '@vueuse/core'
+import { useRoute } from 'vitepress'
 
 import { InjectionKey, LayoutMode, LayoutSwitchModeStorageKey, supportedLayoutModes } from '../constants'
 import { useLayoutAppearanceChangeAnimation } from '../composables/animation'
@@ -16,6 +17,7 @@ const menuTitleElementRef = ref<HTMLDivElement>()
 const isMenuHelpPoppedUp = ref(false)
 const disabled = ref(false)
 
+const route = useRoute()
 const mounted = useMounted()
 const isLargerThanMobile = useMediaQuery('(min-width: 768px)')
 const layoutMode = useLocalStorage<LayoutMode>(LayoutSwitchModeStorageKey, options.layoutSwitch?.defaultMode || LayoutMode.Original)
@@ -100,6 +102,10 @@ watch(layoutMode, (val) => {
     layoutMode.value = options.layoutSwitch?.defaultMode || LayoutMode.BothWidthAdjustable
 })
 
+watch(route, () => {
+  setClasses(layoutMode.value, true)
+})
+
 watch(isLargerThanMobile, () => {
   if (!isLargerThanMobile.value)
     disabled.value = true

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue
@@ -17,30 +17,43 @@ const props = defineProps<{ enabled: boolean }>()
 
 const options = inject(InjectionKey, {})
 
+const shouldRecalculate = ref(false)
 const boxStyles = ref<Record<string, string | number>>({ display: 'none' })
 const vpDocElement = ref<HTMLDivElement>()
 const highlightedElement = ref<HTMLElement>()
 
+const route = useRoute()
+const spotlightStyle = useStorage<SpotlightStyle>(SpotlightStylesStorageKey, options.spotlight?.defaultStyle || SpotlightStyle.Aside)
+
 const { x, y } = useMouse({ type: 'client' })
 const { isOutside } = useMouseInElement(vpDocElement)
 const { element } = useElementByPoint({ x, y })
 const bounding = reactive(useElementBounding(element))
 const elementVisibility = useElementVisibility(highlightedElement)
-const spotlightStyle = useStorage<SpotlightStyle>(SpotlightStylesStorageKey, options.spotlight?.defaultStyle || SpotlightStyle.Aside)
-const route = useRoute()
 
 useEventListener('scroll', bounding.update, true)
 
 onMounted(() => {
+  if (!document)
+    return
+  if (!document.body)
+    return
+
   document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-spotlight-under-bg-color', options?.spotlight?.hoverBlockColor || `rgb(240 197 52 / 10%)`)
-})
 
-onMounted(() => {
   vpDocElement.value = document.querySelector('.VPDoc main .vp-doc') as HTMLDivElement
 })
 
 watch(route, () => {
   vpDocElement.value = document.querySelector('.VPDoc main .vp-doc') as HTMLDivElement
+
+  shouldRecalculate.value = true
+  boxStyles.value = { display: 'none' }
+
+  bounding.update()
+
+  watchHandler()
+  shouldRecalculate.value = false
 })
 
 function computeBoxStyles(bounding: {
@@ -70,49 +83,51 @@ function findChildElementUnderVPDocElement(element: HTMLElement | null) {
 }
 
 function watchHandler() {
-  if (element.value && !isOutside.value) {
-    const el = findChildElementUnderVPDocElement(element.value)
-    highlightedElement.value = el || undefined
-
-    if (highlightedElement.value && highlightedElement.value.tagName === 'P') {
-      const val = highlightedElement.value
-      const style = window.getComputedStyle(val)
-      const lineHeight = Number.parseFloat(style.lineHeight)
-      const lines = Math.floor(val.offsetHeight / lineHeight)
-
-      const rect = val.getBoundingClientRect()
-      const relativeY = y.value - rect.top
-
-      for (let i = 0; i < lines; i++) {
-        const top = i * lineHeight
-        const height = lineHeight
-        const left = val.offsetLeft
-        const width = val.offsetWidth
-
-        if (relativeY >= top && relativeY < top + height) {
-          boxStyles.value = computeBoxStyles({
-            top: top + rect.top,
-            left: left + rect.left,
-            width,
-            height,
-          })
-          break
-        }
-      }
-    }
-    else {
-      if (highlightedElement.value) {
-        const rect = highlightedElement.value.getBoundingClientRect()
+  if (!(element.value && !isOutside.value))
+    return
 
+  const el = findChildElementUnderVPDocElement(element.value)
+  highlightedElement.value = el || undefined
+
+  if (highlightedElement.value && highlightedElement.value.tagName === 'P') {
+    const val = highlightedElement.value
+    const style = window.getComputedStyle(val)
+    const lineHeight = Number.parseFloat(style.lineHeight)
+    const lines = Math.floor(val.offsetHeight / lineHeight)
+
+    const rect = val.getBoundingClientRect()
+    const relativeY = y.value - rect.top
+
+    for (let i = 0; i < lines; i++) {
+      const top = i * lineHeight
+      const height = lineHeight
+      const left = val.offsetLeft
+      const width = val.offsetWidth
+
+      if (relativeY >= top && relativeY < top + height) {
         boxStyles.value = computeBoxStyles({
-          top: rect.top,
-          left: rect.left,
-          width: rect.width,
-          height: rect.height,
+          top: top + rect.top,
+          left: left + rect.left,
+          width,
+          height,
         })
+
+        break
       }
     }
   }
+  else {
+    if (highlightedElement.value) {
+      const rect = highlightedElement.value.getBoundingClientRect()
+
+      boxStyles.value = computeBoxStyles({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+      })
+    }
+  }
 }
 
 watch([x, y], () => {
@@ -121,18 +136,17 @@ watch([x, y], () => {
 })
 
 watch(bounding, (val) => {
-  if (props.enabled) {
-    if (val.width === 0 && val.height === 0)
-      boxStyles.value = { display: 'none' }
-    else watchHandler()
-  }
+  if (!props.enabled)
+    return
+
+  if (val.width === 0 && val.height === 0)
+    boxStyles.value = { display: 'none' }
+  else watchHandler()
 })
 
 watch(elementVisibility, (val) => {
-  if (props.enabled) {
-    if (!val)
-      boxStyles.value = { display: 'none' }
-  }
+  if (props.enabled && !val)
+    boxStyles.value = { display: 'none' }
 })
 
 watch(() => props.enabled, (val) => {
@@ -144,6 +158,7 @@ watch(() => props.enabled, (val) => {
 <template>
   <Teleport to="body">
     <div
+      v-if="props.enabled && !shouldRecalculate"
       :style="boxStyles"
       aria-hidden="true"
       focusable="false"