@slidev/client 0.48.0-beta.0 → 0.48.0-beta.10

package/internals/SlideWrapper.ts

@@ -1,6 +1,8 @@
-import { defineComponent, h, provide, ref, toRef } from 'vue'
+import { computed, defineComponent, h, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { RouteRecordRaw } from 'vue-router'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
@@ -20,23 +22,37 @@ export default defineComponent({
     },
     is: {
       type: Object,
-      default: undefined,
+      required: true,
     },
     route: {
-      type: Object,
-      default: undefined,
+      type: Object as PropType<RouteRecordRaw>,
+      required: true,
     },
   },
   setup(props) {
-    provide(injectionRoute, props.route as any)
-    provide(injectionCurrentPage, ref(+props.route?.path))
-    provide(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provide(injectionActive, toRef(props, 'active'))
-    provide(injectionClicksContext, toRef(props, 'clicksContext'))
+    provideLocal(injectionRoute, props.route)
+    provideLocal(injectionCurrentPage, ref(+props.route.path))
+    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+    provideLocal(injectionActive, toRef(props, 'active'))
+    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+    const style = computed(() => {
+      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+      return zoom === 1
+        ? undefined
+        : {
+            width: `${100 / zoom}%`,
+            height: `${100 / zoom}%`,
+            transformOrigin: 'top left',
+            transform: `scale(${zoom})`,
+          }
+    })
+
+    return {
+      style,
+    }
   },
   render() {
-    if (this.$props.is)
-      return h(this.$props.is)
-    return this.$slots?.default?.()
+    return h(this.$props.is, { style: this.style })
   },
 })

package/internals/SlidesOverview.vue

@@ -10,11 +10,11 @@ import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
-const emit = defineEmits([])
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function close() {
@@ -112,7 +112,7 @@ watchEffect(() => {
   >
     <div
       v-show="value"
-      class="bg-main !bg-opacity-75 p-16 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
+      class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"
     >
       <div
@@ -125,8 +125,8 @@ watchEffect(() => {
           class="relative"
         >
           <div
-            class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary transition"
-            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-$slidev-theme-primary' : 'border-gray-400'"
+            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
             :style="themeVars"
             @click="go(+route.path)"
           >
@@ -163,8 +163,18 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
-    <HiddenText text="Close" />
-    <carbon:close />
-  </button>
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
+    <RouterLink
+      v-if="__DEV__"
+      target="_blank"
+      to="/overview"
+      tab-index="-1"
+      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+    >
+      List overview
+    </RouterLink>
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+  </div>
 </template>

package/logic/drawings.ts

@@ -4,6 +4,7 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
+import { isInputting } from '../state'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav.ts

@@ -83,9 +83,9 @@ watch(currentRoute, (next, prev) => {
   navDirection.value = Number(next?.path) - Number(prev?.path)
 })
 
-export function next() {
+export async function next() {
   if (clicksTotal.value <= queryClicks.value)
-    nextSlide()
+    await nextSlide()
   else
     queryClicks.value += 1
 }
@@ -101,9 +101,9 @@ export function getPath(no: number | string) {
   return isPresenter.value ? `/presenter/${no}` : `/${no}`
 }
 
-export function nextSlide() {
-  const next = Math.min(rawRoutes.length, currentPage.value + 1)
-  return go(next)
+export async function nextSlide() {
+  if (currentPage.value < rawRoutes.length)
+    await go(currentPage.value + 1)
 }
 
 export async function prevSlide(lastClicks = true) {
@@ -177,7 +177,7 @@ export async function downloadPDF() {
 export async function openInEditor(url?: string) {
   if (url == null) {
     const slide = currentRoute.value?.meta?.slide
-    if (!slide?.filepath)
+    if (!slide)
       return false
     url = `${slide.filepath}:${slide.start}`
   }

package/logic/note.ts

@@ -2,17 +2,17 @@ import type { MaybeRef } from '@vueuse/core'
 import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
+import type { SlideInfo, SlidePatch } from '@slidev/types'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
+  info: Ref<SlideInfo | undefined>
+  update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
-      info: ref() as Ref<SlideInfoExtended | undefined>,
+      info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
@@ -21,7 +21,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   execute()
 
-  const update = async (data: Partial<SlideInfo>) => {
+  const update = async (data: SlidePatch) => {
     return await fetch(
       url,
       {
@@ -41,7 +41,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         info.value = payload.data
     })
     import.meta.hot?.on('slidev-update-note', (payload) => {
-      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -64,7 +64,7 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: async (data: Partial<SlideInfo>, newId?: number) => {
+    update: async (data: SlidePatch, newId?: number) => {
       const info = get(newId ?? unref(id))
       const newData = await info.update(data)
       if (newData)

package/main.ts

@@ -3,15 +3,17 @@ import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 import { router } from './routes'
-import createDirectives from './modules/directives'
-import createSlidevContext from './modules/context'
+import { createVClickDirectives } from './modules/v-click'
+import { createVMarkDirective } from './modules/v-mark'
+import { createSlidevContext } from './modules/context'
 
 import '/@slidev/styles'
 
 const app = createApp(App)
 app.use(router)
 app.use(createHead())
-app.use(createDirectives())
+app.use(createVClickDirectives())
+app.use(createVMarkDirective())
 app.use(createSlidevContext())
 
 setupMain({ app, router })

package/modules/context.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
 import { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionCurrentPage, injectionSlidevContext } from '../constants'
+import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
 export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
@@ -21,10 +21,11 @@ export interface SlidevContext {
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
-export default function createSlidevContext() {
+export function createSlidevContext() {
   return {
     install(app: App) {
       const context = reactive(useContext(route))
+      app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
 

package/modules/{directives.ts → v-click.ts}

@@ -11,19 +11,21 @@ import {
   injectionClicksContext,
 } from '../constants'
 
-function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+export type VClickValue = string | [string | number, string | number] | boolean
+
+export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
   return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
 }
 
-export default function createDirectives() {
+export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive('click', {
+      app.directive<HTMLElement, VClickValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
@@ -55,12 +57,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('after', {
+      app.directive<HTMLElement, VClickValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -86,12 +88,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('click-hide', {
+      app.directive<HTMLElement, VClickValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, false, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, false, true)
           if (resolved == null)
             return
 
@@ -127,14 +129,12 @@ function isCurrent(thisClick: number | [number, number], clicks: number) {
     : thisClick === clicks
 }
 
-function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
   const ctx = dirInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx || ctx.disabled)
     return null
 
-  let value = dir.value
-
   if (value === false || value === 'false')
     return null
 
@@ -153,7 +153,7 @@ function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = fals
     // range (absolute)
     delta = 0
     thisClick = value as [number, number]
-    maxClick = value[1]
+    maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))

package/modules/v-mark.ts

@@ -0,0 +1,159 @@
+import type { RoughAnnotationConfig } from '@slidev/rough-notation'
+import { annotate } from '@slidev/rough-notation'
+import type { App } from 'vue'
+import { computed, watchEffect } from 'vue'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
+  at: VClickValue
+}
+
+export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+
+function addClass(options: RoughDirectiveOptions, cls: string) {
+  options.class = [options.class, cls].filter(Boolean).join(' ')
+  return options
+}
+
+// Definitions of supported modifiers
+const vMarkModifiers: Record<string, (options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions> = {
+  // Types
+  'box': options => Object.assign(options, { type: 'box' }),
+  'circle': options => Object.assign(options, { type: 'circle' }),
+  'underline': options => Object.assign(options, { type: 'underline' }),
+  'highlight': options => Object.assign(options, { type: 'highlight' }),
+  'strike-through': options => Object.assign(options, { type: 'strike-through' }),
+  'crossed-off': options => Object.assign(options, { type: 'crossed-off' }),
+  'bracket': options => Object.assign(options, { type: 'bracket' }),
+
+  // Type Aliases
+  'strike': options => Object.assign(options, { type: 'strike-through' }),
+  'cross': options => Object.assign(options, { type: 'crossed-off' }),
+  'crossed': options => Object.assign(options, { type: 'crossed-off' }),
+  'linethrough': options => Object.assign(options, { type: 'strike-through' }),
+  'line-through': options => Object.assign(options, { type: 'strike-through' }),
+
+  // Colors
+  // @unocss-include
+  'black': options => addClass(options, 'text-black'),
+  'blue': options => addClass(options, 'text-blue'),
+  'cyan': options => addClass(options, 'text-cyan'),
+  'gray': options => addClass(options, 'text-gray'),
+  'green': options => addClass(options, 'text-green'),
+  'indigo': options => addClass(options, 'text-indigo'),
+  'lime': options => addClass(options, 'text-lime'),
+  'orange': options => addClass(options, 'text-orange'),
+  'pink': options => addClass(options, 'text-pink'),
+  'purple': options => addClass(options, 'text-purple'),
+  'red': options => addClass(options, 'text-red'),
+  'teal': options => addClass(options, 'text-teal'),
+  'white': options => addClass(options, 'text-white'),
+  'yellow': options => addClass(options, 'text-yellow'),
+}
+
+const vMarkModifiersDynamic: [RegExp, (match: RegExpMatchArray, options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions][] = [
+  // Support setting delay like `v-mark.delay300="1"`
+  [/^delay-?(\d+)?$/, (match, options, value) => {
+    const ms = (match[1] ? Number.parseInt(match[1]) : value) || 300
+    options.delay = ms
+    return options
+  }],
+  // Support setting opacity like `v-mark.op50="1"`
+  [/^(?:op|opacity)-?(\d+)?$/, (match, options, value) => {
+    const opacity = (match[1] ? Number.parseInt(match[1]) : value) || 100
+    options.opacity = opacity / 100
+    return options
+  }],
+]
+
+/**
+ * This supports v-mark directive to add notations to elements, powered by `rough-notation`.
+ */
+export function createVMarkDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement, RoughDirectiveValue>('mark', {
+        // @ts-expect-error extra prop
+        name: 'v-mark',
+
+        mounted: (el, binding) => {
+          const options = computed(() => {
+            const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
+              ? { ...binding.value }
+              : { at: binding.value }
+
+            let modifierOptions: RoughDirectiveOptions = { at: bindingOptions.at }
+            const unknownModifiers = Object.entries(binding.modifiers)
+              .filter(([k, v]) => {
+                if (vMarkModifiers[k]) {
+                  modifierOptions = vMarkModifiers[k](modifierOptions, v)
+                  return false
+                }
+                for (const [re, fn] of vMarkModifiersDynamic) {
+                  const match = k.match(re)
+                  if (match) {
+                    modifierOptions = fn(match, modifierOptions, v)
+                    return false
+                  }
+                }
+                return true
+              })
+
+            if (unknownModifiers.length)
+              console.warn('[Slidev] Invalid modifiers for v-mark:', unknownModifiers)
+
+            const options = {
+              ...modifierOptions,
+              ...bindingOptions,
+            }
+            options.type ||= 'underline'
+
+            return options
+          })
+
+          const annotation = annotate(el, options.value as RoughAnnotationConfig)
+
+          const resolvedClick = resolveClick(el, binding, options.value.at)
+          if (!resolvedClick) {
+            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            return
+          }
+
+          watchEffect(() => {
+            let shouldShow: boolean | undefined
+
+            if (options.value.class)
+              annotation.class = options.value.class
+            if (options.value.color)
+              annotation.color = options.value.color
+
+            const at = options.value.at
+
+            if (at === true) {
+              shouldShow = true
+            }
+            else if (at === false) {
+              shouldShow = false
+            }
+            else if (resolvedClick) {
+              shouldShow = resolvedClick.isActive.value
+            }
+            else {
+              console.error('[Slidev] Invalid value for v-mark:', at)
+              return
+            }
+
+            if (shouldShow == null)
+              return
+
+            if (shouldShow)
+              annotation.show()
+            else
+              annotation.hide()
+          })
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@slidev/client",
-  "version": "0.48.0-beta.0",
+  "type": "module",
+  "version": "0.48.0-beta.10",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -13,6 +14,12 @@
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "exports": {
     "./package.json": "./package.json",
+    "./constants": "./constants.ts",
+    "./context": "./context.ts",
+    "./env": "./env.ts",
+    "./layoutHelper": "./layoutHelper.ts",
+    "./routes": "./routes.ts",
+    "./utils": "./utils.ts",
     "./*": "./*"
   },
   "engines": {
@@ -22,34 +29,35 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.2",
+    "@shikijs/vitepress-twoslash": "^1.1.7",
+    "@slidev/rough-notation": "^0.1.0",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/math": "^10.7.2",
-    "@vueuse/motion": "^2.0.0",
-    "codemirror": "^5.65.5",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/math": "^10.8.0",
+    "@vueuse/motion": "^2.1.0",
+    "codemirror": "^5.65.16",
     "defu": "^6.1.4",
-    "drauu": "^0.3.7",
+    "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
-    "@slidev/types": "0.48.0-beta.0",
-    "@slidev/parser": "0.48.0-beta.0"
+    "vue-router": "^4.3.0",
+    "@slidev/types": "0.48.0-beta.10",
+    "@slidev/parser": "0.48.0-beta.10"
   },
   "devDependencies": {
-    "vite": "^5.1.1"
+    "vite": "^5.1.4"
   }
 }

package/{internals/EntrySelect.vue → pages/entry.vue}

@@ -21,5 +21,12 @@
       <carbon:catalog class="text-3em op50" />
       Notes
     </RouterLink>
+    <RouterLink
+      to="/overview"
+      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
+    >
+      <carbon:list-boxes class="text-3em op50" />
+      Overview
+    </RouterLink>
   </div>
 </template>

package/{internals/NotesView.vue → pages/notes.vue}

@@ -7,8 +7,8 @@ import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
-import NoteDisplay from './NoteDisplay.vue'
-import HiddenText from './HiddenText.vue'
+import NoteDisplay from '../internals/NoteDisplay.vue'
+import IconButton from '../internals/IconButton.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -53,21 +53,18 @@ function decreaseFontSize() {
         :placeholder="`No notes for Slide ${pageNo}.`"
       />
     </div>
-    <div class="flex-none border-t border-gray-400 border-opacity-20">
+    <div class="flex-none border-t border-main">
       <div class="flex gap-1 items-center px-6 py-3">
-        <button class="slidev-icon-btn" @click="toggleFullscreen">
-          <HiddenText :text="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" />
+        <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
-        </button>
-        <button class="slidev-icon-btn" @click="increaseFontSize">
-          <HiddenText text="Increase font size" />
+        </IconButton>
+        <IconButton title="Increase font size" @click="increaseFontSize">
           <carbon:zoom-in />
-        </button>
-        <button class="slidev-icon-btn" @click="decreaseFontSize">
-          <HiddenText text="Decrease font size" />
+        </IconButton>
+        <IconButton title="Decrease font size" @click="decreaseFontSize">
           <carbon:zoom-out />
-        </button>
+        </IconButton>
         <div class="flex-auto" />
         <div class="p2 text-center">
           {{ pageNo }} / {{ total }}