search

uiwjs / react-markdown-preview

React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.
https://uiwjs.github.io/react-markdown-preview
MIT License
277 stars 49 forks source link

Figure with iframe tags break markdown preview #87

Closed Kopnu closed 3 years ago

Kopnu commented 3 years ago

Hi, I found a problem with figure/iframe html tags. When You try to add md text right after that, it doesn't compile. It's easy to reproduce on codesandbox.

Maybe I'm doing the wrong thing and You know a better way to embed a video in a Markdown preview?

Versions:

Some examples:

image image

For other tags, I have to add extra "\n " and it will work... image

jaywcjlove commented 3 years ago

@Kopnu Use Remark plugin @agentofuser/remark-oembed

import oembed from '@agentofuser/remark-oembed';

<MarkdownPreview
  source={source}
  remarkPlugins={[oembed]}
/>
Hey this is a nice youtube video about making modern react apps with gatsby:

https://www.youtube.com/watch?v=GN0xHSk2P8Q

Check it out 👆

output

Hey this is a nice youtube video about making modern react apps with gatsby:

<iframe 
  width="480" 
  height="270" 
  src="https://www.youtube.com/embed/GN0xHSk2P8Q?feature=oembed" 
  frameborder="0" 
  allow="accelerometer; 
    autoplay; 
    encrypted-media; 
    gyroscope; 
    picture-in-picture" 
  allowfullscreen>
</iframe>

Check it out 👆
Kopnu commented 3 years ago

@jaywcjlove I don’t know, but I’m really doing something wrong ... 🤔

image

Where can I find any information on how this should work? Or maybe how can i create my own plugin? js/react is quite difficult for me, thanks a lot for your help

P.s. I also tried to install a remark and it didn't help

Kopnu commented 3 years ago

Anyway, I found how can I fix this for myself. Bad way but works.

image

jaywcjlove commented 3 years ago

https://github.com/agentofuser/remark-oembed/issues/154

The plugin is too old

@Kopnu