用 HTML 节点替换段落节点答案

【问题标题】：Replacing paragraph nodes with HTML nodes用 HTML 节点替换段落节点
【发布时间】：2021-10-18 20:08:37
【问题描述】：

问题

如何将“段落”节点替换为 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);
      }
    }
  }
};

【问题讨论】：

我没有答案，但xdm (MDX Compiler) issue #75 建议您的 XDM 无法编译，但由于错误（现已修复），错误消息没有帮助。
ty @ScottWelker。最终使用@remark-embedder/core 插件作为 asnwer 发布。

标签： markdown mdxjs remarkjs

【解决方案1】：

我使用@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;
    },
  };
};

【讨论】：