WIP: Add/instagram shortcode wizard

[dmsnell]

Follows #5070 and #5071

Related: #1729

This PR is mainly about the new shortcode wizard infrastructure being added to the editor. It includes an Instagram shortcode "wizard" as a demonstration of how to hook into the plugin generator.

The purpose of this new code is to enable creating a series of wizard-style modals for the editor without needing to mix a bunch of TinyMCE-specific code into them.

As this is still a work-in-progress and a demonstration PR, please ignore the ugly button on the left side of the TinyMCE toolbar. It depends on #5071 and will end up being a menu item on the dropdown in there.

Questions

• How can we get the shortcode to be replaced by the embedded area and then provide the hover/tap edit/delete buttons?
• Is the given API robust enough for the types of embeds/widgets/shortcodes we want to create?
• Is the level of modularity/separation of concerns appropriate for the tasks at hand? As designed, the wizard modals can be tested in isolation without mocking.

Testing
Open the editor and try to mess around with the new embed. Please look at the code and suggest any recommendations you might have.

Thanks!

cc: @rodrigoi @aduth @blowery

[gwwar]

wizard vs Wizard for naming consistency.

[dmsnell]

thanks @gwwar - I was following React's naming convention here since Wizard is a React component

[gwwar]

How can we get the shortcode to be replaced by the embedded area and then provide the hover/tap edit/delete buttons?

It's been a while since I've written a tinymce plugin, but you're able to provide placeholders for the rich text view. I'm not 100% sure we'll be able to show the embed in the rich preview without proxying it.

I would suggest taking a look at the media plugin in https://www.tinymce.com/docs/demo/full-featured/ You can insert a youtube video into the text editor under insert > insert/edit video > drop in a youtube link. The preview loads the full playable video in this case.

Source is available for this plugin if you download the tinymce dev package.

Edit: looks like the media plugin uses a whitelist and a whole lot of parsing. The most interesting pieces would likely be the htmlToData and the dataToHtml methods.

[rodrigoi]

How can we get the shortcode to be replaced by the embedded area and then provide the hover/tap edit/delete buttons?

It's actually a lot easier than it looks, thanks to wpcom-view. You'll have to create a component with a static match method and add it to wpcom-view here: https://github.com/Automattic/wp-calypso/blob/master/client/components/tinymce/plugins/wpcom-view/views.js#L20

This is the contact form's component: https://github.com/Automattic/wp-calypso/blob/master/client/components/tinymce/plugins/wpcom-view/views/contact-form/index.jsx
You'll need to render a div with a wpview-content class. Anything you put inside will render instead of the shortcode.

Compared to the media gallery, the contact form is extremely simple. The media gallery uses a ShortcodeFrame component that loads WordPress.com HTML Preview on an iframe and does some message passing to render the shortcode preview.
When I've built the contact form, that backend only worked with the media gallery.

If this is a new shortcode it will need backend support to show the embeddable content on the post/page. In that case, maybe taking the longer route with ShortcodeFrame (extending the HTML Preview backend) is the right way to go. I would suggest a PR just for the preview, given how complex it could turn out to be if you have to modify the backend.

[rodrigoi]

I have more of a philosophical question. How is the better than the current experience?

If you pase an Instagram url (or Facebook, Twitter or Tumblr) this component kicks in and renders the embed: https://github.com/Automattic/wp-calypso/blob/master/client/components/embed-container/index.jsx

This is not documented (it's buried on WordPress.com support) nor is it intuitive, but I think that the experience is by far better than using a dialog window.

[dmsnell]

@rodrigoi thanks for your awesome response to my ❓!

On a philosophical note the Instagram dialog is mainly here to test the waters and serve as a demonstration as we build this part of the editor. The goal is discoverability of features people might be unaware of. As we add more integrations, such as those which require connecting to services or gathering API keys, more involved configuration, etc… we want the wizards to serve as that guide. For now, the Instagram dialog will feel out of place, but it's helping uncover these and other issues along the way.

[dmsnell]

Tabling for now due to other tasks taking higher priority.