Wrap picture element with a paragraph tag (#4)

Closes #3

src/Event/ImageMediaQueryListener.php

@@ -80,7 +80,8 @@ public function processDocument(DocumentParsedEvent $event): void
 
             AttributeHelper::removeFromNode($lastImage, ['media']);
 
-            $paragraph->replaceWith($picture);
+            $paragraph->detachChildren();
+            $paragraph->appendChild($picture);
         }
     }
 

tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 images with light and dark attributes__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-dark.jpg" /><img src="/example-light.jpg" alt="image two" /></picture>
+<p><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-dark.jpg" /><img src="/example-light.jpg" alt="image two" /></picture></p>

tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 picture elements__1.txt

@@ -1 +1,2 @@
-<picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-one-dark.jpg" /><img src="/example-one-light.jpg" alt="image one light" /></picture><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-two-dark.jpg" /><img src="/example-two-light.jpg" alt="image two light" /></picture>
+<p><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-one-dark.jpg" /><img src="/example-one-light.jpg" alt="image one light" /></picture></p>
+<p><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-two-dark.jpg" /><img src="/example-two-light.jpg" alt="image two light" /></picture></p>

tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with maxw attribute__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(max-width: 600px)" srcset="/600.jpg" /><img src="/default.jpg" alt="default" /></picture>
+<p><picture class="media-query-picture"><source media="(max-width: 600px)" srcset="/600.jpg" /><img src="/default.jpg" alt="default" /></picture></p>

tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with minw attribute__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><img src="/default.jpg" alt="default" /></picture>
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><img src="/default.jpg" alt="default" /></picture></p>

tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different maxw attributes__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(max-width: 1000px)" srcset="/1000.jpg" /><source media="(max-width: 800px)" srcset="/800.jpg" /><source media="(max-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture>
+<p><picture class="media-query-picture"><source media="(max-width: 1000px)" srcset="/1000.jpg" /><source media="(max-width: 800px)" srcset="/800.jpg" /><source media="(max-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture></p>

tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different minw attributes__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture>
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture></p>

tests/__snapshots__/MediaQueryTest__testImages with data set 2 images where one has a media query__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" /><img src="/medium.jpg" alt="medium" /></picture>
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" /><img src="/medium.jpg" alt="medium" /></picture></p>

tests/__snapshots__/MediaQueryTest__testImages with data set additional attributes__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" type="image/jpeg" /><img src="/medium.jpg" alt="medium" /></picture>
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" type="image/jpeg" /><img src="/medium.jpg" alt="medium" /></picture></p>

tests/__snapshots__/MediaQueryTest__testImages with data set multiple images with media queries__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1200px)" srcset="/1200.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 480px)" srcset="/480.jpg" /><img src="/default.jpg" alt="The actual image and the alt that will be used" /></picture>
+<p><picture class="media-query-picture"><source media="(min-width: 1200px)" srcset="/1200.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 480px)" srcset="/480.jpg" /><img src="/default.jpg" alt="The actual image and the alt that will be used" /></picture></p>

tests/__snapshots__/MediaQueryTest__testImages with data set single image with media query__1.txt

@@ -1 +1 @@
-<picture class="media-query-picture"><img src="/large.jpg" alt="large" /></picture>
+<p><picture class="media-query-picture"><img src="/large.jpg" alt="large" /></picture></p>