- track and sync input field changes from preview to code editor

TobiasMue91 · web-flow · commit 5984736874f0 · 2025-05-12T13:25:41.000+02:00
diff --git a/tools/code_editor.html b/tools/code_editor.html
@@ -115,24 +115,23 @@
     </div>
 </div>
 <script>
-    // JavaScript updates for toggle functionality including dynamic arrow direction
     const container = document.getElementById('container');
     const toggle = document.getElementById('toggle');
     const iframe = document.getElementById('preview');
     const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-
+    
     function compressAndBase64Encode(str) {
         return btoa(String.fromCharCode.apply(null, pako.deflate(str))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
     }
-
+    
     function base64DecodeAndDecompress(base64EncodedData) {
         const adjustedData = base64EncodedData.replace(/-/g, '+').replace(/_/g, '/');
         const decodedData = atob(adjustedData);
         const charData = decodedData.split('').map(c => c.charCodeAt(0));
         const binData = new Uint8Array(charData);
         return pako.inflate(binData, { to: 'string' });
     }
-
+    
     function updateURL() {
         console.log('url updated');
         const html = compressAndBase64Encode(document.getElementById('htmlCode').value);
@@ -141,41 +140,69 @@
         history.replaceState(null, '', `?html=${html}&css=${css}&js=${js}`);
         decompressAndInject();
     }
-
+    
     function decompressAndInject() {
         let urlParams = new URLSearchParams(window.location.search);
         let html = urlParams.get('html') ? sanitizeEncodedValue(urlParams.get('html')) : '';
         let css = urlParams.get('css') ? sanitizeEncodedValue(urlParams.get('css')) : '';
         let js = urlParams.get('js') ? sanitizeEncodedValue(urlParams.get('js')) : '';
-
+    
         html = html ? base64DecodeAndDecompress(html) : '';
         css = css ? base64DecodeAndDecompress(css) : '';
         js = js ? base64DecodeAndDecompress(js) : '';
-
+    
         if (html) document.getElementById('htmlCode').value = html;
         if (css) document.getElementById('cssCode').value = css;
         if (js) document.getElementById('jsCode').value = js;
-
+    
         iframeDoc.open();
         iframeDoc.write(`
-        <html>
-        <head><style>${css}</style></head>
-        <body>${html}<script>${js}<\/script></body>
-        </html>
-    `);
+            <html>
+            <head>
+                <style>${css}</style>
+            </head>
+            <body>${html}<script>${js}</script>
+            <script>
+                document.addEventListener('input', function(e) {
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
+                        window.parent.postMessage({
+                            type: 'inputChanged',
+                            html: document.body.innerHTML
+                        }, '*');
+                    }
+                });
+                document.addEventListener('change', function(e) {
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
+                        window.parent.postMessage({
+                            type: 'inputChanged',
+                            html: document.body.innerHTML
+                        }, '*');
+                    }
+                });
+            </script>
+            </body>
+            </html>
+        `);
         iframeDoc.close();
     }
-
+    
     function sanitizeEncodedValue(encodedValue) {
         return encodedValue.replace(/[\s'"]+$/g, '');
     }
-
+    
     document.getElementById('htmlCode').addEventListener('input', updateURL);
     document.getElementById('cssCode').addEventListener('input', updateURL);
     document.getElementById('jsCode').addEventListener('input', updateURL);
-
+    
+    window.addEventListener('message', function(event) {
+        if (event.data && event.data.type === 'inputChanged') {
+            document.getElementById('htmlCode').value = event.data.html;
+            updateURL();
+        }
+    });
+    
     decompressAndInject();
-
+    
     toggle.addEventListener('click', () => {
         const codeEditor = document.getElementById('codeEditor');
         const preview = document.getElementById('preview');
@@ -192,4 +219,4 @@
 </script>
 <script src="../logo.js"></script>
 </body>
-</html>
+</html>
