1

问题

如何将“段落”节点替换为 MDX 的“html”节点？

背景

将每个“twitter.com”链接替换为扩展的 Twitter，在 MDX 内容中嵌入 HTML。

可重现的 CodeSandbox：https ://codesandbox.io/s/dazzling-curran-2bcwe?file=/src/index.mjs:2024-3439

问题

我有一个 MDX 内容，其中包含 twitter 链接列表（例如https://twitter.com/BrendanEich/status/1151317825908166656），替换段落节点会导致以下错误

../node_modules/esbuild/lib/main.js:869:27：错误：[插件：esbuild-xdm] 无法在 failureErrorWithLog (/sandbox/node_modules/esbuild/lib/main.js: 1449:15) 在 /sandbox/node_modules/esbuild/lib/main.js:1131:28 在 runOnEndCallbacks (/sandbox/node_modules/esbuild/lib/main.js:921:63) 在 buildResponseToResult (/sandbox/node_modules/esbuild /lib/main.js:1129:7) 在 /sandbox/node_modules/esbuild/lib/main.js:1236:14 在 /sandbox/node_modules/esbuild/lib/main.js:609:9 在 handleIncomingPacket (/sandbox /node_modules/esbuild/lib/main.js:706:9) 在 Socket.readFromStdout (/sandbox/node_modules/esbuild/lib/main.js:576:7) 在 Socket.emit (events.js:315:20)在 addChunk (internal/streams/readable.js:309:12)

有问题的代码

const remarkTwitter = (options) => {
  return transformer;

  async function transformer(tree) {

    // gather Twitter links
    visit(tree, "paragraph", (node) => {
      if (isTwitterLink(node)) {
        const tweetLink = node.children[0].value;
        tweetNodeList.push([node, tweetLink]);
      }
    });

    // Build Tweet embed HTML
    // and replace the current node
    for (let i = 0; i < tweetNodeList.length; i++) {
      const twitterNode = tweetNodeList[i];
      const node = twitterNode[0];
      const tweetLink = twitterNode[1];

      try {
        const embedData = await getEmbeddedTweet(tweetLink, options);

        node.type = "html";
        node.value = embedData.html;

        return node;
      } catch (err) {
        console.error(err);
      }
    }
  }
};
4

1 回答 1

0

我没有使用自定义插件，而是使用了@remark-embedder/core插件

这是使用插件的代码部分。

import remarkEmbedder from "@remark-embedder/core";
// other imports...

const getMDXOptions = (year: number, slug: string) => {
  const cwd = `${getBlogRoot(year, slug)}`;
  const imagesUrl = `/images/blog/${year}/${slug}`;

  return {
    cwd,
    xdmOptions: (options: any) => {
      options.format = "mdx";
      options.allowDangerousRemoteMdx = true;
      options.rehypePlugins = [twitterWidgetScriptPlugin];
      options.remarkPlugins = [
        remarkMdxImages,
        [
          remarkEmbedder,
          {
            transformers: [
              githubGistTransformer,
              codeSandboxTransformer,
              [oembedTransformer, oembedConfig],
            ],
            handleHTML,
          },
        ],
      ];

      return options;
    },
    esbuildOptions: (options: BuildOptions) => {
      options.outdir = path.join(process.cwd(), "public", imagesUrl);
      options.loader = {
        ...options.loader,
        ".png": "file",
        ".jpg": "file",
        ".gif": "file",
        ".svg": "file",
      };
      options.publicPath = imagesUrl;
      options.write = true;

      return options;
    },
  };
};
于 2021-12-30T01:08:47.307 回答