fix(presenter): edit notes via button

Author: antfu

packages/client/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,6 +9,9 @@ const props = defineProps({
   class: {
     default: '',
   },
+  editing: {
+    default: false,
+  },
   style: {
     default: () => ({}),
   },
@@ -17,6 +20,11 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits([
+  'update:editing',
+])
+const editing = useVModel(props, 'editing', emit, { passive: true })
+
 const { info, update } = useDynamicSlideInfo(currentSlideId)
 
 const note = ref('')
@@ -45,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
@@ -64,13 +66,12 @@ onClickOutside(input, () => {
 
 <template>
   <NoteDisplay
-    v-if="!editing && note"
+    v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="props.class"
+    :class="[props.class, note ? '' : 'opacity-50']"
     :style="props.style"
-    :note="note"
+    :note="note || placeholder"
     :note-html="info?.noteHTML"
-    @click="switchNoteEdit"
   />
   <textarea
     v-else

packages/client/internals/Presenter.vue

@@ -30,6 +30,8 @@ useHead({
   title: `Presenter - ${slideTitle}`,
 })
 
+const notesEditing = ref(false)
+
 const { timer, resetTimer } = useTimer()
 
 const nextTabElements = ref([])
@@ -143,6 +145,7 @@ onMounted(() => {
         <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
@@ -159,6 +162,13 @@ onMounted(() => {
             <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">
@@ -212,7 +222,7 @@ onMounted(() => {
 }
 
 .grid-container.layout2 {
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 3fr 2fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
     "top top"