fix(editor): prevent md-engine text overwrite during rapid typing (#679)

Author: antonreshetov

src/renderer/components/editor/Editor.vue

@@ -43,7 +43,11 @@ const {
 } = useApp()
 const { editorThemeName } = useTheme()
 
-const { addToUpdateContentQueue } = useSnippetUpdate()
+const {
+  addToUpdateContentQueue,
+  getPendingContentUpdate,
+  isContentUpdateBusy,
+} = useSnippetUpdate()
 
 let editor: CodeMirror.Editor | null = null
 let currentSearchOverlay: any = null
@@ -223,8 +227,29 @@ async function init() {
   watch(selectedSnippetContent, (v, oldV) => {
     nextTick(() => {
       const isNewValue = v?.id !== oldV?.id
+      const isSameContent = v?.id === oldV?.id
+      const snippetId = selectedSnippet.value?.id
+      const contentId = v?.id
+      let nextValue = v?.value || ''
+
+      if (snippetId && contentId) {
+        const pendingUpdate = getPendingContentUpdate(snippetId, contentId)
+        if (pendingUpdate) {
+          nextValue = pendingUpdate.value || ''
+        }
+
+        if (
+          isSameContent
+          && isContentUpdateBusy(snippetId, contentId)
+          && editor
+          && editor.getValue() !== nextValue
+        ) {
+          return
+        }
+      }
+
       // Не сохраняем вьюпорт при смене фрагмента/сниппета
-      setValue(v?.value || '', true, !isNewValue)
+      setValue(nextValue, true, !isNewValue)
       nextTick(() => {
         if (searchQuery.value) {
           updateSearchOverlay()

src/renderer/composables/useSnippetUpdate.ts

@@ -22,6 +22,10 @@ const { updateSnippetContent, updateSnippet } = useSnippets()
 
 const updateQueue = ref<Map<string, UpdateQueueItem>>(new Map())
 const updateContentQueue = ref<Map<string, UpdateContentQueueItem>>(new Map())
+const contentUpdateTimers = ref<Map<string, ReturnType<typeof setTimeout>>>(
+  new Map(),
+)
+const inFlightContentKeys = ref<Set<string>>(new Set())
 
 const updateDebounced = useDebounceFn((snippetId: number) => {
   const key = `${snippetId}`
@@ -33,18 +37,47 @@ const updateDebounced = useDebounceFn((snippetId: number) => {
   }
 }, UPDATE_DEBOUNCE_TIME)
 
-const updateContentDebounced = useDebounceFn(
-  (snippetId: number, contentId: number) => {
-    const key = `${snippetId}-${contentId}`
-    const update = updateContentQueue.value.get(key)
+function getContentUpdateKey(snippetId: number, contentId: number) {
+  return `${snippetId}-${contentId}`
+}
+
+async function flushContentUpdate(key: string) {
+  const update = updateContentQueue.value.get(key)
+  if (!update) {
+    return
+  }
 
-    if (update) {
-      updateSnippetContent(update.snippetId, update.contentId, update.data)
-      updateContentQueue.value.delete(key)
+  updateContentQueue.value.delete(key)
+  inFlightContentKeys.value.add(key)
+
+  try {
+    await updateSnippetContent(update.snippetId, update.contentId, update.data)
+  }
+  catch (error) {
+    console.error(error)
+  }
+  finally {
+    inFlightContentKeys.value.delete(key)
+
+    if (updateContentQueue.value.has(key)) {
+      scheduleContentUpdate(key)
     }
-  },
-  UPDATE_DEBOUNCE_TIME,
-)
+  }
+}
+
+function scheduleContentUpdate(key: string) {
+  const pendingTimer = contentUpdateTimers.value.get(key)
+  if (pendingTimer) {
+    clearTimeout(pendingTimer)
+  }
+
+  const timer = setTimeout(() => {
+    contentUpdateTimers.value.delete(key)
+    void flushContentUpdate(key)
+  }, UPDATE_DEBOUNCE_TIME)
+
+  contentUpdateTimers.value.set(key, timer)
+}
 
 function addToUpdateQueue(snippetId: number, data: SnippetsUpdate) {
   const key = `${snippetId}`
@@ -57,14 +90,40 @@ function addToUpdateContentQueue(
   contentId: number,
   data: SnippetContentsAdd,
 ) {
-  const key = `${snippetId}-${contentId}`
+  const key = getContentUpdateKey(snippetId, contentId)
   updateContentQueue.value.set(key, { snippetId, contentId, data })
-  updateContentDebounced(snippetId, contentId)
+
+  if (inFlightContentKeys.value.has(key)) {
+    return
+  }
+
+  scheduleContentUpdate(key)
+}
+
+function getPendingContentUpdate(snippetId: number, contentId: number) {
+  const key = getContentUpdateKey(snippetId, contentId)
+  return updateContentQueue.value.get(key)?.data
+}
+
+function isContentUpdateBusy(snippetId: number, contentId: number) {
+  const key = getContentUpdateKey(snippetId, contentId)
+  return (
+    updateContentQueue.value.has(key) || inFlightContentKeys.value.has(key)
+  )
+}
+
+function hasBusyContentUpdates() {
+  return (
+    updateContentQueue.value.size > 0 || inFlightContentKeys.value.size > 0
+  )
 }
 
 export function useSnippetUpdate() {
   return {
     addToUpdateContentQueue,
     addToUpdateQueue,
+    getPendingContentUpdate,
+    hasBusyContentUpdates,
+    isContentUpdateBusy,
   }
 }

src/renderer/ipc/listeners/system.ts

@@ -1,4 +1,10 @@
-import { useApp, useFolders, useSnippets, useSonner } from '@/composables'
+import {
+  useApp,
+  useFolders,
+  useSnippets,
+  useSnippetUpdate,
+  useSonner,
+} from '@/composables'
 import { i18n, ipc } from '@/electron'
 import { router, RouterName } from '@/router'
 import { repository } from '../../../../package.json'
@@ -13,6 +19,7 @@ const {
 const { selectFolder, getFolders } = useFolders()
 const { selectSnippet, getSnippets, selectFirstSnippet, displayedSnippets }
   = useSnippets()
+const { hasBusyContentUpdates } = useSnippetUpdate()
 const { sonner } = useSonner()
 let storageSyncDebounceTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -39,6 +46,24 @@ async function refreshAfterStorageSync() {
   }
 }
 
+function scheduleStorageSyncRefresh() {
+  if (storageSyncDebounceTimer) {
+    clearTimeout(storageSyncDebounceTimer)
+    storageSyncDebounceTimer = null
+  }
+
+  storageSyncDebounceTimer = setTimeout(() => {
+    if (hasBusyContentUpdates()) {
+      scheduleStorageSyncRefresh()
+      return
+    }
+
+    refreshAfterStorageSync().catch((error) => {
+      console.error('Failed to refresh after storage sync:', error)
+    })
+  }, 300)
+}
+
 export function registerSystemListeners() {
   ipc.on('system:deep-link', async (_, url: string) => {
     try {
@@ -47,15 +72,18 @@ export function registerSystemListeners() {
       const snippetId = u.searchParams.get('snippetId')
 
       if (folderId && snippetId) {
+        const nextFolderId = Number(folderId)
+        const nextSnippetId = Number(snippetId)
+
         highlightedFolderIds.value.clear()
         highlightedSnippetIds.value.clear()
         focusedSnippetId.value = undefined
         focusedFolderId.value = undefined
 
-        await getSnippets({ folderId })
+        await getSnippets({ folderId: nextFolderId })
 
-        await selectFolder(Number(folderId))
-        selectSnippet(Number(snippetId))
+        await selectFolder(nextFolderId)
+        selectSnippet(nextSnippetId)
       }
     }
     catch (error) {
@@ -92,16 +120,7 @@ export function registerSystemListeners() {
   })
 
   ipc.on('system:storage-synced', () => {
-    if (storageSyncDebounceTimer) {
-      clearTimeout(storageSyncDebounceTimer)
-      storageSyncDebounceTimer = null
-    }
-
-    storageSyncDebounceTimer = setTimeout(() => {
-      refreshAfterStorageSync().catch((error) => {
-        console.error('Failed to refresh after storage sync:', error)
-      })
-    }, 300)
+    scheduleStorageSyncRefresh()
   })
 
   ipc.on('system:error', (_, payload) => {