Wp-calypso: Editor: Can't upload media while in HTML mode

[mkaz]

The "Add Media" button is not available while in HTML mode, so I can't upload an image and insert while editing in that mode, which I prefer.

calypso-gaps

[lancewillett]

Also reported by @ryanboren

wp-admin handles image drops on the HTML editor, Calypso does not. Instead, Calypso follows the file:///.

Sometimes, I must switch to the html editor to insert images at the beginning of a post, something that is oft a pain in TinyMCE. Since there is neither drag-and-drop or a media insert button for the HTML view, to insert an image I must switch to Visual, highlight and cut all content, insert an image at the top, and then past content back in.

Related: p1448900581003684-slack-calypso-editor

[Ipstenu]

Since there are issues with the Visual editor eating 'code' (turning < into <), it's basically going to impact anyone who wants to write math in a blog post. Sadness.

[lancewillett]

Would be a nice improvement to have a basic editing bar in HTML mode, at least for links, adding media, and bold/italic.

[davewhitley]

@Copons Is it possible to fix this by:

• show limited media modal (just images, no documents) when you click img in the HTML toolbar?
• enable drag and drop for images

Or is the html editor too limited?

[Copons]

@drw158 When I started with the quick tags toolbar, I opted to keep the media modal out of the initial PR since, if I'm not mistaken, that modal is too heavily tied to TinyMCE.

Regarding the drag and drop: I honestly never noticed it on WP Admin, so I haven't given it any thoughts. I'll try something in a follow up PR, while the toolbar is still hidden behind a dev-only feature flag (since I'd love to be 100% sure it all works ok in all the browsers I couldn't test on).

[lancewillett]

Is there a pull request yet for this change? It's a nice improvement for HTML editor users.

[Copons]

@lancewillett Not yet (by me), I'm gonna open it as soon as I figure out how to decouple the current media modal from TinyMCE (should give it a deeper look though, so it might be easier than I expect).

[Copons]

Fixed in https://github.com/Automattic/wp-calypso/pull/11227, but only available in dev and wpcalypso, as all of the HTML toolbar currently is.

[lancewillett]

@Copons Is there a separate issue / pull for drag-n-drop for images into HTML view?

[lancewillett]

@jessefriedman Reported in an internal chat today he tried to drag an image into the editor in HTML view, and it failed. I was able to repeat.

[Copons]

@lancewillett My bad, I overlooked it in my notes on this feature and when I came to close the issue I failed to notice it in the comments.
I'll see to work on it as soon as I fix the couple of IE/Edge anomalies reported during the initial testing.

[lancewillett]

Cool: thank you for working on this. Much excited.

[Copons]

Heads up: this is live in every environment, drag and drop included.