Installing Media Embed Plugins

[bishoymelek]

Hi, I am having trouble getting media embed plugin to work, can you elaborate more how to use it?
<MediaEmbedUrlInput /> <MediaEmbedElement /> which one to use and where? :)

Thank you for the support and efforts 🙏

[zbeyens]

MediaEmbedElement is the node component, which uses the input

[bishoymelek]

Hi @zbeyens , Can you share a working example how you use this component?

[karthikcodes6]

Hi @bishoymelek,

First you need to pass the createMediaEmbedPlugin to the plugins and then add element to the components like below.

() => {
  const plugins = [
    createMediaEmbedPlugin(),
  ];

  const components = {
     [ELEMENT_MEDIA_EMBED]: MediaEmbedElement
  }

  return (
    <Plate
      id="media-embed"
      plugins={plugins}
      components={components}
      options={options}
      editableProps={editableProps}
      initialValue={initialValueEmbeds}
    />
  );
}

[bishoymelek]

@karthikcodes6 thanks for your answer, and how to embed a video at a path after that?

[zbeyens]

We have an example https://platejs.org
Do you miss something there?

[bishoymelek]

@zbeyens I don't get the idea, how to embed a vimeo video in that example? just paste the url at a selection point and it should show up as the one in the example?

[zbeyens]

We don't have any toolbar button yet but the idea is that you can insert a node of this type with an url at any path.

[bishoymelek]

Thanks @zbeyens @karthikcodes6 🙏 I will add a PR ASAP for the toolbar 👍