react-markdown自定义下划线插件渲染div而非ins标签问题排查

问题根源 #

1. 你自定义的underline类型属于mdast（Markdown抽象语法树）节点，remark体系中mdast转hast（HTML抽象语法树）时，不识别未注册的自定义节点类型，会默认 fallback 为div标签，你在mdast节点上设置的tagName不会被转换逻辑识别。
2. 你配置的自定义组件接收的props错误，markdown节点的内容是通过children传递，不是value。

解决方案 #

第一步：修改插件节点配置

给你的自定义underline节点添加data.hName属性，指定转HTML时对应的标签名：

definition.push({
    type: "underline",
    // 新增hName配置，告诉mdast转hast时使用ins标签
    data: {
        hName: "ins"
    },
    children: [
        extractText(
            node.value,
            match.index + 1,
            match.index + value.length + 1
        ),
    ],
    position: extractPosition(
        node.value,
        match.index,
        match.index + value.length + 2
    ),
});

第二步：修正组件props配置

将自定义组件的入参从value改为children：

<ReactMarkdown
    remarkPlugins={[underlinePlugin]}
    components={{
        ins: ({ children }) => <ins>{children}</ins>,
    }}
>
    ~Hello~, **world**!
</ReactMarkdown>

可选优化：修正正则匹配逻辑

原正则/~(.*)~/g为贪婪匹配，遇到多个~时会匹配超出预期的内容，建议改为非贪婪匹配：

const UNDERLINE_REGEX = /~([^~]*)~/g;

内容的提问来源于stack exchange，提问作者amdigbari