Resolve linked assets in rich text

SDKs JavaScript SDK
1

I’m using the documentToHtmlString() to resolve rich text areas. I have a link to an asset that I want to resolve.

I have this code working.

import { MARKS, BLOCKS, INLINES } from '@contentful/rich-text-types';

const options = {
  renderMark: {
    [MARKS.BOLD]: text => `<strong>${text}</strong>`
  },
  renderNode: {
     [INLINES.ASSET_HYPERLINK]: (node, next) => {
      return `<a href="${node.data.target.fields.file.url}">${next(node.content)}</a>`;
    }
  }
};

And I’m calling it with return documentToHtmlString(obj, options);

And it works but it seems really clunky. Is there a better way to resolve links inside rich text?

2

Hi @jheavner

What feels clunky about it?

Anyway, I don’t think there’s another way. And i think this is how it’s supposed to work in the first place. Intercept each type of node and render the way you want it. And you already did it by inserting an asset url to an anchor tag.