From 27d1840a9de8fe9552d47e7f3ee55ba6ca643f82 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Wed, 22 Dec 2021 15:12:28 +0800
Subject: [PATCH] upd: optimize group tabs input experience

---
 src/renderer/components/Preview.vue        | 12 ++++++++----
 src/renderer/plugins/markdown-container.ts | 18 +++++++++++++++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/Preview.vue b/src/renderer/components/Preview.vue
index 6d907a70..fdb5056c 100644
--- a/src/renderer/components/Preview.vue
+++ b/src/renderer/components/Preview.vue
@@ -49,7 +49,7 @@ import { markdown } from '@fe/services/markdown'
 import { registerHook, removeHook, triggerHook } from '@fe/core/hook'
 import { registerAction, removeAction } from '@fe/core/action'
 import { revealLineInCenter } from '@fe/services/editor'
-import { showExport } from '@fe/services/document'
+import { showExport, toUri } from '@fe/services/document'
 import { getContextMenuItems, toggleAutoPreview } from '@fe/services/view'
 import { useContextMenu } from '@fe/support/ui/context-menu'
 import { useI18n } from '@fe/services/i18n'
@@ -76,6 +76,7 @@ export default defineComponent({
     const { currentContent, currentFile, autoPreview, presentation, inComposition } = toRefs(store.state)
     const fileName = computed(() => currentFile.value?.name)
     const filePath = computed(() => currentFile.value?.path)
+    const fileUri = computed(() => toUri(currentFile.value))
 
     const refViewWrapper = ref<HTMLElement | null>(null)
     const refView = ref<HTMLElement | null>(null)
@@ -102,6 +103,8 @@ export default defineComponent({
     let renderEnv: RenderEnv | null = null
     const getRenderEnv = () => renderEnv
 
+    let renderCount = 0
+
     function togglePinOutline () {
       pinOutline.value = !pinOutline.value
     }
@@ -165,7 +168,7 @@ export default defineComponent({
       }
 
       const startTime = performance.now()
-      renderEnv = { source: content, file: currentFile.value }
+      renderEnv = { source: content, file: currentFile.value, renderCount: renderCount++ }
       try {
         renderContent.value = markdown.render(content, renderEnv)
       } catch (error: any) {
@@ -287,11 +290,12 @@ export default defineComponent({
       window.removeEventListener('keydown', keydownHandler)
     })
 
-    watch([currentContent, filePath, inComposition], () => {
+    watch([currentContent, fileUri, inComposition], () => {
       autoPreview.value && updateRender()
     })
 
-    watch(filePath, () => {
+    watch(fileUri, () => {
+      renderCount = 0
       // file switched, turn on auto render preview.
       toggleAutoPreview(true)
       updateRender = debounce(render, 25)
diff --git a/src/renderer/plugins/markdown-container.ts b/src/renderer/plugins/markdown-container.ts
index 03b9f5e5..c941d89f 100644
--- a/src/renderer/plugins/markdown-container.ts
+++ b/src/renderer/plugins/markdown-container.ts
@@ -1,7 +1,7 @@
 import MarkdownItContainer from 'markdown-it-container'
 import { Fragment, h } from 'vue'
-import { Plugin } from '@fe/context'
 import type Token from 'markdown-it/lib/token'
+import { Plugin } from '@fe/context'
 
 export default {
   name: 'markdown-container',
@@ -138,7 +138,18 @@ export default {
     `)
 
     let groupItemIdx = 0
-    let groupItemName = 0
+    let groupItemSeq = 0
+    let groupItemBase = Date.now()
+    let groupItemName = groupItemBase + groupItemSeq
+
+    ctx.registerHook('MARKDOWN_BEFORE_RENDER', ({ env }) => {
+      // first render, reset count
+      if (env.renderCount === 0) {
+        groupItemBase = Date.now()
+      }
+
+      groupItemSeq = 0
+    })
 
     ctx.markdown.registerPlugin(md => {
       ['tip', 'warning', 'danger', 'details', 'group-item', 'group'].forEach(name => {
@@ -172,7 +183,8 @@ export default {
                 }
               } else if (name === 'group') {
                 groupItemIdx = 0
-                groupItemName++
+                groupItemSeq++
+                groupItemName = groupItemBase + groupItemSeq
               }
 
               const containerTag = name === 'details' ? 'details' : 'div'