vue-wswg-editor 0.0.12 → 0.0.14

package/src/components/IframePreview/iframePreviewApp.ts

@@ -0,0 +1,308 @@
+/**
+ * Iframe Preview Vue Application
+ *
+ * This file creates a Vue application that runs inside the iframe preview.
+ * Since the library is consumed as source code, consuming apps' Vite builds
+ * will process this file, giving it access to virtual modules (blocks/layouts).
+ *
+ * Usage in consuming apps:
+ * ```ts
+ * import { createIframeApp, getIframeAppModuleUrl } from 'vue-wswg-editor/IframePreviewApp'
+ * ```
+ */
+
+import { createApp, ref, watch, h, type App } from "vue";
+import EditorPageRenderer from "../EditorPageRenderer/EditorPageRenderer.vue";
+import type { Block } from "../../types/Block";
+
+/**
+ * Get the URL of this module
+ * This can be used to import the module in the iframe HTML
+ */
+export function getIframeAppModuleUrl(): string {
+   // Use import.meta.url to get the current module's URL
+   // In development, this will be the source file URL
+   // In production (after Vite build), this will be the bundled module URL
+   return import.meta.url;
+}
+
+export interface IframeAppState {
+   pageData: Record<string, any> | null;
+   activeBlock: Block | null;
+   hoveredBlockId: string | null;
+   blocksKey: string;
+   settingsKey: string;
+   settingsOpen: boolean;
+   theme: string;
+}
+
+export interface IframeAppCallbacks {
+   onBlockClick?: (blockId: string, block: Block | null) => void;
+   onBlockHover?: (blockId: string | null) => void;
+}
+
+/**
+ * Create and mount the Vue app for the iframe preview
+ */
+export async function createIframeApp(container: HTMLElement): Promise<App> {
+   // State
+   const pageData = ref<Record<string, any> | null>(null);
+   const activeBlock = ref<Block | null>(null);
+   const hoveredBlockId = ref<string | null>(null);
+   const settingsOpen = ref<boolean>(false);
+   const blocksKey = ref<string>("blocks");
+   const settingsKey = ref<string>("settings");
+   const theme = ref<string>("default");
+   // Serialize data for postMessage (handles Vue reactive proxies)
+   function serializeForPostMessage(data: any): any {
+      try {
+         return JSON.parse(JSON.stringify(data));
+      } catch {
+         return undefined;
+      }
+   }
+
+   // Message handler
+   function sendToParent(message: any) {
+      if (window.parent) {
+         // Serialize message to handle Vue reactive proxies
+         const serializedMessage = serializeForPostMessage(message);
+         if (!serializedMessage) {
+            return;
+         }
+         window.parent.postMessage(serializedMessage, "*");
+      }
+   }
+
+   // Handle messages from parent
+   window.addEventListener("message", (event: MessageEvent) => {
+      const msg = event.data;
+      if (!msg || !msg.type) return;
+
+      switch (msg.type) {
+         case "UPDATE_PAGE_DATA":
+            if (msg.pageData) {
+               pageData.value = msg.pageData;
+            }
+            if (msg.blocksKey) {
+               blocksKey.value = msg.blocksKey;
+            }
+            if (msg.settingsKey) {
+               settingsKey.value = msg.settingsKey;
+            }
+            if (msg.theme) {
+               theme.value = msg.theme;
+            }
+            break;
+         case "SET_ACTIVE_BLOCK":
+            activeBlock.value = msg.block;
+            break;
+         case "SET_HOVERED_BLOCK":
+            hoveredBlockId.value = msg.blockId;
+            break;
+         case "SET_SETTINGS_OPEN":
+            settingsOpen.value = msg.settingsOpen;
+            break;
+         case "SCROLL_TO_BLOCK": {
+            const block = document.querySelector(`[data-block-id="${msg.blockId}"]`);
+            if (block) {
+               block.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+            break;
+         }
+      }
+   });
+
+   // Create Vue app using render function (since we're using runtime-only Vue)
+   const app = createApp({
+      components: {
+         EditorPageRenderer,
+      },
+      setup() {
+         // Ensure PageRenderer has time to load blocks before rendering
+         const isPageReady = ref(false);
+
+         // Watch for pageData changes
+         watch(
+            () => pageData.value,
+            async (newPageData) => {
+               if (newPageData && newPageData[blocksKey.value]) {
+                  // Give PageRenderer time to load block modules
+                  // PageRenderer loads blocks in onBeforeMount, so we need to wait
+                  await new Promise((resolve) => setTimeout(resolve, 200));
+                  isPageReady.value = true;
+               } else {
+                  isPageReady.value = false;
+               }
+            },
+            { immediate: true }
+         );
+
+         // Render function
+         return () => {
+            const currentPageData = pageData.value;
+            const hasPageData = currentPageData && currentPageData[blocksKey.value];
+            const blocks = hasPageData && currentPageData ? currentPageData[blocksKey.value] : [];
+
+            if (isPageReady.value && currentPageData) {
+               return h(EditorPageRenderer, {
+                  blocks: blocks,
+                  layout: currentPageData[settingsKey.value]?.layout,
+                  settings: currentPageData[settingsKey.value],
+                  activeBlock: activeBlock.value,
+                  hoveredBlockId: hoveredBlockId.value,
+                  settingsOpen: settingsOpen.value,
+                  editable: true,
+                  theme: theme.value,
+               });
+            } else {
+               // Show loading state while PageRenderer loads blocks
+               return h("div", { class: "bg-white px-5 py-12 md:py-20" }, [
+                  h("div", { class: "mx-auto max-w-md pb-7 text-center" }, [
+                     h(
+                        "svg",
+                        {
+                           class: "mx-auto size-8 animate-spin text-blue-600",
+                           xmlns: "http://www.w3.org/2000/svg",
+                           fill: "none",
+                           viewBox: "0 0 24 24",
+                        },
+                        [
+                           h("circle", {
+                              class: "opacity-25",
+                              cx: "12",
+                              cy: "12",
+                              r: "10",
+                              stroke: "currentColor",
+                              "stroke-width": "4",
+                           }),
+                           h("path", {
+                              class: "opacity-75",
+                              fill: "currentColor",
+                              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                           }),
+                        ]
+                     ),
+                     h("span", { class: "mt-4 text-gray-700" }, "Loading preview..."),
+                  ]),
+               ]);
+            }
+         };
+      },
+   });
+
+   // Dynamic import helper - using Function constructor to create a truly dynamic import
+   // that Vite cannot analyze statically, preventing build-time resolution errors
+   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+   // @ts-ignore - modules may not be available in all consuming apps
+   const dynamicImport = new Function("modulePath", "return import(modulePath)");
+
+   // Try to install Unhead plugin if available
+   // This is needed for layouts that use useHead from @vueuse/head
+   try {
+      // Dynamic import to check if @vueuse/head is available
+      // This module is externalized in vite.config.ts so it won't be bundled
+      const headModule = await dynamicImport("@vueuse/head");
+      if (headModule && typeof headModule.createHead === "function") {
+         const head = headModule.createHead();
+         app.use(head);
+      }
+   } catch {
+      // @vueuse/head not available - layouts using useHead will show warnings but won't break
+      // This is expected if the consuming app doesn't use @vueuse/head
+   }
+
+   // Try to use vue-router - first try from CDN, but components use consuming app's vue-router
+   // The issue is that components from the consuming app use their own vue-router instance
+   // with different Symbol keys. We need to use the same instance they're using.
+   // Try to import vue-router dynamically - this will use the consuming app's vue-router
+   // if it's available in the module resolution context
+   let VueRouter: any = null;
+   let routerInstalled = false;
+
+   try {
+      // Try dynamic import - this should resolve to the consuming app's vue-router
+      // when the library is consumed as source code
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore - vue-router may not be available in all consuming apps
+      const routerModule = await import("vue-router");
+      VueRouter = routerModule;
+   } catch {
+      // Fallback to CDN version
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      VueRouter = typeof window !== "undefined" ? (window as any).VueRouter : null;
+   }
+
+   if (VueRouter && typeof VueRouter.createRouter === "function") {
+      try {
+         // Create a minimal router instance
+         const router = VueRouter.createRouter({
+            history: VueRouter.createMemoryHistory(),
+            routes: [
+               {
+                  path: "/",
+                  component: { template: "<div></div>" },
+               },
+               {
+                  path: "/:pathMatch(.*)*",
+                  component: { template: "<div></div>" },
+               },
+            ],
+         });
+
+         // Store original resolve to call it first, then ensure matched array exists
+         const originalResolve = router.resolve.bind(router);
+         router.resolve = (to: any) => {
+            // Call original resolve to get proper route structure
+            const resolved = originalResolve(to);
+            // Ensure the resolved route has a matched array (useLink requires this)
+            if (resolved.route && (!resolved.route.matched || resolved.route.matched.length === 0)) {
+               resolved.route.matched = [
+                  {
+                     path: resolved.route.path || "/",
+                     name: resolved.route.name,
+                     meta: resolved.route.meta || {},
+                     components: {},
+                     children: [],
+                  },
+               ];
+            }
+            return resolved;
+         };
+
+         // Install router BEFORE mounting - this provides the router injection
+         // The app.use() call should handle the Symbol keys automatically
+         app.use(router);
+
+         // Wait for router to be ready before mounting
+         await router.isReady();
+
+         // Ensure currentRoute has proper structure with matched array
+         // currentRoute.value is readonly, so we navigate to ensure route is properly resolved
+         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+         // @ts-ignore
+         const currentRoute = router.currentRoute.value;
+         if (currentRoute && (!currentRoute.matched || currentRoute.matched.length === 0)) {
+            // Navigate to ensure route has proper matched array
+            await router.push("/");
+         }
+
+         routerInstalled = true;
+      } catch {
+         // Fall through to mount without router
+      }
+   }
+
+   if (!routerInstalled) {
+      // Router was not installed - RouterLink components will fail
+      console.warn("[iframe preview] Router was not installed - RouterLink components will fail");
+   }
+   // Mount the app
+   app.mount(container);
+
+   // Notify parent that iframe is ready
+   sendToParent({ type: "IFRAME_READY" });
+
+   return app;
+}

package/src/components/IframePreview/messageHandler.ts

@@ -0,0 +1,219 @@
+import type {
+   IframeMessage,
+   ParentMessage,
+   UpdatePageDataMessage,
+   UpdateHTMLMessage,
+   SetActiveBlockMessage,
+   SetHoveredBlockMessage,
+   SetSettingsOpenMessage,
+   SetViewportMessage,
+   ScrollToBlockMessage,
+} from "./types";
+import type { Block } from "../../types/Block";
+
+/**
+ * Serialize data for postMessage (handles Vue reactive proxies)
+ */
+function serializeForPostMessage(data: any): any {
+   try {
+      return JSON.parse(JSON.stringify(data));
+   } catch (error) {
+      console.warn("Failed to serialize data for postMessage:", error);
+      return undefined;
+   }
+}
+
+/**
+ * Send a message to the iframe
+ */
+export function sendToIframe(iframe: HTMLIFrameElement | null, message: IframeMessage): void {
+   if (!iframe || !iframe.contentWindow) {
+      console.warn("Cannot send message: iframe not ready");
+      return;
+   }
+
+   // Serialize message to handle Vue reactive proxies
+   const serializedMessage = serializeForPostMessage(message) as IframeMessage;
+   if (!serializedMessage) {
+      console.error("Failed to serialize message for postMessage");
+      return;
+   }
+
+   // Security: Only send to same origin
+   try {
+      iframe.contentWindow.postMessage(serializedMessage, "*");
+   } catch (error) {
+      console.error("Error sending message to iframe:", error);
+   }
+}
+
+/**
+ * Send page data update to iframe
+ */
+export function sendPageDataUpdate(
+   iframe: HTMLIFrameElement | null,
+   pageData: Record<string, any>,
+   blocksKey: string,
+   settingsKey: string,
+   theme: string
+): void {
+   // Serialize pageData to avoid Vue reactive proxy issues
+   const serializedPageData = serializeForPostMessage(pageData);
+   const message: UpdatePageDataMessage = {
+      type: "UPDATE_PAGE_DATA",
+      pageData: serializedPageData,
+      blocksKey,
+      settingsKey,
+      theme,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Send rendered HTML to iframe
+ */
+export function sendHTMLUpdate(
+   iframe: HTMLIFrameElement | null,
+   html: string,
+   pageData?: Record<string, any>,
+   blocksKey?: string,
+   settingsKey?: string
+): void {
+   // Serialize pageData to avoid Vue reactive proxy issues
+   const serializedPageData = pageData ? serializeForPostMessage(pageData) : undefined;
+   const message: UpdateHTMLMessage = {
+      type: "UPDATE_HTML",
+      html,
+      pageData: serializedPageData,
+      blocksKey,
+      settingsKey,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Send active block update to iframe
+ */
+export function sendActiveBlock(iframe: HTMLIFrameElement | null, block: Block | null): void {
+   const message: SetActiveBlockMessage = {
+      type: "SET_ACTIVE_BLOCK",
+      block,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Send hovered block update to iframe
+ */
+export function sendHoveredBlock(iframe: HTMLIFrameElement | null, blockId: string | null): void {
+   const message: SetHoveredBlockMessage = {
+      type: "SET_HOVERED_BLOCK",
+      blockId,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Send settings open state update to iframe
+ */
+export function sendSettingsOpen(iframe: HTMLIFrameElement | null, settingsOpen: boolean): void {
+   const message: SetSettingsOpenMessage = {
+      type: "SET_SETTINGS_OPEN",
+      settingsOpen,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Send viewport update to iframe
+ */
+export function sendViewport(iframe: HTMLIFrameElement | null, viewport: "desktop" | "mobile"): void {
+   const message: SetViewportMessage = {
+      type: "SET_VIEWPORT",
+      viewport,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Send scroll to block command to iframe
+ */
+export function sendScrollToBlock(iframe: HTMLIFrameElement | null, blockId: string): void {
+   const message: ScrollToBlockMessage = {
+      type: "SCROLL_TO_BLOCK",
+      blockId,
+   };
+   sendToIframe(iframe, message);
+}
+
+/**
+ * Validate incoming message from iframe
+ */
+export function isValidParentMessage(message: any): message is ParentMessage {
+   if (!message || typeof message !== "object" || !message.type) {
+      return false;
+   }
+
+   const validTypes: string[] = [
+      "BLOCK_CLICK",
+      "BLOCK_HOVER",
+      "BLOCK_REORDER",
+      "BLOCK_ADD",
+      "IFRAME_READY",
+      "BLOCK_ELEMENT_POSITION",
+      "CLICK_PARTIAL",
+   ];
+
+   return validTypes.includes(message.type);
+}
+
+/**
+ * Handle incoming message from iframe
+ */
+export function handleIframeMessage(
+   event: MessageEvent,
+   callbacks: {
+      onBlockClick?: (blockId: string, block: any) => void;
+      onBlockHover?: (blockId: string | null) => void;
+      onBlockReorder?: (oldIndex: number, newIndex: number) => void;
+      onBlockAdd?: (blockType: string, index: number) => void;
+      onPartialClick?: (partialValue: string) => void;
+      onIframeReady?: () => void;
+      onBlockPosition?: (
+         blockId: string,
+         position: { top: number; left: number; width: number; height: number }
+      ) => void;
+   }
+): void {
+   // Security: Validate origin (in production, check against expected origin)
+   // For now, we'll accept messages from any origin since we're using blob URLs
+   if (!isValidParentMessage(event.data)) {
+      return;
+   }
+
+   const message = event.data as ParentMessage;
+
+   switch (message.type) {
+      case "BLOCK_CLICK":
+         callbacks.onBlockClick?.(message.blockId, message.block);
+         break;
+      case "BLOCK_HOVER":
+         callbacks.onBlockHover?.(message.blockId);
+         break;
+      case "BLOCK_REORDER":
+         callbacks.onBlockReorder?.(message.oldIndex, message.newIndex);
+         break;
+      case "BLOCK_ADD":
+         callbacks.onBlockAdd?.(message.blockType, message.index);
+         break;
+      case "CLICK_PARTIAL":
+         callbacks.onPartialClick?.(message.partial);
+         break;
+      case "IFRAME_READY":
+         callbacks.onIframeReady?.();
+         break;
+      case "BLOCK_ELEMENT_POSITION":
+         callbacks.onBlockPosition?.(message.blockId, message.position);
+         break;
+   }
+}

package/src/components/IframePreview/types.ts

@@ -0,0 +1,126 @@
+// Message types for parent ↔ iframe communication
+
+import type { Block } from "../../types/Block";
+
+export type MessageType =
+   | "UPDATE_PAGE_DATA"
+   | "UPDATE_HTML"
+   | "SET_ACTIVE_BLOCK"
+   | "SET_HOVERED_BLOCK"
+   | "SET_SETTINGS_OPEN"
+   | "SET_VIEWPORT"
+   | "CLICK_PARTIAL"
+   | "SCROLL_TO_BLOCK"
+   | "BLOCK_CLICK"
+   | "BLOCK_HOVER"
+   | "BLOCK_REORDER"
+   | "BLOCK_ADD"
+   | "IFRAME_READY"
+   | "BLOCK_ELEMENT_POSITION";
+
+export interface BaseMessage {
+   type: MessageType;
+}
+
+export interface UpdatePageDataMessage extends BaseMessage {
+   type: "UPDATE_PAGE_DATA";
+   pageData: Record<string, any>;
+   blocksKey: string;
+   settingsKey: string;
+   theme: string;
+}
+
+export interface UpdateHTMLMessage extends BaseMessage {
+   type: "UPDATE_HTML";
+   html: string;
+   pageData?: Record<string, any>;
+   blocksKey?: string;
+   settingsKey?: string;
+}
+
+export interface SetActiveBlockMessage extends BaseMessage {
+   type: "SET_ACTIVE_BLOCK";
+   block: Block | null;
+}
+
+export interface SetHoveredBlockMessage extends BaseMessage {
+   type: "SET_HOVERED_BLOCK";
+   blockId: string | null;
+}
+
+export interface SetSettingsOpenMessage extends BaseMessage {
+   type: "SET_SETTINGS_OPEN";
+   settingsOpen: boolean;
+}
+
+export interface SetViewportMessage extends BaseMessage {
+   type: "SET_VIEWPORT";
+   viewport: "desktop" | "mobile";
+}
+
+export interface PartialClickMessage extends BaseMessage {
+   type: "CLICK_PARTIAL";
+   partial: string;
+}
+
+export interface ScrollToBlockMessage extends BaseMessage {
+   type: "SCROLL_TO_BLOCK";
+   blockId: string;
+}
+
+export interface BlockClickMessage extends BaseMessage {
+   type: "BLOCK_CLICK";
+   blockId: string;
+   block: any;
+}
+
+export interface BlockHoverMessage extends BaseMessage {
+   type: "BLOCK_HOVER";
+   blockId: string | null;
+}
+
+export interface BlockReorderMessage extends BaseMessage {
+   type: "BLOCK_REORDER";
+   oldIndex: number;
+   newIndex: number;
+}
+
+export interface BlockAddMessage extends BaseMessage {
+   type: "BLOCK_ADD";
+   blockType: string;
+   index: number;
+}
+
+export interface IframeReadyMessage extends BaseMessage {
+   type: "IFRAME_READY";
+}
+
+export interface BlockElementPositionMessage extends BaseMessage {
+   type: "BLOCK_ELEMENT_POSITION";
+   blockId: string;
+   position: {
+      top: number;
+      left: number;
+      width: number;
+      height: number;
+   };
+}
+
+export type IframeMessage =
+   | UpdatePageDataMessage
+   | UpdateHTMLMessage
+   | SetActiveBlockMessage
+   | SetHoveredBlockMessage
+   | SetSettingsOpenMessage
+   | SetViewportMessage
+   | ScrollToBlockMessage
+   | PartialClickMessage;
+
+export type ParentMessage =
+   | BlockClickMessage
+   | BlockHoverMessage
+   | BlockReorderMessage
+   | BlockAddMessage
+   | IframeReadyMessage
+   | BlockElementPositionMessage
+   | PartialClickMessage;

package/src/components/PageBlockList/PageBlockList.vue

@@ -4,6 +4,7 @@
          <div
             v-for="block in pageBlocks"
             :key="block.id"
+            data-prevent-drop="true"
             :class="{ 'bg-blue-100 text-blue-600': hoveredBlockId === block.id }"
             class="block-item -mx-2.5 flex cursor-pointer items-center gap-1 rounded-md p-2.5 text-sm text-neutral-900"
             @mouseenter="setHoveredBlockId(block.id)"
@@ -24,9 +25,9 @@
 
 <script setup lang="ts">
 import { computed, defineEmits, onMounted, ref } from "vue";
-import { pageBuilderBlocks } from "../../util/registry";
+import { getBlock } from "../../util/theme-registry";
 import type { Block } from "../../types/Block";
-import { toCamelCase, toNiceName } from "../../util/helpers";
+import { toNiceName } from "../../util/helpers";
 import Sortable from "sortablejs";
 
 const emit = defineEmits<{
@@ -45,9 +46,12 @@ const pageBlocks = computed(() => {
    if (!pageData.value?.[props.blocksKey]) return [];
    // loop through pageData[blocksKey] and get the block data from registry or return a default block data
    return pageData.value[props.blocksKey].map((block: any) => {
-      if (pageBuilderBlocks.value[toCamelCase(block.type)]) {
+      // Find the corresponding block in the registry
+      const registryBlock = getBlock(block.type);
+
+      if (registryBlock) {
          return {
-            ...pageBuilderBlocks.value[toCamelCase(block.type)],
+            ...registryBlock,
             ...block,
          };
       }
@@ -56,8 +60,6 @@ const pageBlocks = computed(() => {
          id: block.id,
          name: block.type,
          label: toNiceName(block.type),
-         icon: "question-mark",
-         thumbnail: "https://via.placeholder.com/150",
       };
    });
 });