Editor "TinyMCE" reduce UI impact, better use in smaller areas

[clarkepaul]

Now that we have a responsive CMS which needs to work at different viewport sizes we need to reduce the visual impact of the editor as it takes too much space. We should be able to reduce options, organise the required options better, and overall reduce the space it takes especially when there is limited space (should wrap over four lines) for smaller areas like content blocks (a big focus for the UI in the coming years).

Some recommendations but requires further thought: Group common actions into dropdowns (text alignment, lists) Only show the editor when the editor field has focus as per TinyMCE demos Add "View" dropdown and combine (source code, full screen, spell check, accessibility checker) Add "Edit" dropdown (cut, copy, paste, paste as plain text, find and replace*) and more...

Not doing but should do one day: Inline editing with the front-end, see inline demo

[NightJar]

We had this come up in a demo of the upcoming new feature for https://github.com/dnadesign/silverstripe-elemental - "inline editing".

@chillu made mention that he wasn't aware of how one might achieve this for an inner portion of a page, since e.g. media queries are respective to the viewport (browser).

However, having previously worked with @raissanorth on https://github.com/silverstripe/silverstripe-admin/pull/560 - the view mode toggle component conversion to React - I can say that react-resize-aware is a great component that supports exactly this (trigger on the size of an element, not just the viewport).

See https://github.com/silverstripe/silverstripe-admin/issues/655 for a more full explanation. I class this issue as separate though, as it deals directly with TinyMCE interface, as opposed to form layout as a whole.

[chillu]

It doesn't look like you can configure TinyMCE to have an expandable toolbar any more, where a basic set of icons is shown in a single row, and then you can expand more rows. They're solving this through button groups with their own dropdown instead instead it seems.

@clarkepaul Do you think the distraction free mode would work for us? It'll be a major UX shift, so would probably need to wait until 5.x, or enabled only for new installations (installer downloads).

I've also created a ticket for TinyMCE mobile at https://github.com/silverstripe/silverstripe-admin/issues/657. It's a specialised mode for touch devices, which among other things aims to reduce the UI impact of toolbars.

[sachajudd]

We are keen to progress with Inline or Distraction free modes for 5.x although we'd need someone to take a deeper look at what can be implemented. For example, in the Inline demo we couldn't seem to find a source code or insert image option which we'd need to see the functionality of before deciding. Until then we'll stick with improving TinyMCE 4 as Paul mentioned above condensing the options into dropdowns. I'll come up with a few more details and perhaps some designs on what we see suitable.

[chillu]

@sachajudd Do you mean the distraction free editor? It is pretty restricted. You can trigger "insert image" by starting a new paragraph, at least their limited insert image feature. Not a very obvious feature compared to a button in a toolbar.

Condensing into dropdowns seems like a good idea - like the menu button.

[chillu]

Please also check out the TinyMCE 5 preview, we'll eventually upgrade to that: https://go.tiny.cloud/blog/announcing-tinymce-5-developer-preview/. I've created a separate but somewhat related ticket for the upgrade efforts: https://github.com/silverstripe/silverstripe-admin/issues/675

[sachajudd]

Wow, this is pretty much what we ended up with in our designs! I'll upload them on Monday to DSM so you can take a look @chillu :)

[sachajudd]

Hey @chillu, designs as attached. Let me know what you think 🙂 Style guide - TinyMCE 4 updates

[clarkepaul]

I'm not sure if this is possible but at the bottom of the TinyMCE editor there is an inspector bar, its often overlooked but it would be good if there was an action in the "View" menu to hide and show it. It takes a lot of extra space (otherwise we should try to make it smaller).