remarkjs/react-markdown

Heads up! Moved to @remarkjs

wooorm opened this issue · 4 comments

Hi folks! This project is now maintained in @remarkjs, which also houses the underlying set of tools used in react-markdown, and is one of the organizations in the unified collective, which includes lots of markdown and markup related things (including mdx).
We’ll join Espen (@rexxars) in maintaining the project, e.g., update dependencies, answering your questions, etc.
There is quite the backlog of things to work though. Please bare with us while we’re going through it all.

We’ll cut a major version soon, with the goal of fixing a bunch of bugs, but otherwise not changing too much.
The plan is for another major to come out in a few months that will make the project more modern and powerful, at the cost of being a bigger update.

Do let us know about your thoughts on the future of this project, and feel free to ask questions,
Titus

I love being able to directly map mdast nodes to React Elements (without rehype via the renderers option)

Render complex React/html widgets by using custom renderer

.youtubePlayer iframe {
  width: 560px;
  height: 315px;
  border: none;
}
import React from 'react'
import ReactMarkdown from 'react-markdown'

// https://github.com/svenanders/react-iframe
import Iframe from 'react-iframe'

function getCoreProps(props) {
  return props['data-sourcepos'] ? {'data-sourcepos': props['data-sourcepos']} : {}
}

function CodeBlock(props) {
  const className = props.language && `language-${props.language}`

  if (props.language === 'youtube') {
    return (<Iframe className={className}
        url={props.value.trim()}
        loading="lazy"
        frameBorder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen/>)
  }

  const code = React.createElement('code', className ? {className: className} : null, props.value)
  return React.createElement('pre', getCoreProps(props), code)
}

const strapiMarkdown = [
    '```youtube',
    'https://www.youtube.com/embed/acL2BQxz0Ao',
    '```'
   ].join('\n');

<ReactMarkdown className="youtubePlayer" source={strapiMarkdown}
  renderers={{
    code: CodeBlock
  }}
/>

Please see: https://github.com/remarkjs/react-markdown/blob/master/src/renderers.js

thanks for sharing @heri16!
Out of curiosity did you mean to post this to #427 which discusses rehype?

remark-react@5.0.0 is now released, start your updates!