From a168c38cfc7be70e9d82edc47d11d0d979421096 Mon Sep 17 00:00:00 2001
From: Lois Wells <lois.wells@raspberrypi.org>
Date: Wed, 19 Mar 2025 09:39:29 +0000
Subject: [PATCH] WIP trying to watch for html changes

---
 .../Editor/Runners/HtmlRunner/HtmlRunner.jsx  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
index ae8a47720..f11771653 100644
--- a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
+++ b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
@@ -266,6 +266,13 @@ function HtmlRunner() {
     });
   };
 
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      console.log("something changed!", mutation);
+      console.log("this message is from the actual source code!");
+    });
+  });
+
   const replaceSrcNodes = (
     indexPage,
     projectMedia,
@@ -273,6 +280,7 @@ function HtmlRunner() {
     attr = "src",
   ) => {
     const srcNodes = indexPage.querySelectorAll(`[${attr}]`);
+    const parser = new DOMParser();
 
     srcNodes.forEach((srcNode) => {
       const projectMediaFile = projectMedia.find(
@@ -297,6 +305,18 @@ function HtmlRunner() {
       }
       srcNode.setAttribute(attr, src);
       srcNode.setAttribute("crossorigin", true);
+      console.log("the srcNode is now", srcNode);
+      console.log("the srcnode is a", srcNode.tagName);
+      console.log(typeof srcNode);
+      // if (srcNode instanceof HTMLElement) {
+      console.log("observing :eyes:");
+      observer.observe(srcNode, {
+        attributes: true,
+        // attributeFilter: [attr],
+      });
+      // } else {
+      //   console.error("srcNode is not a valid DOM node:", srcNode);
+      // }
     });
   };