@nuasite/cms 0.38.0 → 0.39.0

package/package.json

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

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)

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',