@nuasite/cms 0.38.0 → 0.39.1

package/package.json

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

package/src/build-processor.ts

@@ -5,7 +5,7 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { getProjectRoot } from './config'
 import { detectArrayPattern, extractArrayElementProps } from './handlers/array-ops'
-import { extractPropsFromSource, findComponentInvocationLine, findFrontmatterEnd } from './handlers/component-ops'
+import { extractPropsFromSource, findComponentInvocationLine, findFrontmatterEnd, getPageFileCandidates } from './handlers/component-ops'
 import { extractComponentName, processHtml } from './html-processor'
 import type { ManifestWriter } from './manifest-writer'
 import { generateComponentPreviews } from './preview-generator'
@@ -374,13 +374,27 @@ async function processFile(
 		}
 	}
 
+	const pageFiles = getPageFileCandidates(pagePath)
+
 	// Process entries in parallel for better performance
 	const entryLookups = Object.values(result.entries).map(async (entry) => {
 		// Handle image entries specially - always search by image src
 		// The sourcePath from HTML attributes may point to a shared Image component
 		// rather than the file that actually uses the component with the src value
 		if (entry.imageMetadata?.src) {
-			const imageSource = await findImageSourceLocation(entry.imageMetadata.src, entry.imageMetadata.srcSet)
+			const preferredLocation = entry.sourcePath
+				? {
+					file: entry.sourcePath,
+					line: entry.sourceLine,
+					srcOccurrence: entry.imageMetadata.srcOccurrence,
+				}
+				: undefined
+			const imageSource = await findImageSourceLocation(
+				entry.imageMetadata.src,
+				entry.imageMetadata.srcSet,
+				pageFiles,
+				preferredLocation,
+			)
 			if (imageSource) {
 				entry.sourcePath = imageSource.file
 				entry.sourceLine = imageSource.line
@@ -412,7 +426,7 @@ async function processFile(
 		}
 
 		// Fall back to searching Astro files
-		const sourceLocation = await findSourceLocation(entry.text, entry.tag)
+		const sourceLocation = await findSourceLocation(entry.text, entry.tag, pageFiles)
 		if (sourceLocation) {
 			entry.sourcePath = sourceLocation.file
 			entry.sourceLine = sourceLocation.line

package/src/dev-middleware.ts

@@ -63,6 +63,8 @@ export interface DevMiddlewareOptions {
 	 * corrupted by injected markers).
 	 */
 	isPublicStaticFile?: (urlPath: string) => boolean
+	/** Maximum upload size in bytes for /_nua/cms/media/upload. */
+	maxUploadSize: number
 }
 
 export function createDevMiddleware(
@@ -71,10 +73,17 @@ export function createDevMiddleware(
 	manifestWriter: ManifestWriter,
 	componentDefinitions: Record<string, ComponentDefinition>,
 	idCounter: { value: number },
-	options: DevMiddlewareOptions = {},
+	options: DevMiddlewareOptions,
 ) {
 	const isPublicStaticFile = options.isPublicStaticFile ?? (() => false)
 
+	// Tracks in-flight Phase 2 enhancement promises per page so that requests for the
+	// page manifest can await source-path resolution before responding. Without this,
+	// hosts that serve HTML faster than the source-finder pipeline completes (e.g.
+	// pletivo, sandbox runtimes) leak a partial manifest where entries have tag/text
+	// but no sourcePath, which the editor then treats as locked elements.
+	const pendingPhase2: Map<string, Promise<void>> = new Map()
+
 	// Serve uploaded media files directly from disk.
 	// Vite's public dir middleware caches file listings, so newly uploaded files
 	// may not be available immediately. This middleware bypasses that cache.
@@ -122,7 +131,15 @@ export function createDevMiddleware(
 
 			const route = url.replace('/_nua/cms/', '').split('?')[0]!
 
-			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter)
+			handleCmsApiRoute({
+				req,
+				res,
+				route,
+				manifestWriter,
+				contentDir: config.contentDir,
+				mediaAdapter: options.mediaAdapter,
+				maxUploadSize: options.maxUploadSize,
+			})
 				.catch((error) => {
 					console.error('[astro-cms] API error:', error)
 					sendError(res, 'Internal server error', 500)
@@ -209,7 +226,7 @@ export function createDevMiddleware(
 	})
 
 	// Serve per-page manifest endpoints (e.g., /about.json for /about page)
-	server.middlewares.use((req, res, next) => {
+	server.middlewares.use(async (req, res, next) => {
 		const url = (req.url || '').split('?')[0]!
 
 		// Match /*.json pattern (but not files that actually exist)
@@ -224,6 +241,18 @@ export function createDevMiddleware(
 				pagePath = '/'
 			}
 
+			// If Phase 2 source resolution is still in flight for this page, wait for it
+			// so the response includes full sourcePath data — avoids the race where the
+			// editor fetches a partial manifest and locks elements it can't yet edit.
+			const inFlight = pendingPhase2.get(pagePath)
+			if (inFlight) {
+				try {
+					await inFlight
+				} catch {
+					// fall through — serve whatever partial manifest we have
+				}
+			}
+
 			const pageData = manifestWriter.getPageManifest(pagePath)
 
 			// Only serve if we have manifest data for this page
@@ -328,9 +357,25 @@ export function createDevMiddleware(
 					}
 					res.end(transformed, ...args)
 
-					// Phase 2 (background): resolve source locations and enhance manifest
-					// This runs after the page is already visible to the user
-					enhanceManifestInBackground(pagePath, entries, components, collection, seo, colDefs, config, manifestWriter)
+					// Phase 2 runs after the HTML is sent so the page renders without waiting on
+					// source resolution. The manifest endpoint awaits this promise (via
+					// pendingPhase2) so it never returns entries with missing sourcePath.
+					const phase2 = enhanceManifestInBackground(
+						pagePath,
+						entries,
+						components,
+						collection,
+						seo,
+						colDefs,
+						config,
+						manifestWriter,
+					)
+					pendingPhase2.set(pagePath, phase2)
+					phase2.finally(() => {
+						if (pendingPhase2.get(pagePath) === phase2) {
+							pendingPhase2.delete(pagePath)
+						}
+					})
 				})
 				.catch((error) => {
 					console.error('[cms] Error transforming HTML:', error)
@@ -546,20 +591,33 @@ export async function enhanceManifestInBackground(
 			}
 		}
 
-		const enhanced = await enhanceManifestWithSourceSnippets(entries, collectionDefinitions)
+		const pageFiles = getPageFileCandidates(pagePath)
+		const enhanced = await enhanceManifestWithSourceSnippets(entries, collectionDefinitions, pageFiles)
 
 		// Fallback for entries without sourcePath — search index can still find them
 		for (const entry of Object.values(enhanced)) {
 			if (entry.sourceSnippet || entry.sourcePath) continue
 			if (entry.imageMetadata?.src) {
-				const loc = await findImageSourceLocation(entry.imageMetadata.src, entry.imageMetadata.srcSet)
+				const preferredLocation = entry.sourcePath
+					? {
+						file: entry.sourcePath,
+						line: entry.sourceLine,
+						srcOccurrence: entry.imageMetadata.srcOccurrence,
+					}
+					: undefined
+				const loc = await findImageSourceLocation(
+					entry.imageMetadata.src,
+					entry.imageMetadata.srcSet,
+					pageFiles,
+					preferredLocation,
+				)
 				if (loc) {
 					entry.sourcePath = loc.file
 					entry.sourceLine = loc.line
 					entry.sourceSnippet = loc.snippet
 				}
 			} else if (entry.text && entry.tag) {
-				const loc = await findSourceLocation(entry.text, entry.tag)
+				const loc = await findSourceLocation(entry.text, entry.tag, pageFiles)
 				if (loc) {
 					entry.sourcePath = loc.file
 					entry.sourceLine = loc.line

package/src/editor/components/markdown-editor-overlay.tsx

@@ -17,6 +17,7 @@ import {
 	startRedirectCountdown,
 	updateMarkdownFrontmatter,
 } from '../signals'
+import { clearMarkdownDraft } from '../storage'
 import { CreateModeFrontmatter, EditModeFrontmatter } from './frontmatter-fields'
 import { FrontmatterSidebar, partitionFields } from './frontmatter-sidebar'
 import { MarkdownInlineEditor } from './markdown-inline-editor'
@@ -163,6 +164,7 @@ export function MarkdownEditorOverlay() {
 					isMarkdownPreview.value = false
 					setIsSaving(false)
 
+					clearMarkdownDraft(currentPage.filePath)
 					showToast('Content saved', 'success')
 					// Clear pending entry navigation so editor doesn't auto-open after save
 					sessionStorage.removeItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)

package/src/editor/constants.ts

@@ -93,6 +93,8 @@ export const STORAGE_KEYS = {
 	SETTINGS: 'cms-settings',
 	PENDING_ENTRY_NAVIGATION: 'cms-pending-entry-navigation',
 	IS_EDITING: 'cms-is-editing',
+	/** Prefix for per-file markdown draft entries; full key is `${MARKDOWN_DRAFT_PREFIX}${filePath}`. */
+	MARKDOWN_DRAFT_PREFIX: 'cms-markdown-draft:',
 } as const
 
 /**

package/src/editor/editor.ts

@@ -208,6 +208,27 @@ export async function startEditMode(
 	editModeAbortController = new AbortController()
 	const editModeSignal = editModeAbortController.signal
 
+	const savedEdits = loadEditsFromStorage()
+	const savedImageEdits = loadImageEditsFromStorage()
+	const savedColorEdits = loadColorEditsFromStorage()
+	const savedAttributeEdits = loadAttributeEditsFromStorage()
+
+	// Paint saved edits before awaiting the manifest so slow fetches don't show stale text.
+	// The captured pre-paint state is read by the wiring loop later as the pendingChange origin —
+	// without it the source writer would search the source file for the already-edited text.
+	const preEagerPaintDomState = new Map<string, { html: string; text: string }>()
+	for (const [cmsId, edit] of Object.entries(savedEdits)) {
+		const el = document.querySelector(`[${CSS.ID_ATTRIBUTE}="${cmsId}"]`) as HTMLElement | null
+		if (!el) continue
+		preEagerPaintDomState.set(cmsId, {
+			html: el.innerHTML,
+			text: getEditableTextFromElement(el),
+		})
+		if (el.innerHTML !== edit.currentHTML) {
+			el.innerHTML = edit.currentHTML
+		}
+	}
+
 	try {
 		const manifest = await fetchManifest()
 		signals.setManifest(manifest)
@@ -217,11 +238,6 @@ export async function startEditMode(
 		console.error('[CMS] Failed to load manifest:', err)
 		return
 	}
-
-	const savedEdits = loadEditsFromStorage()
-	const savedImageEdits = loadImageEditsFromStorage()
-	const savedColorEdits = loadColorEditsFromStorage()
-	const savedAttributeEdits = loadAttributeEditsFromStorage()
 	const savedBgImageEdits = loadBgImageEditsFromStorage()
 	const currentManifest = signals.manifest.value
 
@@ -343,8 +359,9 @@ export async function startEditMode(
 		setupAttributeTracking(config, el, cmsId, savedAttributeEdits[cmsId])
 
 		if (!signals.pendingChanges.value.has(cmsId)) {
-			const originalHTML = el.innerHTML
-			const originalText = getEditableTextFromElement(el)
+			const preEagerPaint = preEagerPaintDomState.get(cmsId)
+			const originalHTML = preEagerPaint?.html ?? el.innerHTML
+			const originalText = preEagerPaint?.text ?? getEditableTextFromElement(el)
 
 			logDebug(config.debug, 'Setting up element:', cmsId, 'originalText:', originalText)
 

package/src/editor/index.tsx

@@ -57,7 +57,7 @@ import {
 	updateSettings,
 } from './signals'
 import * as signals from './signals'
-import { hasPendingEntryNavigation, loadEditingState, loadSettingsFromStorage, saveSettingsToStorage } from './storage'
+import { hasAnyMarkdownDraft, hasPendingEntryNavigation, loadEditingState, loadSettingsFromStorage, saveSettingsToStorage } from './storage'
 import CMS_STYLES from './styles.css?inline'
 import { generateCSSVariables, resolveTheme } from './themes'
 
@@ -124,12 +124,17 @@ const CmsUI = () => {
 		}
 	}, [config, updateUI])
 
-	// Auto-open markdown editor when there's a pending entry navigation from collections browser
+	// Waits for the manifest before opening — currentPageCollection depends on it.
+	const draftAutoOpenedRef = useRef(false)
+	const manifestState = signals.manifest.value
 	useEffect(() => {
-		if (hasPendingEntryNavigation()) {
-			openMarkdownEditorForCurrentPage()
-		}
-	}, [])
+		if (draftAutoOpenedRef.current) return
+		if (!hasPendingEntryNavigation() && !hasAnyMarkdownDraft()) return
+		const hasCollections = manifestState.collections && Object.keys(manifestState.collections).length > 0
+		if (!hasCollections) return
+		draftAutoOpenedRef.current = true
+		openMarkdownEditorForCurrentPage()
+	}, [manifestState])
 
 	// Send select-mode click selection to parent window via postMessage
 	const prevSelectModeRef = useRef<string | null>(null)

package/src/editor/markdown-api.ts

@@ -76,6 +76,15 @@ export function uploadMedia(
 	onProgress?: (percent: number) => void,
 	options?: { folder?: string; context?: MediaUploadContext },
 ): Promise<MediaUploadResponse> {
+	if (config.maxUploadSize && file.size > config.maxUploadSize) {
+		const limitMb = Math.round(config.maxUploadSize / (1024 * 1024))
+		const fileMb = (file.size / (1024 * 1024)).toFixed(1)
+		return Promise.resolve({
+			success: false,
+			error: `File is too large (${fileMb} MB, limit ${limitMb} MB)`,
+		})
+	}
+
 	const formData = new FormData()
 	formData.append('file', file)
 

package/src/editor/signals.ts

@@ -1,8 +1,9 @@
-import { batch, computed, type Signal, signal } from '@preact/signals'
+import { batch, computed, effect, type Signal, signal } from '@preact/signals'
 import { slugifyHref } from '../shared'
 import { fetchManifest, getMarkdownContent } from './api'
 import type { ToastMessage, ToastType } from './components/toast/types'
 import { getConfig } from './config'
+import { clearMarkdownDraft, loadMarkdownDraft, saveMarkdownDraft } from './storage'
 import type {
 	AttributeEditorState,
 	BlockEditorState,
@@ -308,6 +309,48 @@ export const currentMarkdownPage = computed(
 )
 export const isMarkdownPreview = signal(false)
 
+const DRAFT_PERSIST_DEBOUNCE_MS = 500
+let draftPersistTimer: ReturnType<typeof setTimeout> | null = null
+let lastPersistedSnapshot: string | null = null
+
+function getPersistablePage(): MarkdownPageEntry | null {
+	const state = markdownEditorState.value
+	const page = state.currentPage
+	if (!state.isOpen || !page || !page.isDirty || state.mode !== 'edit' || !page.filePath) return null
+	return page
+}
+
+function persistCurrentDraftIfDirty(): void {
+	const page = getPersistablePage()
+	if (!page) return
+	const snapshot = `${page.filePath}${JSON.stringify(page.frontmatter)}${page.content}`
+	if (snapshot === lastPersistedSnapshot) return
+	lastPersistedSnapshot = snapshot
+	saveMarkdownDraft(page.filePath, page.frontmatter, page.content)
+}
+
+function flushPendingDraft(): void {
+	if (draftPersistTimer) {
+		clearTimeout(draftPersistTimer)
+		draftPersistTimer = null
+	}
+	persistCurrentDraftIfDirty()
+}
+
+effect(() => {
+	if (!getPersistablePage()) return
+	if (draftPersistTimer) clearTimeout(draftPersistTimer)
+	draftPersistTimer = setTimeout(() => {
+		draftPersistTimer = null
+		persistCurrentDraftIfDirty()
+	}, DRAFT_PERSIST_DEBOUNCE_MS)
+})
+
+// `pagehide` fires reliably on tab close, reload, and back/forward nav, unlike `beforeunload` which is throttled.
+if (typeof window !== 'undefined') {
+	window.addEventListener('pagehide', flushPendingDraft)
+}
+
 // ============================================================================
 // MDX Component Block State Signals
 // ============================================================================
@@ -853,6 +896,65 @@ function parseFrontmatterValue(value: string): unknown {
 	return value
 }
 
+function deepEqual(a: unknown, b: unknown): boolean {
+	if (a === b) return true
+	if (a === null || b === null || typeof a !== typeof b || typeof a !== 'object') return false
+	if (Array.isArray(a)) {
+		if (!Array.isArray(b) || a.length !== b.length) return false
+		return a.every((v, i) => deepEqual(v, b[i]))
+	}
+	const aObj = a as Record<string, unknown>
+	const bObj = b as Record<string, unknown>
+	const aKeys = Object.keys(aObj)
+	if (aKeys.length !== Object.keys(bObj).length) return false
+	return aKeys.every((k) => deepEqual(aObj[k], bObj[k]))
+}
+
+function formatDraftAge(savedAt: number): string {
+	const elapsedMs = Date.now() - savedAt
+	const minutes = Math.floor(elapsedMs / 60_000)
+	if (minutes < 1) return 'just now'
+	if (minutes < 60) return `${minutes} minute${minutes === 1 ? '' : 's'} ago`
+	const hours = Math.floor(minutes / 60)
+	if (hours < 24) return `${hours} hour${hours === 1 ? '' : 's'} ago`
+	return new Date(savedAt).toLocaleString()
+}
+
+/**
+ * If a sessionStorage draft exists for `filePath` and differs from the freshly fetched
+ * content, ask the user whether to restore it. Returns the (possibly overridden) frontmatter
+ * and content. The `isDirty` flag indicates whether the result came from a recovered draft.
+ */
+async function maybeRecoverDraft(
+	filePath: string,
+	fetchedFrontmatter: Record<string, unknown>,
+	fetchedContent: string,
+): Promise<{ frontmatter: Record<string, unknown>; content: string; isDirty: boolean }> {
+	const draft = loadMarkdownDraft(filePath)
+	if (!draft) return { frontmatter: fetchedFrontmatter, content: fetchedContent, isDirty: false }
+
+	const sameContent = draft.content === fetchedContent
+	const sameFrontmatter = deepEqual(draft.frontmatter, fetchedFrontmatter)
+	if (sameContent && sameFrontmatter) {
+		clearMarkdownDraft(filePath)
+		return { frontmatter: fetchedFrontmatter, content: fetchedContent, isDirty: false }
+	}
+
+	const recover = await showConfirmDialog({
+		title: 'Recover unsaved changes?',
+		message: `An unsaved draft from ${formatDraftAge(draft.savedAt)} exists for this entry. Recover it, or discard?`,
+		confirmLabel: 'Recover draft',
+		cancelLabel: 'Discard',
+		variant: 'warning',
+	})
+
+	if (recover) {
+		return { frontmatter: draft.frontmatter, content: draft.content, isDirty: true }
+	}
+	clearMarkdownDraft(filePath)
+	return { frontmatter: fetchedFrontmatter, content: fetchedContent, isDirty: false }
+}
+
 /**
  * Open the markdown editor for the current page's collection entry.
  * Refreshes the manifest first to ensure we have the latest content.
@@ -896,14 +998,16 @@ export async function openMarkdownEditorForCurrentPage(): Promise<boolean> {
 	// Look up collection definition for schema-aware field rendering
 	const collectionDefinition = manifest.value.collectionDefinitions?.[collection.collectionName]
 
+	const recovered = await maybeRecoverDraft(collection.sourcePath, frontmatter, content)
+
 	markdownEditorState.value = {
 		isOpen: true,
 		currentPage: {
 			filePath: collection.sourcePath,
 			slug: collection.collectionSlug,
-			frontmatter: frontmatter as import('./types').BlogFrontmatter,
-			content,
-			isDirty: false,
+			frontmatter: recovered.frontmatter as import('./types').BlogFrontmatter,
+			content: recovered.content,
+			isDirty: recovered.isDirty,
 		},
 		activeElementId: collection.wrapperId ?? null,
 		mode: 'edit',
@@ -1114,14 +1218,16 @@ export async function openMarkdownEditorForEntry(
 		console.error('[CMS] Failed to fetch markdown content for entry:', err)
 	}
 
+	const recovered = await maybeRecoverDraft(sourcePath, frontmatter, content)
+
 	markdownEditorState.value = {
 		isOpen: true,
 		currentPage: {
 			filePath: sourcePath,
 			slug,
-			frontmatter: frontmatter as import('./types').BlogFrontmatter,
-			content,
-			isDirty: false,
+			frontmatter: recovered.frontmatter as import('./types').BlogFrontmatter,
+			content: recovered.content,
+			isDirty: recovered.isDirty,
 		},
 		activeElementId: null,
 		mode: 'edit',