@slidev/client 0.48.0-beta.9 → 0.48.0

package/logic/transition.ts

@@ -0,0 +1,50 @@
+import type { SlideRoute } from '@slidev/types'
+import type { TransitionGroupProps } from 'vue'
+import { configs } from '../env'
+
+const transitionResolveMap: Record<string, string | undefined> = {
+  'slide-left': 'slide-left | slide-right',
+  'slide-right': 'slide-right | slide-left',
+  'slide-up': 'slide-up | slide-down',
+  'slide-down': 'slide-down | slide-up',
+}
+
+export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+  if (!transition)
+    return undefined
+  if (typeof transition === 'string') {
+    transition = {
+      name: transition,
+    }
+  }
+
+  if (!transition.name)
+    return undefined
+
+  let name = transition.name.includes('|')
+    ? transition.name
+    : (transitionResolveMap[transition.name] || transition.name)
+
+  if (name.includes('|')) {
+    const [forward, backward] = name.split('|').map(i => i.trim())
+    name = isBackward ? backward : forward
+  }
+
+  if (!name)
+    return undefined
+
+  return {
+    ...transition,
+    name,
+  }
+}
+
+export function getCurrentTransition(direction: number, currentRoute?: SlideRoute, prevRoute?: SlideRoute) {
+  let transition = direction > 0
+    ? prevRoute?.meta?.transition
+    : currentRoute?.meta?.transition
+  if (!transition)
+    transition = configs.transition
+
+  return resolveTransition(transition, direction < 0)
+}

package/logic/utils.ts

@@ -1,3 +1,4 @@
+import { parseRangeString } from '@slidev/parser/core'
 import { useTimestamp } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
@@ -24,7 +25,7 @@ export function useTimer() {
 
 export function makeId(length = 5) {
   const result = []
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
   const charactersLength = characters.length
   for (let i = 0; i < length; i++)
     result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
@@ -48,3 +49,25 @@ export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolea
     n,
   ]
 }
+
+export function updateCodeHighlightRange(
+  rangeStr: string,
+  linesCount: number,
+  startLine: number,
+  getTokenOfLine: (line: number) => Element[],
+) {
+  const highlights: number[] = parseRangeString(linesCount + startLine - 1, rangeStr)
+  for (let line = 0; line < linesCount; line++) {
+    const tokens = getTokenOfLine(line)
+    const isHighlighted = highlights.includes(line + startLine)
+    for (const token of tokens) {
+      // token.classList.toggle(CLASS_VCLICK_TARGET, true)
+      token.classList.toggle('slidev-code-highlighted', isHighlighted)
+      token.classList.toggle('slidev-code-dishonored', !isHighlighted)
+
+      // for backward compatibility
+      token.classList.toggle('highlighted', isHighlighted)
+      token.classList.toggle('dishonored', !isHighlighted)
+    }
+  }
+}

package/main.ts

@@ -1,21 +1,9 @@
+/// <reference types="@slidev/types/client" />
+
 import { createApp } from 'vue'
-import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
-import { router } from './routes'
-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(createVClickDirectives())
-app.use(createVMarkDirective())
-app.use(createSlidevContext())
-
-setupMain({ app, router })
-
+setupMain(app)
 app.mount('#app')

package/{setup → modules}/codemirror.ts

@@ -1,7 +1,7 @@
 import type { Ref, WritableComputedRef } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
-import * as _CodeMirror from 'codemirror'
+import CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
@@ -10,8 +10,6 @@ import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/lib/codemirror.css'
 
-const CodeMirror = _CodeMirror.default ?? ('fromTextArea' in _CodeMirror ? _CodeMirror : globalThis.CodeMirror)
-
 export async function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,

package/modules/context.ts

@@ -1,54 +1,9 @@
-import type { App } 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, 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'
-
-export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {
-  route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>
-}
+import type { SlidevContextNav } from '../composables/useNav'
 
 export interface SlidevContext {
   nav: SlidevContextNav
   configs: typeof configs
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
-
-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))
-
-      // allows controls from postMessages
-      if (__DEV__) {
-        // @ts-expect-error expose global
-        window.__slidev__ = context
-        window.addEventListener('message', ({ data }) => {
-          if (data && data.target === 'slidev') {
-            if (data.type === 'navigate') {
-              nav.go(+data.no, +data.clicks || 0)
-            }
-            else if (data.type === 'css-vars') {
-              const root = document.documentElement
-              for (const [key, value] of Object.entries(data.vars || {}))
-                root.style.setProperty(key, value as any)
-            }
-            else if (data.type === 'color-schema') {
-              isDark.value = data.color === 'dark'
-            }
-          }
-        })
-      }
-    },
-  }
-}

package/modules/mermaid.ts

@@ -1,17 +1,18 @@
 import mermaid from 'mermaid/dist/mermaid.esm.mjs'
-import { customAlphabet } from 'nanoid'
-import { decode } from 'js-base64'
+import lz from 'lz-string'
 import { clearUndefined } from '@antfu/utils'
 import setupMermaid from '../setup/mermaid'
+import { makeId } from '../logic/utils'
 
 mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })
 
-const nanoid = customAlphabet('abcedfghicklmn', 10)
 const cache = new Map<string, string>()
+let containerElement: Element | undefined
 
-export async function renderMermaid(encoded: string, options: any) {
-  const key = encoded + JSON.stringify(options)
+export async function renderMermaid(lzEncoded: string, options: any) {
+  containerElement ??= document.getElementById('mermaid-rendering-container')!
+  const key = lzEncoded + JSON.stringify(options)
   const _cache = cache.get(key)
   if (_cache)
     return _cache
@@ -21,9 +22,9 @@ export async function renderMermaid(encoded: string, options: any) {
     ...clearUndefined(setupMermaid() || {}),
     ...clearUndefined(options),
   })
-  const code = decode(encoded)
-  const id = nanoid()
-  const { svg } = await mermaid.render(id, code)
+  const code = lz.decompressFromBase64(lzEncoded)
+  const id = makeId()
+  const { svg } = await mermaid.render(id, code, containerElement)
   cache.set(key, svg)
   return svg
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.9",
+  "version": "0.48.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -13,6 +13,7 @@
   },
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "exports": {
+    ".": "./index.ts",
     "./package.json": "./package.json",
     "./constants": "./constants.ts",
     "./context": "./context.ts",
@@ -22,42 +23,47 @@
     "./utils": "./utils.ts",
     "./*": "./*"
   },
+  "main": "./public.ts",
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
-    "@iconify-json/carbon": "^1.1.30",
+    "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/svg-spinners": "^1.1.2",
+    "@shikijs/monaco": "^1.1.7",
     "@shikijs/vitepress-twoslash": "^1.1.7",
     "@slidev/rough-notation": "^0.1.0",
-    "@unhead/vue": "^1.8.10",
+    "@typescript/ata": "^0.9.4",
+    "@unhead/vue": "^1.8.11",
     "@unocss/reset": "^0.58.5",
-    "@vueuse/core": "^10.8.0",
-    "@vueuse/math": "^10.8.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "codemirror": "^5.65.16",
-    "defu": "^6.1.4",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "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.6",
+    "lz-string": "^1.5.0",
+    "mermaid": "^10.9.0",
+    "monaco-editor": "^0.46.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.8",
+    "shiki": "^1.1.7",
+    "shiki-magic-move": "^0.3.4",
+    "typescript": "^5.4.2",
     "unocss": "^0.58.5",
-    "vue": "^3.4.19",
+    "vue": "^3.4.21",
+    "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.9",
-    "@slidev/types": "0.48.0-beta.9"
+    "@slidev/parser": "0.48.0",
+    "@slidev/types": "0.48.0"
   },
   "devDependencies": {
-    "vite": "^5.1.4"
+    "vite": "^5.1.5"
   }
 }

package/pages/notes.vue

@@ -5,22 +5,23 @@ import { useLocalStorage } from '@vueuse/core'
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
-import { total } from '../logic/nav'
-import { rawRoutes } from '../routes'
+
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
+import { useNav } from '../composables/useNav'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Notes - ${slideTitle}`,
 })
 
+const { slides, total } = useNav()
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
 const scroller = ref<HTMLDivElement>()
 const fontSize = useLocalStorage('slidev-notes-font-size', 18)
 const pageNo = computed(() => sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerPage : sharedState.page)
-const currentRoute = computed(() => rawRoutes.find(i => i.path === `${pageNo.value}`))
+const currentRoute = computed(() => slides.value.find(i => i.no === pageNo.value))
 
 watch(pageNo, () => {
   scroller.value?.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
@@ -51,6 +52,8 @@ function decreaseFontSize() {
         :note="currentRoute?.meta?.slide?.note"
         :note-html="currentRoute?.meta?.slide?.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
+        :clicks-context="currentRoute?.meta?.__clicksContext"
+        :auto-scroll="true"
       />
     </div>
     <div class="flex-none border-t border-main">

package/pages/overview.vue

@@ -1,21 +1,52 @@
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref } from 'vue'
-import { themeVars } from '../env'
-import { rawRoutes } from '../logic/nav'
-import { useFixedClicks } from '../composables/useClicks'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { useHead } from '@unhead/vue'
+import type { ClicksContext, SlideRoute } from '@slidev/types'
+import { configs } from '../env'
+import { getSlidePath } from '../logic/slides'
+import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
-import NoteEditor from '../internals/NoteEditor.vue'
+import NoteEditable from '../internals/NoteEditable.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
+import { CLICKS_MAX } from '../constants'
+import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+useHead({
+  title: `Overview - ${slideTitle}`,
+})
+
+const { openInEditor, slides } = useNav()
+
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
-const edittingNote = ref<string | null>(null)
+const edittingNote = ref<number | null>(null)
+const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta?.slide?.note || '')))
+const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
+const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
+
+const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
+function getClicksContext(route: SlideRoute) {
+  // We create a local clicks context to calculate the total clicks of the slide
+  if (!clicksContextMap.has(route))
+    clicksContextMap.set(route, createFixedClicks(route, CLICKS_MAX))
+  return clicksContextMap.get(route)!
+}
+
+function getSlideClicks(route: SlideRoute) {
+  return route.meta?.clicks || getClicksContext(route)?.total
+}
+
+function wordCount(str: string) {
+  return str.match(/[\w\d\’\'-]+/gi)?.length || 0
+}
 
 function isElementInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
@@ -51,6 +82,15 @@ function scrollToSlide(idx: number) {
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
+function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
+  const ctx = getClicksContext(route)
+  if (ctx.current === clicks)
+    ctx.current = CLICKS_MAX
+  else
+    ctx.current = clicks
+  e.preventDefault()
+}
+
 onMounted(() => {
   nextTick(() => {
     checkActiveBlocks()
@@ -61,18 +101,27 @@ onMounted(() => {
 <template>
   <div class="h-screen w-screen of-hidden flex">
     <nav class="h-full flex flex-col border-r border-main p2 select-none">
-      <div class="of-auto flex flex-col flex-auto items-center">
-        <button
-          v-for="(route, idx) of rawRoutes"
-          :key="route.path"
-          class="relative transition duration-300 w-8 h-8 rounded hover:bg-gray:10 hover:op100"
-          :class="[
-            activeBlocks.includes(idx) ? 'op100 text-primary' : 'op20',
-          ]"
-          @click="scrollToSlide(idx)"
+      <div class="flex flex-col flex-auto items-center justify-center group gap-1">
+        <div
+          v-for="(route, idx) of slides"
+          :key="route.no"
+          class="relative"
         >
-          <div>{{ idx + 1 }}</div>
-        </button>
+          <button
+            class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
+            :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
+            @click="scrollToSlide(idx)"
+          >
+            <div>{{ idx + 1 }}</div>
+          </button>
+          <div
+            v-if="route.meta?.slide?.title"
+            class="pointer-events-none select-none absolute left-110% bg-main top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+            :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+          >
+            {{ route.meta?.slide?.title }}
+          </div>
+        </div>
       </div>
       <IconButton
         v-if="!isColorSchemaConfigured"
@@ -88,57 +137,95 @@ onMounted(() => {
       :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
       @scroll="checkActiveBlocks"
     >
-      <div class="px4 py2 text-orange bg-orange:5 select-none">
-        <span font-bold>List Overview</span> is in beta, feedback is welcome!
-      </div>
       <div
-        v-for="(route, idx) of rawRoutes"
-        :key="route.path"
-        :ref="el => blocks.set(idx, el)"
+        v-for="(route, idx) of slides"
+        :key="route.no"
+        :ref="el => blocks.set(idx, el as any)"
         class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
+        :class="idx === 0 ? 'pt5' : ''"
       >
-        <div class="select-none text-3xl op20 w-13 my4 text-right">
-          {{ idx + 1 }}
+        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
+          <div class="text-3xl op20 mb2">
+            {{ idx + 1 }}
+          </div>
+          <IconButton
+            class="mr--3 op0 group-hover:op80"
+            title="Play in new tab"
+            @click="openSlideInNewTab(getSlidePath(route, false))"
+          >
+            <carbon:presentation-file />
+          </IconButton>
+          <IconButton
+            v-if="route.meta?.slide"
+            class="mr--3 op0 group-hover:op80"
+            title="Open in editor"
+            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+          >
+            <carbon:cics-program />
+          </IconButton>
         </div>
-        <div
-          class="border rounded border-main overflow-hidden bg-main my5 select-none"
-          :style="themeVars"
-          @dblclick="openSlideInNewTab(route.path)"
-        >
-          <SlideContainer
-            :key="route.path"
-            :width="cardWidth"
-            :clicks-disabled="true"
-            class="pointer-events-none important:[&_*]:select-none"
+        <div class="flex flex-col gap-2 my5">
+          <div
+            class="border rounded border-main overflow-hidden bg-main select-none h-max"
+            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
           >
-            <SlideWrapper
-              :is="route.component"
-              v-if="route?.component"
-              :clicks-context="useFixedClicks(route, 99999)[1]"
-              :class="getSlideClass(route)"
-              :route="route"
-              render-context="overview"
-            />
-            <DrawingPreview :page="+route.path" />
-          </SlideContainer>
+            <SlideContainer
+              :key="route.no"
+              :width="cardWidth"
+              :clicks-disabled="true"
+              class="pointer-events-none important:[&_*]:select-none"
+            >
+              <SlideWrapper
+                :is="route.component!"
+                :clicks-context="getClicksContext(route)"
+                :class="getSlideClass(route)"
+                :route="route"
+                render-context="overview"
+              />
+              <DrawingPreview :page="route.no" />
+            </SlideContainer>
+          </div>
+          <ClicksSlider
+            v-if="getSlideClicks(route)"
+            mt-2
+            :clicks-context="getClicksContext(route)"
+            class="w-full"
+          />
         </div>
         <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
           <IconButton
             title="Edit Note"
             class="rounded-full w-9 h-9 text-sm"
-            :class="edittingNote === idx ? 'important:op0' : ''"
-            @click="edittingNote = idx"
+            :class="edittingNote === route.no ? 'important:op0' : ''"
+            @click="edittingNote = route.no"
           >
             <carbon:pen />
           </IconButton>
         </div>
-        <NoteEditor
-          :no="idx"
+        <NoteEditable
+          :no="route.no"
           class="max-w-250 w-250 text-lg rounded p3"
-          :editing="edittingNote === idx"
+          :auto-height="true"
+          :editing="edittingNote === route.no"
+          :clicks-context="getClicksContext(route)"
+          @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"
           @update:editing="edittingNote = null"
+          @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
         />
+        <div
+          v-if="wordCounts[idx] > 0"
+          class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
+        >
+          {{ wordCounts[idx] }} words
+        </div>
       </div>
     </main>
+    <div class="absolute top-0 right-0 px3 py1.5 border-b border-l rounded-lb bg-main border-main select-none">
+      <div class="text-xs op50">
+        {{ slides.length }} slides ·
+        {{ totalClicks + slides.length - 1 }} clicks ·
+        {{ totalWords }} words
+      </div>
+    </div>
   </div>
 </template>

package/pages/play.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
-import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
-import { isDrawing } from '../logic/drawings'
+import { useSwipeControls } from '../composables/useSwipeControls'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
 
 registerShortcuts()
 
+const { next, prev, isEmbedded, isPrintMode } = useNav()
+const { isDrawing } = useDrawings()
+
 const root = ref<HTMLDivElement>()
 function onClick(e: MouseEvent) {
   if (showEditor.value)
@@ -31,9 +35,9 @@ useSwipeControls(root)
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
-const Editor = shallowRef<any>()
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('../internals/Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__)
@@ -42,7 +46,10 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" :style="themeVars">
+  <div
+    id="page-root" ref="root" class="grid"
+    :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
+  >
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
@@ -70,9 +77,9 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
     </SlideContainer>
 
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
-      <Editor :resize="true" />
+    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
+      <SideEditor :resize="true" />
     </template>
   </div>
   <Controls />
-</template>
+</template>../composables/drawings