lixinran
/
MindMap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): preserve table structure when editing by converting HTML tables to GFM markdown and render HTML via Vditor preview on save

This commit is contained in:
lixinran 2025-10-15 21:32:31 +08:00
parent 327c58151b
commit 0809c0e7df
7 changed files with 265 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/mindmap.db
View File

Binary file not shown.

2
frontend/dist/assets/index-f016b388.css → frontend/dist/assets/index-1b564f4b.css vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/assets/index-207d9110.js → frontend/dist/assets/index-4b3889f4.js vendored
View File

File diff suppressed because one or more lines are too long

417
frontend/dist/assets/index-b0cb73ba.js → frontend/dist/assets/index-93385e5a.js vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/assets/pdf-75e12a98.js → frontend/dist/assets/pdf-215237d8.js vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@ -23,8 +23,8 @@
flex-direction: column; flex-direction: column;
} }
</style> </style>
<script type="module" crossorigin src="/assets/index-b0cb73ba.js"></script> <script type="module" crossorigin src="/assets/index-93385e5a.js"></script>
<link rel="stylesheet" href="/assets/index-f016b388.css"> <link rel="stylesheet" href="/assets/index-1b564f4b.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

69
frontend/src/components/MindMap.vue
View File

@ -604,7 +604,6 @@ const convertMarkdownToHTML = (markdown) => {
return markdown; // 回退到原始Markdown return markdown; // 回退到原始Markdown
} }
}; };
/** /**
* 改进的HTML转Markdown转换函数 * 改进的HTML转Markdown转换函数
* 支持表格、图片等复杂内容的转换 * 支持表格、图片等复杂内容的转换
@ -1020,8 +1019,22 @@ const saveRichTextChanges = async () => {
} }
// ✅ 使用Vditor内置API获取内容 // ✅ 使用Vditor内置API获取内容
const htmlContent = vditorInstance ? vditorInstance.getValue() : editorContent.value; // 从编辑器获取 Markdown 与 HTML，两者都保留
const markdownContent = vditorInstance ? vditorInstance.getMarkdown() : ''; const markdownContent = vditorInstance ? vditorInstance.getValue() : editorContent.value;
// 使用 Vditor 的预览引擎将 Markdown 渲染为 HTML，确保表格在渲染时仍是 <table>
let htmlContent = '';
try {
if (vditorInstance?.preview) {
// 借用预览渲染
const temp = document.createElement('div');
await Vditor.preview(temp, markdownContent, { mode: 'light' });
htmlContent = temp.innerHTML;
} else {
htmlContent = markdownContent;
}
} catch {
htmlContent = markdownContent;
}
console.log('📝 获取到的HTML内容:', htmlContent.substring(0, 100) + '...'); console.log('📝 获取到的HTML内容:', htmlContent.substring(0, 100) + '...');
console.log('📝 获取到的Markdown内容:', markdownContent.substring(0, 100) + '...'); console.log('📝 获取到的Markdown内容:', markdownContent.substring(0, 100) + '...');
@ -1247,7 +1260,6 @@ const createNewMindmap = async () => {
// 静默处理错误 // 静默处理错误
} }
}; };
// 保存当前思维导图位置和缩放 // 保存当前思维导图位置和缩放
const saveCurrentPosition = () => { const saveCurrentPosition = () => {
if (!mindElixir.value || !mindmapEl.value) return null; if (!mindElixir.value || !mindmapEl.value) return null;
@ -1887,7 +1899,6 @@ const removeConnectionLineFixes = () => {
// console.log('已移除连接线强制样式'); // console.log('已移除连接线强制样式');
}; };
// 节点拖拽处理函数 // 节点拖拽处理函数
const handleNodeDragStart = (event, nodeId) => { const handleNodeDragStart = (event, nodeId) => {
isDragging.value = true; isDragging.value = true;
@ -2516,7 +2527,6 @@ const submitAIQuestion = async () => {
isAIProcessing.value = false; isAIProcessing.value = false;
} }
}; };
// 创建AI回答节点 // 创建AI回答节点
// 格式化Markdown为结构化文本 // 格式化Markdown为结构化文本
const formatMarkdownToText = (markdown) => { const formatMarkdownToText = (markdown) => {
@ -3139,7 +3149,6 @@ const handleNodeDragOperation = async (operation) => {
console.error('❌ 处理节点拖拽操作失败:', error); console.error('❌ 处理节点拖拽操作失败:', error);
} }
}; };
// 防止重复处理的编辑操作 // 防止重复处理的编辑操作
const processingEditOperations = new Set(); const processingEditOperations = new Set();
@ -3786,7 +3795,6 @@ const findNodeById = (node, targetId) => {
return null; return null;
}; };
// 打开自定义编辑模态框 // 打开自定义编辑模态框
const openCustomEditModal = (nodeObj, nodeElement) => { const openCustomEditModal = (nodeObj, nodeElement) => {
console.log('🎯 打开自定义编辑模态框:', nodeObj); console.log('🎯 打开自定义编辑模态框:', nodeObj);
@ -3828,12 +3836,44 @@ const openCustomEditModal = (nodeObj, nodeElement) => {
markdownContent = nodeObj.topic; markdownContent = nodeObj.topic;
console.log('✅ 从node.topic获取内容:', markdownContent.substring(0, 100) + '...'); console.log('✅ 从node.topic获取内容:', markdownContent.substring(0, 100) + '...');
} else if (nodeObj.dangerouslySetInnerHTML) { } else if (nodeObj.dangerouslySetInnerHTML) {
// ✅ 在传给Vditor之前先把HTML转成Markdown（推荐） // ✅ 在传给Vditor之前先把HTML转成Markdown（优先支持表格为 GFM 语法）
console.log('⚠️ 没有找到Markdown字段，转换HTML为Markdown:', nodeObj.dangerouslySetInnerHTML.substring(0, 100) + '...'); console.log('⚠️ 没有找到Markdown字段，转换HTML为Markdown:', nodeObj.dangerouslySetInnerHTML.substring(0, 100) + '...');
try { try {
const rawHtml = nodeObj?.dangerouslySetInnerHTML || ''; const rawHtml = nodeObj?.dangerouslySetInnerHTML || '';
if (typeof Vditor?.html2md === 'function') { // 先尝试把 <table> 转成 GFM 表格，避免转换成纯文本
const tableToMarkdown = (html) => {
if (!/<table[\s\S]*<\/table>/i.test(html)) return null;
const temp = document.createElement('div');
temp.innerHTML = html;
const table = temp.querySelector('table');
if (!table) return null;
const getText = (el) => (el?.textContent || '').replace(/\n+/g, ' ').trim();
let headers = [];
let rows = [];
const thead = table.querySelector('thead');
const tbody = table.querySelector('tbody');
if (thead) {
const tr = thead.querySelector('tr');
if (tr) headers = Array.from(tr.children).map(getText);
}
const bodyTrs = (tbody || table).querySelectorAll('tr');
bodyTrs.forEach((tr, index) => {
const cells = Array.from(tr.children).map(getText);
if (index === 0 && headers.length === 0) headers = cells; else rows.push(cells);
});
if (headers.length === 0) return null;
const headerLine = `| ${headers.join(' | ')} |`;
const alignLine = `| ${headers.map(() => '---').join(' | ')} |`;
const rowLines = rows.map(r => `| ${r.join(' | ')} |`);
return [headerLine, alignLine, ...rowLines].join('\n');
};
const mdFromTable = tableToMarkdown(rawHtml);
if (mdFromTable) {
markdownContent = mdFromTable;
console.log('✅ 使用自定义表格转换为Markdown');
} else if (typeof Vditor?.html2md === 'function') {
markdownContent = Vditor.html2md(rawHtml); markdownContent = Vditor.html2md(rawHtml);
console.log('✅ 使用 Vditor.html2md 转换成功:', markdownContent.substring(0, 100) + '...'); console.log('✅ 使用 Vditor.html2md 转换成功:', markdownContent.substring(0, 100) + '...');
} else { } else {
@ -4428,7 +4468,6 @@ const refreshMindMap = async () => {
console.error("❌ 刷新思维导图失败:", error); console.error("❌ 刷新思维导图失败:", error);
} }
}; };
// 保存预览数据到数据库 // 保存预览数据到数据库
const savePreviewToDatabase = async (data, title) => { const savePreviewToDatabase = async (data, title) => {
try { try {
@ -4964,7 +5003,6 @@ defineExpose({
showMindMapPage, showMindMapPage,
cleanupIntervals cleanupIntervals
}); });
// 实时更新思维导图（用于流式生成） // 实时更新思维导图（用于流式生成）
const updateMindMapRealtime = async (data, title, eventDetail = null) => { const updateMindMapRealtime = async (data, title, eventDetail = null) => {
try { try {
@ -5616,7 +5654,6 @@ const findNodeInData = (nodeData, targetId) => {
color: #333 !important; color: #333 !important;
position: relative !important; position: relative !important;
} }
:deep(.map-container .topic:hover) { :deep(.map-container .topic:hover) {
border-color: #007bff !important; border-color: #007bff !important;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
@ -6258,7 +6295,6 @@ const findNodeInData = (nodeData, targetId) => {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease; animation: slideIn 0.3s ease;
} }
@keyframes slideIn { @keyframes slideIn {
from { from {
transform: translateY(-20px); transform: translateY(-20px);
@ -6905,7 +6941,6 @@ const findNodeInData = (nodeData, targetId) => {
display: block !important; display: block !important;
visibility: visible !important; visibility: visible !important;
} }
/* 确保Vditor样式正确显示 - 强制上下布局 */ /* 确保Vditor样式正确显示 - 强制上下布局 */
.rich-editor-body .vditor { .rich-editor-body .vditor {
border: none !important; border: none !important;
@ -7237,6 +7272,4 @@ const findNodeInData = (nodeData, targetId) => {
} }
} }
</style> </style>