[MGNLFE-571] Change the way to process children of EditableArea in ReactEditor Created: 11/Jul/23 Updated: 23/Oct/23 |
|
| Status: | Open |
| Project: | Magnolia Frontend Helpers |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Improvement | Priority: | Neutral |
| Reporter: | Phong Le Quoc | Assignee: | Unassigned |
| Resolution: | Unresolved | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||
| Template: |
|
||||||||
| Acceptance criteria: |
Empty
|
||||||||
| Task DoD: |
[ ]*
Doc/release notes changes? Comment present?
[ ]*
Downstream builds green?
[ ]*
Solution information and context easily available?
[ ]*
Tests
[ ]*
FixVersion filled and not yet released
[ ] 
Architecture Decision Record (ADR)
|
||||||||
| Documentation update required: |
Yes
|
||||||||
| Epic Link: | SPA Maintenance | ||||||||
| Story Points: | 1 | ||||||||
| Team: | |||||||||
| Description |
|
This is a breaking change. The current approach to processing children of EditableArea in ReactEditor is to force the children to use the same "content" provided to EditableArea. However, it could not be done (we can by pass this as In EditableArea: else if (children) { childContent = React.Children.map(children, (child) => { if (React.isValidElement(child)) { return React.cloneElement(child, { content }); } return child; }); } should be else if (children) { childContent = children; }
The current SPA code:
<EditableArea content={secondaryAreaContent}>
{React.createElement(({ content }) => {
const componentContents = content['@nodes'].map((nodeName) => content[nodeName]);
return (
<div className="flex-box">
{/* eslint-disable-next-line no-shadow */}
{componentContents.map((content) => (
<EditableComponent key={ComponentHelper.buildKey(content)} content={content} />
))}
</div>
);
})}
</EditableArea>
must change to (my suggestion)
<EditableArea content={secondaryAreaContent}>
<div className="flex-box">
{secondaryAreaContent['@nodes']
.map((nodeName) => secondaryAreaContent[nodeName])
.map((content) => (
<EditableComponent key={ComponentHelper.buildKey(content)} content={content} />
))}
</div>
</EditableArea>
or
<EditableArea content={secondaryAreaContent}>
{(({ content }) => {
const componentContents = content['@nodes'].map((nodeName) => content[nodeName]);
return (
<div className="flex-box">
{/* eslint-disable-next-line no-shadow */}
{componentContents.map((content) => (
<EditableComponent key={ComponentHelper.buildKey(content)} content={content} />
))}
</div>
);
})(secondaryAreaContent)}
</EditableArea>
|