iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
608 stars 173 forks source link

Footnote plugin integration breaks the library #153

Closed ivankdev closed 11 months ago

ivankdev commented 3 years ago

Version: "react-native-markdown-display": "^7.0.0-alpha.2",

Trying to connect https://github.com/markdown-it/markdown-it-footnote plugin into our library.

import MarkdownItFootnotePlugin from 'markdown-it-footnote';

// ...

const MARKDOWN_IT_INSTANCE = MarkdownIt({typographer: true})
  .use(MarkdownItFootnotePlugin, {containerClassName: 'footnote'})
  .disable(IGNORE_LIST);

defining rules (together with other ones)

...
footnote_ref: (node: any, child: any, parent: any, styles: AnyObject) => {...},
footnote_block: (node: any, child: any) => (  ...  ),
footnote: (node: any, child: any, parent: any, styles: AnyObject) => { ... },
footnote_anchor: () => null,
...

In render passing this rules and other stuff as usually

<MarkdownDisplay
  markdownit={MARKDOWN_IT_INSTANCE}
  // debugPrintTree // (un)comment (for)after debugging
  rules={markdownRules}
  style={markdownStyles}
  mergeStyle={false}>
  {copy}
</MarkdownDisplay>

And problem appears here. My MD works absolutely correctly before this plugin, just ignores footnotes as usual text.

Screenshot 2021-09-17 at 18 18 37


But after these changes above are applied the MarkdownDisplay component returns only plugin content only footnotes and remove all another away from result.

Screenshot 2021-09-17 at 18 19 02


What is more interesting - I found that idle preprocessing helps sort it out finally

// preprocessing, it's required for plugins to be correctly applied (probably bug w/o it)
const copy = tokensToAST(stringToTokens(children, MARKDOWN_IT_INSTANCE))

Screenshot 2021-09-17 at 18 19 18


Nevertheless this is not solution for me. It breaks my images at all on another MD copies, it breaks parent structure and other rules - why does it happen? Shouldn't any plugin work by way like applying only specific syntax and keep all the rest as it is?

If i DO NOT apply idle preprocessing, I believe all the rules are kept as it is, but my source content is ignored by plugin. Maybe I integrate plugin incorrectly? Could someone advice something with it, I'm really stuck with it couple of days. Thank you.

ivankdev commented 3 years ago

@iamacup any clues?

is it correct way to integrate it at all?