Adapt markdown parser in a custom packages

[aymericzip]

This component currently uses a forked version of quantizor/markdown-to-jsx.

The original library does not support JSX, so we forked it to add JSX support and improve performance. We want to recommend our own parser by default for users who need JSX.

This parser is actually react focused. the idea would be to extract react dependecies to make this parser cross platform.

Code

https://github.com/aymericzip/intlayer/blob/main/packages/@intlayer/design-system/src/components/MarkDownRender/processor.tsx

Steps to proceed

1. Extract React-specific dependencies using a callback like createElement: (el => jsx.createElement(el))

2. Move core parser the processor from packages/@intlayer/design-system/src/components/MarkDownRender/processor.tsx, to packages/@intlayer/core/src to be imported as @intlayer/core.

3. Create dedicated adaptation for frameworks like:

   • react-intlayer/markdown (for React)
   • vue-intlayer/markdown (for Vue)
   • svelte-intlayer/markdown (for Svelte)(not included in the issue scope)
   • solid-intlayer/markdown (for Solid)(not included in the issue scope)
   • preact-intlayer/markdown (for Preact)(not included in the issue scope)

Requirements

• All tests must continue to pass.
• Performance must remain good.

Test

Ensuire the test and build pass, and markdown are correctly rendered on intlayer doc

Doc example: https://intlayer.org/doc/environment/nextjs

[Vedant817]

Hey @aymericzip, I would love to work on the issue. Please assign it to me.

[bountyhub-app]

🚀 Bounty Alert!

💰 A bounty of $50.00 has been created by aymericzip on BountyHub for this issue.

🔗 Claim this bounty by submitting a pull request that solves this issue!

You can also increase the amount of the bounty if you think the issue is worth more.

Good luck, and happy coding! 💻

[Ekep-Obasi]

@aymericzip, I'd love to work on this issue. Could you please assign it to me?

[aymericzip]

Hey @Ekep-Obasi, sure. Before that, I’d like to make sure you’ve taken a look at the code to be transformed.
Would you also be able to implement react-intlayer/markdown and the equivalent for another framework of your choice?

[StrveInc]

The issue seems interesting to solve can you assign it to me please?

[aymericzip]

Hey @StrveInc, sure, and same, before I assign, I’d like to make sure you’ve taken a look at the code. Can you confirm ?

https://github.com/aymericzip/intlayer/blob/main/packages/@intlayer/design-system/src/components/MarkDownRender/processor.tsx

[StrveInc]

Hey @StrveInc, sure, and same, before I assign, I’d like to make sure you’ve taken a look at the code. Can you confirm ?

https://github.com/aymericzip/intlayer/blob/main/packages/@intlayer/design-system/src/components/MarkDownRender/processor.tsx

yes confirmed
can assign now so i can work it

[plyght]

hey @aymericzip! doesn't seem like @StrveInc actually is doing any work here, however, i'd love to pick this up! i've taken a look at the code, and seems pretty implement-able. if you check my github stats i'm quite active, so i will get this done ASAP! let me know!