javascript - 内容丰富的 documentHtmlToString 格式链接

Question

我使用 contentful 来满足我们的 CMS 需求，并使用 contentful SDK for JavaScript。
我正在尝试使用他们的 documentToHtmlString 向我的 anchor 链接添加一些属性的方法。
我试过这样做:

return documentToHtmlString(text, {
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, next) => {
      let content: any[] = [];

      node.content.forEach((item) => {
        if (item.nodeType === 'hyperlink') {
          let itemContent = item.content[0];
          let value = itemContent['value'];

          let uri = item.data.uri;
          console.log(value, uri);

          content.push(
            `<p><a href="${uri}" data-category="contact" data-action="email">${value}</a></p>`
          );
        } else {
          content.push(`<p>${next([item])}</p>`);
        }
      });

      console.log(content.join(''));

      return content.join('');
    },
  },
});

但是当我检查结果时，它没有我的 数据类别或 数据操作 .
有没有更好的方法来向链接添加属性？
他们的文档显示了这一点:
https://www.contentful.com/developers/docs/javascript/tutorials/rendering-contentful-rich-text-with-javascript/
但没有提到 anchor :(

情节变厚了...
我想可能它不喜欢数据属性，所以我又添加了一些:

content.push(
  `<p><a class="test" href="${uri}" category="contact" data-category="contact" data-action="email" target="_blank">${value}</a></p>`
);

实际渲染的是这样的:

<a class="test" href="mailto:bob@example.com" target="_blank">bob@example.com</a>

注意它是如何添加的 类(class)和 目标 , 但省略 类别 , 数据类别和 数据操作 .....

感谢@stefan-judis 告诉我内联。
我现在已经将我的代码更新为:

[INLINES.HYPERLINK]: (node, next) => {
  console.log(node);

  let value = node.content[0]['value'];
  let uri = node.data.uri;

  return `<a class="test" href="${uri}" data="test" category="contact" data-category="contact" data-action="email" target="_blank">${value}</a>`;
},

我删除了 积木 代码，但不幸的是，我仍然遇到同样的问题。它没有呈现所有属性(仅 类 和 目标 )。事实上，它呈现的效果与上面完全相同。就像有一些内部格式可以删除属性......

Answer 1

我创建了 a quick example achieving your desired outcome .

client.getEntry("...").then(({ fields }) => {
  const richText = fields.richText;

  const renderOptions = {
    renderNode: {
      // this is the important part 👇
      [INLINES.HYPERLINK]: (node, next) => {
        console.log(node);
        return `<a href="${
          node.data.uri
        }" style="background: red; color: white;" data-foo>${next(
          node.content
        )}</a>`;
      },
      [BLOCKS.EMBEDDED_ASSET]: (node, next) => {
        // ...
      }
    }
  };
  document.getElementById("app").innerHTML = documentToHtmlString(
    richText,
    renderOptions
  );
});

我不确定您的环境中发生了什么，但正如您在 CodeSandbox 上看到的那样，代码呈现数据属性和所有内容。 :)