Details
-
Improvement
-
Resolution: Unresolved
-
Neutral
-
None
-
None
-
None
-
None
-
-
Empty show more show less
-
Yes
-
1
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 MGNLFE-527) and make our code redundant and complicated (and maybe bugging). Therefore, it should be simplified.
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>
Checklists
Acceptance criteria
Attachments
Issue Links
- is related to
-
MGNLFE-527 Errors appear on browser console on react-sample
-
- Closed
-