@nuasite/cms 0.29.0 → 0.31.0

package/src/editor/editor.ts

@@ -6,6 +6,7 @@ import {
 	enableAllInteractiveElements,
 	findInnermostCmsElement,
 	getAllCmsElements,
+	getCaretRangeFromPoint,
 	getChildCmsElements,
 	getEditableHtmlFromElement,
 	getEditableTextFromElement,
@@ -71,6 +72,50 @@ const INLINE_STYLE_ELEMENTS = [
 	'q',
 ]
 
+// Collapse burst spam (repeated shortcut / paste) into a single toast; long enough to
+// merge a burst, short enough that the next deliberate action still explains itself.
+const FORMATTING_BLOCKED_TOAST_COOLDOWN_MS = 3000
+let lastFormattingBlockedToastAt = 0
+
+// Signals listener cleanup on stopEditMode. Aborting removes every listener
+// attached with { signal } in the current edit session in one shot.
+let editModeAbortController: AbortController | null = null
+
+function notifyFormattingBlocked(): void {
+	const now = Date.now()
+	if (now - lastFormattingBlockedToastAt < FORMATTING_BLOCKED_TOAST_COOLDOWN_MS) {
+		return
+	}
+	lastFormattingBlockedToastAt = now
+	signals.showToast("Formatting isn't available — this text is used as a plain value", 'info')
+}
+
+// Uses the Selection/Range API rather than the deprecated document.execCommand('insertText').
+export function insertPlainTextAtRange(range: Range, text: string): boolean {
+	if (!text) return false
+	range.deleteContents()
+	const textNode = document.createTextNode(text)
+	range.insertNode(textNode)
+	range.setStartAfter(textNode)
+	range.setEndAfter(textNode)
+	const selection = window.getSelection()
+	if (selection) {
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+	return true
+}
+
+function applyPlainTextInsert(el: HTMLElement, text: string, html: string, range: Range | null): void {
+	const inserted = range && text ? insertPlainTextAtRange(range, text) : false
+	// Dispatch even when only HTML was stripped (no plain text to insert) so downstream
+	// state resynchronizes with the intercepted event.
+	if (inserted || html) {
+		el.dispatchEvent(new Event('input', { bubbles: true }))
+	}
+	if (html) notifyFormattingBlocked()
+}
+
 /**
  * Check if an element contains styled/formatted content (inline text styling).
  * This includes:
@@ -102,6 +147,10 @@ export async function startEditMode(
 	initHighlightSystem()
 	onStateChange?.()
 
+	editModeAbortController?.abort()
+	editModeAbortController = new AbortController()
+	const editModeSignal = editModeAbortController.signal
+
 	try {
 		const manifest = await fetchManifest()
 		signals.setManifest(manifest)
@@ -177,8 +226,8 @@ export async function startEditMode(
 
 		makeElementEditable(el)
 
-		// Suppress browser native contentEditable undo/redo (we handle it ourselves)
-		// Also prevent Enter/Shift+Enter from inserting line breaks
+		const stylingAllowed = manifestEntry?.allowStyling !== false
+
 		el.addEventListener('beforeinput', (e) => {
 			if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
 				e.preventDefault()
@@ -186,7 +235,39 @@ export async function startEditMode(
 			if (e.inputType === 'insertParagraph' || e.inputType === 'insertLineBreak') {
 				e.preventDefault()
 			}
-		})
+			if (!stylingAllowed && e.inputType?.startsWith('format')) {
+				e.preventDefault()
+				notifyFormattingBlocked()
+			}
+		}, { signal: editModeSignal })
+
+		if (!stylingAllowed) {
+			el.addEventListener('paste', (e) => {
+				const clipboard = (e as ClipboardEvent).clipboardData
+				if (!clipboard) return
+				const html = clipboard.getData('text/html')
+				const text = clipboard.getData('text/plain')
+				e.preventDefault()
+				const selection = window.getSelection()
+				const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null
+				applyPlainTextInsert(el, text, html, range)
+			}, { signal: editModeSignal })
+
+			el.addEventListener('drop', (e) => {
+				const transfer = (e as DragEvent).dataTransfer
+				if (!transfer) return
+				const html = transfer.getData('text/html')
+				const text = transfer.getData('text/plain')
+				if (!text && !html) return
+				e.preventDefault()
+				let range = getCaretRangeFromPoint((e as DragEvent).clientX, (e as DragEvent).clientY)
+				if (!range) {
+					const selection = window.getSelection()
+					range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null
+				}
+				applyPlainTextInsert(el, text, html, range)
+			}, { signal: editModeSignal })
+		}
 
 		// Setup color tracking for elements with colorClasses in manifest
 		setupColorTracking(config, el, cmsId, savedColorEdits[cmsId])
@@ -338,6 +419,8 @@ export function stopEditMode(onStateChange?: () => void): void {
 	if (!signals.isSelectMode.value) {
 		enableAllInteractiveElements()
 	}
+	editModeAbortController?.abort()
+	editModeAbortController = null
 	cleanupHighlightSystem()
 	onStateChange?.()
 
@@ -639,8 +722,10 @@ export async function saveAllChanges(
 				payload.childCmsIds = change.childCmsElements.map(c => c.id)
 			}
 
-			// Include HTML content when there are styled spans
-			if (change.hasStyledContent) {
+			// Include HTML content when there are styled spans — but never for entries
+			// that disallow styling (string props, collection fields), since inline HTML
+			// would be written back into a string attribute and break the source.
+			if (change.hasStyledContent && entry?.allowStyling !== false) {
 				payload.hasStyledContent = true
 				payload.htmlValue = getEditableHtmlFromElement(change.element)
 			}

package/src/editor/hooks/index.ts

@@ -17,3 +17,7 @@ export type { ImageHoverState } from './useImageHoverDetection'
 
 export { useBgImageHoverDetection } from './useBgImageHoverDetection'
 export type { BgImageHoverState } from './useBgImageHoverDetection'
+
+export { useClickOutsideEscape } from './useClickOutsideEscape'
+
+export { useSearchFilter } from './useSearchFilter'

package/src/editor/hooks/useClickOutsideEscape.ts

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'preact/hooks'
+
+/**
+ * Dismiss handler for floating UI: closes on outside mousedown or Escape key.
+ * Pass all refs that should be considered "inside" (e.g. panel + trigger).
+ *
+ * Uses composedPath() so it works correctly inside Shadow DOM, and registers
+ * in the capture phase so stopPropagation() in bubble-phase handlers
+ * (e.g. modal overlays) doesn't block detection.
+ */
+export function useClickOutsideEscape(
+	refs: ReadonlyArray<{ readonly current: HTMLElement | null }>,
+	isOpen: boolean,
+	onClose: () => void,
+): void {
+	// Store refs and onClose in a ref so the effect never needs to re-register
+	// when the caller creates a new array (e.g. from spreading exemptRefs).
+	// The actual .current values of each ref are read at event time, not capture time.
+	const stableRefs = useRef(refs)
+	stableRefs.current = refs
+	const stableOnClose = useRef(onClose)
+	stableOnClose.current = onClose
+
+	useEffect(() => {
+		if (!isOpen) return
+		const onMouseDown = (e: MouseEvent) => {
+			const path = e.composedPath()
+			for (const ref of stableRefs.current) {
+				if (ref.current && path.includes(ref.current)) return
+			}
+			stableOnClose.current()
+		}
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') stableOnClose.current()
+		}
+		document.addEventListener('mousedown', onMouseDown, true)
+		document.addEventListener('keydown', onKeyDown)
+		return () => {
+			document.removeEventListener('mousedown', onMouseDown, true)
+			document.removeEventListener('keydown', onKeyDown)
+		}
+	}, [isOpen])
+}

package/src/editor/hooks/useSearchFilter.ts

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'preact/hooks'
+
+/**
+ * Filter a list of items by a search query.
+ * The `getSearchableText` callback returns the text to match against (e.g. `o => \`${o.label} ${o.value}\``).
+ * Uses a ref internally so callers don't need to memoize the callback.
+ */
+export function useSearchFilter<T>(
+	items: T[],
+	query: string,
+	getSearchableText: (item: T) => string,
+): T[] {
+	const fnRef = useRef(getSearchableText)
+	fnRef.current = getSearchableText
+
+	return useMemo(() => {
+		if (!query) return items
+		const q = query.toLowerCase()
+		return items.filter(item => fnRef.current(item).toLowerCase().includes(q))
+	}, [items, query])
+}

package/src/editor/index.tsx

@@ -16,6 +16,7 @@ import { ImageOverlay } from './components/image-overlay'
 import { MarkdownEditorOverlay } from './components/markdown-editor-overlay'
 import { MediaLibrary } from './components/media-library'
 import { Outline } from './components/outline'
+import { PlainTextChip } from './components/plain-text-chip'
 import { RedirectCountdown } from './components/redirect-countdown'
 import { RedirectsManager } from './components/redirects-manager'
 import { ReferencePicker } from './components/reference-picker'
@@ -562,6 +563,14 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
+			<ErrorBoundary componentName="Plain Text Chip">
+				<PlainTextChip
+					visible={textSelectionState.hasSelection && isEditing && !isTextStylingAllowed}
+					rect={textSelectionState.rect}
+					entry={selectedEntry}
+				/>
+			</ErrorBoundary>
+
 			<ErrorBoundary componentName="Color Toolbar">
 				<ColorToolbar
 					visible={colorEditorState.isOpen && isEditing}

package/src/handlers/source-writer.ts

@@ -7,7 +7,7 @@ import type { AttributeChangePayload, ChangePayload, SaveBatchRequest } from '..
 import type { ManifestWriter } from '../manifest-writer'
 import { extractAstroImageOriginalUrl } from '../source-finder/snippet-utils'
 import type { CmsManifest, ManifestEntry } from '../types'
-import { acquireFileLock, escapeReplacement, normalizePagePath, resolveAndValidatePath } from '../utils'
+import { acquireFileLock, escapeRegex, escapeReplacement, normalizePagePath, resolveAndValidatePath } from '../utils'
 
 export interface SaveBatchResponse {
 	updated: number
@@ -216,8 +216,8 @@ export function applyImageChange(
 	let replacedIndex = -1
 	for (const srcToFind of srcCandidates) {
 		// Use non-global patterns to replace only the first occurrence
-		const srcPatternDouble = new RegExp(`src="${escapeRegExp(srcToFind)}"`)
-		const srcPatternSingle = new RegExp(`src='${escapeRegExp(srcToFind)}'`)
+		const srcPatternDouble = new RegExp(`src="${escapeRegex(srcToFind)}"`)
+		const srcPatternSingle = new RegExp(`src='${escapeRegex(srcToFind)}'`)
 
 		const escapedNewSrc = escapeReplacement(newSrc)
 		const doubleMatch = newContent.match(srcPatternDouble)
@@ -487,7 +487,39 @@ function appendClassToAttribute(
 	return { success: false, error: 'No class attribute found in source file' }
 }
 
-function applyAttributeChanges(
+/**
+ * Locate `sourceSnippet` in `content` and replace the first quoted occurrence
+ * of `oldValue` inside that snippet with `newValue`, then splice back. Returns
+ * the updated file content, or undefined if the snippet isn't in the file or
+ * contains no quoted match.
+ *
+ * Used as the save-path for attribute values backed by a JS literal (variable
+ * definition, conditional branch) where there's no `attrName=` prefix on the
+ * source line. Scoping the match to the recorded snippet prevents accidental
+ * hits elsewhere in the file.
+ */
+const QUOTED_LITERAL_DELIMITERS = [`'`, `"`, '`'] as const
+
+function replaceLiteralInSnippet(
+	content: string,
+	snippet: string,
+	oldValue: string,
+	newValue: string,
+): string | undefined {
+	if (!content.includes(snippet)) return undefined
+
+	const safeNewValue = escapeReplacement(newValue)
+	const escapedOld = escapeRegex(oldValue)
+	for (const quote of QUOTED_LITERAL_DELIMITERS) {
+		const pattern = new RegExp(`${quote}(${escapedOld})${quote}`)
+		if (!pattern.test(snippet)) continue
+		const updated = snippet.replace(pattern, `${quote}${safeNewValue}${quote}`)
+		if (updated !== snippet) return content.replace(snippet, updated)
+	}
+	return undefined
+}
+
+export function applyAttributeChanges(
 	content: string,
 	change: ChangePayload,
 ): {
@@ -517,10 +549,10 @@ function applyAttributeChanges(
 			if (lineIndex >= 0 && lineIndex < lines.length) {
 				const line = lines[lineIndex]!
 				const doubleQuotePattern = new RegExp(
-					`(${escapeRegExp(attributeName)}\\s*=\\s*)"(${escapeRegExp(attrOldValue)})"`,
+					`(${escapeRegex(attributeName)}\\s*=\\s*)"(${escapeRegex(attrOldValue)})"`,
 				)
 				const singleQuotePattern = new RegExp(
-					`(${escapeRegExp(attributeName)}\\s*=\\s*)'(${escapeRegExp(attrOldValue)})'`,
+					`(${escapeRegex(attributeName)}\\s*=\\s*)'(${escapeRegex(attrOldValue)})'`,
 				)
 
 				const safeNewValue = escapeReplacement(attrNewValue)
@@ -533,10 +565,33 @@ function applyAttributeChanges(
 					newContent = lines.join('\n')
 					attrApplied++
 				} else {
-					failedChanges.push({
-						cmsId: change.cmsId,
-						error: `Attribute '${attributeName}="${attrOldValue}"' not found on line ${targetLine}`,
-					})
+					// JS-backed value (variable def or conditional branch) — no
+					// `attrName=` on the line, so scope the replacement to the
+					// recorded snippet.
+					const snippet = attrChange.sourceSnippet
+					if (!snippet) {
+						failedChanges.push({
+							cmsId: change.cmsId,
+							error: `Attribute '${attributeName}="${attrOldValue}"' not found on line ${targetLine}`,
+						})
+					} else {
+						const snippetResult = replaceLiteralInSnippet(
+							newContent,
+							snippet,
+							attrOldValue,
+							attrNewValue,
+						)
+						if (snippetResult) {
+							newContent = snippetResult
+							attrApplied++
+						} else {
+							failedChanges.push({
+								cmsId: change.cmsId,
+								error: `Attribute '${attributeName}="${attrOldValue}"' not found on line ${targetLine} `
+									+ `and source snippet did not yield a quoted literal match`,
+							})
+						}
+					}
 				}
 			} else {
 				failedChanges.push({
@@ -547,10 +602,10 @@ function applyAttributeChanges(
 		} else {
 			// Fallback: replace first occurrence in the whole file
 			const doubleQuotePattern = new RegExp(
-				`(${escapeRegExp(attributeName)}\\s*=\\s*)"(${escapeRegExp(attrOldValue)})"`,
+				`(${escapeRegex(attributeName)}\\s*=\\s*)"(${escapeRegex(attrOldValue)})"`,
 			)
 			const singleQuotePattern = new RegExp(
-				`(${escapeRegExp(attributeName)}\\s*=\\s*)'(${escapeRegExp(attrOldValue)})'`,
+				`(${escapeRegex(attributeName)}\\s*=\\s*)'(${escapeRegex(attrOldValue)})'`,
 			)
 
 			const safeNewValue = escapeReplacement(attrNewValue)
@@ -590,7 +645,10 @@ export function applyTextChange(
 		return { success: false, error: 'Source snippet not found in file' }
 	}
 
-	const newText = htmlValue ?? newValue
+	// Never write HTML back into entries that don't allow styling — these are string props,
+	// collection fields, etc. where inline HTML would produce invalid source code.
+	const stylingAllowed = manifest.entries[change.cmsId]?.allowStyling !== false
+	const newText = stylingAllowed ? (htmlValue ?? newValue) : newValue
 
 	// When originalValue contains CMS placeholders (child elements like {{cms:cms-5}}),
 	// replace only the text segments between placeholders directly in the sourceSnippet.
@@ -724,10 +782,10 @@ function findTextInSnippet(snippet: string, decodedText: string): string | null
 		["'", '&apos;'],
 	]
 
-	let pattern = escapeRegExp(decodedText)
+	let pattern = escapeRegex(decodedText)
 	for (const [char, entity] of entityMap) {
-		const escapedChar = escapeRegExp(char)
-		const escapedEntity = escapeRegExp(entity)
+		const escapedChar = escapeRegex(char)
+		const escapedEntity = escapeRegex(entity)
 		pattern = pattern.replace(new RegExp(escapedChar, 'g'), `(?:${escapedChar}|${escapedEntity})`)
 	}
 
@@ -736,7 +794,7 @@ function findTextInSnippet(snippet: string, decodedText: string): string | null
 	if (match) return match[0]
 
 	// Try matching with <br> tags stripped from snippet
-	const chars = [...decodedText].map((ch) => escapeRegExp(ch))
+	const chars = [...decodedText].map((ch) => escapeRegex(ch))
 	const brAwarePattern = chars.join('(?:<br\\b[^>]*\\/?>)*')
 	const brRegex = new RegExp(brAwarePattern)
 	const brMatch = snippet.match(brRegex)
@@ -1008,7 +1066,3 @@ function tryBrNormalizedChange(
 
 	return result !== sourceSnippet ? result : null
 }
-
-function escapeRegExp(string: string): string {
-	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}

package/src/html-processor.ts

@@ -17,6 +17,35 @@ import { generateStableId } from './utils'
 /** Type for parsed HTML element nodes from node-html-parser */
 type HTMLNode = ParsedHTMLElement
 
+/** Check whether any ancestor of `node` (inclusive) has `data-astro-source-file`. */
+function hasAncestorSourceFile(node: HTMLNode): boolean {
+	let current: HTMLNode | null = node
+	while (current) {
+		if (current.getAttribute?.('data-astro-source-file')) return true
+		current = current.parentNode as HTMLNode | null
+	}
+	return false
+}
+
+/** Walk ancestors of `node` (inclusive) to find the nearest source file and line. */
+function findAncestorSourceLocation(node: HTMLNode): { sourceFile?: string; sourceLine?: number } {
+	let current: HTMLNode | null = node
+	while (current) {
+		const file = current.getAttribute?.('data-astro-source-file')
+		if (file) {
+			const line = current.getAttribute?.('data-astro-source-loc') || current.getAttribute?.('data-astro-source-line')
+			let sourceLine: number | undefined
+			if (line) {
+				const parsed = parseInt(line.split(':')[0] ?? '1', 10)
+				if (!Number.isNaN(parsed)) sourceLine = parsed
+			}
+			return { sourceFile: file, sourceLine }
+		}
+		current = current.parentNode as HTMLNode | null
+	}
+	return {}
+}
+
 /**
  * Inline text styling elements that should NOT be marked with CMS IDs.
  * These elements are text formatting and should be part of their parent's content.
@@ -434,52 +463,61 @@ export async function processHtml(
 	// This needs to run BEFORE image marking so we can skip images inside markdown
 	let markdownWrapperNode: HTMLNode | null = null
 
-	// Two strategies:
-	// 1. Dev mode: look for elements with data-astro-source-file containing children without it
-	// 2. Build mode: find element whose first child content matches the start of markdown body
+	// Three strategies in priority order:
+	// 0. Rehype marker: the rehype-cms-marker plugin marks the first rendered element
+	//    with data-cms-markdown-content — its parent is the wrapper
+	// 1. Dev mode heuristic: elements with data-astro-source-file whose children lack it
+	// 2. Build mode: find element whose content matches the markdown body text
 	if (collectionInfo) {
 		const allElements = root.querySelectorAll('*')
 		let foundWrapper = false
 
+		// Strategy 0: Rehype marker — most reliable
+		const markerEl = root.querySelector('[data-cms-markdown-content]')
+		if (markerEl) {
+			markerEl.removeAttribute('data-cms-markdown-content')
+			const parent = markerEl.parentNode as HTMLNode | null
+			if (parent && parent.tagName) {
+				const id = getNextId()
+				parent.setAttribute(attributeName, id)
+				parent.setAttribute('data-cms-markdown', 'true')
+				collectionWrapperId = id
+				markdownWrapperNode = parent
+				foundWrapper = true
+			}
+		}
+
 		// Strategy 1: Dev mode - look for source file attributes
-		const SKIP_WRAPPER_TAGS = new Set(['html', 'head', 'body', 'script', 'style', 'meta', 'link'])
-		for (const node of allElements) {
-			const tag = node.tagName?.toLowerCase?.() ?? ''
-			if (SKIP_WRAPPER_TAGS.has(tag)) continue
-			const sourceFile = node.getAttribute('data-astro-source-file')
-			if (!sourceFile) continue
-
-			// Check if this element has any direct child elements without source file attribute
-			// These would be markdown-rendered elements
-			const childElements = node.childNodes.filter(
-				(child): child is HTMLNode => child.nodeType === 1 && 'tagName' in child,
-			)
-			const hasMarkdownChildren = childElements.some(
-				(child) => !child.getAttribute?.('data-astro-source-file'),
-			)
-
-			if (hasMarkdownChildren) {
-				// Check if any ancestor already has been marked as a collection wrapper
-				// We want the innermost wrapper
-				let parent = node.parentNode as HTMLNode | null
-				let hasAncestorWrapper = false
-				while (parent) {
-					if (parent.getAttribute?.(attributeName)?.startsWith('cms-collection-')) {
-						hasAncestorWrapper = true
-						break
+		if (!foundWrapper) {
+			const SKIP_WRAPPER_TAGS = new Set(['html', 'head', 'body', 'script', 'style', 'meta', 'link'])
+			for (const node of allElements) {
+				const tag = node.tagName?.toLowerCase?.() ?? ''
+				if (SKIP_WRAPPER_TAGS.has(tag)) continue
+				const sourceFile = node.getAttribute('data-astro-source-file')
+				if (!sourceFile) continue
+
+				// Check if this element has any direct child elements without source file attribute
+				// These would be markdown-rendered elements
+				const childElements = node.childNodes.filter(
+					(child): child is HTMLNode => child.nodeType === 1 && 'tagName' in child,
+				)
+				const hasMarkdownChildren = childElements.some(
+					(child) => !child.getAttribute?.('data-astro-source-file'),
+				)
+
+				if (hasMarkdownChildren) {
+					// Remove data-cms-markdown from previous (shallower) wrapper —
+					// we want only the deepest wrapper to have it
+					if (markdownWrapperNode) {
+						markdownWrapperNode.removeAttribute('data-cms-markdown')
 					}
-					parent = parent.parentNode as HTMLNode | null
-				}
 
-				if (!hasAncestorWrapper) {
-					// Mark this as the collection wrapper using the standard attribute
 					const id = getNextId()
 					node.setAttribute(attributeName, id)
 					node.setAttribute('data-cms-markdown', 'true')
 					collectionWrapperId = id
 					markdownWrapperNode = node
 					foundWrapper = true
-					// Don't break - we want the deepest wrapper, so we'll overwrite
 				}
 			}
 		}
@@ -636,42 +674,13 @@ export async function processHtml(
 
 		// When skipMarkdownContent is true (collection pages), only mark images
 		// that have source file attributes (from Astro templates, not markdown)
-		if (skipMarkdownContent) {
-			// Check if the image or any ancestor has source file attribute
-			let hasSourceAttr = false
-			let current: HTMLNode | null = node
-			while (current) {
-				if (current.getAttribute?.('data-astro-source-file')) {
-					hasSourceAttr = true
-					break
-				}
-				current = current.parentNode as HTMLNode | null
-			}
-			if (!hasSourceAttr) return
-		}
+		if (skipMarkdownContent && !hasAncestorSourceFile(node)) return
 
 		const id = getNextId()
 		node.setAttribute(attributeName, id)
 		node.setAttribute('data-cms-img', 'true')
 
-		// Try to get source location from the image itself or ancestors
-		let sourceFile: string | undefined
-		let sourceLine: number | undefined
-		let current: HTMLNode | null = node
-		while (current && !sourceFile) {
-			const file = current.getAttribute?.('data-astro-source-file')
-			const line = current.getAttribute?.('data-astro-source-loc') || current.getAttribute?.('data-astro-source-line')
-			if (file) {
-				sourceFile = file
-				if (line) {
-					const lineNum = parseInt(line.split(':')[0] ?? '1', 10)
-					if (!Number.isNaN(lineNum)) {
-						sourceLine = lineNum
-					}
-				}
-			}
-			current = current.parentNode as HTMLNode | null
-		}
+		const { sourceFile, sourceLine } = findAncestorSourceLocation(node)
 
 		// Build image metadata
 		const metadata: ImageMetadata = {
@@ -708,41 +717,13 @@ export async function processHtml(
 		if (!bgMeta) return
 
 		// When skipMarkdownContent is true, only mark elements with source file attributes
-		if (skipMarkdownContent) {
-			let hasSourceAttr = false
-			let current: HTMLNode | null = node
-			while (current) {
-				if (current.getAttribute?.('data-astro-source-file')) {
-					hasSourceAttr = true
-					break
-				}
-				current = current.parentNode as HTMLNode | null
-			}
-			if (!hasSourceAttr) return
-		}
+		if (skipMarkdownContent && !hasAncestorSourceFile(node)) return
 
 		const id = getNextId()
 		node.setAttribute(attributeName, id)
 		node.setAttribute('data-cms-bg-img', 'true')
 
-		// Try to get source location from the element itself or ancestors
-		let sourceFile: string | undefined
-		let sourceLine: number | undefined
-		let current: HTMLNode | null = node
-		while (current && !sourceFile) {
-			const file = current.getAttribute?.('data-astro-source-file')
-			const line = current.getAttribute?.('data-astro-source-loc') || current.getAttribute?.('data-astro-source-line')
-			if (file) {
-				sourceFile = file
-				if (line) {
-					const lineNum = parseInt(line.split(':')[0] ?? '1', 10)
-					if (!Number.isNaN(lineNum)) {
-						sourceLine = lineNum
-					}
-				}
-			}
-			current = current.parentNode as HTMLNode | null
-		}
+		const { sourceFile, sourceLine } = findAncestorSourceLocation(node)
 
 		bgImageEntries.set(id, {
 			metadata: bgMeta,

package/src/index.ts

@@ -13,6 +13,7 @@ import { getErrorCollector, resetErrorCollector } from './error-collector'
 import { ManifestWriter } from './manifest-writer'
 import { createLocalStorageAdapter } from './media/local'
 import type { MediaStorageAdapter } from './media/types'
+import { rehypeCmsMarker } from './rehype-cms-marker'
 import type { CmsFeatures, CmsMarkerOptions, ComponentDefinition } from './types'
 import { createVitePlugin } from './vite-plugin'
 
@@ -283,6 +284,9 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 				const needsAliases = !src && !hasPrebuiltBundle
 
 				updateConfig({
+					markdown: {
+						rehypePlugins: [rehypeCmsMarker],
+					},
 					vite: {
 						plugins: vitePlugins,
 						resolve: needsAliases
@@ -367,6 +371,7 @@ export type { Color, Date, DateTime, Email, Image, Reference, Textarea, Time, Ur
 
 export { scanCollections } from './collection-scanner'
 export { getProjectRoot, resetProjectRoot, setProjectRoot } from './config'
+export { rehypeCmsMarker } from './rehype-cms-marker'
 export type { CollectionInfo, MarkdownContent, SourceLocation, VariableReference } from './source-finder'
 export { findCollectionSource, parseMarkdownContent } from './source-finder'
 export type {

package/src/rehype-cms-marker.ts

@@ -0,0 +1,15 @@
+/**
+ * Rehype plugin that marks the first element of rendered markdown/MDX content
+ * with `data-cms-markdown-content`. The HTML processor uses this marker to
+ * reliably identify the wrapper element (the marker's parent) instead of
+ * relying on heuristics.
+ */
+export function rehypeCmsMarker() {
+	return (tree: any) => {
+		const firstElement = tree.children?.find((n: any) => n.type === 'element')
+		if (firstElement) {
+			firstElement.properties ??= {}
+			firstElement.properties['dataCmsMarkdownContent'] = ''
+		}
+	}
+}