Uploaded image for project: 'Magnolia Frontend Helpers'
  1. Magnolia Frontend Helpers
  2. MGNLFE-571

Change the way to process children of EditableArea in ReactEditor

    XMLWordPrintable

Details

    • Improvement
    • Resolution: Unresolved
    • Neutral
    • None
    • None
    • None
    • None
    • 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

            Activity

              People

                Unassigned Unassigned
                plequoc Phong Le Quoc
                DeveloperX
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                  Created:
                  Updated:

                  Checklists

                    Task DoD