@slidev/client 0.48.0-beta.9 → 0.48.0

package/internals/DrawingControls.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import { Menu } from 'floating-vue'
-import 'floating-vue/dist/style.css'
-import {
+import { useDrawings } from '../composables/useDrawings'
+import VerticalDivider from './VerticalDivider.vue'
+import Draggable from './Draggable.vue'
+import IconButton from './IconButton.vue'
+
+const {
   brush,
-  brushColors,
   canClear,
   canRedo,
   canUndo,
-  clearDrauu,
+  clear,
   drauu,
   drawingEnabled,
   drawingMode,
   drawingPinned,
-} from '../logic/drawings'
-import VerticalDivider from './VerticalDivider.vue'
-import Draggable from './Draggable.vue'
-import IconButton from './IconButton.vue'
+  brushColors,
+} = useDrawings()
 
 function undo() {
   drauu.undo()
@@ -110,7 +111,7 @@ function setBrushColor(color: typeof brush.color) {
     <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
       <carbon:redo />
     </IconButton>
-    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
       <carbon:trash-can />
     </IconButton>
 
@@ -131,10 +132,8 @@ function setBrushColor(color: typeof brush.color) {
   </Draggable>
 </template>
 
-<style lang="postcss">
-.v-popper--theme-menu {
-  .v-popper__arrow-inner {
-    @apply border-main;
-  }
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
 }
-</style>
+</style>../composables/drawings

package/internals/DrawingLayer.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { injectLocal } from '@vueuse/core'
-import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
-import { injectionSlideScale } from '../constants'
+import { useSlideContext } from '../context'
+import { useDrawings } from '../composables/useDrawings'
 
-const scale = injectLocal(injectionSlideScale)!
+const { drauu, drawingEnabled, loadCanvas } = useDrawings()
+
+const scale = useSlideContext().$scale
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {
@@ -24,4 +25,4 @@ onBeforeUnmount(() => {
     class="w-full h-full absolute top-0"
     :class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
   />
-</template>
+</template>../composables/drawings

package/internals/DrawingPreview.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { drawingState } from '../logic/drawings'
+import { useDrawings } from '../composables/useDrawings'
 
 defineProps<{ page: number }>()
+
+const { drawingState } = useDrawings()
 </script>
 
 <template>
@@ -10,4 +12,4 @@ defineProps<{ page: number }>()
     class="w-full h-full absolute top-0 pointer-events-none"
     v-html="drawingState[page]"
   />
-</template>
+</template>../composables/drawings

package/internals/Goto.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
-import { go, rawRoutes } from '../logic/nav'
 import { activeElement, showGotoDialog } from '../state'
-import Titles from '/@slidev/titles.md'
+import { useNav } from '../composables/useNav'
+import Titles from '#slidev/title-renderer'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
@@ -12,11 +12,13 @@ const items = ref<HTMLLIElement[]>()
 const text = ref('')
 const selectedIndex = ref(0)
 
+const { go, slides } = useNav()
+
 function notNull<T>(value: T | null | undefined): value is T {
   return value !== null && value !== undefined
 }
 
-const fuse = computed(() => new Fuse(rawRoutes.map(i => i.meta?.slide).filter(notNull), {
+const fuse = computed(() => new Fuse(slides.value.map(i => i.meta?.slide).filter(notNull), {
   keys: ['no', 'title'],
   threshold: 0.3,
   shouldSort: true,
@@ -165,10 +167,11 @@ watch(activeElement, () => {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .autocomplete-list {
-  @apply bg-main transform mt-1 overflow-auto;
-  max-height: calc( 100vh - 100px );
+  --uno: bg-main mt-1;
+  overflow: auto;
+  max-height: calc(100vh - 100px);
 }
 
 .autocomplete {

package/internals/IconButton.vue

@@ -2,14 +2,15 @@
 defineProps<{
   title: string
   icon?: string
+  as?: string
 }>()
 </script>
 
 <template>
-  <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
+  <component :is="as || 'button'" class="slidev-icon-btn" :title="title">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />
     </slot>
-  </button>
+  </component>
 </template>

package/internals/NavControls.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, presenterPassword, prev, showPresenter, total } from '../logic/nav'
+import { downloadPDF } from '../utils'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
-import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
+import { useNav } from '../composables/useNav'
+import { getSlidePath } from '../logic/slides'
+import { useDrawings } from '../composables/useDrawings'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
 import IconButton from './IconButton.vue'
 
-// @ts-expect-error virtual module
-import CustomNavControls from '/@slidev/custom-nav-controls'
+import CustomNavControls from '#slidev/custom-nav-controls'
 
 const props = defineProps({
   persist: {
@@ -19,12 +20,30 @@ const props = defineProps({
   },
 })
 
+const {
+  currentRoute,
+  currentSlideNo,
+  hasNext,
+  hasPrev,
+  isEmbedded,
+  isPresenter,
+  isPresenterAvailable,
+  next,
+  prev,
+  total,
+} = useNav()
+const {
+  brush,
+  drawingEnabled,
+} = useDrawings()
+
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
+const presenterPassword = computed(() => currentRoute.value.query.password)
 const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `/presenter/${currentPage.value}${query.value}`)
-const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
+const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
+const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
 
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
@@ -108,20 +127,20 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
-          class="<md:hidden"
+          class="lt-md:hidden"
           @click="showEditor = !showEditor"
         >
           <carbon:text-annotation-toggle />
         </IconButton>
 
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
         </IconButton>
@@ -157,7 +176,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
       <div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
         <div class="my-auto">
-          {{ currentPage }}
+          {{ currentSlideNo }}
           <span class="opacity-50">/ {{ total }}</span>
         </div>
       </div>
@@ -165,4 +184,4 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       <CustomNavControls />
     </div>
   </nav>
-</template>
+</template>../composables/drawings

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 select-none"
+    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,129 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
+import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
+import type { ClicksContext } from '@slidev/types'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import NoteDisplay from './NoteDisplay.vue'
+
+const props = defineProps({
+  no: {
+    type: Number,
+    required: true,
+  },
+  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(toRef(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,10 +1,12 @@
 <script setup lang="ts">
-import { useSlideInfo } from '../logic/note'
+import type { ClicksContext } from '@slidev/types'
+import { useSlideInfo } from '../composables/useSlideInfo'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
-  no?: number
+  no: number
   class?: string
+  clicksContext?: ClicksContext
 }>()
 
 const { info } = useSlideInfo(props.no)
@@ -15,5 +17,6 @@ const { info } = useSlideInfo(props.no)
     :class="props.class"
     :note="info?.note"
     :note-html="info?.noteHTML"
+    :clicks-context="clicksContext"
   />
 </template>

package/internals/PrintContainer.vue

@@ -4,25 +4,28 @@ 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'
+import { useNav } from '../composables/useNav'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{
   width: number
 }>()
 
+const { slides, currentRoute } = useNav()
+
 const width = computed(() => props.width)
-const height = computed(() => props.width / slideAspect)
+const height = computed(() => props.width / slideAspect.value)
 
 const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
-  if (screenAspect.value < slideAspect)
-    return width.value / slideWidth
-  return (height.value * slideAspect) / slideWidth
+  if (screenAspect.value < slideAspect.value)
+    return width.value / slideWidth.value
+  return (height.value * slideAspect.value) / slideWidth.value
 })
 
-let routes = rawRoutes
+// In print mode, the routes will never change. So we don't need reactivity here.
+let routes = slides.value
 if (currentRoute.value.query.range) {
   const r = parseRangeString(routes.length, currentRoute.value.query.range as string)
   routes = r.map(i => routes[i - 1])
@@ -38,7 +41,7 @@ provideLocal(injectionSlideScale, scale)
 <template>
   <div id="print-container" :class="className">
     <div id="print-content">
-      <PrintSlide v-for="route of routes" :key="route.path" :route="route" />
+      <PrintSlide v-for="route of routes" :key="route.no" :route="route" />
     </div>
     <slot name="controls" />
   </div>
@@ -50,6 +53,6 @@ provideLocal(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

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import type { RouteRecordRaw } from 'vue-router'
-import { computed } from 'vue'
-import { useNav } from '../composables/useNav'
-import { useFixedClicks } from '../composables/useClicks'
+import type { SlideRoute } from '@slidev/types'
+import { useFixedNav } from '../composables/useNav'
+import { createFixedClicks } from '../composables/useClicks'
 import PrintSlideClick from './PrintSlideClick.vue'
 
-const props = defineProps<{ route: RouteRecordRaw }>()
-
-const route = computed(() => props.route)
-const nav = useNav(route)
-const clicks0 = useFixedClicks(route.value, 0)[1]
+const { route } = defineProps<{ route: SlideRoute }>()
+const clicks0 = createFixedClicks(route, 0)
 </script>
 
 <template>
   <PrintSlideClick
     :clicks-context="clicks0"
-    :nav="nav"
-    :route="route"
+    :nav="useFixedNav(route, clicks0)"
   />
   <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"
+      :nav="useFixedNav(route, createFixedClicks(route, i))"
+    />
   </template>
 </template>