[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: |
|
| 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
|
| 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. |