Add visual indication a file is in draft for files which are inserted in TinyMCE

[clarkepaul]

If a page is published and a file on that page is modified in the Files area, the change is not detected by the page (this might be an okay pattern? needs more thought) but there is no way to see if that image is in draft from the page.

There should be some visual indication that the file is in draft e.g. orange circle as per files, orange border or draft text in the corner perhaps. I would think the same pattern needs to be added to uploadfields as well.

ACs

As a CMS user, I would like to easily see that a file on a page I am editing is still draft.

• [ ] Files that are in draft are highlighted in TinyMCE
• [ ] Existing gray border around the image is removed to make it easier to view draft badge.

Draft/Modified

• [ ] The affected page is then treated as a page with modifications (buttons also reflect the change)

Published

TASKS

• [ ] Update shortcodes to include publish date
• [ ] Update the TinyMCE plugin to add the badge (draft or modified)
• [ ] Update modal to handle the above publish data as well
• [ ] Update Behat test to cover the new badge
• [ ] Make the badge Translatable / localisable
• [x] Have a coke

[newleeland]

I've updated the first post, with elaborated ACs and designs

[chillu]

That's quite a theoretical use case, right? Either you upload an image for use in the content, in which case it'll be published when you publish the page. Or you reuse an existing image, where you can see the draft state in the "insert media" panel selection already.

Then there's the case where an image might have changed since you published both the page and a contained image. The only way I can see this happening is the image file being replaced - that's pretty rare. Even if you change the image title in the assets area, that won't have an effect since you set a custom title for each inserted image in a HTML area.

So overall, I see this as a very rare edge case, and I doubt authors will care about it in most cases. Replacing an image is an advanced feature in itself, and dealing with the follow-on effects of that is low priority. Removing from milestone.

@clarkepaul Did I miss anything here?

[clarkepaul]

@chillu Your right that this is an edge case but it is confusing when it does happen (actually happened during user testing). It can also happen when you change any of the file permissions as well. A really tricky situation is when a file is unpublished independently of a page as it still remains on the page but in a draft state meaning if someone unaware of the file state could easily publish a page triggering that file to publish in multiple locations.

If a file is in use on a page and its deleted in the Files area we don't actually remove the file from the page properly yet, raised issue here https://github.com/silverstripe/silverstripe-asset-admin/issues/591

[chillu]

Yeah I'm keen to address the root of this issue through https://github.com/silverstripe/silverstripe-asset-admin/issues/591, rather than further complicate the already heavyweight customisations we do inside TinyMCE.

[sachajudd]

where you can see the draft state in the "insert media" panel selection already.

This almost would be implying that in the Files area a user would need to click every thumbnail to access the file detail panel to see its draft/published status which would be a bad user experience.

To summarise the main issues here:

• The site tree does not show any modifications if you've unpublished a file on a page
• When the File has been unpublished it has no indication on the file in TinyMCE of it's state which is the pattern for published (confusing users)
• Content authors are primarily looking at the draft preview not published (preview toggle) and are only going to see #591 issues if they change to preview the published site. To note here the page will also include details such as the title (in the page source) of the unpublished file which #591 doesn't discuss.

We do now provide a warning when un-publishing a file but I think that's still not enough, it's very confusing and I don't think it's as rare as you mentioned to come across this issue especially if the page is published before the image is unpublished, making the file on the page look published as it has no indicator. I still think adding state indicators to files in TinyMCE would be good to represent the same pattern we have in the files area which users are used to as a clear pattern showcasing it's state.

An alternative option could be to add a warning on a page level to let a user know they have unpublished files on a published page.

[michalkleiner]

I agree with having some kind of indicator of unpublished state in the WYSIWYG editor, though I wonder how would it work with files that are not images and therefore don't occupy that much space to warrant overlay indicators, e.g. documents or PDFs?

[sachajudd]

Good point @michalkleiner, at the moment it's just a link. If you unpublish a document and go to the published preview the link will redirect you to 'Page not found'. Something else to definitely consider.