Skip to content

bug: web文章内联HTML/CSS图表导入后格式丢失(goroutine图等) #53

@bruceding

Description

@bruceding

问题:Web 文章内联 HTML/CSS 图表在导入后丢失格式

现象

通过浏览器扩展导入的 web 类型文章,如果原文包含内联 HTML/CSS 实现的图表(非 <img> 标签),导入后的 paper.md 中图表被扁平化为纯文本,前端用 ReactMarkdown 渲染后格式混乱,无法正常阅读。

示例

文章 Building a Distributed Search Engine in Pure Go(文档 ID 243):

  • 原文中的 goroutine 流程图是一个 styled div(深色背景 + 彩色圆角卡片 + 箭头),导入后变成:
One Agent Query → Five Concurrent Goroutines → Fused Result
QUERY
Agent request
↗— →— →— →— ↘—
go embed(query) ~2ms
go bm25Search(shards...) ~3ms
...
  • 性能对比柱状图同样被扁平化为纯文本,失去可视化效果

根因

  1. 浏览器扩展将原始 HTML 页面转换为 markdown 时,内联 HTML 元素被转为纯文本
  2. 前端 DocDetail.tsxhtmlContent 仅在 sourceType === 'newsletter' 时加载,web 类型文章不会加载保存的 index.html
  3. 因此前端只能用 ReactMarkdown 渲染 paper.md,内联 HTML 图表丢失

建议方案

方案 A:前端对 web 类型文章也加载并渲染 index.html(与 newsletter 逻辑一致),作为可选的"富文本"视图模式

方案 B:改进导入转换逻辑,对内联 HTML 图表区域进行截图保存为图片,在 paper.md 中引用

方案 C:改进 HTML→Markdown 转换,将结构化 HTML 图表转换为 markdown table 或 mermaid 图等可渲染格式

方案 A 改动最小,因为 index.html 已经随导入一起保存了,只需前端放开加载限制即可。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions