feat(editor): add file upload and fix critical bugs

- Add markdown file upload functionality with upload button
- Fix error handling to throw errors instead of silently returning empty strings
- Fix memory leak by cleaning up debounceTimer in onUnmounted
- Update debounce timing from 150ms to 500ms for stability
- Enhance UI with floating action buttons and extensive style refinements
- Hide toolbar, menu, and line number elements for cleaner interface
This commit is contained in:
“ydy0615”
2026-02-12 08:55:37 +08:00
parent c2c87d24bf
commit 2432e78fe1
4 changed files with 243 additions and 75 deletions
+206 -13
View File
@@ -1,7 +1,5 @@
<template>
<div class="editor-container" ref="containerRef">
<button class="export-btn" @click="exportMarkdown">导出文件</button>
<div ref="root" class="milkdown-editor"></div>
<GhostTextOverlay
@@ -12,6 +10,28 @@
@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"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
</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"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
</div>
<div v-if="isLoading" class="loading-indicator">正在获取建议...</div>
</div>
</template>
@@ -25,6 +45,7 @@ import { DEBUG } from '../utils/config.js'
const root = ref(null)
const containerRef = ref(null)
const fileInputRef = ref(null)
let crepe = null
let editorElement = null
@@ -44,6 +65,10 @@ onMounted(async () => {
crepe = new Crepe({
root: root.value,
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
// 禁用行号
config: {
showLineNumber: false,
}
})
await crepe.create()
@@ -157,7 +182,8 @@ const onInput = async () => {
lastFetchedContent.value = content
if (DEBUG) console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
} catch (e) {
if (DEBUG) console.error('[Debug] Fetch error:', e)
console.error('[Error] Fetch suggestion failed:', e)
throw e
} finally {
isLoading.value = false
debounceTimer = null
@@ -224,6 +250,26 @@ const exportMarkdown = async () => {
URL.revokeObjectURL(url)
}
const triggerUpload = () => {
fileInputRef.value?.click()
}
const handleFileUpload = async (event) => {
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)
}
event.target.value = ''
}
onUnmounted(() => {
if (debounceTimer) {
clearTimeout(debounceTimer)
@@ -237,21 +283,34 @@ onUnmounted(() => {
position: relative;
}
.export-btn {
.action-buttons {
position: fixed;
top: 20px;
bottom: 20px;
right: 20px;
padding: 8px 16px;
background-color: #4a90d9;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
gap: 8px;
z-index: 1000;
}
.export-btn:hover {
background-color: #3a7bc8;
.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;
}
.action-btn:hover {
background-color: #4a90d9;
color: white;
border-color: #4a90d9;
}
.milkdown-editor {
@@ -259,6 +318,61 @@ onUnmounted(() => {
height: 100vh;
background-color: #ffffff;
overflow-y: auto;
/* 强制覆盖所有可能的内边距和左边距 */
padding-left: 0 !important;
margin-left: 0 !important;
}
.milkdown-editor :deep(.milkdown) {
max-width: none;
margin: 0 auto !important;
padding: 20px 40px !important;
min-height: calc(100vh - 40px);
/* 覆盖主容器 */
padding-left: 0 !important;
}
.milkdown-editor :deep(.milkdown__main) {
margin-left: 0 !important;
padding-left: 0 !important;
width: 100% !important;
}
.milkdown-editor :deep(.milkdown__editor) {
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;
}
.milkdown-editor::-webkit-scrollbar {
@@ -288,6 +402,43 @@ onUnmounted(() => {
padding-bottom: 0 !important;
}
/* 隐藏所有 Milkdown 工具栏 */
.milkdown-editor :deep(.milkdown__toolbar),
.milkdown-editor :deep(.milkdown__menu),
.milkdown-editor :deep(.milkdown__statusbar),
.milkdown-editor :deep(.milkdown-slate-toolbar),
.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;
}
/* 隐藏 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;
}
/* 隐藏行号和侧边栏 */
.milkdown-editor :deep(.milkdown__aside),
.milkdown-editor :deep(.milkdown__aside-wrapper) {
display: none !important;
width: 0 !important;
}
.milkdown-editor :deep([class*="line-number"]),
.milkdown-editor :deep([class*="gutter"]) {
display: none !important;
width: 0 !important;
}
.loading-indicator {
position: fixed;
bottom: 20px;
@@ -300,3 +451,45 @@ onUnmounted(() => {
z-index: 1000;
}
</style>
<!-- 全局样式覆盖 Crepe 主题 -->
<style>
/* 隐藏所有 Milkdown 工具栏 */
.milkdown__toolbar,
.milkdown__menu,
.milkdown__statusbar,
.milkdown-slate-toolbar,
.milkdown-bubble-menu {
display: none !important;
visibility: hidden !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;
}
</style>