fix: side editor styles and interacation (#1710)

packages/client/internals/ShikiEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { getHighlighter } from '#slidev/shiki'
 
 const props = defineProps<{
@@ -9,30 +9,14 @@ const content = defineModel<string>({ required: true })
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
 
-const html = ref('')
-
-watchEffect((onCleanup) => {
-  let canceled = false
-  onCleanup(() => canceled = true)
-
-  const c = content.value
-  async function updateHtml() {
-    const highlight = await getHighlighter()
-    if (canceled)
-      return
-    const h = await highlight(c, 'markdown')
-    if (canceled)
-      return
-    html.value = h
-  }
-  updateHtml()
-})
+const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(null)
+getHighlighter().then(h => highlight.value = h)
 </script>
 
 <template>
-  <div class="absolute inset-x-3 inset-y-2 font-mono overflow-x-hidden overflow-y-auto">
-    <div class="relative w-full h-max">
-      <div class="relative w-full h-max" v-html="html" />
+  <div class="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">
+    <div v-if="highlight" class="relative w-full h-max min-h-full">
+      <div class="relative w-full h-max" v-html="`${highlight(content, 'markdown')}&nbsp;`" />
       <textarea
         ref="textareaEl" v-model="content" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"

packages/client/internals/SideEditor.vue

@@ -58,10 +58,9 @@ useEventListener('keydown', (e) => {
 const contentRef = computed({
   get() { return content.value },
   set(v) {
-    if (content.value.trim() !== v.trim()) {
-      content.value = v
+    if (content.value.trim() !== v.trim())
       dirty.value = true
-    }
+    content.value = v
   },
 })
 
@@ -126,7 +125,7 @@ throttledWatch(
     }" @pointerdown="onHandlerDown"
   />
   <div
-    class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
+    class="shadow bg-main p-2 pt-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
     :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
     :style="resize ? {
       height: vertical ? `${editorHeight}px` : undefined,