Implementation of edit frame component for sitecore-jss-react

[erzr]

I miss edit frames. I implemented a new component to allow the placement of edit frames in Sitecore JSS applications built with React.

Shout out @jammykam for this blog post that helped with some of the meta data: https://jammykam.wordpress.com/2017/09/11/glass-edit-frame-immediately-invoking-wrapper/.

Description

Implemented a new component named FieldEditFrame that allows you to pass in an itemId and an array of fields and the component will generate the HTML markup necessary for displaying the edit frame in Experience Editor.

By default this uses the standard Edit Sitecore command from core ({70C4EED5-D4CD-4D7D-9763-80C42504F5E7}) and passes in the fields prop values to the command, which then will build out and display the edit frame modal.

Some values have defaults but can be overwritten by props on the component itself. Defaults were used to try to make this component as easy to use as possible.

Motivation

I miss edit frames and I always enjoyed using them doing traditional MVC/WebForms development and I think they still have a place even with JSS built apps.

How Has This Been Tested?

Manually, only locally.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have read the Contributing guide.
• My code follows the code style of this project.
• My change requires a change to the documentation.

[sc-antonkulagin]

For us have it as a framework feature we need this logic also be provided for Angular and Vue. We can look into implementing it in a future, but if you could provide it implementation it would speed up this pull request.

[stale]

This has been automatically marked as stale because it has not had recent activity. It will be closed if there is no further activity within 30 days. You may add comments or the 'keep' label to prevent it from closing. Thank you for your contributions.

[kleinand]

What's the status of this ticket here?
I also faced the issue that next.js JSS is not providing any Custom Edit Frame capabilities which are often needed for component datasource subitems used in list, link lists, accordions and tabs etc.
Because of that I found this PR and used it with adaptions to provide several commands instead of using only one button for field editing!

[mjarosch]

@erzr I pulled this into a project I am working on and it's great. I had to make some updates and would like to expand on it, including doing the requested angular and vue versions. Are you ok with me using this as a base for this work?

@kleinand Was supporting multiple buttons the only adaption you made? or are there others that should be included?

[erzr]

@mjarosch glad to hear its working well for you! i won't be doing anything further with this PR so i'm happy to close it if you would like to open a new one with the enhancements and additional versions.

[art-alexeyenko]

Closing this, edit frame is not merged into dev. (#1342)
Thank you @erzr and @mjarosch for your contributions!