fix: only change source tag urls when running in devMode (#54)

* fix: any change source tag urls when running in devMode

* fix: add tests

* fix: remove test and ignore iframe request in coverage

src/components/block-renderer/block-renderer.js

@@ -16,6 +16,7 @@ import { LitElement, html, css } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { createTag } from '../../utils/dom.js';
 import AppModel from '../../models/app-model.js';
+import { isDev } from '../../utils/library.js';
 
 export class BlockRenderer extends LitElement {
   iframe = createRef();
@@ -370,6 +371,8 @@ export class BlockRenderer extends LitElement {
         frame.contentWindow.document.head.append(styleLink);
       }
 
+      // Since these requests happen in the iframe there is no way to mock the responses in a test
+      /* c8 ignore next 32 */
       // Load the lazy CSS
       const lazyStyleLink = createTag('link', { rel: 'stylesheet', href: `${codePath}/styles/lazy-styles.css` });
       frame.contentWindow.document.head.append(lazyStyleLink);
@@ -378,13 +381,18 @@ export class BlockRenderer extends LitElement {
         // Show the iframe
         frame.style.display = 'block';
 
-        // Remove all source tags
-        [...frame.contentDocument.querySelectorAll('source')].forEach((el) => {
-          el.remove();
-        });
+        // When in dev mode, we need to change the relative urls of the images to absolute
+        if (isDev()) {
+          frame.contentDocument.querySelectorAll('source').forEach((el) => {
+            const srcset = el.getAttribute('srcset');
+            if (srcset.startsWith('/media')) {
+              el.setAttribute('srcset', `${origin}${srcset}`);
+            }
+          });
+        }
 
         // Images created with createOptimizedImage will have a src that starts with /media
-        [...frame.contentDocument.querySelectorAll('img')].forEach((el) => {
+        frame.contentDocument.querySelectorAll('img').forEach((el) => {
           const src = el.getAttribute('src');
           if (src.startsWith('/media')) {
             el.src = `${origin}${src}`;