fix: improve integrated editor

Author: antfu

packages/client/internals/Editor.vue

@@ -13,16 +13,20 @@ const dirty = ref(false)
 const frontmatter = ref<any>({})
 const contentInput = ref<HTMLTextAreaElement>()
 const noteInput = ref<HTMLTextAreaElement>()
+const focused = ref(false)
 
 const { info, update } = useDynamicSlideInfo(currentSlideId)
 
 watch(
   info,
   (v) => {
-    content.value = (v?.content || '').trim()
     note.value = (v?.note || '').trim()
     frontmatter.value = v?.frontmatter || {}
-    dirty.value = false
+
+    if (!focused.value) {
+      content.value = (v?.content || '').trim()
+      dirty.value = false
+    }
   },
   { immediate: true },
 )
@@ -54,15 +58,23 @@ onMounted(() => {
     computed({
       get() { return content.value },
       set(v) {
-        content.value = v
-        dirty.value = true
+        if (content.value.trim() !== v.trim()) {
+          content.value = v
+          dirty.value = true
+        }
       },
     }),
     {
       mode: 'markdown',
       lineWrapping: true,
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
+      onfocus() {
+        focused.value = true
+      },
+      onblur() {
+        focused.value = false
+      },
     },
   )
 
@@ -80,6 +92,12 @@ onMounted(() => {
       lineWrapping: true,
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
+      onfocus() {
+        focused.value = true
+      },
+      onblur() {
+        focused.value = false
+      },
     },
   )
 })

packages/client/state/index.ts

@@ -1,5 +1,5 @@
 import { useMagicKeys, useActiveElement, useStorage, useUrlSearchParams, useBreakpoints, breakpointsTailwind, useWindowSize, useFullscreen, useToggle, isClient } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 export const showOverview = ref(false)
 export const showRecordingDialog = ref(false)
@@ -15,7 +15,7 @@ export const isScreenVertical = computed(() => windowSize.width.value <= windowS
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
-export const isInputing = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
+export const isInputing = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
 
 export const currentCamera = useStorage<string>('slidev-camera', 'default')
 export const currentMic = useStorage<string>('slidev-mic', 'default')
@@ -27,3 +27,5 @@ export const editorWidth = useStorage('slidev-editor-width', isClient ? window.i
 export const isPrintMode = computed(() => query.print != null)
 
 export const toggleOverview = useToggle(showOverview)
+
+watch(activeElement, () => console.log(activeElement.value))