3

I'm trying to create a youtube editor component with gatsby-remark-embed-video. I'm using Gatsby, Netlify CMS, and Netlify. I want to have a preview of the video (can be the video itself or an image) in my preview by Netlify CMS. However, it results in a conflict. If it works in Netlify CMS, it doesn't work to Gatsby and vice versa.

gatsby-remark-embed-video relies on pattern youtube: ID to embed a video, which works correctly on gatsby. The problem is that, when using Netlify CMS, it's parsing youtube: ID as markdown code, because normally we use Backtick (grave accent) to write code!

{
  id: 'youtube',
  label: 'Youtube',
  fields: [{ name: 'id', label: 'Youtube Video ID', widget: 'string' }],
  pattern: /^`youtube: (\S+)`$/,
  fromBlock: match => {
    const id = match[1];
    return { id };
  },
  toBlock: obj => `\`youtube: ${obj.id}\``,
  toPreview: obj =>
    `<img src="http://img.youtube.com/vi/${
      obj.id
    }/maxresdefault.jpg" alt="Youtube Video"/>`
}

To conclude, basically it's not working to Netlify CMS. All the time it results in a line of code in Netlify CMS preview. If I remove the backtick (grave accent) from my markdown file, it is reading by a normal text and not like a video. I don't know what to do, can someone help me?

Thank you! =)

What is reading by Netlify CMS in my preview: image

muescha
  • 1,544
  • 2
  • 12
  • 22
Mariana Martins Menezes
  • 31
  • 2
  • are you doing something special to load preview into netlifyCMS i.e registering a custom component or something like that? – Derek Nguyen Apr 02 '19 at 09:46
  • I'm using a custom preview component, based on my template. I get the parsed markdown using `widgetFor('body')`. – Mariana Martins Menezes Apr 03 '19 at 05:58
  • I'm not familiar with this `widgetFor()` function, could you edit question to include your custom preview component code? Perhaps you'd need to write a custom function to parse the youtube id pattern, but it's difficult without knowing how the markdown being parsed – Derek Nguyen Apr 03 '19 at 13:34
  • The following link is an example project to demonstrate this problem >> https://codesandbox.io/s/1ynr8825r3 Hope it helps! – Mariana Martins Menezes Apr 07 '19 at 06:05
  • I created a [ticket](https://github.com/netlify/netlify-cms/issues/2266) on Github. It has been fixed and soon it should be released in a new version, as you can see, [here](https://github.com/netlify/netlify-cms/pull/2268). – Mariana Martins Menezes Apr 25 '19 at 07:13
  • I added a PR in `gatsby-remark-embed-video` as well. You can see [here](https://github.com/borgfriend/gatsby-remark-embed-video/pull/19); if merged, this PR will allow you to use whatever syntax you'd like to embed video! – Derek Nguyen Apr 25 '19 at 07:16

0 Answers0