feat(MilkdownEditor): add file upload support for documents and text files

Added new upload functionality to the editor supporting doc/docx/ppt/pptx/pdf/zip/txt/json files. Includes: - New upload button with file input - File type detection utilities (isTextFile, isConvertibleFile) - Initial markdown sync with trailing whitespace normalization - Warning messages for unsupported file types
2026-03-14 19:24:15 +08:00
parent d452d1747e
commit 1155de4867
5 changed files with 252 additions and 9 deletions
@@ -32,6 +32,21 @@
    </div>

    <div class="action-buttons">
+      <button
+        type="button"
+        class="action-btn"
+        :aria-label="t('uploadFile')"
+        :title="t('uploadFile')"
+        @click="triggerFileUpload"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+        </svg>
+        <span class="btn-tooltip">{{ t('uploadFile') }}</span>
+      </button>
+      <input type="file" ref="uploadFileInputRef" @change="handleUploadFile" accept="image/*,.doc,.docx,.ppt,.pptx,.pdf,.zip,.txt,.json" style="display:none">
+
      <button
        type="button"
        class="action-btn"
@@ -133,7 +148,7 @@

 <script setup>
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
-import { replaceAll } from '@milkdown/kit/utils'
+import { replaceAll, replaceRange } from '@milkdown/kit/utils'
 import { Crepe } from '@milkdown/crepe'
 import { editorViewCtx, serializerCtx } from '@milkdown/kit/core'
 import { Selection } from '@milkdown/prose/state'
@@ -143,14 +158,17 @@ import { mermaidRenderPreview, codeBlockConfig } from '../plugins/mermaidPlugin'
 import { fetchSuggestion } from '../utils/api.js'
 import { useSettingsStore } from '../stores/settings'
 import { OCR_URL } from '../utils/config.js'
+import { convertFileToMarkdown } from '../utils/convert.js'
 import { setOcrCache, clearOcrCache, clearAllOcrCache, IMAGE_SIZE_LIMIT, calculateImageHash, getOcrByHash, setOcrByHash } from '../utils/ocrCache.js'

 const emit = defineEmits(['update:markdown'])
 const settings = useSettingsStore()
 const t = (key) => settings.t[key]
+const initialMarkdown = computed(() => settings.initialMarkdown)

 const root = ref(null)
 const fileInputRef = ref(null)
+const uploadFileInputRef = ref(null)
 const imageInputRef = ref(null)
 const cameraInputRef = ref(null)
 const aiEnabled = ref(true)
@@ -182,6 +200,48 @@ const objectUrls = new Set()
 const IMAGE_NODE_TYPES = new Set(['image', 'image-block', 'imageBlock'])
 const MARKDOWN_EXT_RE = /\.md$/i
 const IMAGE_EXT_RE = /\.(png|jpe?g|gif|webp|bmp|svg|heic|heif|avif)$/i
+const CONVERT_EXT_RE = /\.(docx?|pptx?|pdf|zip)$/i
+const TEXT_EXT_RE = /\.(txt|json)$/i
+const TEXT_MIME_TYPES = new Set(['text/plain', 'application/json'])
+const CONVERT_MIME_TYPES = new Set([
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/pdf',
+  'application/zip',
+  'application/x-zip-compressed',
+])
+let lastInitialMarkdown = initialMarkdown.value
+
+const normalizeTrailingWhitespace = (value) => (value || '').replace(/\s+$/, '')
+
+const syncInitialMarkdown = async (nextValue) => {
+  if (!crepe) {
+    lastInitialMarkdown = nextValue
+    return
+  }
+
+  try {
+    const current = await crepe.getMarkdown()
+    const normalizedCurrent = normalizeTrailingWhitespace(current)
+    const normalizedLast = normalizeTrailingWhitespace(lastInitialMarkdown)
+    if (!normalizedCurrent || normalizedCurrent === normalizedLast) {
+      crepe.editor.action(replaceAll(nextValue))
+    }
+  } catch {
+    // Ignore sync errors
+  } finally {
+    lastInitialMarkdown = nextValue
+  }
+}
+
+watch(
+  () => settings.initialMarkdown,
+  (nextValue) => {
+    void syncInitialMarkdown(nextValue)
+  }
+)

 const revokeObjectUrl = (url) => {
  if (!objectUrls.has(url)) return
@@ -312,8 +372,36 @@ const isImageFile = (file) => {
  return type.startsWith('image/') || IMAGE_EXT_RE.test(name)
 }

+const isTextFile = (file) => {
+  if (!file) return false
+  const name = (file.name || '').toLowerCase()
+  const type = (file.type || '').toLowerCase()
+  return TEXT_EXT_RE.test(name) || TEXT_MIME_TYPES.has(type)
+}
+
+const isConvertibleFile = (file) => {
+  if (!file) return false
+  const name = (file.name || '').toLowerCase()
+  const type = (file.type || '').toLowerCase()
+  return CONVERT_EXT_RE.test(name) || CONVERT_MIME_TYPES.has(type)
+}
+
 const warnUnsupportedUploadType = () => {
-  alert(t('uploadFileTypeWarning') || 'Only Markdown (.md) files and image files are supported.')
+  alert(t('uploadMdTypeWarning') || 'Only Markdown (.md) files and image files are supported.')
+}
+
+const warnUnsupportedInsertType = () => {
+  alert(t('uploadFileTypeWarning') || 'Unsupported file type. Supported: doc/docx/ppt/pptx/pdf/zip, images, txt/json.')
+}
+
+const warnUploadError = (message = '') => {
+  const base = t('uploadFileError') || 'File upload failed.'
+  alert(message ? `${base}\n${message}` : base)
+}
+
+const warnConvertError = (message = '') => {
+  const base = t('uploadConvertError') || 'File conversion failed.'
+  alert(message ? `${base}\n${message}` : base)
 }

 const warnImageTooLarge = () => {
@@ -403,7 +491,7 @@ onMounted(async () => {
    
    crepe = new Crepe({
        root: root.value,
-        defaultValue: '# Welcome to LLM-IN-TEXT\n\nA instant LLM system\n\nStart your creative work below...',
+        defaultValue: initialMarkdown.value || '',
        features: {
            [Crepe.Feature.Latex]: true,
            [Crepe.Feature.ImageBlock]: true,
@@ -591,6 +679,72 @@ const insertImageAtCursor = (src) => {
    })
 }

+const insertMarkdownAtCursor = (markdown) => {
+    if (!crepe || !markdown) return
+    crepe.editor.action((ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { from, to } = view.state.selection
+        replaceRange(markdown, { from, to })(ctx)
+        view.focus()
+    })
+}
+
+const buildCodeBlock = (file, text) => {
+    const name = (file?.name || '').toLowerCase()
+    const lang = name.endsWith('.json') ? 'json' : 'text'
+    return `\n\`\`\`${lang}\n${text}\n\`\`\`\n`
+}
+
+const triggerFileUpload = () => {
+    uploadFileInputRef.value?.click()
+}
+
+const handleUploadFile = async (event) => {
+    const input = event.target
+    const file = input.files?.[0]
+    if (!file) return
+
+    const convertible = isConvertibleFile(file)
+    try {
+        if (isImageFile(file)) {
+            const objectUrl = await prepareImageFile(file)
+            if (objectUrl) {
+                clearCurrentGhost()
+                insertImageAtCursor(objectUrl)
+            }
+            return
+        }
+
+        if (isTextFile(file)) {
+            const text = await file.text()
+            clearCurrentGhost()
+            insertMarkdownAtCursor(buildCodeBlock(file, text))
+            return
+        }
+
+        if (convertible) {
+            const markdown = await convertFileToMarkdown(file)
+            if (!markdown) {
+                throw new Error('No markdown returned')
+            }
+            clearCurrentGhost()
+            insertMarkdownAtCursor(markdown)
+            return
+        }
+
+        warnUnsupportedInsertType()
+    } catch (e) {
+        const message = e instanceof Error ? e.message : ''
+        if (convertible) {
+            warnConvertError(message)
+        } else {
+            warnUploadError(message)
+        }
+    } finally {
+        input.value = ''
+    }
+}
+
 const handleImageUpload = async (event) => {
    const input = event.target
    const file = input.files?.[0]
@@ -45,6 +45,11 @@ export const useSettingsStore = defineStore('settings', () => {
        return translations[uiLanguage.value] || translations['en']
    })

+    const initialMarkdown = computed(() => {
+        const lang = uiLanguage.value
+        return translations[lang]?.initialMarkdown || translations['en']?.initialMarkdown || ''
+    })
+
    // --- Actions/Logic ---

    // Load from localStorage
@@ -138,6 +143,7 @@ export const useSettingsStore = defineStore('settings', () => {
        backgroundOpacity,
        uiLanguage,
        t,
+        initialMarkdown,
        resetSettings
    }
 })
@@ -2,3 +2,4 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://api.imageteac

 export const API_URL = import.meta.env.VITE_API_URL || `${API_BASE_URL}/v1/completions`
 export const OCR_URL = import.meta.env.VITE_OCR_URL || `${API_BASE_URL}/v1/ocr`
+export const CONVERT_URL = import.meta.env.VITE_CONVERT_URL || `${API_BASE_URL}/v1/convert`
@@ -0,0 +1,46 @@
+import { CONVERT_URL } from './config.js'
+
+const API_KEY = 'your-secret-key-here'
+
+function readFileAsBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => {
+            const dataUrl = typeof reader.result === 'string' ? reader.result : ''
+            const splitIndex = dataUrl.indexOf(',')
+            if (splitIndex === -1) {
+                reject(new Error('Invalid file data'))
+                return
+            }
+            resolve(dataUrl.slice(splitIndex + 1))
+        }
+        reader.onerror = () => reject(reader.error || new Error('Failed to read file'))
+        reader.readAsDataURL(file)
+    })
+}
+
+export async function convertFileToMarkdown(file) {
+    const base64 = await readFileAsBase64(file)
+    const res = await fetch(CONVERT_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': API_KEY,
+        },
+        body: JSON.stringify({
+            file: base64,
+            filename: file.name || 'document',
+        }),
+    })
+
+    if (!res.ok) {
+        const errorText = await res.text()
+        throw new Error(`HTTP ${res.status}: ${errorText}`)
+    }
+
+    const data = await res.json()
+    if (!data || typeof data.markdown !== 'string') {
+        throw new Error('No markdown returned')
+    }
+    return data.markdown
+}
@@ -34,13 +34,19 @@ export const translations = {
        exportDocx: 'Export DOCX',
        exportPdf: 'Export PDF',
        uploadImg: 'Upload Image',
+        uploadFile: 'Upload File',
+        uploadFileTypeWarning: 'Unsupported file type. Supported: doc/docx/ppt/pptx/pdf/zip, images, txt/json.',
+        uploadMdTypeWarning: 'Only Markdown (.md) files and image files are supported.',
+        uploadFileError: 'File upload failed.',
+        uploadConvertError: 'File conversion failed.',
        enableAI: 'Enable AI',
        disableAI: 'Disable AI',
        insertUrl: 'Insert Image from URL',
        insert: 'Insert',
        cancel: 'Cancel',
        imgTooLarge: 'Image too large',
-        docTooLarge: 'Document too large, AI disabled'
+        docTooLarge: 'Document too large, AI disabled',
+        initialMarkdown: '# Welcome to LLM-IN-TEXT\n\nAn instant LLM system\n\nStart your creative work below...'
    },
    zh: {
        settings: '设置',
@@ -77,13 +83,19 @@ export const translations = {
        exportDocx: '导出 DOCX',
        exportPdf: '导出 PDF',
        uploadImg: '上传图片',
+        uploadFile: '上传文件',
+        uploadFileTypeWarning: '不支持的文件类型。仅支持 doc/docx/ppt/pptx/pdf/zip、图片、txt/json。',
+        uploadMdTypeWarning: '仅支持 Markdown（.md）和图片文件。',
+        uploadFileError: '文件上传失败',
+        uploadConvertError: '文件转换失败',
        enableAI: '启用 AI',
        disableAI: '禁用 AI',
        insertUrl: '通过 URL 插入图片',
        insert: '插入',
        cancel: '取消',
        imgTooLarge: '图片过大',
-        docTooLarge: '文档过大，AI已禁用'
+        docTooLarge: '文档过大，AI已禁用',
+        initialMarkdown: '# 欢迎使用 LLM-IN-TEXT\n\n即时可用的 LLM 系统\n\n在下方开始创作吧...'
    },
    ja: {
        settings: '設定',
@@ -120,13 +132,19 @@ export const translations = {
        exportDocx: 'DOCXをエクスポート',
        exportPdf: 'PDFをエクスポート',
        uploadImg: '画像をアップロード',
+        uploadFile: 'Upload File',
+        uploadFileTypeWarning: 'Unsupported file type. Supported: doc/docx/ppt/pptx/pdf/zip, images, txt/json.',
+        uploadMdTypeWarning: 'Only Markdown (.md) files and image files are supported.',
+        uploadFileError: 'File upload failed.',
+        uploadConvertError: 'File conversion failed.',
        enableAI: 'AIを有効化',
        disableAI: 'AIを無効化',
        insertUrl: 'URLから画像を挿入',
        insert: '挿入',
        cancel: 'キャンセル',
        imgTooLarge: '画像が大きすぎます',
-        docTooLarge: 'ドキュメントが大きすぎます、AI無効'
+        docTooLarge: 'ドキュメントが大きすぎます、AI無効',
+        initialMarkdown: '# LLM-IN-TEXTへようこそ\n\nすぐに使えるLLMシステム\n\n下から創作を始めましょう...'
    },
    ko: {
        settings: '설정',
@@ -163,13 +181,19 @@ export const translations = {
        exportDocx: 'DOCX 내보내기',
        exportPdf: 'PDF 내보내기',
        uploadImg: '이미지 업로드',
+        uploadFile: 'Upload File',
+        uploadFileTypeWarning: 'Unsupported file type. Supported: doc/docx/ppt/pptx/pdf/zip, images, txt/json.',
+        uploadMdTypeWarning: 'Only Markdown (.md) files and image files are supported.',
+        uploadFileError: 'File upload failed.',
+        uploadConvertError: 'File conversion failed.',
        enableAI: 'AI 활성화',
        disableAI: 'AI 비활성화',
        insertUrl: 'URL로 이미지 삽입',
        insert: '삽입',
        cancel: '취소',
        imgTooLarge: '이미지가 너무 큽니다',
-        docTooLarge: '문서가 너무 큽니다, AI 비활성화됨'
+        docTooLarge: '문서가 너무 큽니다, AI 비활성화됨',
+        initialMarkdown: '# LLM-IN-TEXT에 오신 것을 환영합니다\n\n즉시 사용할 수 있는 LLM 시스템\n\n아래에서 창작을 시작하세요...'
    },
    de: {
        settings: 'Einstellungen',
@@ -206,13 +230,19 @@ export const translations = {
        exportDocx: 'DOCX exportieren',
        exportPdf: 'PDF exportieren',
        uploadImg: 'Bild hochladen',
+        uploadFile: 'Upload File',
+        uploadFileTypeWarning: 'Unsupported file type. Supported: doc/docx/ppt/pptx/pdf/zip, images, txt/json.',
+        uploadMdTypeWarning: 'Only Markdown (.md) files and image files are supported.',
+        uploadFileError: 'File upload failed.',
+        uploadConvertError: 'File conversion failed.',
        enableAI: 'KI aktivieren',
        disableAI: 'KI deaktivieren',
        insertUrl: 'Bild per URL einfügen',
        insert: 'Einfügen',
        cancel: 'Abbrechen',
        imgTooLarge: 'Bild zu groß',
-        docTooLarge: 'Dokument zu groß, KI deaktiviert'
+        docTooLarge: 'Dokument zu groß, KI deaktiviert',
+        initialMarkdown: '# Willkommen bei LLM-IN-TEXT\n\nEin sofort verfügbares LLM-System\n\nStarten Sie Ihre kreative Arbeit unten...'
    },
    fr: {
        settings: 'Paramètres',
@@ -249,12 +279,18 @@ export const translations = {
        exportDocx: 'Exporter DOCX',
        exportPdf: 'Exporter PDF',
        uploadImg: 'Télécharger image',
+        uploadFile: 'Upload File',
+        uploadFileTypeWarning: 'Unsupported file type. Supported: doc/docx/ppt/pptx/pdf/zip, images, txt/json.',
+        uploadMdTypeWarning: 'Only Markdown (.md) files and image files are supported.',
+        uploadFileError: 'File upload failed.',
+        uploadConvertError: 'File conversion failed.',
        enableAI: 'Activer IA',
        disableAI: 'Désactiver IA',
        insertUrl: 'Insérer image via URL',
        insert: 'Insérer',
        cancel: 'Annuler',
        imgTooLarge: 'Image trop grande',
-        docTooLarge: 'Document trop grand, IA désactivée'
+        docTooLarge: 'Document trop grand, IA désactivée',
+        initialMarkdown: '# Bienvenue sur LLM-IN-TEXT\n\nUn système LLM instantané\n\nCommencez votre création ci-dessous...'
    }
 }