How to use markdown-it-wikilinks plugin

[ospfranco]

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?

[iamacup]

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;

[iamacup]

feel free to open if more discussion needed :)