feat: enhance logging and error handling in backend and editor components

src/components/GhostTextOverlay.vue

@@ -7,6 +7,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
     suggestion: { type: String, default: '' },
@@ -15,6 +16,26 @@ const props = defineProps({
 
 const emit = defineEmits(['accept', 'dismiss'])
 
+onMounted(() => {
+    console.log('[GhostTextOverlay] Component mounted')
+    if (props.suggestion && props.position) {
+        console.log('[GhostTextOverlay] Suggestion visible:', props.suggestion.substring(0, 50))
+        console.log('[GhostTextOverlay] Position:', JSON.stringify(props.position))
+    }
+})
+
+onUnmounted(() => {
+    console.log('[GhostTextOverlay] Component unmounted')
+})
+
+watch([() => props.suggestion, () => props.position], ([newSuggestion, newPosition]) => {
+    console.log('[GhostTextOverlay] Props changed:', {
+        suggestionLength: newSuggestion?.length || 0,
+        hasPosition: !!newPosition,
+        positionKeys: newPosition ? Object.keys(newPosition) : []
+    })
+}, { immediate: true })
+
 const visible = computed(() => props.suggestion && props.position)
 
 const overlayStyle = computed(() => ({
@@ -31,7 +52,10 @@ const overlayStyle = computed(() => ({
     zIndex: 1000,
 }))
 
-const acceptSuggestion = () => emit('accept')
+const acceptSuggestion = () => {
+    console.log('[GhostTextOverlay] acceptSuggestion called')
+    emit('accept')
+}
 </script>
 
 <style scoped>

src/components/MilkdownEditor.vue

@@ -16,8 +16,9 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { Crepe } from '@milkdown/crepe'
+import { Crepe, rootCtx, defaultValueCtx } from '@milkdown/crepe'
 import GhostTextOverlay from './GhostTextOverlay.vue'
+import { createInlineSuggestionPlugin } from '../plugins/inlineSuggestionPlugin'
 
 const root = ref(null)
 const containerRef = ref(null)
@@ -25,11 +26,8 @@ let crepe = null
 
 const suggestion = ref('')
 const cursorRect = ref(null)
-let debounceTimer = null
-let lastPos = -1
 
 const API_URL = 'http://localhost:8000/v1/completions'
-const DEBOUNCE_MS = 150
 
 onMounted(async () => {
     console.log('[Debug] onMounted called')
@@ -39,9 +37,11 @@ onMounted(async () => {
     }
     
     console.log('[Debug] Creating Crepe editor...')
+    const inlineSuggestionPlugin = createInlineSuggestionPlugin({ apiUrl: API_URL })
     crepe = new Crepe({
         root: root.value,
-        defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
+        defaultValue: '# Welcome to Milkdown\n\nStart writing your markdown content here...',
+        plugins: [inlineSuggestionPlugin],
     })
     
     await crepe.create()
@@ -141,25 +141,14 @@ const onInput = async () => {
         const view = ctx.get('view')
         const { from } = view.state.selection
         
-        if (from === lastPos) {
-            console.log('[Debug] Same position, skipping')
-            return
-        }
-        lastPos = from
-        
         console.log('[Debug] onInput triggered at position:', from)
         
         const prefix = view.state.doc.textBetween(0, from)
         const suffix = view.state.doc.textBetween(from, view.state.doc.content.size)
         
-        console.log('[Debug] Prefix preview:', prefix.substring(-50))
-        
-        clearTimeout(debounceTimer)
-        debounceTimer = setTimeout(async () => {
-            cursorRect.value = await getCursorPosition()
-            suggestion.value = await fetchSuggestion(prefix, suffix)
-            console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
-        }, DEBOUNCE_MS)
+        cursorRect.value = await getCursorPosition()
+        suggestion.value = await fetchSuggestion(prefix, suffix)
+        console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
     } catch (e) {
         console.error('[Debug] onInput error:', e)
     }
@@ -201,31 +190,6 @@ const exportMarkdown = async () => {
     a.click()
     URL.revokeObjectURL(url)
 }
-
-// 监听 crepe 创建完成后绑定事件
-const initEditorEvents = () => {
-    if (!crepe) return
-    
-    try {
-        const ctx = crepe.ctx.get()
-        const view = ctx.get('view')
-        console.log('[Debug] Binding input event to editor DOM')
-        
-        // 直接在编辑器 DOM 上监听输入事件
-        view.dom.addEventListener('input', onInput)
-        view.dom.addEventListener('keydown', (e) => {
-            console.log('[Debug] Keydown:', e.key, 'code:', e.code)
-            if (e.key === 'Tab') {
-                handleTab()
-            }
-        })
-    } catch (e) {
-        console.error('[Debug] Failed to bind events:', e)
-    }
-}
-
-// 延迟初始化事件绑定
-setTimeout(initEditorEvents, 500)
 </script>
 
 <style scoped>