Wp-calypso: Editor: Add HTML toolbar / quick tags

[kriskarkoski]

Implement the HTML toolbar in the Calypso editor. Here's what it looks like in WP Admin:

calypso-gaps

[lancewillett]

Related to #1295

[lancewillett]

Would be nice to get this in still as it's a gap with functionality versus the wp-admin editor.

[southp]

The current HTML editor is actually a HTML-native <textarea>. As we already make use of TinyMCE, I think it would be better and cleaner if we can reuse it, instead of crafting yet another toolbar attached to the <textarea>.

Here is a draft of how I plan to approach it:

• [ ] Move the TinyMCE setup code into a component. This may also mean that I would need to rename the current TinyMce component as Editor or something functional-wise name.
• [ ] Instantiate two TinyMCE instances, one as the visual editor, and one as the HTML editor. At this point, the end user should not notice any difference.
• [ ] Implement a general quick-tag button. This would be a TinyMCE toolbar button which could be . At this point, we merely implement the button, and the toolbar is not there for the end user yet.
• [ ] Implement the HTML toolbar.
• [ ] Implement media files D&D in the HTML editor. At this point, the HTML editor is merely another TinyMCE instance, so it shouldn't be too hard to enable and to make it work.

Each item should be tackled by at least one PR.

[aduth]

@southp : I'd be curious to see how far we could get with leveraging TinyMCE, as it could be nice to avoid reimplementing toolbar/button logic if we can use what's already there. That said, TinyMCE is optimized to be a visual editor, so I'd be curious to see if we'll have problems with (a) trying to prevent it from stripping markup or converting it to DOM nodes, (b) disabling default styling, (c) disabling all visual effects we want to avoid (keyboard shortcuts? dropping images?). cc @azaozz for other thoughts.

Since we've spent quite a bit of effort theming TinyMCE into adhering to our style standards, I wonder if it'd be easier to just start from there, using our own Button components and keeping the current approach of simply rendering a <textarea>.

Also keep in mind that since we'll probably want to feature flag progress on this addition anyways, you needn't worry too much about making the approach unobtrusive to production usage.

[mtias]

We did one exploration on using CodeMirror with line numbers that was actually quite neat. I agree with @aduth that TinyMCE feels a bit incompatible with the goal of the html editor since its purposes is the visual editor. Also, TinyMCE is quite big, it'd be nice if people that want to use the html editor don't have to load tinymce at all eventually.

[folletto]

We did one exploration on using CodeMirror with line numbers that was actually quite neat.

CodeMirror (or similar) would be great there.

[azaozz]

...using our own Button components and keeping the current approach of simply rendering a <textarea>.

I was actually thinking to propose to remove the Quicktags buttons from core/wp-admin, but some people are still using them, mostly code.

There is also a TinyMCE plugin that shows the underlying HTML in a modal. This is a better approach than exposing the textarea. It can be made more "seamless", be positioned exactly above the iframe, etc. and CodeMirror and/or buttons that insert HTML snippets can easily be added there.

The advantage (which can also be seen as a disadvantage) is that this can be controlled from the editor, filtered, cleaned up, etc. Then all quirks we get when initializing will be gone.

[southp]

FWIW, this is the top-3 requested feature in our list. See pKdGS-XP-p2

[mjangda]

This is implemented.

[Copons]

@mjangda Not yet shipped to prod though. I'm waiting for a fix in wp-desktop to merge to test there too. :)

[Copons]

Heads up: this is live in every environment.