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
- When using links in definition list headers, I expect them to render as links.
- 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):
Notice the definition list 'header', and the two links at the end of the paragraph, Maybe
and Either
Actual outcome
- Links in definition lists are not rendered or even picked up on properly. They render as plain text.
- 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:
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.
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>
.
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.