feat: improved open in editor

slidevjs · Jun 27, 2021 · 20f0b09 · 20f0b09
1 parent 8e81529
commit 20f0b09
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/packages/client/internals/Editor.vue b/packages/client/internals/Editor.vue
@@ -3,7 +3,7 @@ import { useEventListener, throttledWatch } from '@vueuse/core'
 import { computed, watch, ref, onMounted } from 'vue'
 import { activeElement, showEditor, editorWidth, isInputting } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
-import { currentRoute, currentSlideId } from '../logic/nav'
+import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 
 const tab = ref<'content' | 'note'>('content')
@@ -114,13 +114,6 @@ useEventListener('resize', () => {
   updateWidth(editorWidth.value)
 })
 
-const editorLink = computed(() => {
-  const slide = currentRoute.value?.meta?.slide
-  return (slide?.filepath)
-    ? `vscode://file/${slide.filepath}:${slide.start}`
-    : undefined
-})
-
 throttledWatch(
   [content, note],
   () => {
@@ -155,10 +148,8 @@ throttledWatch(
         {{ tab === 'content' ? 'Slide' : 'Note' }}
       </span>
       <div class="flex-auto"></div>
-      <button class="icon-btn">
-        <a :href="editorLink" target="_blank">
-          <carbon:launch />
-        </a>
+      <button class="icon-btn" @click="openInEditor()">
+        <carbon:launch />
       </button>
       <button class="icon-btn" @click="close">
         <carbon:close />

diff --git a/packages/client/logic/nav.ts b/packages/client/logic/nav.ts
@@ -125,3 +125,14 @@ export async function downloadPDF() {
     `${configs.title}.pdf`,
   )
 }
+
+export async function openInEditor(url?: string) {
+  if (url == null) {
+    const slide = currentRoute.value?.meta?.slide
+    if (!slide?.filepath)
+      return false
+    url = `${slide.filepath}:${slide.start}`
+  }
+  await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
+  return true
+}
diff --git a/packages/create-app/template/slides.md b/packages/create-app/template/slides.md
@@ -21,15 +21,21 @@ info: |
 Presentation slides for developers
 
 <div class="pt-12">
-  <span @click="$slidev.nav.next" class="px-2 p-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
+  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
     Press Space for next page <carbon:arrow-right class="inline"/>
   </span>
 </div>
 
-<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
-  class="abs-br m-6 text-xl icon-btn opacity-50 !border-none !hover:text-white">
-  <carbon-logo-github />
-</a>
+<div class="abs-br m-6 flex gap-2">
+  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
+    <carbon:edit />
+  </button>
+  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
+    class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
+    <carbon-logo-github />
+  </a>
+</div>
+
 
 <!--
 The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
@@ -335,4 +341,4 @@ class: text-center
 
 # Learn More
 
-[Documentations](https://sli.dev) / [GitHub](https://github.com/slidevjs/slidev) / [Showcases](https://sli.dev/showcases.html)
+[Documentations](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)