feat: add open in editor button in list overview

Author: antfu

packages/client/internals/Editor.vue packages/client/internals/SideEditor.vue

@@ -4,7 +4,7 @@ import { useHead } from '@unhead/vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext } from 'packages/types'
 import { themeVars } from '../env'
-import { rawRoutes } from '../logic/nav'
+import { openInEditor, rawRoutes } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
@@ -131,10 +131,25 @@ onMounted(() => {
         :ref="el => blocks.set(idx, el as any)"
         class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
       >
-        <div class="select-none w-13 text-right my4">
+        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
           <div class="text-3xl op20 mb2">
             {{ idx + 1 }}
           </div>
+          <IconButton
+            class="mr--3 op0 group-hover:op80"
+            title="Play in new tab"
+            @click="openSlideInNewTab(route.path)"
+          >
+            <carbon:presentation-file />
+          </IconButton>
+          <IconButton
+            v-if="route.meta?.slide"
+            class="mr--3 op0 group-hover:op80"
+            title="Open in editor"
+            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+          >
+            <carbon:cics-program />
+          </IconButton>
         </div>
         <div class="flex flex-col gap-2 my5">
           <div

packages/client/pages/overview.vue

@@ -31,9 +31,9 @@ useSwipeControls(root)
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
-const Editor = shallowRef<any>()
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('../internals/Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__)
@@ -70,8 +70,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
     </SlideContainer>
 
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
-      <Editor :resize="true" />
+    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
+      <SideEditor :resize="true" />
     </template>
   </div>
   <Controls />

packages/client/pages/play.vue

@@ -52,9 +52,9 @@ watch([currentRoute, queryClicks], () => {
   nextFrameClicksCtx.value && (nextFrameClicksCtx.value.current = nextFrame.value![1])
 }, { immediate: true })
 
-const Editor = shallowRef<any>()
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('../internals/Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 // sync presenter cursor
 onMounted(() => {
@@ -134,8 +134,8 @@ onMounted(() => {
         </div>
       </div>
       <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
-        <Editor />
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+        <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditor

packages/client/pages/presenter.vue

@@ -16,7 +16,11 @@ html {
 }
 
 .slidev-icon-btn {
-  @apply inline-block cursor-pointer select-none !outline-none;
+  aspect-ratio: 1;
+  display: inline-block;
+  user-select: none;  
+  outline: none;
+  cursor: pointer;
   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply md:p-2;