orgapp/gatsby-orga

Incorrect link handling

Opened this issue · 2 comments

Orga doesn't appear to handle links in definition lists, and also does not apply the correct formatting if a link is formatted as source code using the ~ character.

I appreciate that these are two separate issues, but I hope you don't mind me opening them together, as the images show both issues.

Expected outcome

  1. When using links in definition list headers, I expect them to render as links.
  2. When using a link in text surrounded by ~ characters, I expect it to be rendered in a <code> tag.

As a visual, I expected the rendered text to look like this (as rendered by Pandoc and Hakyll):
image

Notice the definition list 'header', and the two links at the end of the paragraph, Maybe and Either

Actual outcome

  1. Links in definition lists are not rendered or even picked up on properly. They render as plain text.
  2. Links that should be formatted as <code> are not, and are instead just surrounded by ~ characters in the rendered HTML output.

Here's what Orga and Gatsby renders:
image

In this image, the header is rendered as the literal link text content in org mode and is not a link. The two links at the end are surrounded by ~ characters and are not in <code> tags.

On the subject of link formatting: It seems to apply to any formatting within a link:

In this screenshot, the text between the / characters should have been rendered in Italics.
image

I have also noticed that the lack of formatting happens within other blocks (such as #+BEGIN_ASIDE) even when it's not in a link context. I suspect these issues are related.

This image shows how formatting is not applied within this #+BEGIN_ASIDE block. As mentioned in #13, this is actually a <pre> block, though it should be an <aside>.
image

For posterity and if anyone else runs into the first of these problems (links not being transformed properly), here's a workaround you can wrap your html content in to transform untransformed org links to HTML anchor tags:

// create anchor tag
const anchorTag = (url, text) => `<a href="${url}">${text ?? url}</a>`

// transform org links in `input` to anchor tags
export const transformLinks = input =>
  input.replace(/\[\[([^\]]+)\](\[([^[\]]*)\])?\]/g, (_, url, __, text) =>
    anchorTag(url, text),
  )

This assumes that you don't use the org link pattern for any other parts of your content.