重新炒作将主题标签呈现为网址

Question

尝试使用 rehypeRewrite 将类似

#tag

的内容渲染为 Markdown 编辑器 MDEditor 的 URL。这是我到目前为止所拥有的

const REG = /\B(\#[a-zA-Z]+\b)(?!;)/gi;

<MDEditor 
    style={{width: "100%", height: "100%"}} 
    minHeight={500} 
    value={value} 
    onChange={(event) => {
        setValue(event || '');
    }} 
    previewOptions={{
        rehypePlugins: [
            [
            rehypeRewrite,
            {
                rewrite: (node : any, index: any, parent: any) => {
                if (node.type === "element" && node.tagName === "p") {
                    let text = getCodeString(node.children);
                    if (REG.test(text)) {
                        node.children = [
                        {
                            type: 'link',
                            url: 'https://example.com',
                            children: [{type: 'text', value: text} ]
                        }];
                    }
                }}
            },
        ]],
    }}
/>

正则表达式正确匹配文本，但不是用链接替换节点，而是不渲染任何内容。

任何有关我可能做错的事情的指导将不胜感激

Answer 1

您提供的正则表达式似乎是正确的，这里的错误是您如何制作链接元素。您仍应使用

link

类型，而不是类型

element

，并且对于链接，您需要添加其他标签，例如

tagName: "a"

和

properties: {href: 'https://example.com'}

。

基本上你可以用以下代码替换

node.children

代码：

                      node.children = [
                        {
                          type: "element",
                          tagName: "a",
                          properties: {
                            href: "https://example.com",
                          },
                          children: [{ type: "text", value: text }],
                        },
                      ];