uswds_grid class changed to "undefined" when editing existing grid content, prevents subsequent edits

Check 3.2 branch

Did a deploy for 3.2.x can you see if that fixed the issue for you.

I've had a chance to review the 3.2.0 alpha module and this is the test steps I've applied and what I'm seeing.

1) Create a new grid within a new node with the following settings

• 3 columns
• Mobile: Auto
• Tablet Large: Equal Width
• Advanced Settings: Added a custom class to each element (Wrapper: my-custom-wrapper, Row: my-custom-row, Col 1: my-custom-col1, Col2: my-custom-col2, Col3: my-custom-col3)
• Save node

Node saves successfully with all custom classes applied to the grid as expected.

2) Edit that same node containing the existing grid

• Toggle editor to source view
• uswds_grid and custom wrapper replaced with "undefined"

To debug I console logged the modelElement class attribute by adding this at line 105

console.log('modelElement.getAttribute("class")', modelElement.getAttribute('class'))

the log is included in the screenshots.

I then applied the first fix discussed above:

• Deleted class name from upcast (line 98: classes: 'uswds_grid',)

That appears to have resolved the issue for me locally. Both for the existing grid and creating a new grid.

I didn't need the second edit with the alpha (adding the class via conditional when there is no attribute), but I see we're still doing that for the grid row on 148. A hasty review of the row suggests we can probably remove that class on line 134 and the fallback conditional on 148 as well, but that should be reviewed/tested as I was hasty in my review of that.

I've included screenshots of what I'm seeing locally for review. If there's anything else I can do to assist/debug just let me know. Thank you!

I'm also seeing this behavior, however, removing the class from the upcast, and adding the or class logic into the downcast prevents the wrapping of the whole grid in another non-grid related div.

By wrapping the grid in an outer div like this:

<div class="testing-outer-non-grid-div">
  <div class="uswds_grid ck-widget" contenteditable="false">
    <div class="grid-row grid-gap ck-widget" data-row-none="" data-row-sm="" data-row-md="" data-row-lg="" data-row-xl="" data-row-xxl="" contenteditable="false">
      	<div class="tablet:grid-col desktop:grid-col ck-widget" contenteditable="false">
           	<p>
               	Column 1 content
           	</p>
       	</div>
       	<div class="tablet:grid-col desktop:grid-col ck-widget" contenteditable="false">
           	<p>
               	Column 2 content
           	</p>
       	</div>
   	</div>
  </div>
</div>

The resulting html is:

<div class="testing-outer-non-grid-div ck-widget" contenteditable="false">
    <div class="uswds_grid ck-widget" data-row-none="undefined" data-row-sm="undefined" data-row-md="undefined" data-row-lg="undefined" data-row-xl="undefined" data-row-xxl="undefined" contenteditable="false">
        <div class="grid-row grid-gap ck-widget" contenteditable="false">
            <div class="tablet:grid-col desktop:grid-col ck-widget" contenteditable="false">
            </div>
            <div class="tablet:grid-col desktop:grid-col ck-widget" contenteditable="false">
            </div>
        </div>
    </div>
</div>

and the grid becomes blank in the view side of CKEditor. However, by leaving the class in the upcast AND adding the or logic into the downcast, it allows for that non-grid outer div and the grid remains editable in after a save.