Block Editor优化:在内容区滚动时,滚动到对应的标题时,右边对应的导航线图标点亮

This commit is contained in:
jingrow 2026-06-02 23:25:05 +08:00
parent 933a476349
commit bb6fa5e67e

View File

@ -37,6 +37,7 @@ const popupStyle = ref<Record<string, string>>({})
// Heading
const headingBlocks = computed(() => blocks.value.filter(b => b.type === 'heading'))
let scrollContainer: HTMLElement | Window = window
let scrollHandler: (() => void) | null = null
let leaveTimer: ReturnType<typeof setTimeout> | null = null
let rafId: number | null = null
@ -327,7 +328,15 @@ onMounted(() => {
syncActive()
updateRailPosition()
}
window.addEventListener('scroll', scrollHandler, { passive: true })
// window Naive UI Layout
const editorDom = props.editor.view.dom as HTMLElement
scrollContainer = findScrollContainer(editorDom)
if (scrollContainer === window) {
window.addEventListener('scroll', scrollHandler, { passive: true })
} else {
;(scrollContainer as HTMLElement).addEventListener('scroll', scrollHandler, { passive: true })
}
window.addEventListener('resize', scrollHandler, { passive: true })
props.editor.on('update', () => {
@ -337,14 +346,17 @@ onMounted(() => {
})
// Notion
const editorDom = props.editor.view.dom as HTMLElement
onEditorMouseDown = () => { updateActiveHighlight(null) }
editorDom.addEventListener('mousedown', onEditorMouseDown)
})
onBeforeUnmount(() => {
if (scrollHandler) {
window.removeEventListener('scroll', scrollHandler)
if (scrollContainer === window) {
window.removeEventListener('scroll', scrollHandler)
} else {
;(scrollContainer as HTMLElement).removeEventListener('scroll', scrollHandler)
}
window.removeEventListener('resize', scrollHandler)
}
if (leaveTimer) clearTimeout(leaveTimer)