Block Editor优化:在内容区滚动时,滚动到对应的标题时,右边对应的导航线图标点亮
This commit is contained in:
parent
933a476349
commit
bb6fa5e67e
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user