@slidev/client 0.49.12 → 0.49.13

package/composables/useTocTree.ts

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { getSlidePath } from '../logic/slides'
 
 function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
-  const titleLevel = route.meta?.slide?.level
+  const titleLevel = route.meta.slide.level ?? level
   if (titleLevel && titleLevel > level && tree.length > 0) {
     addToTree(tree[tree.length - 1].children, route, level + 1)
   }
@@ -13,6 +13,7 @@ function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
       no: route.no,
       children: [],
       level,
+      titleLevel,
       path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no, false),
       hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
       title: route.meta?.slide?.title,

package/internals/ShikiEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { getHighlighter } from '#slidev/shiki'
 
 const props = defineProps<{
@@ -9,33 +9,17 @@ const content = defineModel<string>({ required: true })
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
 
-const html = ref('')
-
-watchEffect((onCleanup) => {
-  let canceled = false
-  onCleanup(() => canceled = true)
-
-  const c = content.value
-  async function updateHtml() {
-    const highlight = await getHighlighter()
-    if (canceled)
-      return
-    const h = await highlight(c, 'markdown')
-    if (canceled)
-      return
-    html.value = h
-  }
-  updateHtml()
-})
+const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(null)
+getHighlighter().then(h => highlight.value = h)
 </script>
 
 <template>
-  <div class="absolute inset-x-3 inset-y-2 font-mono overflow-x-hidden overflow-y-auto">
-    <div class="relative w-full h-max">
-      <div class="relative w-full h-max" v-html="html" />
+  <div class="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">
+    <div v-if="highlight" class="relative w-full h-max min-h-full">
+      <div class="relative w-full h-max" v-html="`${highlight(content, 'markdown')}&nbsp;`" />
       <textarea
         ref="textareaEl" v-model="content" :placeholder="props.placeholder"
-        class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-white overflow-y-hidden"
+        class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
       />
     </div>
   </div>

package/internals/SideEditor.vue

@@ -58,10 +58,9 @@ useEventListener('keydown', (e) => {
 const contentRef = computed({
   get() { return content.value },
   set(v) {
-    if (content.value.trim() !== v.trim()) {
-      content.value = v
+    if (content.value.trim() !== v.trim())
       dirty.value = true
-    }
+    content.value = v
   },
 })
 
@@ -126,7 +125,7 @@ throttledWatch(
     }" @pointerdown="onHandlerDown"
   />
   <div
-    class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
+    class="shadow bg-main p-2 pt-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
     :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
     :style="resize ? {
       height: vertical ? `${editorHeight}px` : undefined,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.12",
+  "version": "0.49.13",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -28,18 +28,18 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^0.7.8",
+    "@antfu/utils": "^0.7.10",
     "@iconify-json/carbon": "^1.1.36",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.9.1",
-    "@shikijs/vitepress-twoslash": "^1.9.1",
+    "@shikijs/monaco": "^1.10.0",
+    "@shikijs/vitepress-twoslash": "^1.10.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.6",
     "@unhead/vue": "^1.9.14",
     "@unocss/reset": "^0.61.0",
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/math": "^10.10.0",
+    "@vueuse/core": "^10.11.0",
+    "@vueuse/math": "^10.11.0",
     "@vueuse/motion": "^2.2.3",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
@@ -48,20 +48,20 @@
     "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.1",
-    "monaco-editor": "^0.49.0",
-    "prettier": "^3.3.0",
+    "monaco-editor": "^0.50.0",
+    "prettier": "^3.3.2",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.9.1",
+    "shiki": "^1.10.0",
     "shiki-magic-move": "^0.4.2",
     "typescript": "^5.5.2",
     "unocss": "^0.61.0",
-    "vue": "^3.4.30",
+    "vue": "^3.4.31",
     "vue-router": "^4.4.0",
-    "yaml": "^2.4.2",
-    "@slidev/types": "0.49.12",
-    "@slidev/parser": "0.49.12"
+    "yaml": "^2.4.5",
+    "@slidev/types": "0.49.13",
+    "@slidev/parser": "0.49.13"
   },
   "devDependencies": {
-    "vite": "^5.3.1"
+    "vite": "^5.3.2"
   }
 }

package/pages/404.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNav } from '../composables/useNav'

package/pages/play.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { useStyleTag } from '@vueuse/core'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { registerShortcuts } from '../logic/shortcuts'
 import Controls from '../internals/Controls.vue'
@@ -36,6 +37,19 @@ registerShortcuts()
 if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
 
+useStyleTag(computed(() => `
+vite-error-overlay {
+  --width: calc(100vw - ${isEditorVertical.value ? 0 : editorWidth.value}px);
+  --height: calc(100vh - ${isEditorVertical.value ? editorHeight.value : 0}px);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: calc(var(--width) / var(--slidev-slide-scale));
+  height: calc(var(--height) / var(--slidev-slide-scale));
+  transform-origin: top left;
+  transform: scale(var(--slidev-slide-scale));
+}`))
+
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()

package/setup/main.ts

@@ -13,7 +13,6 @@ import setupRoutes from '../setup/routes'
 import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
-import 'shiki-magic-move/style.css'
 
 export default async function setupMain(app: App) {
   function setMaxHeight() {

package/setup/root.ts

@@ -21,7 +21,7 @@ export default function setupRoot() {
     configs,
     themeConfigs: computed(() => configs.themeConfig),
   })
-  app.provide(injectionRenderContext, ref('none'))
+  app.provide(injectionRenderContext, ref('none' as const))
   app.provide(injectionSlidevContext, context)
   app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
   app.provide(injectionClicksContext, shallowRef(createFixedClicks()))