Add FormBuilderLoader in-line on blocks

[ScopeyNZ]

The designs show a collapsible section where a form will appear when expanded:

https://projects.invisionapp.com/share/ZRL4T2HQAGB#/screens/301923214

Additionally a custom React form component will have to be used as we can't use form tags - we're rendering within the top-level page form

A/Cs:

• Implement a collapsible section per the designs
• On expand - load a form with FormBuilderLoader using the schema endpoint (implemented by Add a form schema endpoint for elemental to return blocks #326)
• Expanding and collapsing the block is keyboard accessible.
• The form is keyboard accessible
• Form is not removed when collapsed
• Form is not reloaded on subsequent expand
• A custom form react component is used (by setting the SchemaComponent on a form) to remove the use of a <form> tag

Split from #295
Expanding functionality has been tasked out silverstripe/silverstripe-elemental-blocks#43

Pull requests

• Add schema information for HTMLEditorField Add schema information for HTMLEditorField silverstripe-framework#8359
• NEW HtmlEditorField component for react rich text NEW HtmlEditorField component for react rich text silverstripe-admin#628
• Add ability to load Element's edit form inline Add ability to load Element's edit form inline #372

[brynwhyman]

This looks like it could replace the placeholder issue we created for adding expand functionality: silverstripe/silverstripe-elemental-blocks#43

If so, I'll update the ACs here

Keeping expand functionality separate in: silverstripe/silverstripe-elemental-blocks#43

[ScopeyNZ]

Ah yes. I was looking for that. It's on a different repo which could explain why I wasn't able to find it.

[newleeland]

Additional design reference (Style guide)
https://invis.io/7ZNLP773RSY (design in first post is up-to-date)

Complete blocks style guide
Blocks: https://invis.io/T7NLP7WP3K4
Layout blocks: https://invis.io/BNNLP87VQJU

[raissanorth]

The Behat tests will need to have a scenario added that checks if the element is editable. This has been removed in #353, as at that point in time only a placeholder was rendered.

[robbieaverill]

I’m adding a class when the element is not editable at the moment as part of another ticket. You think that’ll be ok? I’ll update the behat test to cover the dropdown menu being there or not. Maybe will add userforms to the tests as a concrete element which doesn’t allow it

[NightJar]

Required to resolve this issue:

• Add schema information for HTMLEditorField Add schema information for HTMLEditorField silverstripe-framework#8359
• NEW HtmlEditorField component for react rich text NEW HtmlEditorField component for react rich text silverstripe-admin#628
• Add ability to load Element's edit form inline Add ability to load Element's edit form inline #372

[robbieaverill]

I've just given it a test run - some comments:

• The TinyMCE editor only initialised when I open the console originally, now it's loading immediately (perhaps a timing/browser caching issue of the resources for it)
• When it initialises, it causes the change tracker to think the CMS form is dirty
• The editor is too big - perhaps restrict the size of it to around 150-200px? You can do this with ->setRows(n) resolved in Add ability to load Element's edit form inline #372
• The form fields have divider lines under each form field. You can fix this by adding the form--no-dividers class to the form resolved in Add ability to load Element's edit form inline #372
• It's pretty minor, but I think I'd expect the loading indicator for a block when you trigger the inline form to open to be shown on the block itself, not the whole block area
• Side issue: the history viewer still isn't working in the React form context - I'd hoped that NEW HistoryViewerField now uses schemaData to inject necessary input props silverstripe-versioned-admin#55 would have resolved that but I guess it was wishful thinking. I've logged this separately as History viewer needs to be able to run in a React form builder context silverstripe-versioned-admin#59

Otherwise it's looking great and behaving exactly as I'd expected it should, e.g. the focus on each element is affecting the drop shadow, the form is able to be expanded and collapsed without reloading the form, tabs work individually and the TinyMCE implementation seems to be working without bleeding into separate instances on the same page.

[NightJar]

Yes there is some minor issue with TinyMCE. Simply clicking the area under the label will trigger the render as well (weirdly, the same is not true if one clicks where TinyMCE should be). It's a rather bizarre.

I really don't know how to get around this without spending a whole lot of time porting the entire thing (i.e. our plugins) to react - as per silverstripe/silverstripe-admin#623

To be clear: this issue does not happen when using the TinyMCE thin wrapper react component.
... but then the insert link/media dialog doesn't load (but the buttons on the toolbar do).

[robbieaverill]

To be fair, implementing TinyMCE in React wasn't part of the scope of this ticket. I think what you've done is more than enough for now

[NightJar]

OK, I figured out what triggered the initial render - it must be an Entwine event.
E.g. clicking where the editor should have been is a native event, hovering the site tree activates an entwine hover event & causes the render.

https://github.com/hafriedlander/jquery.entwine/blob/master/src/domevents/jquery.entwine.domevents.addrem.js#L132-L134

Luckily I was able to track down a way to manually trigger entwine into updating, and have updated the admin PR with such 💥

[NightJar]

Thanks @ScopeyNZ @robbieaverill and @raissanorth for helping me get this through!

[robbieaverill]

Nice job!