@slidev/client 0.48.0-beta.2 → 0.48.0-beta.20

package/internals/NoteDisplay.vue

@@ -1,36 +1,159 @@
 <script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { ClicksContext } from '@slidev/types'
+import { CLICKS_MAX } from '../constants'
+
 const props = defineProps<{
   class?: string
   noteHtml?: string
   note?: string
   placeholder?: string
+  clicksContext?: ClicksContext
+  autoScroll?: boolean
+}>()
+
+const emit = defineEmits<{
+  (type: 'markerDblclick', e: MouseEvent, clicks: number): void
+  (type: 'markerClick', e: MouseEvent, clicks: number): void
 }>()
 
-defineEmits(['click'])
+const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const noteDisplay = ref<HTMLElement | null>(null)
+
+const CLASS_FADE = 'slidev-note-fade'
+const CLASS_MARKER = 'slidev-note-click-mark'
+
+function highlightNote() {
+  if (!noteDisplay.value || !withClicks.value)
+    return
+
+  const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
+
+  const current = +(props.clicksContext?.current ?? CLICKS_MAX)
+  const disabled = current < 0 || current >= CLICKS_MAX
+
+  const nodeToIgnores = new Set<Element>()
+  function ignoreParent(node: Element) {
+    if (!node || node === noteDisplay.value)
+      return
+    nodeToIgnores.add(node)
+    if (node.parentElement)
+      ignoreParent(node.parentElement)
+  }
+
+  const markersMap = new Map<number, HTMLElement>()
+
+  // Convert all sibling text nodes to spans, so we attach classes to them
+  for (const marker of markers) {
+    const parent = marker.parentElement!
+    const clicks = Number(marker.dataset!.clicks)
+    markersMap.set(clicks, marker)
+    // Ignore the parents of the marker, so the class only applies to the children
+    ignoreParent(parent)
+    Array.from(parent!.childNodes)
+      .forEach((node) => {
+        if (node.nodeType === 3) { // text node
+          const span = document.createElement('span')
+          span.textContent = node.textContent
+          parent.insertBefore(span, node)
+          node.remove()
+        }
+      })
+  }
+  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
+
+  let count = 0
+
+  // Segmenting notes by clicks
+  const segments = new Map<number, Element[]>()
+  for (const child of children) {
+    if (!segments.has(count))
+      segments.set(count, [])
+    segments.get(count)!.push(child)
+    // Update count when reach marker
+    if (child.classList.contains(CLASS_MARKER))
+      count = Number((child as HTMLElement).dataset.clicks) || (count + 1)
+  }
+
+  // Apply
+  for (const [count, els] of segments) {
+    if (disabled) {
+      els.forEach(el => el.classList.remove(CLASS_FADE))
+    }
+    else {
+      els.forEach(el => el.classList.toggle(
+        CLASS_FADE,
+        nodeToIgnores.has(el)
+          ? false
+          : count !== current,
+      ))
+    }
+  }
+
+  for (const [clicks, marker] of markersMap) {
+    marker.classList.remove(CLASS_FADE)
+    marker.classList.toggle(`${CLASS_MARKER}-past`, disabled ? false : clicks < current)
+    marker.classList.toggle(`${CLASS_MARKER}-active`, disabled ? false : clicks === current)
+    marker.classList.toggle(`${CLASS_MARKER}-next`, disabled ? false : clicks === current + 1)
+    marker.classList.toggle(`${CLASS_MARKER}-future`, disabled ? false : clicks > current + 1)
+    marker.ondblclick = (e) => {
+      emit('markerDblclick', e, clicks)
+      if (e.defaultPrevented)
+        return
+      props.clicksContext!.current = clicks
+      e.stopPropagation()
+      e.stopImmediatePropagation()
+    }
+    marker.onclick = (e) => {
+      emit('markerClick', e, clicks)
+    }
+
+    if (props.autoScroll && clicks === current)
+      marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }
+}
+
+watch(
+  () => [props.noteHtml, props.clicksContext?.current],
+  () => {
+    nextTick(() => {
+      highlightNote()
+    })
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  highlightNote()
+})
 </script>
 
 <template>
   <div
     v-if="noteHtml"
-    class="prose overflow-auto outline-none"
-    :class="props.class"
-    @click="$emit('click')"
+    ref="noteDisplay"
+    class="prose overflow-auto outline-none slidev-note"
+    :class="[props.class, withClicks ? 'slidev-note-with-clicks' : '']"
     v-html="noteHtml"
   />
   <div
     v-else-if="note"
-    class="prose overflow-auto outline-none"
+    class="prose overflow-auto outline-none slidev-note"
     :class="props.class"
-    @click="$emit('click')"
   >
     <p v-text="note" />
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic"
+    class="prose overflow-auto outline-none opacity-50 italic select-none slidev-note"
     :class="props.class"
-    @click="$emit('click')"
   >
     <p v-text="props.placeholder || 'No notes.'" />
   </div>
 </template>
+
+<style>
+.slidev-note :first-child {
+  margin-top: 0;
+}
+</style>

package/internals/NoteEditable.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { nextTick, ref, watch, watchEffect } from 'vue'
+import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
+import type { ClicksContext } from '@slidev/types'
+import { useDynamicSlideInfo } from '../logic/note'
+import NoteDisplay from './NoteDisplay.vue'
+
+const props = defineProps({
+  no: {
+    type: Number,
+  },
+  class: {
+    default: '',
+  },
+  editing: {
+    default: false,
+  },
+  style: {
+    default: () => ({}),
+  },
+  placeholder: {
+    default: 'No notes for this slide',
+  },
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+  },
+  autoHeight: {
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (type: 'update:editing', value: boolean): void
+  (type: 'markerDblclick', e: MouseEvent, clicks: number): void
+  (type: 'markerClick', e: MouseEvent, clicks: number): void
+}>()
+
+const editing = useVModel(props, 'editing', emit, { passive: true })
+
+const { info, update } = useDynamicSlideInfo(props.no)
+
+const note = ref('')
+let timer: any
+
+// Send back the note on changes
+const { ignoreUpdates } = ignorableWatch(
+  note,
+  (v) => {
+    if (!editing.value)
+      return
+    const id = props.no
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      update({ note: v }, id)
+    }, 500)
+  },
+)
+
+// Update note value when info changes
+watch(
+  () => info.value?.note,
+  (value = '') => {
+    if (editing.value)
+      return
+    clearTimeout(timer)
+    ignoreUpdates(() => {
+      note.value = value
+    })
+  },
+  { immediate: true, flush: 'sync' },
+)
+
+const inputEl = ref<HTMLTextAreaElement>()
+const inputHeight = ref<number | null>()
+
+watchEffect(() => {
+  if (editing.value)
+    inputEl.value?.focus()
+})
+
+onClickOutside(inputEl, () => {
+  editing.value = false
+})
+
+function calculateEditorHeight() {
+  if (!props.autoHeight || !inputEl.value || !editing.value)
+    return
+  if (inputEl.value.scrollHeight > inputEl.value.clientHeight)
+    inputEl.value.style.height = `${inputEl.value.scrollHeight}px`
+}
+
+watch(
+  [note, editing],
+  () => {
+    nextTick(() => {
+      calculateEditorHeight()
+    })
+  },
+  { flush: 'post', immediate: true },
+)
+</script>
+
+<template>
+  <NoteDisplay
+    v-if="!editing"
+    class="border-transparent border-2"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
+    :style="props.style"
+    :note="note || placeholder"
+    :note-html="info?.noteHTML"
+    :clicks-context="clicksContext"
+    :auto-scroll="!autoHeight"
+    @marker-click="(e, clicks) => emit('markerClick', e, clicks)"
+    @marker-dblclick="(e, clicks) => emit('markerDblclick', e, clicks)"
+  />
+  <textarea
+    v-else
+    ref="inputEl"
+    v-model="note"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
+    style="line-height: 1.75;"
+    :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
+    :class="props.class"
+    :placeholder="placeholder"
+    @keydown.esc="editing = false"
+  />
+</template>

package/internals/NoteStatic.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { currentRoute } from '../logic/nav'
+import type { ClicksContext } from 'packages/types'
+import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
+  no?: number
   class?: string
+  clicksContext?: ClicksContext
 }>()
 
-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"
+    :clicks-context="clicksContext"
   />
 </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>
@@ -49,6 +50,6 @@ provide(injectionSlideScale, scale)
 }
 
 .print-slide-container {
-  @apply relative overflow-hidden break-after-page;
+  @apply relative overflow-hidden break-after-page translate-0;
 }
 </style>

package/internals/PrintSlide.vue

@@ -9,7 +9,7 @@ const props = defineProps<{ route: RouteRecordRaw }>()
 
 const route = computed(() => props.route)
 const nav = useNav(route)
-const clicks0 = useFixedClicks(route.value, 0)[1]
+const clicks0 = useFixedClicks(route.value, 0)
 </script>
 
 <template>
@@ -19,6 +19,12 @@ const clicks0 = useFixedClicks(route.value, 0)[1]
     :route="route"
   />
   <template v-if="!clicks0.disabled">
-    <PrintSlideClick v-for="i of clicks0.total" :key="i" :clicks-context="useFixedClicks(route, i)[1]" :nav="nav" :route="route" />
+    <PrintSlideClick
+      v-for="i of clicks0.total"
+      :key="i"
+      :clicks-context="useFixedClicks(route, i)"
+      :nav="nav"
+      :route="route"
+    />
   </template>
 </template>

package/internals/PrintSlideClick.vue

@@ -1,18 +1,16 @@
 <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'
 import type { SlidevContextNav } from '../modules/context'
 import SlideWrapper from './SlideWrapper'
 
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
 
 const props = defineProps<{
   clicksContext: ClicksContext
@@ -33,7 +31,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/{SlidesOverview.vue → QuickOverview.vue}

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { themeVars } from '../env'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
+import { CLICKS_MAX } from '../constants'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
@@ -14,7 +14,7 @@ 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,9 +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'"
-            :style="themeVars"
+            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
             @click="go(+route.path)"
           >
             <SlideContainer
@@ -139,7 +138,7 @@ watchEffect(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-context="useFixedClicks(route, 99999)[1]"
+                :clicks-context="useFixedClicks(route, CLICKS_MAX)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
@@ -163,7 +162,19 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <IconButton v-if="value" title="Close" class="fixed text-2xl top-4 right-4 text-gray-400" @click="close">
-    <carbon:close />
-  </IconButton>
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+    <IconButton
+      as="a"
+      title="Slides Overview"
+      target="_blank"
+      href="/overview"
+      tab-index="-1"
+      class="text-2xl"
+    >
+      <carbon:list-boxes />
+    </IconButton>
+  </div>
 </template>

package/internals/RecordingControls.vue

@@ -54,7 +54,7 @@ onMounted(() => {
   </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0 aspect-initial">
         <carbon:chevron-up class="opacity-50" />
       </IconButton>
     </template>

package/internals/RecordingDialog.vue

@@ -108,19 +108,18 @@ async function start() {
     }
   }
 
-  input[type="text"] {
-    @apply border border-gray-400 rounded px-2 py-1;
+  input[type='text'] {
+    @apply border border-main rounded px-2 py-1;
   }
 
   button {
     @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700)
+    @apply hover:(bg-orange-500 border-orange-700);
   }
 
   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 hover:(bg-opacity-75 border-opacity-75)
+    @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);
   }
 }
 </style>

package/internals/{Editor.vue → SideEditor.vue}

@@ -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,
@@ -103,6 +102,11 @@ onMounted(async () => {
         noteEditor.refresh()
     })
   })
+
+  watch(currentSlideId, () => {
+    contentEditor.clearHistory()
+    noteEditor.clearHistory()
+  }, { flush: 'post' })
 })
 
 const handlerDown = ref(false)
@@ -168,13 +172,13 @@ throttledWatch(
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
         <IconButton
-          title="Switch to content tab" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''"
+          title="Switch to content tab" :class="tab === 'content' ? 'text-primary' : ''"
           @click="switchTab('content')"
         >
           <carbon:account />
         </IconButton>
         <IconButton
-          title="Switch to notes tab" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''"
+          title="Switch to notes tab" :class="tab === 'note' ? 'text-primary' : ''"
           @click="switchTab('note')"
         >
           <carbon:align-box-bottom-right />

package/internals/SlideContainer.vue

@@ -1,9 +1,9 @@
 <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'
+import { clicksDirection, isPrintMode } from '../logic/nav'
 
 const props = defineProps({
   width: {
@@ -47,13 +47,16 @@ 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(() => ({
   'select-none': !configs.selectable,
+  'slidev-nav-go-forward': clicksDirection.value > 0,
+  'slidev-nav-go-backward': clicksDirection.value < 0,
 }))
 
 if (props.isMain) {
@@ -64,12 +67,12 @@ if (props.isMain) {
   `))
 }
 
-provide(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="className">
-    <div id="slide-content" :style="style">
+  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
+    <div id="slide-content" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

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 })
   },
 })