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

package/internals/DrawingLayer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { injectLocal } from '@vueuse/core'
 import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
 
-const scale = inject(injectionSlideScale)!
+const scale = injectLocal(injectionSlideScale)!
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {

package/internals/Editor.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { throttledWatch, useEventListener } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
-import { activeElement, editorWidth, isInputting, showEditor } from '../state'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{
-  resize: boolean
+  resize?: boolean
 }>()
 
 const tab = ref<'content' | 'note'>('content')
@@ -38,7 +38,6 @@ watch(
 async function save() {
   dirty.value = false
   await update({
-    raw: null!,
     note: note.value || undefined,
     content: content.value,
     // frontmatter: frontmatter.value,
@@ -56,8 +55,8 @@ useEventListener('keydown', (e) => {
   }
 })
 
-onMounted(() => {
-  useCodeMirror(
+onMounted(async () => {
+  const contentEditor = await useCodeMirror(
     contentInput,
     computed({
       get() { return content.value },
@@ -77,7 +76,7 @@ onMounted(() => {
     },
   )
 
-  useCodeMirror(
+  const noteEditor = await useCodeMirror(
     noteInput,
     computed({
       get() { return note.value },
@@ -94,14 +93,31 @@ onMounted(() => {
       fencedCodeBlockDefaultMode: 'javascript',
     },
   )
+
+  watch([tab, vertical], () => {
+    nextTick(() => {
+      if (tab.value === 'content')
+        contentEditor.refresh()
+      else
+        noteEditor.refresh()
+    })
+  })
+
+  watch(currentSlideId, () => {
+    contentEditor.clearHistory()
+    noteEditor.clearHistory()
+  }, { flush: 'post' })
 })
 
 const handlerDown = ref(false)
 function onHandlerDown() {
   handlerDown.value = true
 }
-function updateWidth(v: number) {
-  editorWidth.value = Math.min(Math.max(200, v), window.innerWidth - 200)
+function updateSize(v?: number) {
+  if (vertical.value)
+    editorHeight.value = Math.min(Math.max(300, v ?? editorHeight.value), window.innerHeight - 200)
+  else
+    editorWidth.value = Math.min(Math.max(318, v ?? editorWidth.value), window.innerWidth - 200)
 }
 function switchTab(newTab: typeof tab.value) {
   tab.value = newTab
@@ -111,14 +127,17 @@ function switchTab(newTab: typeof tab.value) {
 
 if (props.resize) {
   useEventListener('pointermove', (e) => {
-    if (handlerDown.value)
-      updateWidth(window.innerWidth - e.pageX)
+    if (handlerDown.value) {
+      updateSize(vertical.value
+        ? window.innerHeight - e.pageY
+        : window.innerWidth - e.pageX)
+    }
   }, { passive: true })
   useEventListener('pointerup', () => {
     handlerDown.value = false
   })
   useEventListener('resize', () => {
-    updateWidth(editorWidth.value)
+    updateSize()
   })
 }
 
@@ -134,46 +153,61 @@ throttledWatch(
 
 <template>
   <div
-    v-if="resize"
-    class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
-    :class="{ '!opacity-30': handlerDown }"
-    :style="{ right: `${editorWidth - 5}px`, cursor: 'col-resize' }"
-    @pointerdown="onHandlerDown"
+    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
+    :class="vertical ? 'left-0 right-0 w-full h-10px' : 'top-0 bottom-0 w-10px h-full'" :style="{
+      opacity: handlerDown ? '0.3' : undefined,
+      bottom: vertical ? `${editorHeight - 5}px` : undefined,
+      right: !vertical ? `${editorWidth - 5}px` : undefined,
+      cursor: vertical ? 'row-resize' : 'col-resize',
+    }" @pointerdown="onHandlerDown"
   />
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
     :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
-    :style="resize ? { width: `${editorWidth}px` } : {}"
+    :style="resize ? {
+      height: vertical ? `${editorHeight}px` : undefined,
+      width: !vertical ? `${editorWidth}px` : undefined,
+    } : {}"
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
-        <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
-          <HiddenText text="Switch to content tab" />
+        <IconButton
+          title="Switch to content tab" :class="tab === 'content' ? 'text-primary' : ''"
+          @click="switchTab('content')"
+        >
           <carbon:account />
-        </button>
-        <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
-          <HiddenText text="Switch to notes tab" />
+        </IconButton>
+        <IconButton
+          title="Switch to notes tab" :class="tab === 'note' ? 'text-primary' : ''"
+          @click="switchTab('note')"
+        >
           <carbon:align-box-bottom-right />
-        </button>
+        </IconButton>
       </div>
       <span class="text-2xl pt-1">
         {{ tab === 'content' ? 'Slide' : 'Notes' }}
       </span>
       <div class="flex-auto" />
-      <button class="slidev-icon-btn" @click="openInEditor()">
-        <HiddenText text="Open in editor" />
+      <template v-if="resize">
+        <IconButton v-if="vertical" title="Dock to right" @click="vertical = false">
+          <carbon:open-panel-right />
+        </IconButton>
+        <IconButton v-else title="Dock to bottom" @click="vertical = true">
+          <carbon:open-panel-bottom />
+        </IconButton>
+      </template>
+      <IconButton title="Open in editor" @click="openInEditor()">
         <carbon:launch />
-      </button>
-      <button class="slidev-icon-btn" @click="close">
-        <HiddenText text="Close" />
+      </IconButton>
+      <IconButton title="Close" @click="close">
         <carbon:close />
-      </button>
+      </IconButton>
     </div>
-    <div class="h-full overflow-auto">
-      <div v-show="tab === 'content'" class="h-full overflow-auto">
+    <div class="overflow-hidden">
+      <div v-show="tab === 'content'" class="w-full h-full">
         <textarea ref="contentInput" placeholder="Create slide content..." />
       </div>
-      <div v-show="tab === 'note'" class="h-full overflow-auto">
+      <div v-show="tab === 'note'" class="w-full h-full">
         <textarea ref="noteInput" placeholder="Write some notes..." />
       </div>
     </div>

package/internals/IconButton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  icon?: string
+}>()
+</script>
+
+<template>
+  <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
+    <span class="sr-only">{{ title }}</span>
+    <slot>
+      <div :class="icon" />
+    </slot>
+  </button>
+</template>

package/internals/InfoDialog.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 const hasInfo = computed(() => typeof configs.info === 'string')
 </script>

package/internals/Modal.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function onClick() {

package/internals/NavControls.vue

@@ -8,7 +8,7 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 // @ts-expect-error virtual module
 import CustomNavControls from '/@slidev/custom-nav-controls'
@@ -34,7 +34,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10')
+  : 'rounded-md bg-main shadow dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
@@ -52,47 +52,27 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >
-      <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
-        <template v-if="isFullscreen">
-          <HiddenText text="Close fullscreen" />
-          <carbon:minimize />
-        </template>
-        <template v-else>
-          <HiddenText text="Enter fullscreen" />
-          <carbon:maximize />
-        </template>
-      </button>
-
-      <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
-        <HiddenText text="Go to previous slide" />
+      <IconButton v-if="!isEmbedded" :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
+        <carbon:minimize v-if="isFullscreen" />
+        <carbon:maximize v-else />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prev">
         <carbon:arrow-left />
-      </button>
-
-      <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
-        <HiddenText text="Go to next slide" />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="next">
         <carbon:arrow-right />
-      </button>
-
-      <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
-        <HiddenText text="Show slide overview" />
+      </IconButton>
+      <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
         <carbon:apps />
-      </button>
-
-      <button
+      </IconButton>
+      <IconButton
         v-if="!isColorSchemaConfigured"
-        class="slidev-icon-btn"
-        title="Toggle dark mode"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
         @click="toggleDark()"
       >
-        <template v-if="isDark">
-          <HiddenText text="Switch to light theme" />
-          <carbon-moon />
-        </template>
-        <template v-else>
-          <HiddenText text="Switch to dark mode theme" />
-          <carbon-sun />
-        </template>
-      </button>
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
 
       <VerticalDivider />
 
@@ -102,33 +82,25 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <VerticalDivider />
         </template>
 
-        <button
+        <IconButton
           v-if="isPresenter"
-          class="slidev-icon-btn"
-          title="Show presenter cursor"
+          :title="showPresenterCursor ? 'Hide presenter cursor' : 'Show presenter cursor'"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <template v-if="showPresenterCursor">
-            <HiddenText text="Hide presenter cursor" />
-            <ph-cursor-fill />
-          </template>
-          <template v-else>
-            <HiddenText text="Show presenter cursor" />
-            <ph-cursor-duotone />
-          </template>
-        </button>
+          <ph-cursor-fill v-if="showPresenterCursor" />
+          <ph-cursor-duotone v-else />
+        </IconButton>
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
-        <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
-          <HiddenText v-if="drawingEnabled" :text="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" />
+        <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
             :style="{ background: brush.color }"
           />
-        </button>
+        </IconButton>
         <VerticalDivider />
       </template>
 
@@ -140,43 +112,40 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <carbon:user-speaker />
         </RouterLink>
 
-        <button
+        <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
-          class="slidev-icon-btn <md:hidden"
+          :title="showEditor ? 'Hide editor' : 'Show editor'"
+          class="<md:hidden"
           @click="showEditor = !showEditor"
         >
-          <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
-        </button>
+        </IconButton>
 
-        <button v-if="isPresenter" class="slidev-icon-btn" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
-        </button>
+        </IconButton>
       </template>
       <template v-if="!__DEV__">
-        <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
-          <HiddenText text="Download as PDF" />
+        <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
           <carbon:download />
-        </button>
+        </IconButton>
       </template>
 
-      <button
+      <IconButton
         v-if="!isPresenter && configs.info && !isEmbedded"
-        class="slidev-icon-btn"
+        title="Show info"
         @click="showInfoDialog = !showInfoDialog"
       >
-        <HiddenText text="Show info" />
         <carbon:information />
-      </button>
+      </IconButton>
 
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
-            <button class="slidev-icon-btn">
-              <HiddenText text="Adjust settings" />
+            <IconButton title="Adjust settings">
               <carbon:settings-adjust />
-            </button>
+            </IconButton>
           </template>
           <template #menu>
             <Settings />

package/internals/NoteDisplay.vue

@@ -27,7 +27,7 @@ defineEmits(['click'])
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic"
+    class="prose overflow-auto outline-none opacity-50 italic select-none"
     :class="props.class"
     @click="$emit('click')"
   >

package/internals/NoteEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
 import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
+  no: {
+    type: Number,
+  },
   class: {
     default: '',
   },
@@ -25,7 +27,7 @@ const emit = defineEmits([
 ])
 const editing = useVModel(props, 'editing', emit, { passive: true })
 
-const { info, update } = useDynamicSlideInfo(currentSlideId)
+const { info, update } = useDynamicSlideInfo(props.no)
 
 const note = ref('')
 let timer: any
@@ -33,10 +35,10 @@ let timer: any
 const { ignoreUpdates } = ignorableWatch(
   note,
   (v) => {
-    const id = currentSlideId.value
+    const id = props.no
     clearTimeout(timer)
     timer = setTimeout(() => {
-      update({ raw: null!, note: v }, id)
+      update({ note: v }, id)
     }, 500)
   },
 )
@@ -44,6 +46,8 @@ const { ignoreUpdates } = ignorableWatch(
 watch(
   info,
   (v) => {
+    if (editing.value)
+      return
     clearTimeout(timer)
     ignoreUpdates(() => {
       note.value = v?.note || ''
@@ -68,7 +72,7 @@ onClickOutside(input, () => {
   <NoteDisplay
     v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
@@ -77,7 +81,7 @@ onClickOutside(input, () => {
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
     :style="props.style"
     :class="props.class"

package/internals/NoteStatic.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { currentRoute } from '../logic/nav'
+import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
+  no?: number
   class?: string
 }>()
 
-const note = computed(() => currentRoute.value?.meta?.slide?.note)
-const noteHtml = computed(() => currentRoute.value?.meta?.slide?.noteHTML)
+const { info } = useSlideInfo(props.no)
 </script>
 
 <template>
   <NoteDisplay
     :class="props.class"
-    :note="note"
-    :note-html="noteHtml"
+    :note="info?.note"
+    :note-html="info?.noteHTML"
   />
 </template>

package/internals/PrintContainer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 import { route as currentRoute, rawRoutes } from '../logic/nav'
@@ -31,7 +32,7 @@ const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
 
-provide(injectionSlideScale, scale)
+provideLocal(injectionSlideScale, scale)
 </script>
 
 <template>

package/internals/PrintSlideClick.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, provide, reactive, shallowRef } from 'vue'
+import { computed, reactive, shallowRef } from 'vue'
 import type { ClicksContext } from '@slidev/types'
+import { provideLocal } from '@vueuse/core'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
@@ -33,7 +34,7 @@ const id = computed(() =>
   `${props.route.path.toString().padStart(3, '0')}-${(props.nav.clicks.value + 1).toString().padStart(2, '0')}`,
 )
 
-provide(injectionSlidevContext, reactive({
+provideLocal(injectionSlidevContext, reactive({
   nav: props.nav,
   configs,
   themeConfigs: computed(() => configs.themeConfig),

package/internals/RecordingControls.vue

@@ -5,7 +5,7 @@ import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
 import MenuButton from './MenuButton.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const {
   recording,
@@ -34,33 +34,29 @@ onMounted(() => {
 </script>
 
 <template>
-  <button
+  <IconButton
     v-if="currentCamera !== 'none'"
-    class="slidev-icon-btn <md:hidden"
+    class="<md:hidden"
     :class="{ 'text-green-500': Boolean(showAvatar && streamCamera) }"
-    title="Show camera view"
+    title="Toggle camera view"
     @click="toggleAvatar"
   >
-    <HiddenText text="Toggle camera view" />
     <carbon:user-avatar />
-  </button>
+  </IconButton>
 
-  <button
-    class="slidev-icon-btn"
+  <IconButton
     :class="{ 'text-red-500': recording }"
-    title="Recording"
+    :title="recording ? 'Stop record video' : 'Record video'"
     @click="toggleRecording"
   >
-    <HiddenText :text="recording ? 'Stop record video' : 'Record video'" />
     <carbon:stop-outline v-if="recording" />
     <carbon:video v-else />
-  </button>
+  </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <button class="slidev-icon-btn h-full !text-sm !px-0">
-        <HiddenText text="Select recording device" />
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
         <carbon:chevron-up class="opacity-50" />
-      </button>
+      </IconButton>
     </template>
     <template #menu>
       <DevicesList />

package/internals/RecordingDialog.vue

@@ -109,7 +109,7 @@ async function start() {
   }
 
   input[type="text"] {
-    @apply border border-gray-400 rounded px-2 py-1;
+    @apply border border-main rounded px-2 py-1;
   }
 
   button {
@@ -118,8 +118,7 @@ async function start() {
   }
 
   button.cancel {
-    @apply bg-gray-400 text-white px-4 py-1 rounded border-b-2 border-gray-500;
-    @apply bg-opacity-50 border-opacity-50;
+    @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
     @apply hover:(bg-opacity-75 border-opacity-75)
   }
 }

package/internals/SlideContainer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, provide, ref, watchEffect } from 'vue'
+import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 import { isPrintMode } from '../logic/nav'
@@ -47,9 +47,10 @@ const scale = computed(() => {
 })
 
 const style = computed(() => ({
-  height: `${slideHeight}px`,
-  width: `${slideWidth}px`,
-  transform: `translate(-50%, -50%) scale(${scale.value})`,
+  'height': `${slideHeight}px`,
+  'width': `${slideWidth}px`,
+  'transform': `translate(-50%, -50%) scale(${scale.value})`,
+  '--slidev-slide-scale': scale.value,
 }))
 
 const className = computed(() => ({
@@ -64,7 +65,7 @@ if (props.isMain) {
   `))
 }
 
-provide(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>