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
2026-02-12 18:52:16 +08:00
parent 2432e78fe1
commit 16e76e1e90
14 changed files with 487 additions and 2300 deletions
@@ -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>