Milkdown项目中实现图片清理功能的深度解析

在富文本编辑器开发中，图片资源管理一直是一个重要但容易被忽视的环节。本文将深入探讨如何在Milkdown编辑器中实现图片清理功能，帮助开发者更好地管理编辑器中的图片资源。

图片清理的必要性

当用户在编辑器中删除图片时，仅仅从DOM中移除是不够的。这些图片可能已经上传到服务器，如果不及时清理，会导致服务器存储空间被无效占用。因此，我们需要一种机制来追踪被删除的图片，并及时释放服务器资源。

技术实现方案

Milkdown作为基于ProseMirror的编辑器，提供了多种方式来处理节点遍历和操作。以下是两种主要的实现方案：

方案一：基于Markdown AST的解析

通过解析Markdown抽象语法树(AST)，我们可以获取所有图片节点信息：

import { visit } from 'unist-util-visit';
import { directive } from 'micromark-extension-directive';
import { gfm } from 'micromark-extension-gfm';
import { directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive';
import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm';

export const parseMarkdownToAST = (markdown: string) => {
  const mdast = fromMarkdown(markdown, {
    extensions: [directive(), gfm()],
    mdastExtensions: [
      directiveFromMarkdown(),
      gfmFromMarkdown()
    ]
  });

  const imageUrls: string[] = [];
  
  visit(mdast, 'image', (node: any) => {
    imageUrls.push(node.url);
  });
  
  return imageUrls;
}

这种方法直接操作Markdown源码，适合在保存或导出时进行图片资源检查。

方案二：基于ProseMirror文档遍历

Milkdown底层使用ProseMirror，我们可以直接遍历文档树：

export const getAllImageNodes = $command('getAllImageNodes', (ctx) => () => (state, dispatch) => {
  const imageNodes: any[] = [];
  
  state.doc.descendants(node => {
    if (node.type.name === 'image') {
      imageNodes.push({
        node,
        attrs: node.attrs
      });
    }
  });
  
  return imageNodes;
});

调用方式：

editorInstance.action((ctx) => {
  const images = callCommand(getAllImageNodes.key)(ctx);
  // 处理图片节点
});

这种方法实时性更好，适合在编辑器运行时监控图片变化。

实现图片清理的最佳实践

结合上述两种方案，我们可以构建一个完整的图片清理系统：

1. 初始化阶段：解析初始内容，记录所有图片URL
2. 编辑监听：监听文档变化，检测图片节点的增减
3. 删除处理：当图片被删除时，将对应URL加入待清理队列
4. 定时清理：定期或在特定时机(如保存时)清理服务器上的废弃图片

性能优化考虑

在处理大型文档时，需要注意：

1. 避免频繁的全文档遍历
2. 使用增量更新策略，只检查变化部分
3. 对服务器清理请求进行批处理
4. 实现清理失败的重试机制

总结

在Milkdown编辑器中实现图片清理功能，开发者可以根据具体需求选择基于AST解析或ProseMirror文档遍历的方案。完善的图片资源管理不仅能提升服务器资源利用率，也能为用户提供更流畅的编辑体验。通过本文介绍的技术方案，开发者可以轻松构建自己的图片清理系统。