iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
568 stars 167 forks source link

Add option to not convert images into block elements #160

Closed atheck closed 9 months ago

atheck commented 2 years ago

Hi, I want to use Icons in my text content like so:

This is a text with an Icon ![Icon](IconName) on one long line with line break..

This results in the following output:

grafik

But what I want is this:

grafik

My solution for now is to parse the markdown and provide the AST to react-native-markdown-display:

const markdownItInstance = MarkdownIt({ typographer: true });
let tokens = stringToTokens(markdown, markdownItInstance);

tokens = cleanupTokens(tokens);
tokens = groupTextTokens(tokens);
tokens = omitListItemParagraph(tokens);

const ast = tokensToAST(tokens);

I'm using groupTextTokens and omitListItemParagraph out of react-native-markdown-display but copied cleanupTokens and replaced this line:

if (token.type === "image" || token.type === "hardbreak") {
    token.block = true;
}

with this one:

if (token.type === "hardbreak") {
    token.block = true;
}

So images are not handled as block elements.

Is there a more elegant way to achieve the same result? If not, what about providing an option to make this adjustable?