[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:
relation
is related to MGNLFE-527 Errors appear on browser console on r... Closed
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: DeveloperX

 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> 

Generated at Mon Feb 12 05:48:43 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.