Skip to content

fix(client): keep v-click hidden state on annotated code and KaTeX blocks - #2712

Merged
antfu merged 2 commits into
slidevjs:mainfrom
lazerg:fix/vclick-hidden-annotated-code-block
Aug 24, 2026
Merged

fix(client): keep v-click hidden state on annotated code and KaTeX blocks#2712
antfu merged 2 commits into
slidevjs:mainfrom
lazerg:fix/vclick-hidden-annotated-code-block

Conversation

@lazerg

@lazerg lazerg commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

A fenced code block with a line-highlight annotation (```ts {*}) placed inside <v-click> was already visible on the slide's first render, while the rest of the <v-click> content stayed hidden. Navigating one click forward and back fixed it.

CodeBlockWrapper gets the v-click directive applied to its root element, and the directive's effect adds slidev-vclick-hidden there. The wrapper's own effect then calls classList.toggle(CLASS_VCLICK_HIDDEN, hide) for its ranges, and for any normal range (*, 1-3, …) that removes the class the directive just added. On mount the wrapper's effect runs last, so the block ends up visible; on later click changes the directive wins, which is why navigating repairs it.

The wrapper now only touches the class when its own hide range put it there, so a click directive on the same element keeps ownership. CLASS_VCLICK_HIDDEN_EXP isn't usable for this, since v-click only sets it on the .hide path. KaTexBlockWrapper had the same code and gets the same fix.

Added a Cypress case (page 17 of the basic fixture) that asserts the wrapper is hidden on first render and revealed after one click. It fails on main and passes here. Also checked a {hide|1|2} deck by hand to confirm the hide range still hides and reveals as before.

Fixes #2711

@netlify

netlify Bot commented Aug 21, 2026

Copy link
Copy Markdown

Deploy Preview for slidev ready!

Name Link
🔨 Latest commit b07c689
🔍 Latest deploy log https://app.netlify.com/projects/slidev/deploys/6a87ecd527bf5a0008a516db
😎 Deploy Preview https://deploy-preview-2712--slidev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@pkg-pr-new

pkg-pr-new Bot commented Aug 21, 2026

Copy link
Copy Markdown

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/@slidev/client@2712

create-slidev

npm i https://pkg.pr.new/create-slidev@2712

create-slidev-theme

npm i https://pkg.pr.new/create-slidev-theme@2712

@slidev/parser

npm i https://pkg.pr.new/@slidev/parser@2712

@slidev/cli

npm i https://pkg.pr.new/@slidev/cli@2712

@slidev/types

npm i https://pkg.pr.new/@slidev/types@2712

commit: b07c689

@lazerg lazerg changed the title fix(client): keep v-click hidden state on annotated code blocks fix(client): keep v-click hidden state on annotated code and KaTeX blocks Aug 21, 2026
@antfu
antfu merged commit 4864730 into slidevjs:main Aug 24, 2026
21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Annotated code block inside <v-click> is visible before its click

2 participants