is it possible add embedded youtube video in editor ?

[rasel-stacklearner]

trafficstars

i want to embed youtube videos in the editor. is it possible now?

[jaywcjlove]

@rasel-stacklearner

Using the remark-oembed plugin allows displaying youtube videos in the preview area.

You can also create a custom plugin to solve your own problem.

[rasel-stacklearner]

@rasel-stacklearner

Using the remark-oembed plugin allows displaying youtube videos in the preview area.

You can also create a custom plugin to solve your own problem.

Can you give me some example codes? and one more thing is it possible to embed "MDX Embed" https://mdx-embed.netlify.app/?path=/docs/introduction--page

[jaywcjlove]

@rasel-stacklearner The recommended plugin doesn't seem to be working. I found a new one that should work.

https://www.npmjs.com/package/remark-youtube

import { useState } from "react";
import MDEditor from "@uiw/react-md-editor";
import "@uiw/react-md-editor/dist/mdeditor.css";
import youtube from "remark-youtube";

const markdown = `Hey this is a nice youtube video about making modern react apps with gatsby:

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

Check it out 👆`;

export default function App() {
  const [value, setValue] = useState(markdown);
  return (
    <div>
      <MDEditor
        value={value}
        onChange={setValue}
        previewOptions={{
          remarkPlugins: [[youtube]],
        }}
      />
    </div>
  );
}

[rasel-stacklearner]

@rasel-stacklearner The recommended plugin doesn't seem to be working. I found a new one that should work.

https://www.npmjs.com/package/remark-youtube

import { useState } from "react";
import MDEditor from "@uiw/react-md-editor";
import "@uiw/react-md-editor/dist/mdeditor.css";
import youtube from "remark-youtube";

const markdown = `Hey this is a nice youtube video about making modern react apps with gatsby:

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

Check it out 👆`;

export default function App() {
  const [value, setValue] = useState(markdown);
  return (
    <div>
      <MDEditor
        value={value}
        onChange={setValue}
        previewOptions={{
          remarkPlugins: [[youtube]],
        }}
      />
    </div>
  );
}

is there any way to work with it "https://mdx-embed.netlify.app/?path=/docs/introduction--page" ?

[jaywcjlove]

@rasel-stacklearner I'm not sure what you're trying to do. Are you looking to replace the markdown preview area with MDX?

[rasel-stacklearner]

@rasel-stacklearner I'm not sure what you're trying to do. Are you looking to replace the markdown preview area with MDX?

yes. Is it possible? So that i can embed the components of MDX-Embed

[rasel-stacklearner]

@rasel-stacklearner I'm not sure what you're trying to do. Are you looking to replace the markdown preview area with MDX?

@jaywcjlove Basically I want to do something like this =>

I try to extend the component functionality with MDX-Embed Component.