Add embed item to block menu

[arjunnaha]

The node exists, so it would be the case of adding an item to the block menu, along with a method of adding the URL. I would suggest an JS prompt box?

We would also need to consider how the markdown would be parsed back into an embed, since no special syntax exists.

Happy to submit a PR.

[tommoor]

This has triggered some ideas on how to improve the API here before v10 goes gold. I'm thinking something like:

<Editor
  embeds={[
    {
      name: "doc",
      title: "Google Doc",
      keywords: "google docs gdocs",
      icon: <GoogleDocIcon />,
      matcher: href => href.matches(/docs.google.com/i),
      component: GoogleDocEmbed,
      showInBlockMenu: true
    }
  ]}
/>

This would essentially match the format for other menu items here, but with the addition of matcher, and component. This would replace getLinkComponent.

You're right that there is a little bit of a question on how to get the url from the user, I'd rather not use a plain javascript dialog if possible.

Thoughts?

[arjunnaha]

I think the order of embeds should definitely matter, but that should happen anyways with arrays being order preserving. You could then have fallback/generic embeds.

In my particular use case, I use Embed.ly (although they currently have a service outage!) for my embeds, but I would want to provide my own components for a few exceptions. I think the proposed API is perfect for this:

<Editor
  embeds={[
    {
      name: "ms-stream",
      matcher: href => href.matches(/web.microsoftstream.com/i),
      component: StreamEmbed,
      showInBlockMenu: false
    },
    {
      name: "embed",
      matcher: () => true,
      component: Embed,
      showInBlockMenu: false
    }
  ]}
/>

If showInBlockMenu: false, then title, keywords and icon should be optional (and maybe also name?).

Re getting the URL, I think the UI of the link component could be adapted.

[tommoor]

In the example you show every link would be converted to an embed, that's what you'd be expecting yea?

If showInBlockMenu: false, then title, keywords and icon should be optional (and maybe also name?).

Makes me think the existence of title and icon could be what makes it appear in the block menu and avoid the boolean altogether.

[arjunnaha]

Yea, my Embed component has internal fall-back logic. But obviously, if we can't match a link, the editor should fall back to a standard link.

Makes me think the existence of title and icon could be what makes it appear in the block menu and avoid the boolean altogether.

Definitely sounds like a good shout. Maybe even just title, and there can be a generic icon?

[tommoor]

Made some good headway here, just have the link insertion part to do:

https://github.com/outline/rich-markdown-editor/compare/feat/issue-187?expand=1

[tommoor]

Pretty much there now: #188

[tommoor]

This functionality was released as part of v10.0.0.