Merge pull request #461 from Guochaoo/fix/markdown-preview-toc-and-code-header

fix(markdown): preview TOC dismiss-on-outside-click, popover z-index, code-block banner stickiness
This commit is contained in:
Atlas Zeng
2026-09-03 10:42:20 +08:00
committed by GitHub
4 changed files with 83 additions and 3 deletions
+40
View File
@@ -149,4 +149,44 @@ describe('MdToc', () => {
expect(container.querySelector('[data-dsh-md-toc-panel]')).toBeNull()
await unmount(root)
})
it('closes the popover when a pointerdown lands outside the button and panel', async () => {
const { container, root } = await mountToc([
{ tag: 'h1', text: 'Title' },
{ tag: 'h2', text: 'A' },
{ tag: 'h2', text: 'B' },
])
const button = container.querySelector<HTMLButtonElement>('[data-dsh-md-toc]')!
await act(async () => { button.click() })
expect(container.querySelector('[data-dsh-md-toc-panel]')).not.toBeNull()
// A press on a heading that sits in the scroll container (a sibling of the
// TOC bar) is "blank space" to the outline: it must dismiss the popover.
const heading = container.querySelector('h2')!
await act(async () => {
heading.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
})
expect(container.querySelector('[data-dsh-md-toc-panel]'), 'outside press must close the panel').toBeNull()
await unmount(root)
})
it('keeps the toggle working: a press inside the bar does not dismiss, a click re-closes', async () => {
const { container, root } = await mountToc([
{ tag: 'h1', text: 'Title' },
{ tag: 'h2', text: 'A' },
{ tag: 'h2', text: 'B' },
])
const button = container.querySelector<HTMLButtonElement>('[data-dsh-md-toc]')!
await act(async () => { button.click() })
expect(container.querySelector('[data-dsh-md-toc-panel]')).not.toBeNull()
// A pointerdown on the toggle itself must not be swallowed by the dismiss
// handler (the button re-enables pointer events inside the pointer-events:
// none bar), so the subsequent click still toggles it closed.
await act(async () => {
button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
})
expect(container.querySelector('[data-dsh-md-toc-panel]'), 'press on the toggle must not dismiss').not.toBeNull()
await act(async () => { button.click() })
expect(container.querySelector('[data-dsh-md-toc-panel]'), 're-clicking the toggle must close').toBeNull()
await unmount(root)
})
})