Koenig - Finalise Koenig HTML output and migrate existing content (#9…

…741)

refs TryGhost/Ghost#9742

We've identified some changes we need to make to the HTML output of the [new Koenig editor](
https://forum.ghost.org/t/koenig-editor-beta-release/1284/102) for future proofing and consistency across cards.

- the `<div class="kg-post">` wrapper around post content has been removed
- for image cards the `.kg-image-wide` and `.kg-image-full` classes have been changed to `.kg-width-wide` and `.kg-width-full` and applied to the `<figure>` element rather than the `<img>` element

Before:
```html
<div class="kg-post">
    <figure class="kg-image-card">
        <img class="kg-image kg-image-wide" src="...">
        <figcaption>example wide image</figcaption>
    </figure>
</div>
```

After:
```html
<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="...">
    <figcaption>example wide image</figcaption>
</figure>
```

packages/kg-default-cards/lib/cards/image.js

@@ -11,15 +11,15 @@ module.exports = {
         }
 
         let figure = dom.createElement('figure');
-        figure.setAttribute('class', 'kg-image-card');
+        let figureClass = 'kg-image-card';
+        if (payload.cardWidth) {
+            figureClass = `${figureClass} kg-width-${payload.cardWidth}`;
+        }
+        figure.setAttribute('class', figureClass);
 
         let img = dom.createElement('img');
-        let imgClass = 'kg-image';
-        if (payload.imageStyle) {
-            imgClass = `${imgClass} kg-image-${payload.imageStyle}`;
-        }
         img.setAttribute('src', payload.src);
-        img.setAttribute('class', imgClass);
+        img.setAttribute('class', 'kg-image');
 
         figure.appendChild(img);
 

packages/kg-default-cards/test/cards/image_spec.js

@@ -53,7 +53,7 @@ describe('Image card', function () {
                 },
                 payload: {
                     src: 'https://www.ghost.org/image.png',
-                    imageStyle: ''
+                    cardWidth: ''
                 }
             };
 
@@ -67,11 +67,11 @@ describe('Image card', function () {
                 },
                 payload: {
                     src: 'https://www.ghost.org/image.png',
-                    imageStyle: 'wide'
+                    cardWidth: 'wide'
                 }
             };
 
-            serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image kg-image-wide"></figure>');
+            serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card kg-width-wide"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
         });
 
         it('full', function () {
@@ -81,11 +81,11 @@ describe('Image card', function () {
                 },
                 payload: {
                     src: 'https://www.ghost.org/image.png',
-                    imageStyle: 'full'
+                    cardWidth: 'full'
                 }
             };
 
-            serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image kg-image-full"></figure>');
+            serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card kg-width-full"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
         });
     });
 });