refactor(editor): migrate to Milkdown with LaTeX support and clean up legacy code
- Removed old contenteditable-based MarkdownEditor component - Integrated Milkdown Crepe with LaTeX (KaTeX) rendering support - Simplified inline suggestion plugin using ProseMirror decorations - Removed debug logging and unused components (HelloWorld, plan files) - Increased debounce from 150ms to 500ms for better performance - Fixed SSE JSON serialization in backend main.py
This commit is contained in:
“ydy0615”
@@ -26,7 +26,7 @@
|
||||
- 基于 Milkdown Crepe 的所见即所得编辑体验
|
||||
- 支持完整的 Markdown 语法
|
||||
- 代码块高亮、图片粘贴等功能
|
||||
- 导出 Markdown 文件
|
||||
- **上传/导出 Markdown 文件**（底部图标按钮）
|
||||
|
||||
### 2. 智能行内建议
|
||||
- 实时监听用户输入
|
||||
@@ -38,7 +38,7 @@
|
||||
- **点击建议**：直接插入
|
||||
|
||||
### 3. 性能优化
|
||||
- 150ms 防抖机制，避免频繁请求
|
||||
- 500ms 防抖机制，避免频繁请求
|
||||
- 流式传输（SSE），降低延迟
|
||||
- 上下文智能截取（光标前30行 + 后5行）
|
||||
|
||||
@@ -148,36 +148,17 @@ data: {"done": true}
|
||||
|
||||
## 已知问题
|
||||
|
||||
### 🔴 严重问题（P0）
|
||||
### 待优化项（P1）
|
||||
|
||||
1. ~~模板语法错误~~ - 已修复
|
||||
- GhostTextOverlay 组件标签已正确使用尖括号
|
||||
1. 代码重复 - fetchSuggestion 逻辑在两个文件中重复
|
||||
2. 全局状态污染 - 插件使用模块级全局变量
|
||||
|
||||
2. ~~字符串截取错误~~ - 已修复
|
||||
- 代码使用 `slice()` 而非 `substring(-50)`
|
||||
### 轻微问题（P2）
|
||||
|
||||
3. ~~错误处理违反原则~~ - 已修复
|
||||
- 获取失败时会抛出错误而非返回空字符串
|
||||
|
||||
### 🟡 中等问题（P1）
|
||||
|
||||
4. ~~内存泄漏风险~~ - 已修复
|
||||
- 组件卸载时已清理 debounceTimer
|
||||
|
||||
5. ~~不可靠的事件绑定~~ - 已修复
|
||||
- 使用 500ms 防抖机制
|
||||
|
||||
6. 代码重复 - fetchSuggestion 逻辑在两个文件中重复
|
||||
7. 全局状态污染 - 插件使用模块级全局变量
|
||||
|
||||
### 🟢 轻微问题（P2）
|
||||
|
||||
8. 大量调试日志影响性能
|
||||
9. 缺少完整的类型定义
|
||||
10. 没有加载状态指示器
|
||||
11. 建议文本无长度限制
|
||||
12. API URL 硬编码在前端
|
||||
13. 后端缺少 CORS 配置
|
||||
3. 大量调试日志影响性能
|
||||
4. 缺少完整的类型定义
|
||||
5. 建议文本无长度限制
|
||||
6. API URL 硬编码在前端
|
||||
|
||||
## 开发指南
|
||||
|
||||
|
||||
+1
-2
@@ -123,9 +123,8 @@ async def create_completion(request: CompletionRequest):
|
||||
# 返回完整内容
|
||||
async def generate():
|
||||
if content:
|
||||
print(f"[LLM] Yielding full content: {repr(content)}")
|
||||
yield f"data: {json.dumps({'content': content})}\n\n"
|
||||
yield f"data: {{'done': true}}\n\n"
|
||||
yield f"data: {json.dumps({'done': true})}\n\n"
|
||||
|
||||
return StreamingResponse(generate(), media_type="text/event-stream")
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>llm-in-text</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Generated
+9
-8
@@ -2008,13 +2008,13 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
|
||||
"integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
|
||||
"version": "1.13.5",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
|
||||
"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.4",
|
||||
"follow-redirects": "^1.15.11",
|
||||
"form-data": "^4.0.5",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
@@ -2513,9 +2513,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.22",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
|
||||
"integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q=="
|
||||
"version": "4.17.23",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
|
||||
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/longest-streak": {
|
||||
"version": "3.1.0",
|
||||
|
||||
+2
-1
@@ -14,8 +14,9 @@
|
||||
"@milkdown/kit": "^7.18.0",
|
||||
"@milkdown/theme-nord": "^7.18.0",
|
||||
"@milkdown/vue": "^7.18.0",
|
||||
"axios": "^1.13.2",
|
||||
"katex": "^0.16.9",
|
||||
"markdown-it": "^13.0.0",
|
||||
"markdown-it-math": "^3.0.2",
|
||||
"pinia": "^2.3.1",
|
||||
"prismjs": "^1.29.0",
|
||||
"vue": "^3.5.24",
|
||||
|
||||
@@ -1,625 +0,0 @@
|
||||
# Inline Autocomplete Suggestions 实现计划
|
||||
|
||||
## 技术栈确认
|
||||
- **前端**: Vue3 + Milkdown Editor
|
||||
- **后端**: Python FastAPI
|
||||
- **LLM**: OpenAI API（流式响应）
|
||||
- **范围**: 基础流式补全，无需复杂缓存机制
|
||||
|
||||
## 系统架构
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph 前端 [Vue3 + Milkdown]
|
||||
E[Milkdown Editor]
|
||||
I[InlineSuggestionPlugin<br/>输入监听+防抖]
|
||||
G[GhostTextOverlay<br/>虚影渲染层]
|
||||
end
|
||||
|
||||
subgraph 后端 [FastAPI]
|
||||
API[/v1/completions<br/>补全接口]
|
||||
P[PromptBuilder<br/>上下文构建]
|
||||
L[OpenAI Client<br/>LLM调用]
|
||||
end
|
||||
|
||||
I -- "输入事件" --> G
|
||||
G -- "POST {prefix, suffix}" --> API
|
||||
API -- "流式响应" --> G
|
||||
```
|
||||
|
||||
## 实现步骤
|
||||
|
||||
### 1. 前端：创建 Inline Suggestion Plugin
|
||||
**文件**: `src/plugins/inlineSuggestionPlugin.ts`
|
||||
|
||||
#### 核心实现要点
|
||||
|
||||
```typescript
|
||||
import { Plugin, PluginKey } from '@milkdown/prose/state';
|
||||
import { EditorView } from '@milkdown/prose/view';
|
||||
|
||||
const INLINE_SUGGESTION_KEY = new PluginKey('inline-suggestion');
|
||||
const DEBOUNCE_MS = 500;
|
||||
|
||||
interface InlineSuggestionOptions {
|
||||
apiUrl?: string;
|
||||
onSuggestion?: (suggestion: string) => void;
|
||||
onError?: (error: Error) => void;
|
||||
}
|
||||
|
||||
interface SuggestionState {
|
||||
suggestion: string;
|
||||
visible: boolean;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
|
||||
const apiUrl = options.apiUrl || 'http://localhost:8000/v1/completions';
|
||||
const onSuggestion = options.onSuggestion || (() => {});
|
||||
const onError = options.onError || ((error) => console.error('Suggestion error:', error));
|
||||
|
||||
// 修复：使用插件状态管理，避免全局变量污染
|
||||
return new Plugin({
|
||||
key: INLINE_SUGGESTION_KEY,
|
||||
state: {
|
||||
init: () => ({ suggestion: '', visible: false, loading: false } as SuggestionState),
|
||||
apply: (tr, value) => {
|
||||
if (!tr.docChanged) return value;
|
||||
const { from, to } = tr.selection;
|
||||
// 如果光标位置没有变化，保持当前状态
|
||||
if (from === value.from && to === value.to) {
|
||||
return value;
|
||||
}
|
||||
// 光标位置变化，重置建议状态
|
||||
return { suggestion: '', visible: false, loading: false, from, to };
|
||||
},
|
||||
},
|
||||
props: {
|
||||
handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
|
||||
const state = INLINE_SUGGESTION_KEY.getState(view.state) as SuggestionState;
|
||||
|
||||
if (event.key === 'Tab' && state.visible) {
|
||||
event.preventDefault();
|
||||
if (state.suggestion) {
|
||||
view.dispatch(view.state.tr.insertText(state.suggestion, view.state.selection.from));
|
||||
// 重置状态
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
visible: false,
|
||||
loading: false
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (event.key === 'Escape' && state.visible) {
|
||||
event.preventDefault();
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
visible: false,
|
||||
loading: false
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
},
|
||||
appendTransaction: (transactions, oldState, newState) => {
|
||||
const lastTr = transactions[transactions.length - 1];
|
||||
if (!lastTr || !lastTr.docChanged) return null;
|
||||
|
||||
const { from, to } = newState.selection;
|
||||
const prefix = newState.doc.textBetween(0, from);
|
||||
const suffix = newState.doc.textBetween(to, newState.doc.content.size);
|
||||
|
||||
// 修复：使用插件级别的 debounce 管理
|
||||
let debounceTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(async () => {
|
||||
try {
|
||||
// 设置加载状态
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
visible: false,
|
||||
loading: true
|
||||
}));
|
||||
|
||||
const text = await fetchSuggestion(apiUrl, prefix, suffix);
|
||||
|
||||
// 检查光标位置是否仍然有效
|
||||
const currentState = INLINE_SUGGESTION_KEY.getState(newState) as SuggestionState;
|
||||
if (currentState.from === from && currentState.to === to) {
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: text,
|
||||
visible: true,
|
||||
loading: false
|
||||
}));
|
||||
onSuggestion(text);
|
||||
}
|
||||
} catch (e) {
|
||||
onError(e as Error);
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
visible: false,
|
||||
loading: false
|
||||
}));
|
||||
}
|
||||
}, DEBOUNCE_MS);
|
||||
|
||||
return null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 修复：提取共享的 fetchSuggestion 函数，避免代码重复
|
||||
async function fetchSuggestion(apiUrl: string, prefix: string, suffix: string): Promise<string> {
|
||||
const res = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
});
|
||||
|
||||
// 修复：遵循"获取失败直接报错"原则
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`API request failed: ${res.status} - ${errorText}`);
|
||||
}
|
||||
|
||||
const reader = res.body?.getReader();
|
||||
if (!reader) {
|
||||
throw new Error('No response body reader available');
|
||||
}
|
||||
|
||||
let text = '';
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
const chunk = new TextDecoder().decode(value);
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '));
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (data.content) {
|
||||
text += data.content;
|
||||
}
|
||||
if (data.done || data.error) break;
|
||||
} catch (e) {
|
||||
// 忽略 JSON 解析错误，继续处理下一行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
export { createInlineSuggestionPlugin, INLINE_SUGGESTION_KEY, fetchSuggestion };
|
||||
```
|
||||
|
||||
### 2. 前端：GhostText 渲染组件
|
||||
**文件**: `src/components/GhostTextOverlay.vue`
|
||||
|
||||
#### 核心实现要点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-if="visible" class="ghost-text-overlay" :style="overlayStyle"
|
||||
@click="acceptSuggestion"
|
||||
>
|
||||
{{ truncatedSuggestion }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
suggestion: { type: String, default: '' },
|
||||
position: { type: Object, required: true },
|
||||
maxLength: { type: Number, default: 200 }, // 修复：添加建议文本长度限制
|
||||
})
|
||||
|
||||
const emit = defineEmits(['accept', 'dismiss'])
|
||||
|
||||
const visible = computed(() => props.suggestion && props.position)
|
||||
|
||||
// 修复：截断过长的建议文本
|
||||
const truncatedSuggestion = computed(() => {
|
||||
if (props.suggestion.length > props.maxLength) {
|
||||
return props.suggestion.slice(0, props.maxLength) + '...'
|
||||
}
|
||||
return props.suggestion
|
||||
})
|
||||
|
||||
const overlayStyle = computed(() => ({
|
||||
position: 'absolute',
|
||||
left: `${props.position.left}px`,
|
||||
top: `${props.position.top}px`,
|
||||
fontSize: `${props.position.fontSize || 16}px`,
|
||||
fontFamily: props.position.fontFamily || 'monospace',
|
||||
color: '#999',
|
||||
backgroundColor: 'transparent',
|
||||
pointerEvents: 'auto',
|
||||
cursor: 'text',
|
||||
whiteSpace: 'pre-wrap',
|
||||
zIndex: 1000,
|
||||
}))
|
||||
|
||||
const acceptSuggestion = () => emit('accept')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ghost-text-overlay {
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ghost-text-overlay:hover {
|
||||
opacity: 1;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 3. 修改 MilkdownEditor 集成插件
|
||||
**文件**: `src/components/MilkdownEditor.vue`
|
||||
|
||||
#### 集成要点
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { Crepe } from '@milkdown/crepe'
|
||||
import GhostTextOverlay from './GhostTextOverlay.vue'
|
||||
import { createInlineSuggestionPlugin } from '../plugins/inlineSuggestionPlugin'
|
||||
|
||||
const root = ref(null)
|
||||
const containerRef = ref(null)
|
||||
let crepe = null
|
||||
|
||||
const suggestion = ref('')
|
||||
const cursorRect = ref(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 修复：使用环境变量配置 API URL
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/v1/completions'
|
||||
|
||||
onMounted(async () => {
|
||||
if (!root.value) return
|
||||
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
|
||||
})
|
||||
|
||||
await crepe.create()
|
||||
|
||||
// 注册 Inline Suggestion Plugin
|
||||
const plugin = createInlineSuggestionPlugin({
|
||||
apiUrl: API_URL,
|
||||
onSuggestion: (text) => {
|
||||
suggestion.value = text
|
||||
updateCursorPosition()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Suggestion error:', error)
|
||||
suggestion.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
crepe.ctx.get().updateState((state) => {
|
||||
return state.reconfigure({
|
||||
plugins: [...state.plugins, plugin]
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// 修复：组件卸载时清理资源
|
||||
onUnmounted(() => {
|
||||
if (crepe) {
|
||||
crepe.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
const updateCursorPosition = async () => {
|
||||
if (!crepe) return
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
|
||||
const coords = view.coordsAtPos(from)
|
||||
const containerRect = containerRef.value?.getBoundingClientRect()
|
||||
if (!containerRect) return
|
||||
|
||||
cursorRect.value = {
|
||||
left: coords.left - containerRect.left,
|
||||
top: coords.top - containerRect.top + window.scrollY,
|
||||
fontSize: 16,
|
||||
fontFamily: 'monospace',
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('updateCursorPosition error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const acceptSuggestion = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
suggestion.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const dismissSuggestion = () => {
|
||||
suggestion.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor-container" ref="containerRef">
|
||||
<div ref="root" class="milkdown-editor"></div>
|
||||
|
||||
<!-- 修复：正确的组件标签语法 -->
|
||||
<GhostTextOverlay
|
||||
v-if="suggestion && cursorRect"
|
||||
:suggestion="suggestion"
|
||||
:position="cursorRect"
|
||||
@accept="acceptSuggestion"
|
||||
@dismiss="dismissSuggestion"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 4. 后端：FastAPI 服务
|
||||
**文件**: `backend/main.py`
|
||||
|
||||
#### 核心实现要点
|
||||
|
||||
```python
|
||||
from fastapi import FastAPI, HTTPException
|
||||
from fastapi.responses import StreamingResponse
|
||||
from fastapi.middleware.cors import CORSMiddleware # 修复：添加 CORS 支持
|
||||
from pydantic import BaseModel
|
||||
import os
|
||||
import json
|
||||
|
||||
app = FastAPI()
|
||||
|
||||
# 修复：添加 CORS 中间件
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=["*"], # 生产环境应该限制具体域名
|
||||
allow_credentials=True,
|
||||
allow_methods=["*"],
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
class CompletionRequest(BaseModel):
|
||||
prefix: str
|
||||
suffix: str
|
||||
languageId: str = 'markdown'
|
||||
|
||||
def generate_stream(request: CompletionRequest):
|
||||
from prompt import build_prompt
|
||||
from llm import stream_openai
|
||||
|
||||
try:
|
||||
prompt = build_prompt(request.prefix, request.suffix)
|
||||
|
||||
async def gen():
|
||||
chunk_count = 0
|
||||
async for chunk in stream_openai(prompt):
|
||||
chunk_count += 1
|
||||
yield f"data: {chunk}\n\n"
|
||||
yield "data: {\"done\": true}\n\n"
|
||||
return gen()
|
||||
except Exception as e:
|
||||
# 修复：遵循"获取失败直接报错"原则
|
||||
error_msg = f"{{\"error\": \"{str(e)}\"}}"
|
||||
yield f"data: {error_msg}\n\n"
|
||||
raise # 重新抛出异常
|
||||
|
||||
@app.post("/v1/completions")
|
||||
async def create_completion(request: CompletionRequest):
|
||||
return StreamingResponse(generate_stream(request), media_type="text/event-stream")
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000)
|
||||
```
|
||||
|
||||
### 5. 后端：Prompt 构建和 LLM 调用
|
||||
**文件**: `backend/prompt.py`, `backend/llm.py`
|
||||
|
||||
#### Prompt 构建
|
||||
|
||||
```python
|
||||
import os
|
||||
from typing import Tuple
|
||||
|
||||
def build_prompt(prefix: str, suffix: str) -> str:
|
||||
"""
|
||||
构建用于代码补全的 Prompt。
|
||||
参考 completions-sample-code 的 extractPrompt 逻辑简化实现。
|
||||
"""
|
||||
MAX_CONTEXT_LINES = 30
|
||||
|
||||
prefix_lines = prefix.split('\n')
|
||||
suffix_lines = suffix.split('\n') if suffix else []
|
||||
|
||||
recent_prefix = '\n'.join(prefix_lines[-MAX_CONTEXT_LINES:])
|
||||
recent_suffix = '\n'.join(suffix_lines[:5])
|
||||
|
||||
prompt = f"""
|
||||
You are a helpful writing assistant. Continue the text naturally based on the context.
|
||||
|
||||
Context (before cursor):
|
||||
{recent_prefix}
|
||||
|
||||
Complete this:
|
||||
{suffix if suffix else '(cursor here)'}
|
||||
|
||||
Continue:"""
|
||||
|
||||
return prompt.strip()
|
||||
```
|
||||
|
||||
#### LLM 调用
|
||||
|
||||
```python
|
||||
import os
|
||||
from typing import AsyncGenerator
|
||||
from openai import AsyncOpenAI
|
||||
import json
|
||||
|
||||
api_key = os.getenv('OPENAI_API_KEY', 'ollama')
|
||||
base_url = os.getenv('OLLAMA_BASE_URL', 'http://localhost:11434/v1/')
|
||||
model = os.getenv('OLLAMA_MODEL', 'gpt-4')
|
||||
|
||||
client = AsyncOpenAI(api_key=api_key, base_url=base_url)
|
||||
|
||||
async def stream_openai(prompt: str) -> AsyncGenerator[str, None]:
|
||||
"""
|
||||
调用 OpenAI/Ollama API 并流式返回补全内容。
|
||||
参考 completions-sample-code 的 streaming 逻辑。
|
||||
"""
|
||||
try:
|
||||
stream = await client.chat.completions.create(
|
||||
model=model,
|
||||
messages=[{"role": "user", "content": prompt}],
|
||||
stream=True,
|
||||
max_tokens=128,
|
||||
temperature=0.2,
|
||||
)
|
||||
|
||||
chunk_count = 0
|
||||
async for chunk in stream:
|
||||
if chunk.choices[0].delta.content:
|
||||
content = chunk.choices[0].delta.content
|
||||
chunk_count += 1
|
||||
yield json.dumps({"content": content})
|
||||
|
||||
except Exception as e:
|
||||
# 修复：遵循"获取失败直接报错"原则
|
||||
yield json.dumps({"error": str(e)})
|
||||
raise # 重新抛出异常
|
||||
```
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
llm-in-text/
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── MilkdownEditor.vue [修改]
|
||||
│ ├── plugins/
|
||||
│ │ ├── inlineSuggestionPlugin.ts [修改]
|
||||
│ │ └── types.ts [新建]
|
||||
│ └── ...
|
||||
└── backend/
|
||||
├── main.py [修改]
|
||||
├── prompt.py [修改]
|
||||
├── llm.py [修改]
|
||||
└── requirements.txt [修改]
|
||||
```
|
||||
|
||||
## API 设计
|
||||
|
||||
### 请求
|
||||
```json
|
||||
POST /v1/completions
|
||||
{
|
||||
"prefix": "# Hello\n\nThis is ",
|
||||
"suffix": "",
|
||||
"languageId": "markdown"
|
||||
}
|
||||
```
|
||||
|
||||
### 响应（流式 SSE）
|
||||
```
|
||||
data: {"content": "a "}
|
||||
|
||||
data: {"content": "a te"}
|
||||
|
||||
data: {"content": "a test"}
|
||||
|
||||
data: {"done": true}
|
||||
```
|
||||
|
||||
## 已知问题及修复方案
|
||||
|
||||
### 🔴 严重问题（P0）
|
||||
|
||||
#### 1. 全局状态污染
|
||||
**位置**: `inlineSuggestionPlugin.ts:6-8`
|
||||
**问题**: 使用模块级全局变量，多个编辑器实例会共享状态
|
||||
**修复**: 使用 ProseMirror 插件的状态管理机制，每个插件实例维护自己的状态
|
||||
|
||||
#### 2. 错误处理违反原则
|
||||
**位置**: `llm.py:42-44`, `main.py:34-37`
|
||||
**问题**: 错误时只返回错误信息，不抛出异常
|
||||
**修复**: 遵循"获取失败直接报错"原则，在 yield 错误信息后重新抛出异常
|
||||
|
||||
### 🟡 中等问题（P1）
|
||||
|
||||
#### 3. 代码重复
|
||||
**问题**: `fetchSuggestion` 逻辑在两个文件中重复
|
||||
**修复**: 提取共享的 `fetchSuggestion` 函数，在插件和编辑器组件中复用
|
||||
|
||||
#### 4. 缺少 CORS 配置
|
||||
**问题**: 后端没有配置 CORS，可能导致跨域请求失败
|
||||
**修复**: 在 FastAPI 中添加 CORS 中间件
|
||||
|
||||
#### 5. 建议文本无长度限制
|
||||
**问题**: 建议文本可能过长，影响显示效果
|
||||
**修复**: 在 GhostTextOverlay 组件中添加 `maxLength` prop，截断过长的建议
|
||||
|
||||
### 🟢 轻微问题（P2）
|
||||
|
||||
#### 6. 缺少加载状态
|
||||
**问题**: 用户无法知道是否正在获取建议
|
||||
**修复**: 在插件状态中添加 `loading` 字段，在 UI 中显示加载指示器
|
||||
|
||||
#### 7. 缺少类型定义
|
||||
**问题**: TypeScript 代码中缺少完整的类型定义
|
||||
**修复**: 添加 `SuggestionState` 接口和完整的类型定义
|
||||
|
||||
#### 8. API URL 硬编码
|
||||
**问题**: API URL 硬编码在前端代码中
|
||||
**修复**: 使用环境变量 `VITE_API_URL` 配置 API URL
|
||||
|
||||
## 参考代码映射
|
||||
|
||||
| completions-sample-code | 本项目实现 |
|
||||
|------------------------|-----------|
|
||||
| `ghostText.ts getGhostText()` | 后端 LLM 调用逻辑 |
|
||||
| `inlineCompletion.ts GhostText` | 前端 Plugin 核心逻辑 |
|
||||
| `networking.ts postRequest()` | 后端 API 接口 |
|
||||
| `prompt/extractPrompt()` | 后端 Prompt 构建 |
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 错误处理
|
||||
- 遵循"获取失败直接报错"原则
|
||||
- 不返回默认值，不尝试隐藏报错信息
|
||||
- 在前端和后端都实现完整的错误处理
|
||||
|
||||
### 性能优化
|
||||
- 使用 150ms 防抖，避免频繁请求
|
||||
- 流式传输（SSE），降低延迟
|
||||
- 及时清理定时器和事件监听器
|
||||
|
||||
### 代码质量
|
||||
- 避免全局变量，使用插件状态管理
|
||||
- 提取共享逻辑，避免代码重复
|
||||
- 添加完整的类型定义
|
||||
- 移除调试日志或条件化输出
|
||||
|
||||
## 下一步
|
||||
确认计划后切换到 Code 模式开始实现。
|
||||
@@ -1,396 +0,0 @@
|
||||
# Milkdown 全屏 WYSIWYG Markdown 编辑器实施方案
|
||||
|
||||
## 项目概述
|
||||
|
||||
基于 `@milkdown/crepe` 实现全屏覆盖的所见即所得 Markdown 编辑器，替换现有的 contenteditable 编辑器。
|
||||
|
||||
## 技术选型
|
||||
|
||||
- **核心编辑器**: `@milkdown/crepe` - 功能完整的 WYSIWYG Markdown 编辑器
|
||||
- **Vue 集成**: `@milkdown/vue` - Vue 3 组件支持
|
||||
- **主题**: `frame`（简洁框架主题）
|
||||
|
||||
## 系统架构
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
A[App.vue] --> B[MilkdownProvider]
|
||||
B --> C[Milkdown Editor - Crepe]
|
||||
|
||||
subgraph "Crepe 核心功能"
|
||||
D[WYSWIYG 编辑体验]
|
||||
E[Markdown 语法即时渲染]
|
||||
F[斜杠命令菜单 Slash Commands]
|
||||
G[代码块高亮]
|
||||
H[图片粘贴支持]
|
||||
end
|
||||
|
||||
subgraph "集成功能"
|
||||
I[GhostTextOverlay<br/>建议文本显示]
|
||||
J[InlineSuggestionPlugin<br/>智能补全]
|
||||
end
|
||||
|
||||
C --> I
|
||||
C --> J
|
||||
```
|
||||
|
||||
## 实施步骤
|
||||
|
||||
### Step 1: 安装依赖包
|
||||
|
||||
```bash
|
||||
npm install @milkdown/crepe @milkdown/vue
|
||||
```
|
||||
|
||||
### Step 2: 创建 Milkdown 编辑器组件
|
||||
|
||||
**文件**: `src/components/MilkdownEditor.vue`
|
||||
|
||||
#### 核心实现要点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="editor-container" ref="containerRef">
|
||||
<button class="export-btn" @click="exportMarkdown">导出文件</button>
|
||||
|
||||
<div ref="root" class="milkdown-editor"></div>
|
||||
|
||||
<!-- 修复：正确的组件标签语法 -->
|
||||
<GhostTextOverlay
|
||||
v-if="suggestion && cursorRect"
|
||||
:suggestion="suggestion"
|
||||
:position="cursorRect"
|
||||
@accept="acceptSuggestion"
|
||||
@dismiss="dismissSuggestion"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { Crepe } from '@milkdown/crepe'
|
||||
import GhostTextOverlay from './GhostTextOverlay.vue'
|
||||
|
||||
const root = ref(null)
|
||||
const containerRef = ref(null)
|
||||
let crepe = null
|
||||
|
||||
const suggestion = ref('')
|
||||
const cursorRect = ref(null)
|
||||
let debounceTimer = null
|
||||
let lastPos = -1
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/v1/completions'
|
||||
const DEBOUNCE_MS = 500
|
||||
|
||||
onMounted(async () => {
|
||||
if (!root.value) return
|
||||
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
|
||||
})
|
||||
|
||||
await crepe.create()
|
||||
|
||||
// 修复：使用更可靠的事件绑定方式
|
||||
initEditorEvents()
|
||||
})
|
||||
|
||||
// 修复：组件卸载时清理资源
|
||||
onUnmounted(() => {
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer)
|
||||
}
|
||||
if (crepe) {
|
||||
crepe.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
const getCursorPosition = async () => {
|
||||
if (!crepe) return null
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
|
||||
const coords = view.coordsAtPos(from)
|
||||
const containerRect = containerRef.value?.getBoundingClientRect()
|
||||
if (!containerRect) return null
|
||||
|
||||
return {
|
||||
left: coords.left - containerRect.left,
|
||||
top: coords.top - containerRect.top + window.scrollY,
|
||||
fontSize: 16,
|
||||
fontFamily: 'monospace',
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('getCursorPosition error:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const fetchSuggestion = async (prefix, suffix) => {
|
||||
try {
|
||||
const res = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
})
|
||||
|
||||
// 修复：遵循"获取失败直接报错"原则
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text()
|
||||
throw new Error(`API request failed: ${res.status} - ${errorText}`)
|
||||
}
|
||||
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) {
|
||||
throw new Error('No response body reader available')
|
||||
}
|
||||
|
||||
let text = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = new TextDecoder().decode(value)
|
||||
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '))
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6))
|
||||
if (data.content) {
|
||||
text += data.content
|
||||
}
|
||||
if (data.done || data.error) break
|
||||
} catch (e) {
|
||||
// 忽略 JSON 解析错误，继续处理下一行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return text
|
||||
} catch (e) {
|
||||
// 修复：直接抛出错误，不返回空字符串
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
const onInput = async () => {
|
||||
if (!crepe) return
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
|
||||
if (from === lastPos) return
|
||||
lastPos = from
|
||||
|
||||
const prefix = view.state.doc.textBetween(0, from)
|
||||
const suffix = view.state.doc.textBetween(from, view.state.doc.content.size)
|
||||
|
||||
// 修复：使用正确的字符串截取方法
|
||||
console.log('Prefix preview:', prefix.slice(-50))
|
||||
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(async () => {
|
||||
try {
|
||||
cursorRect.value = await getCursorPosition()
|
||||
suggestion.value = await fetchSuggestion(prefix, suffix)
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch suggestion:', e)
|
||||
suggestion.value = ''
|
||||
}
|
||||
}, DEBOUNCE_MS)
|
||||
} catch (e) {
|
||||
console.error('onInput error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTab = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
suggestion.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const dismissSuggestion = () => {
|
||||
suggestion.value = ''
|
||||
}
|
||||
|
||||
const acceptSuggestion = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
suggestion.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const exportMarkdown = async () => {
|
||||
if (!crepe) return
|
||||
const markdown = await crepe.getMarkdown()
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `document-${Date.now()}.md`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
// 修复：使用更可靠的事件绑定方式
|
||||
const initEditorEvents = () => {
|
||||
if (!crepe) return
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
|
||||
// 直接在编辑器 DOM 上监听输入事件
|
||||
view.dom.addEventListener('input', onInput)
|
||||
view.dom.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
handleTab()
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('Failed to bind events:', e)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
background-color: #3a7bc8;
|
||||
}
|
||||
|
||||
.milkdown-editor {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(.milkdown) {
|
||||
max-width: 900px;
|
||||
margin: 0 auto !important;
|
||||
padding: 20px 40px !important;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(*) {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Step 3: 更新 App.vue
|
||||
|
||||
- 移除旧的 `MarkdownEditor` 组件引用
|
||||
- 使用新的 `MilkdownEditor` 组件
|
||||
- 保持全屏布局（100vh × 100vw）
|
||||
|
||||
### Step 4: 添加样式配置
|
||||
|
||||
在 `main.js` 中导入 Crepe 主题：
|
||||
```js
|
||||
import '@milkdown/crepe/theme/common/style.css'
|
||||
import '@milkdown/crepe/theme/frame.css'
|
||||
```
|
||||
|
||||
## 已知问题及修复方案
|
||||
|
||||
### 🔴 严重问题（P0）
|
||||
|
||||
~~1. 模板语法错误~~ ✅ 已修复
|
||||
- GhostTextOverlay 组件标签已正确使用尖括号
|
||||
|
||||
~~2. 字符串截取错误~~ ✅ 已修复
|
||||
- 代码使用 `slice()` 而非 `substring(-50)`
|
||||
|
||||
~~3. 错误处理违反原则~~ ✅ 已修复
|
||||
- 获取失败时会抛出错误而非返回空字符串
|
||||
|
||||
### 🟡 中等问题（P1）
|
||||
|
||||
~~4. 内存泄漏风险~~ ✅ 已修复
|
||||
- 组件卸载时已清理 debounceTimer
|
||||
|
||||
~~5. 不可靠的事件绑定~~ ✅ 已修复
|
||||
- 使用 500ms 防抖机制
|
||||
|
||||
6. 代码重复
|
||||
- fetchSuggestion 逻辑在两个文件中重复
|
||||
|
||||
7. 全局状态污染
|
||||
- 插件使用模块级全局变量
|
||||
|
||||
### 🟢 轻微问题（P2）
|
||||
|
||||
8. 大量调试日志影响性能
|
||||
9. 缺少完整的类型定义
|
||||
10. 没有加载状态指示器
|
||||
11. 建议文本无长度限制
|
||||
12. API URL 硬编码在前端
|
||||
13. 后端缺少 CORS 配置
|
||||
|
||||
## 全屏覆盖样式要点
|
||||
|
||||
- 编辑器容器: `width: 100vw; height: 100vh`
|
||||
- 移除默认 padding/margin
|
||||
- 纯编辑器模式，无预览面板
|
||||
- 自定义滚动条样式
|
||||
|
||||
## 性能优化建议
|
||||
|
||||
1. **防抖优化**: 保持 500ms 防抖，避免频繁请求
|
||||
2. **流式响应**: 使用 SSE 流式传输，降低延迟
|
||||
3. **上下文截取**: 智能截取上下文（光标前30行 + 后5行）
|
||||
4. **内存管理**: 及时清理定时器和事件监听器
|
||||
5. **代码精简**: 移除冗余代码和注释
|
||||
|
||||
## 测试要点
|
||||
|
||||
1. 编辑器基本功能测试
|
||||
2. 建议功能测试（Tab 接受、Esc 取消、点击接受）
|
||||
3. 错误处理测试（网络错误、API 错误）
|
||||
4. 性能测试（大量文本输入）
|
||||
5. 内存泄漏测试（长时间使用）
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div v-if="visible" class="ghost-text-overlay" :style="overlayStyle"
|
||||
@click="acceptSuggestion"
|
||||
>{{ truncatedSuggestion }}
|
||||
<div v-if="visible" class="ghost-text-overlay" :style="overlayStyle" @click="acceptSuggestion">
|
||||
{{ displayText }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -9,39 +8,37 @@
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
suggestion: { type: String, default: '' },
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => typeof value.left === 'number' && typeof value.top === 'number'
|
||||
}
|
||||
suggestion: { type: String, default: '' },
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => typeof value.left === 'number' && typeof value.top === 'number'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['accept', 'dismiss'])
|
||||
|
||||
const MAX_SUGGESTION_LENGTH = 200
|
||||
const MAX_LENGTH = 200
|
||||
|
||||
const visible = computed(() => props.suggestion && props.position)
|
||||
const visible = computed(() => props.suggestion && props.suggestion.length > 0)
|
||||
|
||||
const truncatedSuggestion = computed(() => {
|
||||
if (props.suggestion.length > MAX_SUGGESTION_LENGTH) {
|
||||
return props.suggestion.slice(0, MAX_SUGGESTION_LENGTH) + '...'
|
||||
}
|
||||
return props.suggestion
|
||||
const displayText = computed(() => {
|
||||
const text = props.suggestion
|
||||
return text.length > MAX_LENGTH ? text.slice(0, MAX_LENGTH) + '...' : text
|
||||
})
|
||||
|
||||
const overlayStyle = computed(() => ({
|
||||
position: 'absolute',
|
||||
left: `${props.position.left}px`,
|
||||
top: `${props.position.top}px`,
|
||||
fontSize: `${props.position.fontSize || 16}px`,
|
||||
fontFamily: props.position.fontFamily || 'monospace',
|
||||
color: '#999',
|
||||
backgroundColor: 'transparent',
|
||||
pointerEvents: 'auto',
|
||||
cursor: 'text',
|
||||
whiteSpace: 'pre-wrap',
|
||||
zIndex: 1000,
|
||||
position: 'absolute',
|
||||
left: `${props.position.left}px`,
|
||||
top: `${props.position.top}px`,
|
||||
fontSize: `${props.position.fontSize || 16}px`,
|
||||
fontFamily: props.position.fontFamily || 'monospace',
|
||||
color: '#999',
|
||||
backgroundColor: 'transparent',
|
||||
pointerEvents: 'auto',
|
||||
cursor: 'text',
|
||||
whiteSpace: 'pre-wrap',
|
||||
zIndex: 1000,
|
||||
}))
|
||||
|
||||
const acceptSuggestion = () => emit('accept')
|
||||
@@ -49,12 +46,12 @@ const acceptSuggestion = () => emit('accept')
|
||||
|
||||
<style scoped>
|
||||
.ghost-text-overlay {
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ghost-text-overlay:hover {
|
||||
opacity: 1;
|
||||
color: #666;
|
||||
opacity: 1;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -1,642 +0,0 @@
|
||||
<template>
|
||||
<div class="editor-wrapper" ref="wrapperRef">
|
||||
<!-- Ghost Text 建议覆盖层 -->
|
||||
<GhostTextOverlay
|
||||
v-if="suggestion"
|
||||
:suggestion="suggestion"
|
||||
:position="suggestionPosition"
|
||||
@accept="acceptSuggestion"
|
||||
@dismiss="dismissSuggestion"
|
||||
/>
|
||||
|
||||
<!-- 单栏编辑器 -->
|
||||
<div
|
||||
ref="editorRef"
|
||||
contenteditable="true"
|
||||
class="editor"
|
||||
:class="{ 'editing-code': editingCodeBlock }"
|
||||
@input="onInput"
|
||||
@keydown="handleKeydown"
|
||||
@click="onEditorClick"
|
||||
@paste="handlePaste"
|
||||
spellcheck="false"
|
||||
></div>
|
||||
|
||||
<!-- 代码块编辑弹窗 -->
|
||||
<Teleport to="body">
|
||||
<div v-if="editingCodeBlock" class="code-modal" @click.self="closeCodeBlock">
|
||||
<div class="code-editor">
|
||||
<textarea
|
||||
ref="codeTextareaRef"
|
||||
v-model="codeBlockContent"
|
||||
placeholder="Enter code..."
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<button class="save-btn" @click="saveCodeBlock">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- 图片预览弹窗 -->
|
||||
<Teleport to="body">
|
||||
<div v-if="expandedImage" class="image-modal" @click="expandedImage = null">
|
||||
<img :src="expandedImage.src" :alt="expandedImage.alt" />
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- 插件挂载点 -->
|
||||
<PluginHost />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { plugins } from '../plugins/index'
|
||||
import PluginHost from './PluginHost.vue'
|
||||
import GhostTextOverlay from './GhostTextOverlay.vue'
|
||||
import markdownIt from 'markdown-it'
|
||||
import Prism from 'prismjs'
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
|
||||
|
||||
const emit = defineEmits(['update:html'])
|
||||
|
||||
/* ---------- 插件挂载点 ---------- */
|
||||
const pluginContext = {}
|
||||
onMounted(() => {
|
||||
plugins.forEach(p => {
|
||||
if (p.onSetup) p.onSetup(pluginContext)
|
||||
})
|
||||
})
|
||||
|
||||
/* ---------- Markdown 解析器 ---------- */
|
||||
const md = markdownIt({
|
||||
highlight: (code, lang) => {
|
||||
if (lang && Prism.languages[lang]) {
|
||||
return `<pre class="language-${lang}" data-code="${encodeURIComponent(code)}"><code>${Prism.highlight(code, Prism.languages[lang], lang)}</code></pre>`
|
||||
}
|
||||
return `<pre class="language-text" data-code="${encodeURIComponent(code)}"><code>${md.utils.escapeHtml(code)}</code></pre>`
|
||||
}
|
||||
})
|
||||
|
||||
/* ---------- 编辑器状态 ---------- */
|
||||
const editorRef = ref(null)
|
||||
const codeTextareaRef = ref(null)
|
||||
const wrapperRef = ref(null)
|
||||
const markdown = ref('')
|
||||
const renderedHtml = ref('')
|
||||
let debounceTimer = null
|
||||
|
||||
/* ---------- 编辑状态标记 ---------- */
|
||||
const isEditing = ref(false)
|
||||
|
||||
/* ---------- 代码块编辑状态 ---------- */
|
||||
const editingCodeBlock = ref(false)
|
||||
const codeBlockContent = ref('')
|
||||
const currentCodeElement = ref(null)
|
||||
|
||||
/* ---------- Ghost Text 建议 ---------- */
|
||||
const suggestion = ref('')
|
||||
const suggestionPosition = ref({ left: 0, top: 0 })
|
||||
let completionController = null
|
||||
|
||||
/* ---------- 图片预览 ---------- */
|
||||
const expandedImage = ref(null)
|
||||
|
||||
/* ---------- 光标位置管理 ---------- */
|
||||
function getCursorPosition() {
|
||||
const sel = window.getSelection()
|
||||
if (!sel.rangeCount || !editorRef.value) return null
|
||||
|
||||
try {
|
||||
const range = sel.getRangeAt(0)
|
||||
if (!range) return null
|
||||
|
||||
// 检查是否在代码块内（使用 commonAncestorContainer.closest）
|
||||
const container = range.commonAncestorContainer
|
||||
const codeBlock = container.nodeType === Node.ELEMENT_NODE
|
||||
? container.closest('pre')
|
||||
: container.parentElement?.closest('pre')
|
||||
if (codeBlock) {
|
||||
return { type: 'code', element: codeBlock }
|
||||
}
|
||||
|
||||
// 获取光标位置的坐标
|
||||
const rect = range.getBoundingClientRect()
|
||||
const editorRect = editorRef.value.getBoundingClientRect()
|
||||
|
||||
return {
|
||||
type: 'text',
|
||||
range: range.cloneRange(),
|
||||
left: rect.left - editorRect.left,
|
||||
top: rect.top - editorRect.top + window.scrollY
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('getCursorPosition error:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function getPrefixSuffix(cursorRange) {
|
||||
const fullText = markdown.value
|
||||
if (!cursorRange || !cursorRange.range) return { prefix: fullText, suffix: '' }
|
||||
|
||||
// 获取光标在纯文本中的位置
|
||||
const preCaretRange = cursorRange.range.cloneRange()
|
||||
preCaretRange.selectNodeContents(editorRef.value)
|
||||
preCaretRange.setEnd(cursorRange.range.startContainer, cursorRange.range.startOffset)
|
||||
const prefix = preCaretRange.toString()
|
||||
|
||||
// 获取 suffix（光标后的内容）
|
||||
const postCaretRange = cursorRange.range.cloneRange()
|
||||
postCaretRange.setStartAfter(cursorRange.range.endContainer, cursorRange.range.endOffset)
|
||||
const suffix = postCaretRange.toString()
|
||||
|
||||
return { prefix, suffix }
|
||||
}
|
||||
|
||||
function saveSelection() {
|
||||
const sel = window.getSelection()
|
||||
if (!sel.rangeCount) return null
|
||||
|
||||
try {
|
||||
const range = sel.getRangeAt(0)
|
||||
if (!range) return null
|
||||
|
||||
// 检查是否在代码块内
|
||||
const container = range.commonAncestorContainer
|
||||
const codeBlock = container.nodeType === Node.ELEMENT_NODE
|
||||
? container.closest('pre')
|
||||
: container.parentElement?.closest('pre')
|
||||
if (codeBlock) {
|
||||
return { type: 'code', element: codeBlock }
|
||||
}
|
||||
|
||||
return { type: 'text', range: range.cloneRange() }
|
||||
} catch (e) {
|
||||
console.error('saveSelection error:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function restoreSelection(saved) {
|
||||
if (!saved || !editorRef.value) return
|
||||
|
||||
const sel = window.getSelection()
|
||||
sel.removeAllRanges()
|
||||
|
||||
if (saved.type === 'code') {
|
||||
// 代码块不需要恢复光标
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
sel.addRange(saved.range)
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
/* ---------- Ghost Text 请求 ---------- */
|
||||
async function requestCompletion(prefix, suffix) {
|
||||
if (completionController) {
|
||||
completionController.abort()
|
||||
}
|
||||
|
||||
try {
|
||||
completionController = new AbortController()
|
||||
const response = await fetch(`${API_URL}/v1/completions`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
signal: completionController.signal
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Completion request failed')
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let content = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = decoder.decode(value)
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '))
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6))
|
||||
if (data.content) content += data.content
|
||||
if (data.done) break
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
return content
|
||||
} catch (e) {
|
||||
if (e.name !== 'AbortError') console.error('Completion error:', e)
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
async function onInput(e) {
|
||||
isEditing.value = true
|
||||
const content = getPlainText()
|
||||
markdown.value = content
|
||||
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(async () => {
|
||||
renderMarkdown()
|
||||
|
||||
// 请求补全建议
|
||||
const cursorPos = getCursorPosition()
|
||||
if (cursorPos && cursorPos.type === 'text') {
|
||||
const { prefix, suffix } = getPrefixSuffix(cursorPos)
|
||||
suggestion.value = await requestCompletion(prefix, suffix)
|
||||
if (suggestion.value) {
|
||||
suggestionPosition.value = { left: cursorPos.left, top: cursorPos.top }
|
||||
}
|
||||
}
|
||||
|
||||
isEditing.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function acceptSuggestion() {
|
||||
if (!suggestion.value) return
|
||||
insertAtCursor(suggestion.value)
|
||||
suggestion.value = ''
|
||||
onInput()
|
||||
}
|
||||
|
||||
function dismissSuggestion() {
|
||||
suggestion.value = ''
|
||||
}
|
||||
|
||||
/* ---------- 防抖渲染 ---------- */
|
||||
function renderMarkdown() {
|
||||
let html = md.render(markdown.value)
|
||||
|
||||
const afterPayload = { markdown: markdown.value, html }
|
||||
plugins.forEach(p => {
|
||||
if (p.onAfterParse) {
|
||||
const res = p.onAfterParse(afterPayload)
|
||||
if (res && res.html) afterPayload.html = res.html
|
||||
}
|
||||
})
|
||||
|
||||
const beforePayload = { html: afterPayload.html }
|
||||
plugins.forEach(p => {
|
||||
if (p.onBeforeRender) {
|
||||
const res = p.onBeforeRender(beforePayload)
|
||||
if (res && res.html) beforePayload.html = res.html
|
||||
}
|
||||
})
|
||||
|
||||
renderedHtml.value = beforePayload.html
|
||||
|
||||
nextTick(() => {
|
||||
bindImageClick()
|
||||
emit('update:html', beforePayload.html)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/* ---------- 从 contenteditable 获取纯文本 ---------- */
|
||||
function getPlainText() {
|
||||
if (!editorRef.value) return ''
|
||||
|
||||
let text = ''
|
||||
const walker = document.createTreeWalker(
|
||||
editorRef.value,
|
||||
NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
|
||||
null,
|
||||
false
|
||||
)
|
||||
|
||||
while (walker.nextNode()) {
|
||||
const node = walker.currentNode
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
text += node.textContent
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
const tag = node.tagName.toLowerCase()
|
||||
|
||||
// 处理代码块
|
||||
if (tag === 'pre') {
|
||||
const code = decodeURIComponent(node.dataset.code || '')
|
||||
text += `\`\`\`\n${code}\n\`\`\`\n`
|
||||
}
|
||||
// 处理标题
|
||||
else if (tag.startsWith('h') && tag.length === 2) {
|
||||
const level = parseInt(tag[1])
|
||||
text += '#'.repeat(level) + ' ' + node.textContent + '\n'
|
||||
}
|
||||
// 处理粗体
|
||||
else if (tag === 'strong' || tag === 'b') {
|
||||
text += `**${node.textContent}**`
|
||||
}
|
||||
// 处理斜体
|
||||
else if (tag === 'em' || tag === 'i') {
|
||||
text += `_${node.textContent}_`
|
||||
}
|
||||
// 处理删除线
|
||||
else if (tag === 'del' || tag === 's') {
|
||||
text += `~~${node.textContent}~~`
|
||||
}
|
||||
// 处理行内代码
|
||||
else if (tag === 'code' && !node.closest('pre')) {
|
||||
text += `\`${node.textContent}\``
|
||||
}
|
||||
// 处理链接
|
||||
else if (tag === 'a') {
|
||||
text += `[${node.textContent}](${node.href})`
|
||||
}
|
||||
// 处理图片
|
||||
else if (tag === 'img') {
|
||||
text += ``
|
||||
}
|
||||
// 处理段落和换行
|
||||
else if (['p', 'div', 'blockquote'].includes(tag)) {
|
||||
text += '\n'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return text.trim()
|
||||
}
|
||||
|
||||
/* ---------- 图片点击预览 ---------- */
|
||||
function bindImageClick() {
|
||||
const editor = editorRef.value
|
||||
if (!editor) return
|
||||
|
||||
editor.onclick = (e) => {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
expandedImage.value = { src: e.target.src, alt: e.target.alt }
|
||||
} else if (e.target.tagName === 'PRE' && !editingCodeBlock.value) {
|
||||
// 点击代码块进入编辑模式
|
||||
openCodeBlock(e.target)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onEditorClick(e) {
|
||||
bindImageClick()
|
||||
}
|
||||
|
||||
/* ---------- 代码块编辑 ---------- */
|
||||
function openCodeBlock(preElement) {
|
||||
isEditing.value = true
|
||||
currentCodeElement.value = preElement
|
||||
codeBlockContent.value = decodeURIComponent(preElement.dataset.code || '')
|
||||
editingCodeBlock.value = true
|
||||
|
||||
nextTick(() => {
|
||||
if (codeTextareaRef.value) {
|
||||
codeTextareaRef.value.focus()
|
||||
codeTextareaRef.value.select()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeCodeBlock() {
|
||||
editingCodeBlock.value = false
|
||||
isEditing.value = false
|
||||
currentCodeElement.value = null
|
||||
}
|
||||
|
||||
function saveCodeBlock() {
|
||||
isEditing.value = true
|
||||
if (!currentCodeElement) return
|
||||
|
||||
const newHtml = md.options.highlight(codeBlockContent.value, '')
|
||||
currentCodeElement.innerHTML = newHtml.replace(/<pre class="[^"]*"><code>.*<\/code><\/pre>/,
|
||||
`<code>${md.utils.escapeHtml(codeBlockContent.value)}</code>`)
|
||||
currentCodeElement.dataset.code = encodeURIComponent(codeBlockContent.value)
|
||||
|
||||
// 更新 markdown 内容
|
||||
const codeMatch = markdown.value.match(/```[\s\S]*?```/)
|
||||
if (codeMatch) {
|
||||
markdown.value = markdown.value.replace(codeMatch[0], `\`\`\`\n${codeBlockContent.value}\n\`\`\``)
|
||||
}
|
||||
|
||||
closeCodeBlock()
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
/* ---------- 粘贴处理 ---------- */
|
||||
function handlePaste(e) {
|
||||
e.preventDefault()
|
||||
const text = (e.clipboardData || window.clipboardData).getData('text/plain')
|
||||
|
||||
document.execCommand('insertText', false, text)
|
||||
}
|
||||
|
||||
/* ---------- 快捷键 ---------- */
|
||||
function insertAtCursor(text) {
|
||||
const sel = window.getSelection()
|
||||
if (!sel.rangeCount) return
|
||||
|
||||
const range = sel.getRangeAt(0)
|
||||
range.deleteContents()
|
||||
const textNode = document.createTextNode(text)
|
||||
range.insertNode(textNode)
|
||||
|
||||
range.setStartAfter(textNode)
|
||||
range.collapse(true)
|
||||
sel.removeAllRanges()
|
||||
sel.addRange(range)
|
||||
}
|
||||
|
||||
function handleKeydown(e) {
|
||||
// 代码块编辑模式下不处理快捷键
|
||||
if (editingCodeBlock.value) return
|
||||
|
||||
if (e.ctrlKey && !e.shiftKey) {
|
||||
const key = e.key.toLowerCase()
|
||||
|
||||
if (key >= '1' && key <= '6') {
|
||||
e.preventDefault()
|
||||
insertAtCursor('#'.repeat(parseInt(key)) + ' ')
|
||||
onInput()
|
||||
return
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case 'b':
|
||||
e.preventDefault()
|
||||
insertAtCursor('**粗体**')
|
||||
break
|
||||
case 'i':
|
||||
e.preventDefault()
|
||||
insertAtCursor('_斜体_')
|
||||
break
|
||||
case 'k':
|
||||
e.preventDefault()
|
||||
insertAtCursor('[链接文本](url)')
|
||||
break
|
||||
}
|
||||
} else if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
insertAtCursor(' ')
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 初始化 ---------- */
|
||||
onMounted(() => {
|
||||
const initialMarkdown = '# Welcome to Markdown Editor\n\nStart typing...'
|
||||
markdown.value = initialMarkdown
|
||||
renderMarkdown()
|
||||
})
|
||||
|
||||
/* ---------- 插件钩子 ---------- */
|
||||
watch(markdown, () => {
|
||||
if (!editingCodeBlock.value) {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
renderMarkdown()
|
||||
}, 100)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
/* ---------- 渲染结果应用到编辑器 ---------- */
|
||||
watch(renderedHtml, (newHtml) => {
|
||||
if (editorRef.value && newHtml && !isEditing.value) {
|
||||
editorRef.value.innerHTML = newHtml
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-wrapper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem 2rem;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 代码块样式 */
|
||||
.editor :deep(pre) {
|
||||
background: #f5f5f5;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editor :deep(pre):hover::after {
|
||||
content: '点击编辑';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: rgba(255,255,255,0.9);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.editor :deep(code) {
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 行内代码 */
|
||||
.editor :deep(p > code),
|
||||
.editor :deep(a > code) {
|
||||
background: #f0f0f0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.editor :deep(img) {
|
||||
max-width: 100%;
|
||||
cursor: zoom-in;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.editor :deep(a) {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.editor :deep(blockquote) {
|
||||
border-left: 4px solid #ddd;
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 代码块编辑弹窗 */
|
||||
.code-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
background: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.code-editor textarea {
|
||||
flex: 1;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
margin-top: 0.5rem;
|
||||
padding: 8px 16px;
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* 图片弹窗 */
|
||||
.image-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.image-modal img {
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="preview-container" v-html="renderedContent"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import katex from 'katex'
|
||||
import 'katex/dist/katex.min.css'
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
})
|
||||
|
||||
// 预处理 markdown，转换 $...$ 为 <span class="math-inline">...</span>
|
||||
const preprocessLatex = (text) => {
|
||||
// 处理 $$...$$ 块级公式
|
||||
text = text.replace(/\$\$([\s\S]*?)\$\$/g, (match, content) => {
|
||||
try {
|
||||
const html = katex.renderToString(content.trim(), {
|
||||
displayMode: true,
|
||||
throwOnError: false
|
||||
})
|
||||
return `<div class="math-block">${html}</div>`
|
||||
} catch (e) {
|
||||
return `<div class="math-error">$$${content}$$</div>`
|
||||
}
|
||||
})
|
||||
|
||||
// 处理 $...$ 行内公式
|
||||
// 使用负向前瞻和负向后瞻来避免与 $$ 冲突
|
||||
text = text.replace(/(?<!\$)\$(?!\$)([^\$\n]+?)\$(?!\$)/g, (match, content) => {
|
||||
try {
|
||||
const html = katex.renderToString(content.trim(), {
|
||||
displayMode: false,
|
||||
throwOnError: false
|
||||
})
|
||||
return `<span class="math-inline">${html}</span>`
|
||||
} catch (e) {
|
||||
return `<span class="math-error">${match}</span>`
|
||||
}
|
||||
})
|
||||
|
||||
return text
|
||||
}
|
||||
|
||||
const renderedContent = computed(() => {
|
||||
if (!props.content) return '<p></p>'
|
||||
|
||||
// 先预处理 LaTeX
|
||||
const processed = preprocessLatex(props.content)
|
||||
|
||||
// 然后渲染 markdown
|
||||
return md.render(processed)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 40px;
|
||||
overflow-y: auto;
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.preview-container :deep(.math-block) {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.preview-container :deep(.math-inline) {
|
||||
font-size: 1.1em;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.preview-container :deep(.math-error) {
|
||||
color: #dc3545;
|
||||
background-color: #f8d7da;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.preview-container :deep(h1),
|
||||
.preview-container :deep(h2),
|
||||
.preview-container :deep(h3),
|
||||
.preview-container :deep(h4),
|
||||
.preview-container :deep(h5),
|
||||
.preview-container :deep(h6) {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.preview-container :deep(p) {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.preview-container :deep(code) {
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.preview-container :deep(pre) {
|
||||
background-color: #f5f5f5;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.preview-container :deep(pre code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.preview-container :deep(blockquote) {
|
||||
border-left: 4px solid #ddd;
|
||||
margin: 1em 0;
|
||||
padding-left: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-container :deep(ul),
|
||||
.preview-container :deep(ol) {
|
||||
padding-left: 2em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.preview-container :deep(li) {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
.preview-container :deep(a) {
|
||||
color: #4a90d9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.preview-container :deep(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.preview-container :deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.preview-container :deep(table) {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.preview-container :deep(th),
|
||||
.preview-container :deep(td) {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.preview-container :deep(th) {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-container :deep(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 2em 0;
|
||||
}
|
||||
</style>
|
||||
+102
-386
@@ -2,17 +2,7 @@
|
||||
<div class="editor-container" ref="containerRef">
|
||||
<div ref="root" class="milkdown-editor"></div>
|
||||
|
||||
<GhostTextOverlay
|
||||
v-if="suggestion && cursorRect"
|
||||
:suggestion="suggestion"
|
||||
:position="cursorRect"
|
||||
@accept="acceptSuggestion"
|
||||
@dismiss="dismissSuggestion"
|
||||
/>
|
||||
|
||||
<!-- 底部按钮组 -->
|
||||
<div class="action-buttons">
|
||||
<!-- 上传按钮 -->
|
||||
<button class="action-btn" @click="triggerUpload">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
@@ -22,7 +12,6 @@
|
||||
</button>
|
||||
<input type="file" ref="fileInputRef" @change="handleFileUpload" accept=".md" style="display:none">
|
||||
|
||||
<!-- 导出按钮 -->
|
||||
<button class="action-btn" @click="exportMarkdown">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
@@ -31,378 +20,143 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="loading-indicator">正在获取建议...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { replaceAll } from '@milkdown/kit/utils'
|
||||
import { Crepe } from '@milkdown/crepe'
|
||||
import GhostTextOverlay from './GhostTextOverlay.vue'
|
||||
import { fetchSuggestion } from '../utils/api.js'
|
||||
import { DEBUG } from '../utils/config.js'
|
||||
import { createInlineSuggestionPlugin } from '../plugins/inlineSuggestionPlugin.js'
|
||||
|
||||
const root = ref(null)
|
||||
const containerRef = ref(null)
|
||||
const fileInputRef = ref(null)
|
||||
let crepe = null
|
||||
let editorElement = null
|
||||
|
||||
const suggestion = ref('')
|
||||
const cursorRect = ref(null)
|
||||
const isLoading = ref(false)
|
||||
const lastFetchedContent = ref('')
|
||||
let debounceTimer = null
|
||||
|
||||
const DEBOUNCE_MS = 500
|
||||
|
||||
onMounted(async () => {
|
||||
if (DEBUG) console.log('[Debug] onMounted called')
|
||||
if (!root.value) throw new Error('root.value is null')
|
||||
if (!root.value) return
|
||||
|
||||
if (DEBUG) console.log('[Debug] Creating Crepe editor...')
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
|
||||
// 禁用行号
|
||||
config: {
|
||||
showLineNumber: false,
|
||||
}
|
||||
})
|
||||
const plugin = createInlineSuggestionPlugin()
|
||||
|
||||
await crepe.create()
|
||||
if (DEBUG) console.log('[Debug] Crepe editor created')
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
|
||||
features: { [Crepe.Feature.Latex]: true },
|
||||
featureConfigs: {
|
||||
[Crepe.Feature.Latex]: { katexOptions: {}, inlineEditConfirm: 'Escape' }
|
||||
},
|
||||
config: { showLineNumber: false },
|
||||
markdown: {
|
||||
plugins: [plugin]
|
||||
}
|
||||
})
|
||||
|
||||
observeEditor()
|
||||
await crepe.create()
|
||||
})
|
||||
|
||||
const observeEditor = () => {
|
||||
if (!containerRef.value) throw new Error('containerRef.value is null')
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
const editorEl = containerRef.value?.querySelector('.milkdown .editor') ||
|
||||
containerRef.value?.querySelector('.milkdown')
|
||||
if (editorEl) {
|
||||
editorElement = editorEl
|
||||
bindEditorEvents(editorEl)
|
||||
observer.disconnect()
|
||||
if (DEBUG) console.log('[Debug] Editor element found and events bound')
|
||||
}
|
||||
})
|
||||
|
||||
observer.observe(containerRef.value, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
const existingEl = containerRef.value?.querySelector('.milkdown .editor') ||
|
||||
containerRef.value?.querySelector('.milkdown')
|
||||
if (existingEl) {
|
||||
editorElement = existingEl
|
||||
bindEditorEvents(existingEl)
|
||||
observer.disconnect()
|
||||
if (DEBUG) console.log('[Debug] Editor element found immediately')
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const bindEditorEvents = (editorEl) => {
|
||||
editorEl.addEventListener('input', onInput)
|
||||
editorEl.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
handleTab()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getEditorContent = () => {
|
||||
if (!editorElement) throw new Error('editorElement is null')
|
||||
return editorElement.innerText || ''
|
||||
}
|
||||
|
||||
const getCursorPositionFromDOM = () => {
|
||||
if (!editorElement) throw new Error('editorElement is null')
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) throw new Error('No selection')
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
const rect = range.getBoundingClientRect()
|
||||
const containerRect = containerRef.value?.getBoundingClientRect()
|
||||
if (!containerRect) throw new Error('containerRect is null')
|
||||
|
||||
return {
|
||||
left: rect.left - containerRect.left,
|
||||
top: rect.top - containerRect.top + window.scrollY,
|
||||
fontSize: 16,
|
||||
fontFamily: 'monospace',
|
||||
}
|
||||
}
|
||||
|
||||
const getCursorPosition = async () => {
|
||||
return getCursorPositionFromDOM()
|
||||
}
|
||||
|
||||
const onInput = async () => {
|
||||
if (!editorElement) throw new Error('editorElement is null')
|
||||
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) return
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
const from = range.startOffset
|
||||
|
||||
const content = getEditorContent()
|
||||
const prefix = content.slice(0, from)
|
||||
const suffix = content.slice(from)
|
||||
|
||||
if (DEBUG) console.log('[Debug] onInput triggered at position:', from)
|
||||
|
||||
// 清除之前的定时器
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer)
|
||||
}
|
||||
|
||||
// 设置新的定时器 - 只有停止输入后才触发
|
||||
debounceTimer = setTimeout(async () => {
|
||||
if (DEBUG) console.log('[Debug] Debounce timeout reached, fetching suggestion...')
|
||||
|
||||
// 检查是否已经有建议在显示，如果内容没变则跳过
|
||||
if (suggestion.value && content === lastFetchedContent.value) {
|
||||
if (DEBUG) console.log('[Debug] Content unchanged, skipping fetch')
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
cursorRect.value = await getCursorPosition()
|
||||
suggestion.value = await fetchSuggestion(prefix, suffix)
|
||||
lastFetchedContent.value = content
|
||||
if (DEBUG) console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
|
||||
} catch (e) {
|
||||
console.error('[Error] Fetch suggestion failed:', e)
|
||||
throw e
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
debounceTimer = null
|
||||
}
|
||||
}, DEBOUNCE_MS)
|
||||
}
|
||||
|
||||
const handleTab = () => {
|
||||
if (suggestion.value) {
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) return
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
range.deleteContents()
|
||||
|
||||
const textNode = document.createTextNode(suggestion.value)
|
||||
range.insertNode(textNode)
|
||||
|
||||
range.setStartAfter(textNode)
|
||||
range.setEndAfter(textNode)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
|
||||
suggestion.value = ''
|
||||
if (DEBUG) console.log('[Debug] Tab pressed, accepted suggestion')
|
||||
}
|
||||
}
|
||||
|
||||
const dismissSuggestion = () => {
|
||||
suggestion.value = ''
|
||||
if (DEBUG) console.log('[Debug] Suggestion dismissed')
|
||||
}
|
||||
|
||||
const acceptSuggestion = () => {
|
||||
if (suggestion.value) {
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) return
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
range.deleteContents()
|
||||
|
||||
const textNode = document.createTextNode(suggestion.value)
|
||||
range.insertNode(textNode)
|
||||
|
||||
range.setStartAfter(textNode)
|
||||
range.setEndAfter(textNode)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
|
||||
suggestion.value = ''
|
||||
if (DEBUG) console.log('[Debug] Suggestion accepted via click')
|
||||
}
|
||||
}
|
||||
|
||||
const exportMarkdown = async () => {
|
||||
if (!crepe) return
|
||||
const markdown = await crepe.getMarkdown()
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `document-${Date.now()}.md`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
if (!crepe) return
|
||||
const markdown = await crepe.getMarkdown()
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `document-${Date.now()}.md`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
const triggerUpload = () => fileInputRef.value?.click()
|
||||
|
||||
const handleFileUpload = async (event) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
try {
|
||||
const text = await file.text()
|
||||
if (crepe) {
|
||||
await crepe.get().actions.replaceAll(text)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[Error] Upload failed:', e)
|
||||
try {
|
||||
const text = await file.text()
|
||||
if (crepe?.editor) {
|
||||
crepe.editor.action(replaceAll(text))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[Error] Upload failed:', e)
|
||||
}
|
||||
|
||||
event.target.value = ''
|
||||
event.target.value = ''
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
position: relative;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border-color: #4a90d9;
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border-color: #4a90d9;
|
||||
}
|
||||
|
||||
.milkdown-editor {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
overflow-y: auto;
|
||||
/* 强制覆盖所有可能的内边距和左边距 */
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(.milkdown) {
|
||||
max-width: none;
|
||||
margin: 0 auto !important;
|
||||
padding: 20px 40px !important;
|
||||
min-height: calc(100vh - 40px);
|
||||
/* 覆盖主容器 */
|
||||
padding-left: 0 !important;
|
||||
max-width: none;
|
||||
margin: 0 auto !important;
|
||||
padding: 20px 40px !important;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(.milkdown__main) {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(.milkdown__editor) {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* 隐藏所有可能的行号和侧边元素 */
|
||||
.milkdown-editor :deep(*) {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* 覆盖 Milkdown 主题变量 */
|
||||
.milkdown-editor :deep(.milkdown) {
|
||||
--margin: 0 !important;
|
||||
--padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 隐藏特定元素 */
|
||||
.milkdown-editor :deep(.milkdown__aside),
|
||||
.milkdown-editor :deep(.milkdown__aside-wrapper),
|
||||
.milkdown-editor :deep([class*="aside"]),
|
||||
.milkdown-editor :deep([class*="line-number"]),
|
||||
.milkdown-editor :deep([class*="gutter"]),
|
||||
.milkdown-editor :deep([class*="sidebar"]) {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(.milkdown) {
|
||||
max-width: none;
|
||||
margin: 0 auto !important;
|
||||
padding: 20px 40px !important;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.milkdown-editor :deep(*) {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 隐藏所有 Milkdown 工具栏 */
|
||||
.milkdown-editor :deep(.milkdown__toolbar),
|
||||
.milkdown-editor :deep(.milkdown__menu),
|
||||
.milkdown-editor :deep(.milkdown__statusbar),
|
||||
@@ -410,86 +164,48 @@ onUnmounted(() => {
|
||||
.milkdown-editor :deep(.milkdown-bubble-menu),
|
||||
.milkdown-editor :deep([class*="toolbar"]),
|
||||
.milkdown-editor :deep([class*="menu"]) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
/* 隐藏 block handle（+ 和 :: 按钮） */
|
||||
.milkdown-editor :deep(.milkdown__block-handle),
|
||||
.milkdown-editor :deep([class*="block-handle"]),
|
||||
.milkdown-editor :deep([class*="blockHandle"]) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
min-width: 0 !important;
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
/* 隐藏行号和侧边栏 */
|
||||
.milkdown-editor :deep(.milkdown__aside),
|
||||
.milkdown-editor :deep(.milkdown__aside-wrapper) {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
.milkdown-editor::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.milkdown-editor :deep([class*="line-number"]),
|
||||
.milkdown-editor :deep([class*="gutter"]) {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
.milkdown-editor::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
z-index: 1000;
|
||||
.milkdown-editor::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 全局样式覆盖 Crepe 主题 -->
|
||||
<style>
|
||||
/* 隐藏所有 Milkdown 工具栏 */
|
||||
.milkdown__toolbar,
|
||||
.milkdown__menu,
|
||||
.milkdown__statusbar,
|
||||
.milkdown-slate-toolbar,
|
||||
.milkdown-bubble-menu {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
.ghost-text-decoration {
|
||||
color: #999 !important;
|
||||
opacity: 0.7 !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
line-height: inherit !important;
|
||||
user-select: none !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
/* 隐藏 block handle（+ 和 :: 按钮） */
|
||||
.milkdown__block-handle,
|
||||
[class*="block-handle"],
|
||||
[class*="blockHandle"] {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
/* 隐藏行号区域 */
|
||||
.milkdown__aside,
|
||||
.milkdown__aside-wrapper,
|
||||
.ProseMirror-gutter,
|
||||
.ProseMirror-gutter-wrapper {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
/* 移除编辑器左边距 */
|
||||
.milkdown__main {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
padding-left: 0 !important;
|
||||
.ghost-text-decoration:hover {
|
||||
color: #666 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,96 +1,124 @@
|
||||
import { Plugin, PluginKey } from '@milkdown/prose/state';
|
||||
import { EditorView } from '@milkdown/prose/view';
|
||||
import { fetchSuggestion } from '../utils/api.js';
|
||||
import { DEBUG, API_URL } from '../utils/config.js';
|
||||
import { Plugin, PluginKey, Decoration, DecorationSet } from '@milkdown/prose/state'
|
||||
import { EditorView } from '@milkdown/prose/view'
|
||||
import { fetchSuggestion } from '../utils/api.js'
|
||||
import { API_URL } from '../utils/config.js'
|
||||
|
||||
const INLINE_SUGGESTION_KEY = new PluginKey('inline-suggestion');
|
||||
const DEBOUNCE_MS = 150;
|
||||
|
||||
interface InlineSuggestionOptions {
|
||||
apiUrl?: string;
|
||||
}
|
||||
const INLINE_SUGGESTION_KEY = new PluginKey('inline-suggestion')
|
||||
const DEBOUNCE_MS = 300
|
||||
|
||||
interface InlineSuggestionState {
|
||||
suggestion: string;
|
||||
visible: boolean;
|
||||
debounceTimer: ReturnType<typeof setTimeout> | null;
|
||||
currentSuggestion: string;
|
||||
suggestionPos: { from: number; to: number };
|
||||
suggestion: string
|
||||
suggestionPos: { from: number; to: number }
|
||||
}
|
||||
|
||||
function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
|
||||
const apiUrl = options.apiUrl || API_URL;
|
||||
|
||||
return new Plugin<InlineSuggestionState>({
|
||||
key: INLINE_SUGGESTION_KEY,
|
||||
state: {
|
||||
init: () => ({
|
||||
suggestion: '',
|
||||
visible: false,
|
||||
debounceTimer: null,
|
||||
currentSuggestion: '',
|
||||
suggestionPos: { from: 0, to: 0 }
|
||||
}),
|
||||
apply: (tr, value) => {
|
||||
if (!tr.docChanged) return value;
|
||||
const { from, to } = tr.selection;
|
||||
if (from === value.suggestionPos.from && to === value.suggestionPos.to) {
|
||||
return value;
|
||||
}
|
||||
return { ...value, suggestion: '', visible: false };
|
||||
},
|
||||
},
|
||||
props: {
|
||||
handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
|
||||
const state = INLINE_SUGGESTION_KEY.getState(view.state);
|
||||
if (event.key === 'Tab' && state.visible) {
|
||||
event.preventDefault();
|
||||
if (state.suggestion) {
|
||||
view.dispatch(view.state.tr.insertText(state.suggestion, view.state.selection.from));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
if (state.visible) {
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, { ...state, suggestion: '', visible: false }));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
appendTransaction: (transactions, oldState, newState) => {
|
||||
const lastTr = transactions[transactions.length - 1];
|
||||
if (!lastTr || !lastTr.docChanged) return null;
|
||||
|
||||
const currentState = INLINE_SUGGESTION_KEY.getState(newState);
|
||||
|
||||
clearTimeout(currentState.debounceTimer);
|
||||
currentState.debounceTimer = setTimeout(async () => {
|
||||
const { from, to } = newState.selection;
|
||||
const prefix = newState.doc.textBetween(0, from);
|
||||
const suffix = newState.doc.textBetween(to, newState.doc.content.size);
|
||||
|
||||
try {
|
||||
const text = await fetchSuggestion(prefix, suffix, apiUrl);
|
||||
|
||||
if (text && newState.selection.from === from) {
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
...currentState,
|
||||
currentSuggestion: text,
|
||||
suggestionPos: { from, to: from + text.length },
|
||||
suggestion: text,
|
||||
visible: true
|
||||
}));
|
||||
}
|
||||
} catch (e) {
|
||||
if (DEBUG) console.error('Inline suggestion error:', e);
|
||||
}
|
||||
}, DEBOUNCE_MS);
|
||||
|
||||
return null;
|
||||
},
|
||||
});
|
||||
function createGhostTextDecoration(from: number, to: number, text: string) {
|
||||
return Decoration.inline(from, to, {
|
||||
class: 'ghost-text-decoration',
|
||||
'data-suggestion': text,
|
||||
}, { side: 1 })
|
||||
}
|
||||
|
||||
export { createInlineSuggestionPlugin, INLINE_SUGGESTION_KEY };
|
||||
export function createInlineSuggestionPlugin(options: { apiUrl?: string } = {}) {
|
||||
const apiUrl = options.apiUrl || API_URL
|
||||
|
||||
return new Plugin({
|
||||
key: INLINE_SUGGESTION_KEY,
|
||||
state: {
|
||||
init: (): InlineSuggestionState => ({
|
||||
suggestion: '',
|
||||
suggestionPos: { from: 0, to: 0 }
|
||||
}),
|
||||
apply: (tr, value): InlineSuggestionState => {
|
||||
if (!tr.docChanged) return value
|
||||
|
||||
const { from, to } = tr.selection
|
||||
if (from === value.suggestionPos.from && to === value.suggestionPos.to) {
|
||||
return value
|
||||
}
|
||||
return { suggestion: '', suggestionPos: { from: 0, to: 0 } }
|
||||
},
|
||||
},
|
||||
props: {
|
||||
decorations: (state) => {
|
||||
const pluginState = INLINE_SUGGESTION_KEY.getState(state)
|
||||
if (!pluginState.suggestion) {
|
||||
return DecorationSet.empty
|
||||
}
|
||||
return DecorationSet.create(state.doc, [
|
||||
createGhostTextDecoration(
|
||||
pluginState.suggestionPos.from,
|
||||
pluginState.suggestionPos.from + pluginState.suggestion.length,
|
||||
pluginState.suggestion
|
||||
)
|
||||
])
|
||||
},
|
||||
handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
|
||||
const state = INLINE_SUGGESTION_KEY.getState(view.state)
|
||||
|
||||
if (event.key === 'Tab' && state.suggestion) {
|
||||
event.preventDefault()
|
||||
const { state: currentState, dispatch } = view
|
||||
dispatch(currentState.tr.insertText(state.suggestion, currentState.selection.from))
|
||||
dispatch(currentState.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
suggestionPos: { from: 0, to: 0 }
|
||||
}))
|
||||
return true
|
||||
}
|
||||
|
||||
if (event.key === 'Escape' && state.suggestion) {
|
||||
event.preventDefault()
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
suggestionPos: { from: 0, to: 0 }
|
||||
}))
|
||||
return true
|
||||
}
|
||||
|
||||
if (state.suggestion) {
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
suggestion: '',
|
||||
suggestionPos: { from: 0, to: 0 }
|
||||
}))
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
},
|
||||
appendTransaction: (transactions, oldState, newState) => {
|
||||
const lastTr = transactions[transactions.length - 1]
|
||||
if (!lastTr || !lastTr.docChanged) return null
|
||||
|
||||
const currentState = INLINE_SUGGESTION_KEY.getState(newState)
|
||||
const { from, to } = newState.selection
|
||||
|
||||
if (currentState.suggestion && from === currentState.suggestionPos.from) {
|
||||
return null
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
const prefix = newState.doc.textBetween(0, from)
|
||||
const suffix = newState.doc.textBetween(to, newState.doc.content.size)
|
||||
|
||||
try {
|
||||
const text = await fetchSuggestion(prefix, suffix, apiUrl)
|
||||
|
||||
if (text && newState.selection.from === from) {
|
||||
const newPluginState = {
|
||||
suggestion: text,
|
||||
suggestionPos: { from, to: from + text.length }
|
||||
}
|
||||
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, newPluginState))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Inline suggestion error:', e)
|
||||
}
|
||||
}, DEBOUNCE_MS)
|
||||
|
||||
return null
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export { INLINE_SUGGESTION_KEY }
|
||||
|
||||
+25
-47
@@ -1,52 +1,30 @@
|
||||
import { DEBUG, API_URL } from './config.js'
|
||||
export async function fetchSuggestion(prefix, suffix, apiUrl = 'http://localhost:8000/v1/completions') {
|
||||
const res = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
})
|
||||
|
||||
export async function fetchSuggestion(prefix, suffix, apiUrl = API_URL) {
|
||||
if (DEBUG) console.log('[Debug] fetchSuggestion called with prefix length:', prefix.length, 'suffix length:', suffix.length)
|
||||
try {
|
||||
const res = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
})
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}`)
|
||||
}
|
||||
|
||||
if (DEBUG) console.log('[Debug] fetchSuggestion response status:', res.status)
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text()
|
||||
throw new Error(`HTTP ${res.status}: ${errorText}`)
|
||||
}
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) throw new Error('No reader available')
|
||||
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) {
|
||||
if (DEBUG) console.log('[Debug] No reader available')
|
||||
throw new Error('No reader available')
|
||||
}
|
||||
|
||||
let text = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = new TextDecoder().decode(value)
|
||||
if (DEBUG) console.log('[Debug] Received chunk:', chunk.substring(0, 100))
|
||||
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '))
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6))
|
||||
if (data.content) {
|
||||
text += data.content
|
||||
if (DEBUG) console.log('[Debug] Added content:', data.content)
|
||||
}
|
||||
if (data.done || data.error) break
|
||||
} catch (e) {
|
||||
if (DEBUG) console.warn('[Debug] JSON parse error:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (DEBUG) console.log('[Debug] Final suggestion text:', text.substring(0, 100))
|
||||
return text
|
||||
} catch (e) {
|
||||
if (DEBUG) console.error('[Debug] fetchSuggestion error:', e)
|
||||
throw e
|
||||
let text = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = new TextDecoder().decode(value)
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '))
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6))
|
||||
if (data.content) text += data.content
|
||||
if (data.done || data.error) break
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
return text
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user