@slidev/client 0.43.11 → 0.43.13

package/internals/NavControls.vue

@@ -2,7 +2,7 @@
 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 { activeElement, breakpoints, fullscreen, showEditor, showInfoDialog, showPresenterCursor, toggleOverview } from '../state'
+import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
 import Settings from './Settings.vue'
@@ -148,6 +148,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
         </button>
+
+        <button v-if="isPresenter" class="slidev-icon-btn" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+          <carbon:template />
+          {{ presenterLayout }}
+        </button>
       </template>
       <template v-if="!__DEV__">
         <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">

package/internals/NoteEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ignorableWatch, onClickOutside } from '@vueuse/core'
-import { nextTick, ref, watch } from 'vue'
+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'
@@ -9,11 +9,22 @@ const props = defineProps({
   class: {
     default: '',
   },
+  editing: {
+    default: false,
+  },
+  style: {
+    default: () => ({}),
+  },
   placeholder: {
     default: 'No notes for this slide',
   },
 })
 
+const emit = defineEmits([
+  'update:editing',
+])
+const editing = useVModel(props, 'editing', emit, { passive: true })
+
 const { info, update } = useDynamicSlideInfo(currentSlideId)
 
 const note = ref('')
@@ -42,17 +53,11 @@ watch(
 )
 
 const input = ref<HTMLTextAreaElement>()
-const editing = ref(false)
 
-async function switchNoteEdit(e: MouseEvent) {
-  if ((e?.target as HTMLElement)?.tagName === 'A')
-    return
-
-  editing.value = true
-  input.value?.focus()
-  await nextTick()
-  input.value?.focus()
-}
+watchEffect(() => {
+  if (editing.value)
+    input.value?.focus()
+})
 
 onClickOutside(input, () => {
   editing.value = false
@@ -61,20 +66,23 @@ onClickOutside(input, () => {
 
 <template>
   <NoteDisplay
-    v-if="!editing && note"
-    :class="props.class"
-    :note="note"
+    v-if="!editing"
+    class="my--4 border-transparent border-2"
+    :class="[props.class, note ? '' : 'opacity-50']"
+    :style="props.style"
+    :note="note || placeholder"
     :note-html="info?.noteHTML"
-    @click="switchNoteEdit"
   />
   <textarea
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block"
-    style="line-height: 1.75; margin: 1em 0;"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    style="line-height: 1.75;"
+    :style="props.style"
     :class="props.class"
     :placeholder="placeholder"
+    @keydown.esc=" editing = false"
     @focus="editing = true"
   />
 </template>

package/internals/Presenter.vue

@@ -3,7 +3,7 @@ import { useHead } from '@vueuse/head'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
-import { showEditor, showOverview, showPresenterCursor } from '../state'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs, themeVars } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -30,6 +30,8 @@ useHead({
   title: `Presenter - ${slideTitle}`,
 })
 
+const notesEditing = ref(false)
+
 const { timer, resetTimer } = useTimer()
 
 const nextTabElements = ref([])
@@ -86,7 +88,7 @@ onMounted(() => {
 
 <template>
   <div class="bg-main h-full slidev-presenter">
-    <div class="grid-container">
+    <div class="grid-container" :class="`layout${presenterLayout}`">
       <div class="grid-section top flex">
         <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
         <div class="flex-auto" />
@@ -135,12 +137,39 @@ onMounted(() => {
           next
         </div>
       </div>
-      <div class="grid-section note overflow-auto">
-        <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
-          <Editor />
-        </template>
-        <NoteEditor v-else-if="__DEV__" class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
-        <NoteStatic v-else class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
+      <!-- Notes -->
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
+        <Editor />
+      </div>
+      <div v-else class="grid-section note grid grid-rows-[1fr_min-content]">
+        <NoteEditor
+          v-if="__DEV__"
+          class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+          :editing="notesEditing"
+          :style="{ fontSize: `${presenterNotesFontSize}em` }"
+        />
+        <NoteStatic
+          v-else
+          class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+          :style="{ fontSize: `${presenterNotesFontSize}em` }"
+        />
+        <div class="border-t border-main py-1 px-2 text-sm">
+          <button class="slidev-icon-btn" @click="increasePresenterFontSize">
+            <HiddenText text="Increase font size" />
+            <carbon:zoom-in />
+          </button>
+          <button class="slidev-icon-btn" @click="decreasePresenterFontSize">
+            <HiddenText text="Decrease font size" />
+            <carbon:zoom-out />
+          </button>
+          <button
+            v-if="__DEV__"
+            class="slidev-icon-btn" @click="notesEditing = !notesEditing"
+          >
+            <HiddenText text="Edit Notes" />
+            <carbon:edit />
+          </button>
+        </div>
       </div>
       <div class="grid-section bottom">
         <NavControls :persist="true" />
@@ -180,6 +209,9 @@ onMounted(() => {
   @apply h-full w-full bg-gray-400 bg-opacity-15;
   display: grid;
   gap: 1px 1px;
+}
+
+.grid-container.layout1 {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
@@ -189,8 +221,18 @@ onMounted(() => {
     "bottom bottom";
 }
 
+.grid-container.layout2 {
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-areas:
+    "top top"
+    "note main"
+    "note next"
+    "bottom bottom";
+}
+
 @media (max-aspect-ratio: 3/5) {
-  .grid-container {
+  .grid-container.layout1 {
     grid-template-columns: 1fr;
     grid-template-rows: min-content 1fr 1fr 1fr min-content;
     grid-template-areas:
@@ -203,7 +245,7 @@ onMounted(() => {
 }
 
 @media (min-aspect-ratio: 1/1) {
-  .grid-container {
+  .grid-container.layout1 {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
     grid-template-areas:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.11",
+  "version": "0.43.13",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "vue-router": "^4.2.5",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.11",
-    "@slidev/types": "0.43.11"
+    "@slidev/types": "0.43.13",
+    "@slidev/parser": "0.43.13"
   },
   "devDependencies": {
     "vite": "^4.5.0"

package/state/index.ts

@@ -29,4 +29,21 @@ export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', tr
 export const showEditor = useLocalStorage('slidev-show-editor', false)
 export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)
 
+export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1)
+export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1)
+
+export function togglePresenterLayout() {
+  presenterLayout.value = presenterLayout.value + 1
+  if (presenterLayout.value > 2)
+    presenterLayout.value = 1
+}
+
+export function increasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.min(2, presenterNotesFontSize.value + 0.1)
+}
+
+export function decreasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.max(0.5, presenterNotesFontSize.value - 0.1)
+}
+
 export const toggleOverview = useToggle(showOverview)