Netlify CMS Limitations/Options

[ProfYaffle]

Right, I've been fighting a bit with the WYSIWYG and Markdown editors in Netlify CMS for a while. The issue is probably twofold:

1. It has very limited formatting options, so there's no text alignment (for example), no inline HTML
2. The preview window is only a kind-of-preview, and doesn't accurately represent what appears on the website.

There are also some quirks around workflow, e.g. you can't properly see an image in the preview until the post is deployed, as the images aren't moved to the correct directories before that point. @pkscout turned Deploy Previews on, which addresses much of this in that I can at least see the blog posts "live" now before we actually publish them, which is a huge help (thank you) - but we could perhaps do more.

A placeholder for my own thoughts, as much as anything...

• it looks like Netlify CMS uses remark as its markdown engine
• remark supports a wide range of plugins, which may be useful

Immediate thoughts:

• remark-gfm - extend the core CommonMark support to mimic Github-flavoured markdown
• remark-github - link references to commits, issues, and users, in the same way that GitHub does in comments (so we could e.g. directly link to PRs as we do in the draft Github blog posts)
• remark-align - provide basic left/centre/right alignment of text (may well be broken, or perhaps just for the latest version of remark, which isn't necessarily a problem)

I'll keep digging, but that's a starting point.

[pkscout]

Just as an FYI. The Netlify CMS only generates the markdown files. GatsyJS is the site builder, and it actually builds the pages. So whatever solution we look at for this, it likely has to have a way to be supported both in the NetlifyCMS and Gastby.

[razzeee]

decaporg/decap-cms#1503

I'm not really sure why you need text alignment. I usually only use block and the normal (left bound) one. So we are only missing block?

[ProfYaffle]

It's not the most important thing in the world - it was an observation when adding captions to inline images. IMO they look better centred - both images and captions - than they do left-aligned.

[razzeee]

We might be able to just center images then, and maybe we can just render the alt text you should be able to set.

But we might need to add a component for that in the CMS via https://www.netlifycms.org/docs/custom-widgets/#registereditorcomponent and then rendering it correctly on the blog side of things.

Similar to this decaporg/decap-cms#1058