@bagelink/blox 1.5.3

package/views/ExternalPreview.vue

@@ -0,0 +1,420 @@
+<script setup lang="ts">
+/**
+ * External Preview View
+ *
+ * This component runs on the target site and communicates with the editor
+ * via postMessage. It receives component updates and renders them using
+ * the site's registered components.
+ */
+
+import type { ComponentData, PageData } from '../core/types'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { createCommunicationBridge, type CommunicationBridge } from '../core/communication'
+import { getAllComponents } from '../core/registry'
+import { initializePage } from '../core/renderer'
+import { normalizeComponentData } from '../utils/normalizer'
+import { generateBlockStyles, getResponsiveClasses } from '../utils/styles'
+
+interface Props {
+	origin?: string // Allowed editor origin (default: *)
+	initialPageData?: PageData // Optional initial page data
+	componentConfigs?: any[] // Component configurations with schemas
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	origin: '*',
+	componentConfigs: () => [],
+})
+
+// State
+const components = ref<ComponentData[]>([])
+const highlightID = ref('')
+const selectedID = ref('')
+const isMobile = ref(false)
+const previewMode = ref(false)
+const linksDisabled = ref(false)
+const loading = ref(true)
+const updateCounter = ref(0)
+
+// Communication bridge
+let bridge: CommunicationBridge | null = null
+
+// Get registered components
+const registeredComponents = getAllComponents()
+
+// Reactive computed for block styles
+const getBlockStyles = computed(() => {
+	const _ = updateCounter.value
+	return (data: Record<string, any>, mobile: boolean = false) => generateBlockStyles(data, mobile)
+})
+
+/**
+ * Handle focus on a block
+ */
+function setFocus(id: string, emit = false) {
+	selectedID.value = id
+	highlightID.value = id
+
+	const el = document.querySelector(`[data-block-id="${id}"]`)
+	el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+	if (emit && bridge) {
+		bridge.send('focus', id)
+	}
+}
+
+/**
+ * Handle highlight on a block
+ */
+function setHighlight(id: string, emit = false) {
+	highlightID.value = id
+
+	if (emit && bridge) {
+		bridge.send('highlight', id)
+	}
+}
+
+/**
+ * Handle keyboard navigation
+ */
+function keyboardHandler(event: KeyboardEvent) {
+	if (previewMode.value) return
+
+	if (event.key === 'ArrowDown') {
+		const next = components.value.findIndex(comp => comp.id === highlightID.value) + 1
+		if (next < components.value.length) {
+			setFocus(components.value[next].id, true)
+		}
+	} else if (event.key === 'ArrowUp') {
+		const prev = components.value.findIndex(comp => comp.id === highlightID.value) - 1
+		if (prev >= 0) {
+			setFocus(components.value[prev].id, true)
+		}
+	} else if (event.key === 'Enter') {
+		if (bridge) bridge.send('focus', highlightID.value)
+	} else if (event.key === 'Escape') {
+		setHighlight('')
+		selectedID.value = ''
+	} else if (event.key === 'Delete') {
+		if (bridge) bridge.send('delete', highlightID.value)
+	}
+}
+
+/**
+ * Handle click on page (prevent navigation in edit mode)
+ */
+function clickHandler(event: MouseEvent) {
+	if (!linksDisabled.value) return
+
+	let element: HTMLElement | null = event.target as HTMLElement
+
+	while (element) {
+		if (element.tagName === 'A' && element.getAttribute('href')) {
+			const isButton
+				= element.classList.contains('btn')
+					|| element.classList.contains('button')
+					|| element.getAttribute('role') === 'button'
+
+			if (!isButton) {
+				event.preventDefault()
+				event.stopPropagation()
+				return false
+			} else {
+				event.preventDefault()
+				return false
+			}
+		}
+		element = element.parentElement
+	}
+}
+
+/**
+ * Setup communication bridge
+ */
+function setupBridge() {
+	bridge = createCommunicationBridge({
+		origin: props.origin,
+		targetWindow: window.parent,
+	})
+
+	// Handle update messages
+	bridge.on('update', ({ message, data, isMobile: mobile }) => {
+		// Data can be in message.data or at top level (for backward compatibility)
+		const componentData = message?.data || data
+		const mobileMode = message?.isMobile !== undefined ? message.isMobile : mobile
+
+		if (componentData) {
+			components.value = [...componentData]
+			updateCounter.value++
+			console.log('📦 Updated components:', components.value.length)
+		}
+
+		if (mobileMode !== undefined) {
+			isMobile.value = mobileMode
+			console.log('📱 Mobile mode:', mobileMode)
+		}
+
+		loading.value = false
+	})
+
+	// Handle highlight messages
+	bridge.on('highlight', ({ message }) => {
+		setHighlight(message)
+	})
+
+	// Handle focus messages
+	bridge.on('focus', ({ message }) => {
+		setFocus(message)
+	})
+
+	// Handle preview mode toggle
+	bridge.on('preview', ({ message }) => {
+		previewMode.value = message
+
+		if (previewMode.value) {
+			document.body.classList.add('blox-preview-mode')
+			document.body.classList.remove('blox-edit-mode')
+		} else {
+			document.body.classList.remove('blox-preview-mode')
+			document.body.classList.add('blox-edit-mode')
+		}
+	})
+
+	// Handle link disable toggle
+	bridge.on('disableLinks', ({ message }) => {
+		linksDisabled.value = message
+	})
+
+	// Send ready message with component configurations
+	const registeredTypes = Object.keys(registeredComponents)
+
+	// Prepare component configs to send to editor
+	const configsToSend = props.componentConfigs.map(config => ({
+		id: config.id,
+		label: config.label,
+		icon: config.icon,
+		img: config.img,
+		order: config.order || 999,
+		content: config.content || [],
+		settings: config.settings || [],
+	}))
+
+	bridge.send('ready', {
+		registeredTypes,
+		componentConfigs: configsToSend,
+	})
+
+	console.log('📤 Sent component configurations:', configsToSend)
+}
+
+onMounted(async () => {
+	console.log('🚀 External Preview mounted')
+	console.log('📦 Registered components:', Object.keys(registeredComponents))
+
+	// Setup communication
+	setupBridge()
+
+	// Add event listeners
+	window.addEventListener('keydown', keyboardHandler)
+	document.addEventListener('click', clickHandler, true)
+
+	// Set edit mode initially
+	document.body.classList.add('blox-edit-mode')
+
+	// Initialize with initial page data if provided
+	if (props.initialPageData) {
+		await initializePage(props.initialPageData)
+		components.value = props.initialPageData.components
+		loading.value = false
+	}
+})
+
+onUnmounted(() => {
+	// Cleanup
+	if (bridge) {
+		bridge.destroy()
+	}
+
+	window.removeEventListener('keydown', keyboardHandler)
+	document.removeEventListener('click', clickHandler, true)
+
+	document.body.classList.remove('blox-preview-mode', 'blox-edit-mode')
+})
+</script>
+
+<template>
+	<div class="blox-page-wrapper">
+		<div v-if="loading" class="blox-loading">
+			<p>Loading preview...</p>
+		</div>
+
+		<div v-else-if="!components.length && !previewMode" class="blox-empty-state">
+			<p>No blocks yet. Add a block from the editor to get started!</p>
+		</div>
+
+		<div v-else-if="!components.length && previewMode" class="blox-empty-preview">
+			<!-- Empty page in preview mode -->
+		</div>
+
+		<template v-for="comp in components" :key="comp.id">
+			<div
+				class="blox-block-wrapper"
+				:class="{
+					'blox-highlight': !previewMode && highlightID === comp.id,
+					'blox-selected': !previewMode && selectedID === comp.id,
+				}"
+				:data-block-id="comp.id"
+				@click="!previewMode ? setFocus(comp.id, true) : null"
+				@mouseenter="!previewMode ? setHighlight(comp.id, true) : null"
+				@focus="!previewMode ? setHighlight(comp.id, true) : null"
+			>
+				<!-- Block label (edit mode only) -->
+				<p v-if="!previewMode" class="blox-block-label">
+					{{ comp.type }}
+					<span v-if="comp.data?.title"> | {{ comp.data.title }}</span>
+				</p>
+
+				<!-- Block content -->
+				<div
+					:id="comp.data.customId"
+					:key="`${comp.id}-${updateCounter}`"
+					:style="getBlockStyles(comp.data, isMobile)"
+					:class="getResponsiveClasses(comp.data)"
+				>
+					<component
+						:is="registeredComponents[comp.type]"
+						v-if="registeredComponents[comp.type]"
+						v-bind="{ ...normalizeComponentData(comp.data), isMobile }"
+					/>
+					<div v-else class="blox-missing-component">
+						⚠️ Component not registered: {{ comp.type }}
+					</div>
+				</div>
+
+				<!-- Overlay for click handling (edit mode only) -->
+				<div v-if="!previewMode" class="blox-block-overlay" @click.self="setFocus(comp.id, true)" />
+			</div>
+		</template>
+	</div>
+</template>
+
+<style>
+/* Global styles for the Blox page */
+.blox-page-wrapper {
+	min-height: 100vh;
+	background-color: #fff;
+}
+
+.blox-page-wrapper * {
+	box-sizing: border-box;
+}
+</style>
+
+<style scoped>
+/* Loading state */
+.blox-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	font-size: 1.2rem;
+	color: #666;
+}
+
+/* Empty states */
+.blox-empty-state {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	text-align: center;
+	font-size: 1.2rem;
+	color: #666;
+	padding: 2rem;
+}
+
+.blox-empty-preview {
+	min-height: 100vh;
+	background: #fff;
+}
+
+/* Block wrapper */
+.blox-block-wrapper {
+	position: relative;
+}
+
+/* Block overlay for click detection */
+.blox-block-overlay {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	z-index: 9;
+}
+
+/* Interactive elements should be clickable */
+.blox-block-wrapper button,
+.blox-block-wrapper a,
+.blox-block-wrapper input,
+.blox-block-wrapper textarea,
+.blox-block-wrapper select {
+	pointer-events: auto;
+	position: relative;
+	z-index: 10;
+}
+
+/* Preview mode - all interactions work */
+.blox-preview-mode .blox-block-wrapper * {
+	pointer-events: auto !important;
+}
+
+/* Block label */
+.blox-block-label {
+	position: absolute;
+	top: 0;
+	left: 0;
+	font-size: 0.625rem;
+	padding: 0.25rem 0.5rem;
+	color: white;
+	background: #9ca3af;
+	border-bottom-right-radius: 5px;
+	z-index: 10001;
+	opacity: 0;
+	transition: opacity 0.2s;
+}
+
+/* Highlight state */
+.blox-highlight {
+	background: rgba(156, 163, 175, 0.1);
+	outline: 1px solid #9ca3af;
+	outline-offset: -1px;
+}
+
+.blox-highlight .blox-block-label {
+	opacity: 1;
+	background: #9ca3af;
+}
+
+/* Selected state */
+.blox-selected {
+	background: rgba(88, 191, 235, 0.08) !important;
+	outline: 2px solid #3b82f6 !important;
+	outline-offset: -2px;
+	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.blox-selected .blox-block-label {
+	opacity: 1;
+	background: #3b82f6;
+}
+
+/* Missing component warning */
+.blox-missing-component {
+	padding: 2rem;
+	background: #fef3c7;
+	border: 2px dashed #f59e0b;
+	border-radius: 8px;
+	text-align: center;
+	font-size: 1rem;
+	color: #92400e;
+}
+</style>

package/views/RenderPage.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * Render Page View
+ *
+ * This component renders a published page without editor functionality.
+ * Use this for production rendering on external sites.
+ */
+
+import type { PageData } from '../core/types'
+import { ref, onMounted, computed } from 'vue'
+import { getAllComponents } from '../core/registry'
+import { initializePage } from '../core/renderer'
+import { normalizeComponentData } from '../utils/normalizer'
+import { generateBlockStyles, getResponsiveClasses } from '../utils/styles'
+
+interface Props {
+	pageData: PageData
+	mobileBreakpoint?: number // Window width to consider mobile (default: 910px)
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	mobileBreakpoint: 910,
+})
+
+// State
+const isMobile = ref(false)
+const loading = ref(true)
+const updateCounter = ref(0)
+
+// Get registered components
+const registeredComponents = getAllComponents()
+
+// Reactive computed for block styles
+const getBlockStyles = computed(() => {
+	// eslint-disable-next-line no-unused-vars
+	const _ = updateCounter.value
+	return (data: Record<string, any>, mobile: boolean = false) => generateBlockStyles(data, mobile)
+})
+
+/**
+ * Update mobile status based on window width
+ */
+function updateMobileStatus() {
+	const wasMobile = isMobile.value
+	isMobile.value = window.innerWidth <= props.mobileBreakpoint
+
+	if (wasMobile !== isMobile.value) {
+		updateCounter.value++
+	}
+}
+
+onMounted(async () => {
+	console.log('🚀 Render Page mounted')
+	console.log('📦 Registered components:', Object.keys(registeredComponents))
+
+	// Initialize page with settings and fonts
+	await initializePage(props.pageData)
+
+	// Set mobile status
+	updateMobileStatus()
+
+	// Listen for window resize
+	window.addEventListener('resize', updateMobileStatus)
+
+	loading.value = false
+})
+</script>
+
+<template>
+	<div class="blox-page-wrapper">
+		<div v-if="loading" class="blox-loading">
+			<p>Loading...</p>
+		</div>
+
+		<template v-else>
+			<template v-for="comp in pageData.components" :key="`${comp.id}-${updateCounter}`">
+				<div
+					:id="comp.data.customId" :style="getBlockStyles(comp.data, isMobile)"
+					:class="getResponsiveClasses(comp.data)"
+				>
+					<component
+						:is="registeredComponents[comp.type]" v-if="registeredComponents[comp.type]"
+						v-bind="{ ...normalizeComponentData(comp.data), isMobile }"
+					/>
+					<div v-else class="blox-missing-component">
+						Component not found: {{ comp.type }}
+					</div>
+				</div>
+			</template>
+		</template>
+	</div>
+</template>
+
+<style>
+/* Global styles for the Blox page */
+.blox-page-wrapper {
+	min-height: 100vh;
+	background-color: #fff;
+}
+
+.blox-page-wrapper * {
+	box-sizing: border-box;
+}
+</style>
+
+<style scoped>
+/* Loading state */
+.blox-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	font-size: 1.2rem;
+	color: #666;
+}
+
+/* Missing component warning */
+.blox-missing-component {
+	padding: 2rem;
+	background: #fee;
+	border: 2px solid #faa;
+	border-radius: 8px;
+	text-align: center;
+	font-size: 1rem;
+	color: #c00;
+}
+</style>