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

package/builtin/CodeBlockWrapper.vue

@@ -14,11 +14,12 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
 import { makeId } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -47,7 +48,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 

package/builtin/KaTexBlockWrapper.vue

@@ -20,11 +20,12 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 -->
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { parseRangeString } from '@slidev/parser'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -45,7 +46,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 

package/builtin/RenderWhen.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RenderContext } from '@slidev/types'
-import { computed, inject, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
-import { injectionRenderContext } from '../constants'
+import { useSlideContext } from '../context'
 
 type Context = 'main' | 'visible' | RenderContext
 
@@ -16,7 +16,7 @@ const targetVisible = useElementVisibility(target)
 // When context has `visible`, we need to wrap the content with a div to track the visibility
 const needsDomWrapper = Array.isArray(context) ? context.includes('visible') : context === 'visible'
 
-const currentContext = inject(injectionRenderContext)
+const { $renderContext: currentContext } = useSlideContext()
 const shouldRender = computed(() => {
   const anyContext = Array.isArray(context) ? context.some(contextMatch) : contextMatch(context)
   const allConditions = Array.isArray(context) ? context.every(conditionsMatch) : conditionsMatch(context)

package/builtin/SlideCurrentNo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionCurrentPage } from '../constants'
+import { useSlideContext } from '../context'
 
-const $page = inject(injectionCurrentPage)
+const { $page } = useSlideContext()
 </script>
 
 <template>

package/builtin/SlidesTotal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
-const $slidev = inject(injectionSlidevContext)
+const { $nav } = useSlideContext()
 </script>
 
 <template>
-  <span>{{ $slidev.nav.total }}</span>
+  <span>{{ $nav.total }}</span>
 </template>

package/builtin/SlidevVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-import { injectionClicksContext, injectionRenderContext, injectionRoute, injectionSlidevContext } from '../constants'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useSlideContext } from '../context'
 
 const props = defineProps<{
   autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
@@ -8,10 +8,12 @@ const props = defineProps<{
   autoReset?: 'slide' | 'click'
 }>()
 
-const $slidev = inject(injectionSlidevContext)
-const route = inject(injectionRoute)
-const currentContext = inject(injectionRenderContext)
-const clicks = inject(injectionClicksContext)?.value
+const {
+  $slidev,
+  $clicksContext: clicks,
+  $renderContext: currentContext,
+  $route: route,
+} = useSlideContext()
 
 const video = ref<HTMLMediaElement>()
 const played = ref(false)

package/builtin/Toc.vue

@@ -8,9 +8,9 @@ Usage:
 <Toc columns='2' maxDepth='3' mode='onlySiblings'/>
 -->
 <script setup lang='ts'>
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import type { TocItem } from '@slidev/types'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = withDefaults(
   defineProps<{
@@ -33,7 +33,7 @@ const props = withDefaults(
   },
 )
 
-const $slidev = inject(injectionSlidevContext)
+const { $slidev } = useSlideContext()
 
 function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
   if (level > Number(props.maxDepth)) {

package/builtin/Tweet.vue

@@ -7,9 +7,9 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
 import { getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
+import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -41,21 +41,10 @@ async function create() {
 }
 
 // @ts-expect-error global
-if (window?.twttr?.widgets) {
+if (window?.twttr?.widgets)
   onMounted(create)
-}
-else {
-  useScriptTag(
-    'https://platform.twitter.com/widgets.js',
-    () => {
-      if (vm.isMounted)
-        create()
-      else
-        onMounted(create, vm)
-    },
-    { async: true },
-  )
-}
+else
+  useTweetScript(vm, create)
 </script>
 
 <template>

package/builtin/VClickGap.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Fragment, inject, onMounted, watchEffect } from 'vue'
-import { injectionClicksContext } from '../constants'
+import { Fragment, onMounted, watchEffect } from 'vue'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   size: {
@@ -10,12 +10,10 @@ const props = defineProps({
   },
 })
 
-const clicksRef = inject(injectionClicksContext)
+const { $clicksContext: clicks } = useSlideContext()
 
 onMounted(() => {
   watchEffect((onCleanup) => {
-    const clicks = clicksRef?.value
-
     if (!clicks || clicks.disabled)
       return
 

package/builtin/VClicks.ts

@@ -62,12 +62,12 @@ export default defineComponent({
       }) as T
     }
 
-    let defaults = this.$slots.default?.()
+    let elements = this.$slots.default?.()
 
-    if (!defaults)
+    if (!elements)
       return
 
-    defaults = openAllTopLevelSlots(toArray(defaults))
+    elements = openAllTopLevelSlots(toArray(elements))
 
     const mapSubList = (children: VNodeArrayChildren, depth = 1): VNodeArrayChildren => {
       const vNodes = openAllTopLevelSlots(children).map((i) => {
@@ -116,23 +116,23 @@ export default defineComponent({
     })
 
     // handle ul, ol list
-    if (defaults.length === 1 && listTags.includes(defaults[0].type as string) && Array.isArray(defaults[0].children))
-      return h(defaults[0], {}, [mapChildren(defaults[0].children), lastGap()])
+    if (elements.length === 1 && listTags.includes(elements[0].type as string) && Array.isArray(elements[0].children))
+      return h(elements[0], {}, [...mapChildren(elements[0].children), lastGap()])
 
-    if (defaults.length === 1 && defaults[0].type as string === 'table') {
-      const tableNode = defaults[0]
+    if (elements.length === 1 && elements[0].type as string === 'table') {
+      const tableNode = elements[0]
       if (Array.isArray(tableNode.children)) {
         return h(tableNode, {}, tableNode.children.map((i) => {
           if (!isVNode(i))
             return i
           else if (i.type === 'tbody' && Array.isArray(i.children))
-            return h(i, {}, [mapChildren(i.children), lastGap()])
+            return h(i, {}, [...mapChildren(i.children), lastGap()])
           else
             return h(i)
         }))
       }
     }
 
-    return [mapChildren(defaults)[0], lastGap()]
+    return [...mapChildren(elements), lastGap()]
   },
 })

package/composables/useClicks.ts

@@ -6,7 +6,7 @@ import type { RouteRecordRaw } from 'vue-router'
 import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
 
-function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: () => number): ClicksContext {
+function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
@@ -53,7 +53,7 @@ function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: ()
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return route?.meta?.clicks
+      return clicksOverrides
         ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
@@ -63,21 +63,24 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
   const thisPath = +(route?.path ?? 99999)
-  const context = useClicksContextBase(route, () => {
-    const currentPath = +(currentRoute.value?.path ?? 99999)
-    if (currentPath === thisPath)
-      return queryClicks.value
-    else if (currentPath > thisPath)
-      return 99999
-    else
-      return 0
-  })
+  const context = useClicksContextBase(
+    () => {
+      const currentPath = +(currentRoute.value?.path ?? 99999)
+      if (currentPath === thisPath)
+        return queryClicks.value
+      else if (currentPath > thisPath)
+        return 99999
+      else
+        return 0
+    },
+    route?.meta?.clicks,
+  )
   if (route?.meta)
     route.meta.__clicksContext = context
   return context
 }
 
-export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
+export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
   const current = ref(currentInit)
-  return [current, useClicksContextBase(route, () => current.value)]
+  return [current, useClicksContextBase(() => current.value, route?.meta?.clicks)]
 }

package/composables/useTweetScript.ts

@@ -0,0 +1,17 @@
+import { createSharedComposable, useScriptTag } from '@vueuse/core'
+import type { ComponentInternalInstance } from 'vue'
+import { onMounted } from 'vue'
+
+export const useTweetScript = createSharedComposable(
+  (vm: ComponentInternalInstance, create: () => void) =>
+    useScriptTag(
+      'https://platform.twitter.com/widgets.js',
+      () => {
+        if (vm.isMounted)
+          create()
+        else
+          onMounted(create, vm)
+      },
+      { async: true },
+    ),
+)

package/constants.ts

@@ -3,14 +3,16 @@ import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext, RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
-export const injectionClicksContext: InjectionKey<Ref<ClicksContext>> = Symbol('slidev-clicks-context')
-export const injectionCurrentPage: InjectionKey<Ref<number>> = Symbol('slidev-page')
-export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
-export const injectionSlidevContext: InjectionKey<UnwrapNestedRefs<SlidevContext>> = Symbol('slidev-slidev-context')
-export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
-export const injectionRenderContext: InjectionKey<Ref<RenderContext>> = Symbol('slidev-render-context')
-export const injectionActive: InjectionKey<Ref<boolean>> = Symbol('slidev-active')
-export const injectionFrontmatter: InjectionKey<Record<string, any>> = Symbol('slidev-fontmatter')
+// Here we use string literal instead of symbols to make HMR more stable
+// The value of the injections keys are implementation details, you should always use them with the reference to the constant instead of the value
+export const injectionClicksContext = '$$slidev-clicks-context' as unknown as InjectionKey<Ref<ClicksContext>>
+export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
+export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
+export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
+export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<RouteRecordRaw>
+export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
+export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
+export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
@@ -24,3 +26,49 @@ export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',
 ]
+
+export const FRONTMATTER_FIELDS = [
+  'clicks',
+  'disabled',
+  'hide',
+  'hideInToc',
+  'layout',
+  'level',
+  'preload',
+  'routeAlias',
+  'src',
+  'title',
+  'transition',
+  'zoom',
+]
+
+export const HEADMATTER_FIELDS = [
+  ...FRONTMATTER_FIELDS,
+  'theme',
+  'titleTemplate',
+  'info',
+  'author',
+  'keywords',
+  'presenter',
+  'download',
+  'exportFilename',
+  'export',
+  'highlighter',
+  'lineNumbers',
+  'monaco',
+  'remoteAssets',
+  'selectable',
+  'record',
+  'colorSchema',
+  'routerMode',
+  'aspectRatio',
+  'canvasWidth',
+  'themeConfig',
+  'favicon',
+  'plantUmlServer',
+  'fonts',
+  'defaults',
+  'drawings',
+  'htmlAttrs',
+  'mdc',
+]

package/context.ts

@@ -0,0 +1,70 @@
+import { shallowRef, toRef } from 'vue'
+import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
+import { useFixedClicks } from './composables/useClicks'
+import {
+  FRONTMATTER_FIELDS,
+  HEADMATTER_FIELDS,
+  injectionClicksContext,
+  injectionCurrentPage,
+  injectionFrontmatter,
+  injectionRenderContext,
+  injectionRoute,
+  injectionSlidevContext,
+} from './constants'
+
+const clicksContextFallback = shallowRef(useFixedClicks()[1])
+
+/**
+ * Get the current slide context, should be called inside the setup function of a component inside slide
+ */
+export function useSlideContext() {
+  const $slidev = injectLocal(injectionSlidevContext)!
+  const $nav = toRef($slidev, 'nav')
+  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicks = toRef($clicksContext, 'current')
+  const $page = injectLocal(injectionCurrentPage)!
+  const $renderContext = injectLocal(injectionRenderContext)!
+  const $frontmatter = injectLocal(injectionFrontmatter, {})
+  const $route = injectLocal(injectionRoute, undefined)
+
+  return {
+    $slidev,
+    $nav,
+    $clicksContext,
+    $clicks,
+    $page,
+    $route,
+    $renderContext,
+    $frontmatter,
+  }
+}
+
+export function provideFrontmatter(frontmatter: Record<string, any>) {
+  provideLocal(injectionFrontmatter, frontmatter)
+
+  const {
+    $slidev,
+    $page,
+  } = useSlideContext()
+
+  // update frontmatter in router to make HMR work better
+  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  if (route?.meta?.slide?.frontmatter) {
+    for (const key of Object.keys(route.meta.slide.frontmatter)) {
+      if (!(key in frontmatter))
+        delete route.meta.slide.frontmatter[key]
+    }
+    Object.assign(route.meta.slide.frontmatter, frontmatter)
+  }
+}
+
+/**
+ * Convert frontmatter options to props for v-bind
+ * It removes known options fields, and expose an extra `frontmatter` field that contains full frontmatter
+ */
+export function frontmatterToProps(frontmatter: Record<string, any>, pageNo: number) {
+  return {
+    ...objectOmit(frontmatter, pageNo === 0 ? HEADMATTER_FIELDS : FRONTMATTER_FIELDS),
+    frontmatter,
+  }
+}

package/internals/DrawingControls.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Menu } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 import {
   brush,
   brushColors,
@@ -13,7 +15,7 @@ import {
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 function undo() {
   drauu.undo()
@@ -21,100 +23,118 @@ function undo() {
 function redo() {
   drauu.redo()
 }
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
 function setDrawingMode(mode: typeof drawingMode.value) {
   drawingMode.value = mode
   drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
 }
 function setBrushColor(color: typeof brush.color) {
   brush.color = color
   drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
 }
 </script>
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200"
-    dark="border border-gray-400 border-opacity-10"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
     :initial-x="10"
     :initial-y="10"
   >
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <HiddenText text="Draw with stylus" />
+    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
       <carbon:pen />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
-      <HiddenText text="Draw a line" />
+    </IconButton>
+    <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
         <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <HiddenText text="Draw an arrow" />
+    </IconButton>
+    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
       <carbon:arrow-up-right />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <HiddenText text="Draw an ellipse" />
+    </IconButton>
+    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
       <carbon:radio-button />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <HiddenText text="Draw a rectangle" />
+    </IconButton>
+    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
-    </button>
-    <!-- TODO: not sure why it's not working! -->
-    <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <HiddenText text="Erase" />
+    </IconButton>
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </button> -->
+    </IconButton>
 
     <VerticalDivider />
 
-    <button
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
+    <IconButton
       v-for="color of brushColors"
       :key="color"
-      class="slidev-icon-btn"
-      :class="brush.color === color ? 'active' : 'shallow'"
+      title="Set brush color"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
-      <HiddenText text="Set brush color" />
       <div
-        class="w-6 h-6 transition-all transform border border-gray-400/50"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
-    </button>
+    </IconButton>
 
     <VerticalDivider />
 
-    <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
-      <HiddenText text="Undo" />
+    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
       <carbon:undo />
-    </button>
-    <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
-      <HiddenText text="Redo" />
+    </IconButton>
+    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
       <carbon:redo />
-    </button>
-    <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <HiddenText text="Delete" />
-      <carbon:delete />
-    </button>
+    </IconButton>
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
+      <carbon:trash-can />
+    </IconButton>
 
     <VerticalDivider />
-    <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <HiddenText :text="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" />
+    <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
       <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
       <carbon:pin v-show="!drawingPinned" />
-    </button>
-    <button
+    </IconButton>
+    <IconButton
       v-if="drawingEnabled"
-      class="slidev-icon-btn"
+      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
-      <HiddenText :text="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'" />
       <carbon:error v-show="drawingPinned" />
       <carbon:close-outline v-show="!drawingPinned" />
-    </button>
+    </IconButton>
   </Draggable>
 </template>
+
+<style lang="postcss">
+.v-popper--theme-menu {
+  .v-popper__arrow-inner {
+    @apply border-main;
+  }
+}
+</style>