vue-wswg-editor 0.0.12 → 0.0.13

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",
       };
    });
 });

package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue

@@ -14,6 +14,7 @@
          v-model="pageData"
          :editable="editable"
          :settingsKey="settingsKey"
+         :activeTab="activeSettingsTab"
          @close="showPageSettings = false"
       />
       <!-- Active section-->
@@ -90,9 +91,8 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { pageBuilderBlocks } from "../../util/registry";
+import { getBlock } from "../../util/theme-registry";
 import type { Block } from "../../types/Block";
-import { toCamelCase } from "../../util/helpers";
 import BlockBrowser from "../BlockBrowser/BlockBrowser.vue";
 import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
 import PageBlockList from "../PageBlockList/PageBlockList.vue";
@@ -114,12 +114,14 @@ const props = withDefaults(
       blocksKey?: string;
       settingsKey?: string;
       hasPageSettings?: boolean;
+      activeSettingsTab?: string;
    }>(),
    {
       editable: true,
       blocksKey: "blocks",
       settingsKey: "settings",
       hasPageSettings: false,
+      activeSettingsTab: undefined,
    }
 );
 
@@ -136,7 +138,7 @@ const computedActiveBlock = computed(() => {
    }
 
    // Find the corresponding block in the registry
-   const registryBlock = pageBuilderBlocks.value[toCamelCase(blockType)];
+   const registryBlock = getBlock(blockType);
 
    if (!registryBlock) {
       // If no registry block found, return activeBlock as-is

package/src/components/PageRenderer/PageRenderer.vue

@@ -24,18 +24,15 @@
             >
                <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
             </div>
-            <pre>{{ blocks }}</pre>
          </div>
       </template>
    </div>
 </template>
 
 <script setup lang="ts">
-import { type Component, computed, withDefaults, onBeforeMount, ref } from "vue";
-import { generateNameVariations } from "../../util/helpers";
-import { getBlockModule, loadBlockModules } from "./blockModules";
-import { loadLayoutModules, getLayoutModule } from "./layoutModules";
+import { computed, withDefaults, onBeforeMount, ref } from "vue";
 import type { Block } from "../../types/Block";
+import { initialiseRegistry, getBlock, getLayout } from "../../util/theme-registry";
 
 const props = withDefaults(
    defineProps<{
@@ -43,42 +40,18 @@ const props = withDefaults(
       layout?: string;
       settings?: Record<string, any>;
       withLayout?: boolean;
+      theme?: string;
    }>(),
    {
       layout: "default",
       settings: () => ({}),
       withLayout: false,
+      theme: "default",
    }
 );
 
 const isReady = ref(false);
 
-function getBlock(blockType: string): Component | undefined {
-   // Generate name variations and try to find a match
-   const nameVariations = generateNameVariations(blockType);
-
-   // Try each variation to find the block component
-   for (const variation of nameVariations) {
-      const module = getBlockModule(variation);
-      if (module) return module;
-   }
-
-   return undefined;
-}
-
-function getLayout(layoutName: string): Component | undefined {
-   // Generate name variations and try to find a match in layoutModules keys (file paths)
-   const nameVariations = generateNameVariations(layoutName);
-
-   // Try each variation to find the block component
-   for (const variation of nameVariations) {
-      const module = getLayoutModule(variation);
-      if (module) return module;
-   }
-
-   return undefined;
-}
-
 // Get the layout component based on the layout prop
 const layoutComponent = computed(() => {
    return getLayout(props.layout);
@@ -102,8 +75,11 @@ function getMarginClass(block: Block): string {
 
 onBeforeMount(async () => {
    isReady.value = false;
-   await loadBlockModules();
-   await loadLayoutModules();
+
+   // Initialise registries for editor preview
+   // Exclude the editing registry to load only the theme and blocks
+   await initialiseRegistry(props.theme, false);
+
    isReady.value = true;
 });
 </script>

package/src/components/PageSettings/PageSettings.vue

@@ -11,7 +11,7 @@
             <h4 class="mt-1 text-lg font-bold">Page settings</h4>
          </div>
       </div>
-      <div class="border-b border-gray-300 p-5">
+      <div v-if="availableLayouts.length > 1" class="border-b border-gray-300 p-5">
          <!-- Page layout -->
          <div class="editor-field-node">
             <!-- Label -->
@@ -37,6 +37,7 @@
             :fields="pageSettingsFields"
             :editable="true"
             :isLayoutBlock="true"
+            :activeTab="activeTab"
          />
       </div>
    </div>
@@ -44,7 +45,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeMount, onMounted, ref } from "vue";
-import { getLayoutFields, getLayouts } from "../../util/registry";
+import { themeLayouts } from "../../util/theme-registry";
 import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
 
 const emit = defineEmits<{
@@ -57,23 +58,26 @@ const pageSettingsFields = ref<any>({});
 const props = withDefaults(
    defineProps<{
       settingsKey?: string;
+      activeTab?: string;
    }>(),
    {
       settingsKey: "settings",
+      activeTab: undefined,
    }
 );
 const availableLayouts = computed(() => {
-   return getLayouts();
+   return Object.values(themeLayouts.value) || [];
 });
 
 function getLayoutSettings() {
-   if (!pageData.value[props.settingsKey].layout) return;
-   pageSettingsFields.value = getLayoutFields(pageData.value[props.settingsKey].layout) || null;
+   const activeLayout = pageData.value[props.settingsKey].layout;
+   if (!activeLayout) return;
+   pageSettingsFields.value = themeLayouts.value[activeLayout]?.fields || null;
 }
 
 onBeforeMount(() => {
    if (!pageData.value[props.settingsKey]) {
-      pageData.value.settings = null;
+      pageData.value[props.settingsKey] = {};
    }
 });
 

package/src/components/ResizeHandle/ResizeHandle.vue

@@ -1,15 +1,23 @@
 <template>
-   <div
-      id="page-builder-resize-handle"
-      ref="resizeHandle"
-      class="resize-handle shrink-0 cursor-col-resize transition-colors duration-200"
-      @mousedown="startResize"
-   ></div>
+   <div class="resize-handle-wrapper group">
+      <div
+         id="page-builder-resize-handle"
+         ref="resizeHandle"
+         class="resize-handle shrink-0 cursor-col-resize transition-colors duration-200"
+         @mousedown="startResize"
+      ></div>
+      <span
+         class="viewport-size absolute right-1 top-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+      >
+         <div class="rounded-sm bg-yellow-400 px-1.5 py-1 font-mono text-xs font-medium text-gray-900">
+            {{ computedViewportSize }}
+         </div>
+      </span>
+   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { defineEmits } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 
 const emit = defineEmits<{
    (e: "sidebarWidth", width: number): void;
@@ -18,6 +26,9 @@ const emit = defineEmits<{
 const resizeHandle = ref<HTMLElement | null>(null);
 const sidebarWidth = ref(380); // Default sidebar width (380px)
 const isResizing = ref(false);
+const viewportWidth = ref<number>(0);
+let resizeObserver: ResizeObserver | null = null;
+let updateViewportWidthFn: (() => void) | null = null;
 
 // Resize functionality
 function startResize(event: MouseEvent) {
@@ -50,15 +61,62 @@ function startResize(event: MouseEvent) {
    document.body.style.cursor = "col-resize";
    document.body.style.userSelect = "none";
 }
+
+// Calculate viewport width based on #page-viewport element
+const computedViewportSize = computed(() => {
+   return viewportWidth.value > 0 ? `${viewportWidth.value}px` : "0px";
+});
+
+// Setup ResizeObserver to watch #page-viewport element
+onMounted(() => {
+   updateViewportWidthFn = () => {
+      const viewportElement = document.getElementById("page-preview-container");
+      if (viewportElement) {
+         viewportWidth.value = viewportElement.offsetWidth;
+      }
+   };
+
+   // Initial measurement
+   updateViewportWidthFn();
+
+   // Use ResizeObserver to watch for size changes
+   const viewportElement = document.getElementById("page-preview-container");
+   if (viewportElement) {
+      resizeObserver = new ResizeObserver(() => {
+         if (updateViewportWidthFn) {
+            updateViewportWidthFn();
+         }
+      });
+      resizeObserver.observe(viewportElement);
+   }
+
+   // Also listen for window resize events as a fallback
+   window.addEventListener("resize", updateViewportWidthFn);
+});
+
+onBeforeUnmount(() => {
+   if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+   }
+   if (updateViewportWidthFn) {
+      window.removeEventListener("resize", updateViewportWidthFn);
+      updateViewportWidthFn = null;
+   }
+});
 </script>
 
 <style scoped lang="scss">
 /* Resize handle styles */
-.resize-handle {
+.resize-handle-wrapper {
    position: sticky;
    top: 0;
    right: 0;
-   z-index: 14;
+   z-index: 30;
+   height: var(--editor-height);
+}
+
+.resize-handle {
    width: 3px;
    height: var(--editor-height);
    cursor: col-resize;