@nuasite/cms 0.8.2 → 0.9.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/editor/index.tsx

@@ -1,5 +1,14 @@
 import { render } from 'preact'
-import { useCallback, useEffect } from 'preact/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import type { CmsElementDeselectedMessage, CmsElementSelectedMessage } from '../types'
+import {
+	buildEditorState,
+	buildPageNavigatedMessage,
+	buildReadyMessage,
+	buildSelectedElement,
+	buildStateChangedMessage,
+	postToParent,
+} from './post-message'
 import { fetchManifest } from './api'
 import { AIChat } from './components/ai-chat'
 import { AITooltip } from './components/ai-tooltip'
@@ -32,7 +41,7 @@ import {
 	stopEditMode,
 	toggleShowOriginal,
 } from './editor'
-import { performRedo, performUndo } from './history'
+import { canRedo, canUndo, performRedo, performUndo } from './history'
 import {
 	useAIHandlers,
 	useBgImageHoverDetection,
@@ -103,6 +112,17 @@ const CmsUI = () => {
 		}).catch(() => {})
 	}, [])
 
+	// Re-fetch manifest on View Transitions navigation (astro:after-swap)
+	useEffect(() => {
+		const onNavigation = () => {
+			fetchManifest().then((manifest) => {
+				signals.setManifest(manifest)
+			}).catch(() => {})
+		}
+		document.addEventListener('astro:after-swap', onNavigation)
+		return () => document.removeEventListener('astro:after-swap', onNavigation)
+	}, [])
+
 	// Auto-restore edit mode if it was active before a page refresh (e.g. after save triggers HMR)
 	useEffect(() => {
 		if (loadEditingState() && !signals.isEditing.value) {
@@ -117,6 +137,87 @@ const CmsUI = () => {
 		}
 	}, [])
 
+	// Send selected element info to parent window via postMessage (when inside an iframe)
+	const prevOutlineRef = useRef<{ cmsId: string | null; isComponent: boolean }>({ cmsId: null, isComponent: false })
+	useEffect(() => {
+		const prev = prevOutlineRef.current
+		const changed = outlineState.cmsId !== prev.cmsId
+			|| outlineState.isComponent !== prev.isComponent
+			|| (!outlineState.visible && (prev.cmsId !== null || prev.isComponent))
+
+		if (!changed) return
+		prevOutlineRef.current = { cmsId: outlineState.cmsId, isComponent: outlineState.isComponent }
+
+		if (outlineState.visible && (outlineState.cmsId || outlineState.isComponent)) {
+			const manifestData = signals.manifest.value
+			const entry = outlineState.cmsId ? manifestData.entries[outlineState.cmsId] : undefined
+			const componentEl = outlineState.element
+			const componentId = componentEl?.getAttribute('data-cms-component-id') ?? undefined
+			const instance = componentId ? manifestData.components?.[componentId] : undefined
+			const rect = outlineState.rect
+
+			const msg: CmsElementSelectedMessage = {
+				type: 'cms-element-selected',
+				element: buildSelectedElement({
+					cmsId: outlineState.cmsId,
+					isComponent: outlineState.isComponent,
+					componentName: outlineState.componentName,
+					componentId,
+					tagName: outlineState.tagName,
+					rect: rect ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : null,
+					entry,
+					instance,
+				}),
+			}
+			postToParent(msg)
+		} else {
+			const msg: CmsElementDeselectedMessage = { type: 'cms-element-deselected' }
+			postToParent(msg)
+		}
+	}, [outlineState])
+
+	// Send cms-ready + cms-page-navigated when manifest loads
+	const prevManifestRef = useRef<boolean>(false)
+	useEffect(() => {
+		const m = signals.manifest.value
+		// Only fire when manifest has entries (i.e. actually loaded)
+		if (Object.keys(m.entries).length === 0) return
+
+		if (!prevManifestRef.current) {
+			prevManifestRef.current = true
+			postToParent(buildReadyMessage(m, window.location.pathname))
+		} else {
+			postToParent(buildPageNavigatedMessage(m, window.location.pathname))
+		}
+	})
+
+	// Send cms-state-changed when editor state changes
+	const prevStateRef = useRef<string>('')
+	useEffect(() => {
+		const state = buildEditorState({
+			isEditing: signals.isEditing.value,
+			dirtyCount: {
+				text: signals.dirtyChangesCount.value,
+				image: signals.dirtyImageChangesCount.value,
+				color: signals.dirtyColorChangesCount.value,
+				bgImage: signals.dirtyBgImageChangesCount.value,
+				attribute: signals.dirtyAttributeChangesCount.value,
+				seo: signals.dirtySeoChangesCount.value,
+				total: signals.totalDirtyCount.value,
+			},
+			deploymentStatus: signals.deploymentStatus.value,
+			lastDeployedAt: signals.lastDeployedAt.value,
+			canUndo: canUndo.value,
+			canRedo: canRedo.value,
+		})
+
+		const key = JSON.stringify(state)
+		if (key === prevStateRef.current) return
+		prevStateRef.current = key
+
+		postToParent(buildStateChangedMessage(state))
+	})
+
 	const {
 		handleAIChatToggle,
 		handleChatClose,
@@ -384,7 +485,6 @@ const CmsUI = () => {
 						onCompare: handleCompare,
 						onSave: handleSave,
 						onDiscard: handleDiscard,
-						onAIChat: handleAIChatToggle,
 						onMediaLibrary: handleMediaLibrary,
 						onDismissDeployment: handleDismissDeployment,
 						onNavigateChange: () => {
@@ -400,18 +500,6 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
-			<ErrorBoundary componentName="AI Tooltip">
-				<AITooltip
-					callbacks={{
-						onPromptSubmit: handleTooltipPromptSubmit,
-					}}
-					visible={!!tooltipState.elementId && isEditing && !isAIProcessing && !textSelectionState.hasSelection}
-					elementId={tooltipState.elementId}
-					rect={tooltipState.rect}
-					processing={isAIProcessing}
-				/>
-			</ErrorBoundary>
-
 			<ErrorBoundary componentName="Text Style Toolbar">
 				<TextStyleToolbar
 					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing && isTextStylingAllowed}
@@ -439,17 +527,6 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
-			<ErrorBoundary componentName="AI Chat">
-				<AIChat
-					callbacks={{
-						onSend: handleChatSend,
-						onClose: handleChatClose,
-						onCancel: handleChatCancel,
-						onApplyToElement: handleApplyToElement,
-					}}
-				/>
-			</ErrorBoundary>
-
 			<ErrorBoundary componentName="Block Editor">
 				<BlockEditor
 					visible={blockEditorState.isOpen && isEditing}

package/src/editor/post-message.ts

@@ -0,0 +1,136 @@
+import type {
+	CmsEditorState,
+	CmsManifest,
+	CmsPageNavigatedMessage,
+	CmsPostMessage,
+	CmsReadyMessage,
+	CmsSelectedElement,
+	CmsStateChangedMessage,
+	ManifestEntry,
+	PageSeoData,
+} from '../types'
+import type { ComponentInstance } from '../types'
+
+/** Send a postMessage to the parent window (no-op when not in an iframe) */
+export function postToParent(msg: CmsPostMessage): void {
+	if (window.parent !== window) {
+		window.parent.postMessage(msg, '*')
+	}
+}
+
+/** Build a CmsSelectedElement from manifest data and outline state */
+export function buildSelectedElement(opts: {
+	cmsId: string | null
+	isComponent: boolean
+	componentName?: string
+	componentId?: string
+	tagName?: string
+	rect: { x: number; y: number; width: number; height: number } | null
+	entry?: ManifestEntry
+	instance?: ComponentInstance
+}): CmsSelectedElement {
+	const { cmsId, isComponent, componentName, componentId, tagName, rect, entry, instance } = opts
+	return {
+		cmsId,
+		isComponent,
+		componentName: componentName ?? instance?.componentName,
+		componentId,
+		tagName: tagName ?? entry?.tag,
+		rect,
+		...(entry && {
+			text: entry.text,
+			html: entry.html,
+			sourcePath: entry.sourcePath,
+			sourceLine: entry.sourceLine,
+			sourceSnippet: entry.sourceSnippet,
+			sourceHash: entry.sourceHash,
+			stableId: entry.stableId,
+			contentPath: entry.contentPath,
+			parentComponentId: entry.parentComponentId,
+			childCmsIds: entry.childCmsIds,
+			imageMetadata: entry.imageMetadata,
+			backgroundImage: entry.backgroundImage,
+			colorClasses: entry.colorClasses,
+			attributes: entry.attributes,
+			constraints: entry.constraints,
+			allowStyling: entry.allowStyling,
+			collectionName: entry.collectionName,
+			collectionSlug: entry.collectionSlug,
+		}),
+		...(instance && {
+			component: {
+				name: instance.componentName,
+				file: instance.file,
+				sourcePath: instance.sourcePath,
+				sourceLine: instance.sourceLine,
+				props: instance.props,
+				slots: instance.slots,
+			},
+		}),
+	}
+}
+
+/** Build a CmsReadyMessage from the loaded manifest */
+export function buildReadyMessage(manifest: CmsManifest, pathname: string): CmsReadyMessage {
+	const seo = (manifest as any).seo as PageSeoData | undefined
+	const pageTitle = seo?.title?.content ?? manifest.pages?.find(p => p.pathname === pathname)?.title
+
+	return {
+		type: 'cms-ready',
+		data: {
+			pathname,
+			pageTitle,
+			seo,
+			pages: manifest.pages,
+			collectionDefinitions: manifest.collectionDefinitions,
+			componentDefinitions: manifest.componentDefinitions,
+			availableColors: manifest.availableColors,
+			availableTextStyles: manifest.availableTextStyles,
+			metadata: manifest.metadata,
+		},
+	}
+}
+
+/** Build a CmsPageNavigatedMessage */
+export function buildPageNavigatedMessage(manifest: CmsManifest, pathname: string): CmsPageNavigatedMessage {
+	const seo = (manifest as any).seo as PageSeoData | undefined
+	const pageTitle = seo?.title?.content ?? manifest.pages?.find(p => p.pathname === pathname)?.title
+
+	return {
+		type: 'cms-page-navigated',
+		page: {
+			pathname,
+			title: pageTitle,
+		},
+	}
+}
+
+/** Build a CmsEditorState snapshot from current signal values */
+export function buildEditorState(opts: {
+	isEditing: boolean
+	dirtyCount: CmsEditorState['dirtyCount']
+	deploymentStatus: CmsEditorState['deployment']['status']
+	lastDeployedAt: string | null
+	canUndo: boolean
+	canRedo: boolean
+}): CmsEditorState {
+	return {
+		isEditing: opts.isEditing,
+		hasChanges: opts.dirtyCount.total > 0,
+		dirtyCount: opts.dirtyCount,
+		deployment: {
+			status: opts.deploymentStatus,
+			lastDeployedAt: opts.lastDeployedAt,
+		},
+		canUndo: opts.canUndo,
+		canRedo: opts.canRedo,
+	}
+}
+
+/** Build a CmsStateChangedMessage */
+export function buildStateChangedMessage(state: CmsEditorState): CmsStateChangedMessage {
+	return {
+		type: 'cms-state-changed',
+		state,
+	}
+}

package/src/handlers/source-writer.ts

@@ -501,17 +501,7 @@ export function applyTextChange(
 ): { success: true; content: string } | { success: false; error: string } {
 	const { sourceSnippet, originalValue, newValue, htmlValue } = change
 
-	let newText = htmlValue ?? newValue
-	newText = resolveCmsPlaceholders(newText, manifest)
-
-	// Resolve CMS placeholders in originalValue too — when a parent element has
-	// child CMS elements, originalValue contains {{cms:cms-N}} placeholders but
-	// the sourceSnippet contains the actual HTML for those children.
-	const resolvedOriginal = originalValue
-		? resolveCmsPlaceholders(originalValue, manifest)
-		: originalValue
-
-	if (!sourceSnippet || !resolvedOriginal) {
+	if (!sourceSnippet || !originalValue) {
 		if (change.attributeChanges && change.attributeChanges.length > 0) {
 			return { success: true, content }
 		}
@@ -522,14 +512,30 @@ export function applyTextChange(
 		return { success: false, error: 'Source snippet not found in file' }
 	}
 
-	// Replace resolvedOriginal with newText WITHIN the sourceSnippet
-	const updatedSnippet = sourceSnippet.replace(resolvedOriginal, newText)
+	const newText = htmlValue ?? newValue
+
+	// When originalValue contains CMS placeholders (child elements like {{cms:cms-5}}),
+	// replace only the text segments between placeholders directly in the sourceSnippet.
+	// This avoids resolving placeholders via child sourceSnippets, which can be incorrect
+	// when multiple inline children share the same source line (extractCompleteTagSnippet
+	// returns the entire line, not just the individual child tag).
+	const placeholderPattern = /\{\{cms:[^}]+\}\}/g
+	if (placeholderPattern.test(originalValue)) {
+		return applyTextChangeWithPlaceholders(content, sourceSnippet, originalValue, newText)
+	}
+
+	// No placeholders — resolve and match directly
+	const resolvedNewText = resolveCmsPlaceholders(newText, manifest)
+	const resolvedOriginal = resolveCmsPlaceholders(originalValue, manifest)
+
+	// Replace resolvedOriginal with resolvedNewText WITHIN the sourceSnippet
+	const updatedSnippet = sourceSnippet.replace(resolvedOriginal, resolvedNewText)
 
 	if (updatedSnippet === sourceSnippet) {
 		// resolvedOriginal wasn't found in snippet - try HTML entity handling
 		const matchedText = findTextInSnippet(sourceSnippet, resolvedOriginal)
 		if (matchedText) {
-			const updatedWithEntity = sourceSnippet.replace(matchedText, newText)
+			const updatedWithEntity = sourceSnippet.replace(matchedText, resolvedNewText)
 			return { success: true, content: content.replace(sourceSnippet, updatedWithEntity) }
 		}
 		// Try inner content replacement for text spanning inline HTML elements
@@ -539,7 +545,7 @@ export function applyTextChange(
 			const [, openTag, , innerContent, closeTag] = innerMatch
 			const textOnly = innerContent!.replace(/<[^>]+>/g, '')
 			if (textOnly === resolvedOriginal) {
-				return { success: true, content: content.replace(sourceSnippet, openTag + newText + closeTag) }
+				return { success: true, content: content.replace(sourceSnippet, openTag + resolvedNewText + closeTag) }
 			}
 		}
 
@@ -552,6 +558,60 @@ export function applyTextChange(
 	return { success: true, content: content.replace(sourceSnippet, updatedSnippet) }
 }
 
+/**
+ * Apply text change when originalValue contains CMS placeholders.
+ * Splits by placeholder boundaries and replaces only the changed text segments.
+ */
+function applyTextChangeWithPlaceholders(
+	content: string,
+	sourceSnippet: string,
+	originalValue: string,
+	newText: string,
+): { success: true; content: string } | { success: false; error: string } {
+	const placeholderPattern = /\{\{cms:[^}]+\}\}/g
+
+	const originalParts = originalValue.split(placeholderPattern)
+	const newParts = newText.split(placeholderPattern)
+
+	if (originalParts.length !== newParts.length) {
+		return { success: false, error: 'Placeholder structure mismatch between original and new values' }
+	}
+
+	let updatedSnippet = sourceSnippet
+	let anyChange = false
+
+	for (let i = 0; i < originalParts.length; i++) {
+		const oldPart = originalParts[i]!
+		let newPart = newParts[i]!
+
+		if (oldPart === newPart || oldPart.length === 0) {
+			continue
+		}
+
+		// Try direct match first, then entity-aware match
+		const matchedText = findTextInSnippet(updatedSnippet, oldPart)
+		if (matchedText) {
+			// When entity-aware matching was needed, encode the same entities in the replacement
+			if (matchedText !== oldPart) {
+				newPart = encodeEntitiesLike(newPart, matchedText)
+			}
+			updatedSnippet = updatedSnippet.replace(matchedText, newPart)
+			anyChange = true
+		} else {
+			return {
+				success: false,
+				error: `Text segment "${oldPart.substring(0, 50)}..." not found in source snippet`,
+			}
+		}
+	}
+
+	if (!anyChange) {
+		return { success: false, error: 'No text changes detected between original and new values' }
+	}
+
+	return { success: true, content: content.replace(sourceSnippet, updatedSnippet) }
+}
+
 /**
  * Find the original text within a source snippet, accounting for HTML entities.
  */
@@ -592,6 +652,32 @@ function findTextInSnippet(snippet: string, decodedText: string): string | null
 	return brMatch && brMatch[0] !== decodedText ? brMatch[0] : null
 }
 
+/**
+ * Encode HTML entities in text to match the encoding used in a reference string.
+ * When entity-aware matching found entities in the source, the replacement text
+ * needs the same encoding to preserve valid HTML.
+ */
+function encodeEntitiesLike(text: string, reference: string): string {
+	let result = text
+	// & must be encoded first to avoid double-encoding other entities
+	if (reference.includes('&amp;')) {
+		result = result.replace(/&/g, '&amp;')
+	}
+	if (reference.includes('&lt;')) {
+		result = result.replace(/</g, '&lt;')
+	}
+	if (reference.includes('&gt;')) {
+		result = result.replace(/>/g, '&gt;')
+	}
+	if (reference.includes('&quot;')) {
+		result = result.replace(/"/g, '&quot;')
+	}
+	if (reference.includes('&#39;') || reference.includes('&apos;')) {
+		result = result.replace(/'/g, '&#39;')
+	}
+	return result
+}
+
 /**
  * Resolve CMS placeholders like {{cms:cms-96}} in text.
  */

package/src/index.ts

@@ -287,8 +287,17 @@ export type {
 	AvailableColors,
 	AvailableTextStyles,
 	CanonicalUrl,
+	CmsEditorState,
+	CmsElementDeselectedMessage,
+	CmsElementSelectedMessage,
 	CmsManifest,
 	CmsMarkerOptions,
+	CmsPageNavigatedMessage,
+	CmsPostMessage,
+	CmsReadyData,
+	CmsReadyMessage,
+	CmsSelectedElement,
+	CmsStateChangedMessage,
 	CollectionDefinition,
 	CollectionEntry,
 	ComponentDefinition,

package/src/types.ts

@@ -423,3 +423,148 @@ export interface PageSeoData {
 	/** JSON-LD structured data blocks */
 	jsonLd?: JsonLdEntry[]
 }
+
+// ============================================================================
+// PostMessage Types (iframe communication)
+// ============================================================================
+
+/** Element data sent to parent when a CMS element is hovered/selected */
+export interface CmsSelectedElement {
+	/** CMS element ID (null for component-only selections) */
+	cmsId: string | null
+	/** Whether the selected element is a component root */
+	isComponent: boolean
+	/** Component name if applicable */
+	componentName?: string
+	/** Component instance ID */
+	componentId?: string
+	/** HTML tag name */
+	tagName?: string
+	/** Bounding rect relative to the iframe viewport */
+	rect: { x: number; y: number; width: number; height: number } | null
+
+	// --- Manifest entry data (text/image elements) ---
+
+	/** Plain text content */
+	text?: string
+	/** HTML content with inline styling */
+	html?: string
+	/** Source file path */
+	sourcePath?: string
+	/** Line number in source file */
+	sourceLine?: number
+	/** Parent component ID */
+	parentComponentId?: string
+	/** Nested CMS element IDs */
+	childCmsIds?: string[]
+	/** Image metadata for img elements */
+	imageMetadata?: ImageMetadata
+	/** Background image metadata */
+	backgroundImage?: BackgroundImageMetadata
+	/** Color classes (bg, text, border, etc.) */
+	colorClasses?: Record<string, Attribute>
+	/** HTML attributes with source info */
+	attributes?: Record<string, Attribute>
+	/** Content validation constraints */
+	constraints?: ContentConstraints
+	/** Whether inline text styling is allowed */
+	allowStyling?: boolean
+	/** Collection name if from a content collection */
+	collectionName?: string
+	/** Collection entry slug */
+	collectionSlug?: string
+	/** Full element snippet from source */
+	sourceSnippet?: string
+	/** SHA256 hash of sourceSnippet for conflict detection */
+	sourceHash?: string
+	/** Stable ID derived from content + context hash */
+	stableId?: string
+	/** Path to the markdown content file */
+	contentPath?: string
+
+	// --- Component instance data ---
+
+	/** Full component instance info (when isComponent is true) */
+	component?: {
+		name: string
+		file: string
+		sourcePath: string
+		sourceLine: number
+		props: Record<string, unknown>
+		slots?: Record<string, string>
+	}
+}
+
+/** Message sent when a CMS element is hovered/selected */
+export interface CmsElementSelectedMessage {
+	type: 'cms-element-selected'
+	element: CmsSelectedElement
+}
+
+/** Message sent when no element is hovered */
+export interface CmsElementDeselectedMessage {
+	type: 'cms-element-deselected'
+}
+
+/** Data sent with the cms-ready message when the manifest first loads */
+export interface CmsReadyData {
+	pathname: string
+	pageTitle?: string
+	seo?: PageSeoData
+	pages?: PageEntry[]
+	collectionDefinitions?: Record<string, CollectionDefinition>
+	componentDefinitions?: Record<string, ComponentDefinition>
+	availableColors?: AvailableColors
+	availableTextStyles?: AvailableTextStyles
+	metadata?: ManifestMetadata
+}
+
+/** Message sent when the CMS manifest has loaded and the editor is ready */
+export interface CmsReadyMessage {
+	type: 'cms-ready'
+	data: CmsReadyData
+}
+
+/** Snapshot of editor state sent on every meaningful change */
+export interface CmsEditorState {
+	isEditing: boolean
+	hasChanges: boolean
+	dirtyCount: {
+		text: number
+		image: number
+		color: number
+		bgImage: number
+		attribute: number
+		seo: number
+		total: number
+	}
+	deployment: {
+		status: 'pending' | 'queued' | 'running' | 'completed' | 'failed' | 'cancelled' | null
+		lastDeployedAt: string | null
+	}
+	canUndo: boolean
+	canRedo: boolean
+}
+
+/** Message sent when editor state changes (dirty counts, deployment, editing mode, undo/redo) */
+export interface CmsStateChangedMessage {
+	type: 'cms-state-changed'
+	state: CmsEditorState
+}
+
+/** Message sent when the user navigates to a different page (manifest reload) */
+export interface CmsPageNavigatedMessage {
+	type: 'cms-page-navigated'
+	page: {
+		pathname: string
+		title?: string
+	}
+}
+
+/** All possible CMS postMessage types sent from the editor iframe to the parent */
+export type CmsPostMessage =
+	| CmsElementSelectedMessage
+	| CmsElementDeselectedMessage
+	| CmsReadyMessage
+	| CmsStateChangedMessage
+	| CmsPageNavigatedMessage