Closed ospfranco closed 4 years ago
I think its really similar to in the example in the readme - something like this:
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
import Markdown, { MarkdownIt } from 'react-native-markdown-display';
import wikilinks from '@gerhobbelt/markdown-it-wikilinks';
const markdownItInstance =
MarkdownIt({typographer: true})
.use(wikilinks, {});
const copy = `
# H1
[[Wiki Links|here]] to learn about [[/Wiki]] links.
Something else
`;
const astTree = markdownItInstance.parse(copy, {});
console.log(astTree);
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={{height: '100%'}}
>
<Markdown
debugPrintTree
markdownit={markdownItInstance}
rules={{
wikilink: (node, children, parent, styles) =>{
const linkText = node.sourceMeta.match[3] ? node.sourceMeta.match[3] : node.sourceMeta.match[1]
return (
<Text
key={node.key}
onPress={() => {console.log(`Handle the link press and take the user to '${node.sourceMeta.match[1]}' - you will have to parse this string and work out how to handle it in the context of your app / deep links / http links etc. etc. with Linking or ReactRouter or whatever you are using`)}}>
{linkText}
</Text>
);
}
}}
>
{copy}
</Markdown>
</ScrollView>
</SafeAreaView>
</>
);
};
export default App;
feel free to open if more discussion needed :)
Hi! first of all thanks a lot for the library,
I'm trying to integrate a new plugin: https://www.npmjs.com/package/@gerhobbelt/markdown-it-wikilinks
I'm trying to follow the instructions on the README, but unlike the example you provided, this plugin does not return a usable rule, but rather it returns
regexp-[n]
where n changes every time the file is loaded (via fast refresh for example).Any idea on how to make wikilinks work?