Automatically resolve relative URLs to absolute URLs

[assaf]

It's too easy to forget that emails need absolute URLs and end up sending emails with broken URLs.

This could be mitigated with something like:

const document = parseDocument(html);
findAll((element) => {
  if (element.attribs?.["href"]) // Links/buttons
    element.attribs["href"] = absoluteURL(element.attribs["href"]);
  if (element.attribs?.["src"]) // Images
    element.attribs["src"] = absoluteURL(element.attribs["src"]);
}, document.children);
return serialize(document);

Doing this after rendering to HTML but before html-to-text would also apply to plain text emails.

Another option is to have a root React component establish a context with the base URL, that Link/Button/Img could access. This would be more efficient — no need to parse/serialize DOM. However, won't cover the case where someone is using their own JSX components instead of React Email components.

PS Fantastic library. Thanks for breathing new life into the email space.

[cassiorsfreitas]

Good suggestion @assaf
Btw I think we also need to consider who are using the library locally just to create templates, for exemple. Maybe adding a property called baseUrl for Head component can be safer. For these cases, we just need to decode using that property value instead of getting the value from window.location...
What do you think?

[assaf]

The benefits of fixing URLs in the render function:

• You can use it in any context (sending emails, rendering templates)
• You only need to set the URL in one place
• You can use 3rd party components (eg HTML to React, Markdown, autolink)
• Dev environment can pick up from env var

Manipulating the DOM doesn’t affect URLs in CSS. So I also think it would be helpful to have the base URL accessible as React context.

Also it should probably be a transform function, where if you give it a string it creates a transformer function for you.

Transformer function could change URLs to go through a tracking endpoint, use CDN for images, skip substitutions (eg %unsubscribe%).