vue-wswg-editor 0.0.12 → 0.0.14

package/src/components/IframePreview/IframePreview.vue

@@ -0,0 +1,211 @@
+<template>
+   <div ref="containerRef" class="iframe-preview-container">
+      <iframe ref="iframeRef" title="Page preview" :src="iframeSrc" class="iframe-preview" frameborder="0"></iframe>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, nextTick, computed } from "vue";
+import { generateIframeHTML } from "./iframeContent";
+import {
+   sendPageDataUpdate,
+   sendActiveBlock,
+   sendHoveredBlock,
+   sendSettingsOpen,
+   sendScrollToBlock,
+   handleIframeMessage,
+} from "./messageHandler";
+import type { Block } from "../../types/Block";
+import { getIframeAppModuleUrl } from "./iframePreviewApp";
+
+// Get the iframe app module URL
+// This will be processed by the consuming app's Vite build
+const iframeAppModuleUrl = getIframeAppModuleUrl();
+
+const props = defineProps<{
+   pageData?: Record<string, any>;
+   activeBlock: Block | null;
+   hoveredBlockId: string | null;
+   viewport: "desktop" | "mobile";
+   editable?: boolean;
+   blocksKey?: string;
+   settingsKey?: string;
+   settingsOpen?: boolean;
+   theme?: string;
+}>();
+
+const emit = defineEmits<{
+   (e: "click-block", block: Block | null): void;
+   (e: "hover-block", blockId: string | null): void;
+   (e: "block-reorder", oldIndex: number, newIndex: number): void;
+   (e: "block-add", blockType: string, index: number): void;
+   (e: "click-partial", partialValue: string): void;
+}>();
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+const containerRef = ref<HTMLElement | null>(null);
+const iframeReady = ref(false);
+const iframeSrc = ref<string>("");
+
+const blocksKey = computed(() => props.blocksKey || "blocks");
+const settingsKey = computed(() => props.settingsKey || "settings");
+
+// Generate blob URL for iframe
+function createIframeSrc(): string {
+   const html = generateIframeHTML(iframeAppModuleUrl);
+   const blob = new Blob([html], { type: "text/html" });
+   return URL.createObjectURL(blob);
+}
+
+// Update iframe content - send pageData to Vue app in iframe
+async function updateIframeContent() {
+   if (!iframeRef.value || !iframeReady.value) return;
+   if (!props.pageData || !props.pageData[blocksKey.value]) return;
+
+   await nextTick();
+   sendPageDataUpdate(iframeRef.value, props.pageData, blocksKey.value, settingsKey.value, props.theme || "default");
+}
+
+// Setup message listener
+let messageListener: ((event: MessageEvent) => void) | null = null;
+
+function setupMessageListener() {
+   messageListener = (event: MessageEvent) => {
+      // Only handle messages from our iframe
+      if (event.source !== iframeRef.value?.contentWindow) return;
+
+      handleIframeMessage(event, {
+         onBlockClick: (_blockId: string, block: any) => {
+            emit("click-block", block);
+         },
+         onBlockHover: (blockId: string | null) => {
+            emit("hover-block", blockId);
+         },
+         onBlockReorder: (oldIndex: number, newIndex: number) => {
+            emit("block-reorder", oldIndex, newIndex);
+         },
+         onBlockAdd: (blockType: string, index: number) => {
+            emit("block-add", blockType, index);
+         },
+         onPartialClick: (partialValue: string) => {
+            emit("click-partial", partialValue);
+         },
+         onIframeReady: () => {
+            iframeReady.value = true;
+            // Wait a bit for iframe Vue app to be fully ready
+            setTimeout(() => {
+               updateIframeContent();
+               // Send initial settingsOpen state
+               if (iframeRef.value && props.settingsOpen !== undefined) {
+                  sendSettingsOpen(iframeRef.value, props.settingsOpen);
+               }
+            }, 100);
+         },
+      });
+   };
+
+   window.addEventListener("message", messageListener);
+}
+
+function cleanupMessageListener() {
+   if (messageListener) {
+      window.removeEventListener("message", messageListener);
+      messageListener = null;
+   }
+}
+
+// Watch for pageData changes
+watch(
+   [() => props.pageData, () => props.theme],
+   async () => {
+      await nextTick();
+      updateIframeContent();
+   },
+   { deep: true }
+);
+
+// Watch for activeBlock changes
+watch(
+   () => props.activeBlock,
+   async (block) => {
+      if (iframeRef.value && iframeReady.value) {
+         sendActiveBlock(iframeRef.value, block || null);
+         // Also scroll to block
+         if (block?.id) {
+            await nextTick();
+            sendScrollToBlock(iframeRef.value, block.id);
+         }
+      }
+   }
+);
+
+// Watch for hoveredBlockId changes
+watch(
+   () => props.hoveredBlockId,
+   (blockId) => {
+      if (iframeRef.value && iframeReady.value) {
+         sendHoveredBlock(iframeRef.value, blockId);
+      }
+   }
+);
+
+// Watch for settingsOpen changes
+watch(
+   () => props.settingsOpen,
+   (settingsOpen) => {
+      if (iframeRef.value && iframeReady.value) {
+         sendSettingsOpen(iframeRef.value, settingsOpen ?? false);
+      }
+   }
+);
+
+onMounted(() => {
+   iframeSrc.value = createIframeSrc();
+   setupMessageListener();
+});
+
+onBeforeUnmount(() => {
+   cleanupMessageListener();
+   // Cleanup blob URL
+   if (iframeSrc.value.startsWith("blob:")) {
+      URL.revokeObjectURL(iframeSrc.value);
+   }
+});
+</script>
+
+<style scoped lang="scss">
+.iframe-preview-container {
+   // position: relative;
+   // width: 100%;
+   // overflow: hidden;
+   // background-color: #ededed;
+   height: -webkit-fill-available;
+
+   &.mobile-viewport {
+      .iframe-preview {
+         max-width: 384px;
+         margin: 0 auto;
+      }
+   }
+}
+
+.iframe-preview {
+   display: block;
+   width: 100%;
+   height: 100%;
+   background: white;
+   border: none;
+}
+
+.hidden-renderer {
+   position: absolute;
+   top: -9999px;
+   left: -9999px;
+   visibility: hidden;
+   width: 1px;
+   height: 1px;
+   overflow: hidden;
+   pointer-events: none;
+   opacity: 0;
+}
+</style>

package/src/components/IframePreview/iframeContent.ts

@@ -0,0 +1,230 @@
+/**
+ * Extract CSS variables from the parent document
+ * Extracts variables from :root and specific selectors like .wswg-page-builder
+ */
+function extractParentCSSVariables(): string {
+   if (typeof document === "undefined" || typeof window === "undefined") return "";
+
+   const variables: string[] = [];
+
+   // Get all CSS variables from :root
+   const rootVariables = new Set<string>();
+   const allStyles = Array.from(document.styleSheets);
+
+   // Extract from stylesheets
+   allStyles.forEach((sheet) => {
+      try {
+         const rules = Array.from(sheet.cssRules || sheet.rules || []);
+         rules.forEach((rule) => {
+            if (rule instanceof CSSStyleRule) {
+               const { selectorText, style } = rule;
+               // Check if this rule targets :root or html
+               if (selectorText === ":root" || selectorText === "html" || selectorText === "html:root") {
+                  for (let i = 0; i < style.length; i++) {
+                     const property = style[i];
+                     if (property.startsWith("--")) {
+                        const value = style.getPropertyValue(property);
+                        rootVariables.add(`${property}: ${value};`);
+                     }
+                  }
+               }
+            }
+         });
+      } catch {
+         // Cross-origin stylesheets will throw errors, ignore them
+      }
+   });
+
+   // Also extract from inline styles in <style> tags
+   const styleTags = document.querySelectorAll("head style");
+   styleTags.forEach((style) => {
+      const content = style.textContent || style.innerHTML;
+      if (content) {
+         // Match CSS variable declarations
+         const varRegex = /--[\w-]+\s*:\s*[^;]+;/g;
+         const matches = content.match(varRegex);
+         if (matches) {
+            matches.forEach((match) => {
+               rootVariables.add(match.trim());
+            });
+         }
+      }
+   });
+
+   if (rootVariables.size > 0) {
+      variables.push(`:root {`);
+      rootVariables.forEach((variable) => {
+         variables.push(`   ${variable}`);
+      });
+      variables.push(`}`);
+   }
+
+   return variables.length > 0 ? `<style>${variables.join("\n")}</style>` : "";
+}
+
+/**
+ * Extract stylesheets from the parent document
+ * This includes both <link rel="stylesheet"> tags and <style> tags
+ */
+function extractParentStylesheets(): string {
+   if (typeof document === "undefined") return "";
+
+   const stylesheets: string[] = [];
+
+   // Extract <link rel="stylesheet"> tags
+   const linkTags = document.querySelectorAll('head link[rel="stylesheet"]');
+   linkTags.forEach((link) => {
+      const href = link.getAttribute("href");
+      if (href) {
+         // Convert relative URLs to absolute URLs
+         const absoluteHref = new URL(href, window.location.href).href;
+         stylesheets.push(`<link rel="stylesheet" href="${absoluteHref}">`);
+      }
+   });
+
+   // Extract <style> tags
+   const styleTags = document.querySelectorAll("head style");
+   styleTags.forEach((style) => {
+      const content = style.textContent || style.innerHTML;
+      if (content) {
+         stylesheets.push(`<style>${content}</style>`);
+      }
+   });
+
+   return stylesheets.join("\n   ");
+}
+
+/**
+ * Generate HTML content for the iframe
+ * This creates a standalone HTML page with a Vue app that will be loaded in the iframe
+ * The Vue app uses PageRenderer to render blocks reactively
+ *
+ * @param iframeAppModuleUrl - URL to the iframe app module bundle
+ *                             This should be obtained using import.meta.url from iframePreviewApp.ts
+ */
+export function generateIframeHTML(iframeAppModuleUrl?: string): string {
+   const parentStylesheets = extractParentStylesheets();
+   const parentCSSVariables = extractParentCSSVariables();
+   const vueCdnUrl = "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+   const vueRouterCdnUrl = "https://unpkg.com/vue-router@4/dist/vue-router.esm-browser.js";
+   // Get parent origin to use as base URL for relative asset paths
+   const parentOrigin = typeof window !== "undefined" ? window.location.origin : "";
+
+   // Define Vue feature flags before Vue is loaded
+   // These must be defined as global constants before any Vue code runs
+   const vueFeatureFlagsScript = `<script>
+      // Define Vue feature flags to prevent warnings
+      // These must be defined before Vue or the library code is imported
+      // Using var to make them available globally (not just on window)
+      var __VUE_OPTIONS_API__ = true;
+      var __VUE_PROD_DEVTOOLS__ = false;
+      var __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
+      
+      // Also set on window for compatibility
+      window.__VUE_OPTIONS_API__ = true;
+      window.__VUE_PROD_DEVTOOLS__ = false;
+      window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
+   </script>`;
+
+   // Generate script that loads Vue, vue-router, and initializes the iframe app
+   // The import map above allows vue-router to resolve "vue" as a bare module specifier
+   const appScript = iframeAppModuleUrl
+      ? `<script type="module">
+         import { createApp } from 'vue';
+         import * as VueRouter from 'vue-router';
+         // Make vue-router available globally so it can be accessed in the iframe app
+         window.VueRouter = VueRouter;
+         
+         import { createIframeApp } from '${iframeAppModuleUrl}';
+         
+         const appEl = document.getElementById('app');
+         if (appEl) {
+            createIframeApp(appEl).catch(error => {
+               console.error('Failed to create iframe app:', error);
+            });
+         }
+      </script>`
+      : `<script type="module">
+         // Fallback: Wait for parent to send module URL via postMessage
+         import { createApp } from 'vue';
+         import * as VueRouter from 'vue-router';
+         // Make vue-router available globally so it can be imported in the iframe app
+         window.VueRouter = VueRouter;
+         
+         let appInitialized = false;
+         
+         window.addEventListener('message', async (event) => {
+            if (event.data.type === 'INIT_IFRAME_APP' && event.data.moduleUrl && !appInitialized) {
+               appInitialized = true;
+               try {
+                  const { createIframeApp } = await import(event.data.moduleUrl);
+                  const appEl = document.getElementById('app');
+                  if (appEl) {
+                     createIframeApp(appEl);
+                  }
+               } catch (error) {
+                  console.error('Failed to load iframe app module:', error);
+                  // Fallback: create minimal Vue app
+                  const appEl = document.getElementById('app');
+                  if (appEl) {
+                     createApp({
+                        template: '<div class="p-4">Loading preview...</div>'
+                     }).mount(appEl);
+                  }
+               }
+            }
+         });
+         
+         // Notify parent that we're ready to receive module URL
+         if (window.parent) {
+            window.parent.postMessage({ type: 'IFRAME_READY_FOR_APP' }, '*');
+         }
+      </script>`;
+
+   return `<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Page Preview</title>
+   ${parentOrigin ? `<base href="${parentOrigin}/">` : ""}
+   <!-- Import map to allow vue-router to resolve "vue" -->
+   <!-- Stub for @vue/devtools-api to avoid loading devtools in iframe -->
+   <script type="importmap">
+   {
+      "imports": {
+         "vue": "${vueCdnUrl}",
+         "vue-router": "${vueRouterCdnUrl}",
+         "@vue/devtools-api": "data:text/javascript,export const setupDevtoolsPlugin=()=>{};export const on=()=>{};export const off=()=>{};export const once=()=>{};export const emit=()=>{};export const notifyComponentUpdate=()=>{};export const addTimelineLayer=()=>{};export const addCustomCommand=()=>{};export const addCustomTab=()=>{};"
+      }
+   }
+   </script>
+   ${parentStylesheets}
+   ${parentCSSVariables}
+   <style>
+      /* Additional iframe-specific styles */
+      html, body {
+         margin: 0;
+         padding: 0;
+         width: 100%;
+         height: 100%;
+         overflow-x: hidden;
+      }
+      
+      #app {
+         width: 100%;
+         min-height: 100vh;
+      }
+      
+      .page-renderer-wrapper {
+         width: 100%;
+      }
+   </style>
+</head>
+<body>
+   <div id="app"></div>
+   ${vueFeatureFlagsScript}
+   ${appScript}
+</body>
+</html>`;
+}