feat(editor): add section manipulation APIs and interactive sidebar controls

2026-08-09 21:08:35 +02:00
parent d03750bc53
commit 0c073983e9
8 changed files with 387 additions and 854 deletions
--- a/public/js/editor-bridge.js
+++ b/public/js/editor-bridge.js
@@ -1,56 +1,27 @@
 // public/js/editor-bridge.js
-// Bridge between the editor UI (parent) and the live preview iframe.
-// Listens for messages from the parent and applies updates to the preview.
-
 (function () {
-  // Store current config state for quick reference
-  let siteConfig = {};
-  let themeConfig = {};
+  // Bridge nur im Preview-Modus aktivieren
+  const urlParams = new URLSearchParams(window.location.search);
+  if (urlParams.get('preview') !== 'draft') return;

-  // Helper: apply theme preset CSS variables (assumes theme presets expose a JSON of variables)
-  function applyTheme(presetKey) {
-    fetch(`/theme/${presetKey}.json`)
-      .then((r) => r.json())
-      .then((vars) => {
-        const root = document.documentElement;
-        Object.entries(vars).forEach(([k, v]) => {
-          root.style.setProperty(`--${k}`, v);
-        });
-      })
-      .catch(() => console.warn('Theme preset not found:', presetKey));
-  }
+  console.log('[N&D Editor Bridge] Active on preview canvas');

-  // Helper: re-render the preview by injecting the updated HTML (simple approach).
-  function reloadPreview() {
-    // For SSR Astro we cannot re‑render inside the iframe without a full reload.
-    // Trigger a reload – the parent will send the latest config on load.
-    window.location.reload();
-  }
-
-  // Message dispatcher
  window.addEventListener('message', (event) => {
    const { type, payload } = event.data || {};
-    switch (type) {
-      case 'load':
-        siteConfig = payload || {};
-        // initial load – could trigger a render hook if needed
-        break;
-      case 'add':
-        // For simplicity we just reload – real implementation would manipulate DOM.
-        reloadPreview();
-        break;
-      case 'preset':
-        themeConfig.activePreset = payload;
-        applyTheme(payload);
-        break;
-      case 'update':
-        // payload contains partial siteConfig changes
-        Object.assign(siteConfig, payload);
-        reloadPreview();
-        break;
-      default:
-        // ignore unknown messages
-        break;
+
+    if (type === 'THEME_UPDATE') {
+      // Injiziert CSS-Variablen live in den DOM (<head>)
+      const root = document.documentElement;
+      if (payload.colors) {
+        Object.entries(payload.colors).forEach(([key, val]) => {
+          root.style.setProperty(`--${key}`, val as string);
+        });
+      }
+    }
+
+    if (type === 'RELOAD_CANVAS') {
+      // Sanfter Reload des Iframes bei Strukturänderungen
+      window.location.reload();
    }
  });
 })();