[MGNLFE-157] react-editor is adding empty divs to the dom Created: 15/Dec/21  Updated: 17/Feb/22  Resolved: 20/Dec/21

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: None
Fix Version/s: 1.2.1

Type: Bug Priority: Critical
Reporter: Christopher Zimmermann Assignee: Canh Nguyen
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 1.25d
Original Estimate: Not Specified

Attachments: PNG File bad-divx.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:

 Description   

When using the react-editor nested divs aand empty divs can be added to the DOM which can break styling.

Expected: DOM is not manipulated at all. Only what is in the component and page templates is rendered.

Actual

Developer is seeing multiple empty divs like:

<div></div>

And developer is seeing extra wrapping divs (and a "class" with no value.)

<div class >...

Note they are seeing these not just on authoring in Page Editor - ONLY on the public site.



 Comments   
Comment by Canh Nguyen [ 17/Dec/21 ]

Since react-editor 1.2.0-beta we added an async stuff to support external SPA that didn't remove the placeholder divs outside of edit mode. I've created a PR for the fix. It will be released soon on version 1.2.1

Comment by Christopher Zimmermann [ 04/Jan/22 ]

From slack conversations it sounds like the empty divs are gone but that the extra wrapping divs are still present outside of the page editor. Is that right?

Comment by Canh Nguyen [ 05/Jan/22 ]

The div with empty class is from the EditableArea, we could remove the wrapped section tag and use EditableArea like below:

<EditableArea elementType="section" className="flex">...</EditableArea> 
Comment by Christopher Zimmermann [ 06/Jan/22 ]

I changed title to "react-editor is adding empty divs to the dom" to reflect what was actually done in this ticket. 

The "nested" divs are still added for each area. This is expected behaviour currently.

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