Figure with iframe tags break markdown preview

[Kopnu]

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:

• "@uiw/react-markdown-preview": "3.1.1"
  

• "react": "17.0.2"
  

• "react-dom": "17.0.2"
  

Some examples:

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

[jaywcjlove]

@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]

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

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]

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

[jaywcjlove]

agentofuser/remark-oembed#154

The plugin is too old

@Kopnu