@nuasite/cms 0.19.0 → 0.20.1

package/src/editor/milkdown-mdx-plugin.tsx

@@ -4,12 +4,21 @@ import type { MarkdownNode, SerializerState } from '@milkdown/transformer'
 import { $command, $node, $remark, $view } from '@milkdown/utils'
 import { render } from 'preact'
 import remarkMdx from 'remark-mdx'
+import remarkParse from 'remark-parse'
+import { unified } from 'unified'
 import { MdxBlockCard } from './components/mdx-block-view'
-import { openMdxPropsEditor } from './signals'
+import { getComponentDefinition } from './manifest'
+import { manifest } from './signals'
 
 /** Prefix used to distinguish expression attributes from string literals in serialized props */
 export const MDX_EXPR_PREFIX = '__mdx_expr__:'
 
+/** HTML void elements that should not be treated as editable MDX components */
+const HTML_VOID_ELEMENTS = new Set(['br', 'hr', 'img', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'])
+
+/** Cached unified processor for parsing markdown children during serialization */
+const remarkParser = unified().use(remarkParse)
+
 export const remarkMdxPlugin: any = $remark('remarkMdx', () => remarkMdx)
 
 function parseJsxAttributes(attributes: any[]): { props: Record<string, string>; hasExpressions: boolean } {
@@ -64,21 +73,72 @@ function serializePropsToAttributes(props: Record<string, string>): any[] {
 	return attributes
 }
 
+/** Serialize mdast children back to markdown text */
+function serializeChildren(children: any[]): string {
+	if (!children || children.length === 0) return ''
+	const parts: string[] = []
+	for (const child of children) {
+		if (child.type === 'paragraph') {
+			const text = serializeInlineChildren(child.children ?? [])
+			parts.push(text)
+		} else if (child.type === 'text') {
+			parts.push(child.value ?? '')
+		} else if (child.type === 'mdxJsxFlowElement' || child.type === 'mdxJsxTextElement') {
+			// Nested JSX — reconstruct as string
+			const name = child.name ?? ''
+			const attrs = (child.attributes ?? [])
+				.map((a: any) => {
+					if (a.type === 'mdxJsxAttribute' && a.name) {
+						if (typeof a.value === 'string') return `${a.name}="${a.value}"`
+						if (a.value?.type === 'mdxJsxAttributeValueExpression') return `${a.name}={${a.value.value}}`
+					}
+					return ''
+				})
+				.filter(Boolean)
+				.join(' ')
+			const inner = serializeChildren(child.children ?? [])
+			if (inner) {
+				parts.push(`<${name}${attrs ? ' ' + attrs : ''}>${inner}</${name}>`)
+			} else {
+				parts.push(`<${name}${attrs ? ' ' + attrs : ''} />`)
+			}
+		} else {
+			// Fallback — use value if present
+			if (child.value) parts.push(child.value)
+		}
+	}
+	return parts.join('\n\n')
+}
+
+function serializeInlineChildren(children: any[]): string {
+	return children.map((c: any) => {
+		if (c.type === 'text') return c.value ?? ''
+		if (c.type === 'strong') return `**${serializeInlineChildren(c.children ?? [])}**`
+		if (c.type === 'emphasis') return `*${serializeInlineChildren(c.children ?? [])}*`
+		if (c.type === 'inlineCode') return `\`${c.value ?? ''}\``
+		if (c.type === 'link') return `[${serializeInlineChildren(c.children ?? [])}](${c.url ?? ''})`
+		return c.value ?? ''
+	}).join('')
+}
+
 export const mdxComponentNode = $node('mdx_component', () => ({
 	group: 'block',
 	atom: true,
 	isolating: true,
 	selectable: true,
-	draggable: true,
+	draggable: false,
 	attrs: {
 		componentName: { default: '' },
 		props: { default: '{}' },
 		hasExpressions: { default: false },
+		children: { default: '' },
 	},
 	toDOM: (node: PmNode) => {
 		const div = document.createElement('div')
 		div.setAttribute('data-mdx-component', node.attrs.componentName)
 		div.setAttribute('data-mdx-props', node.attrs.props)
+		if (node.attrs.children) div.setAttribute('data-mdx-children', node.attrs.children)
+		if (node.attrs.hasExpressions) div.setAttribute('data-mdx-expressions', 'true')
 		div.className = 'mdx-component-block'
 		div.textContent = `<${node.attrs.componentName} />`
 		return div as any
@@ -88,6 +148,8 @@ export const mdxComponentNode = $node('mdx_component', () => ({
 		getAttrs: (dom: HTMLElement) => ({
 			componentName: dom.getAttribute('data-mdx-component') || '',
 			props: dom.getAttribute('data-mdx-props') || '{}',
+			children: dom.getAttribute('data-mdx-children') || '',
+			hasExpressions: dom.getAttribute('data-mdx-expressions') === 'true',
 		}),
 	}],
 	parseMarkdown: {
@@ -95,13 +157,17 @@ export const mdxComponentNode = $node('mdx_component', () => ({
 		runner: (state, node, proseType: NodeType) => {
 			const name = (node as any).name as string | null
 			if (!name) return // Skip fragments
+			// Skip HTML void elements — they are not editable components
+			if (HTML_VOID_ELEMENTS.has(name.toLowerCase())) return
 
 			const { props, hasExpressions } = parseJsxAttributes((node as any).attributes)
+			const children = serializeChildren((node as any).children ?? [])
 
 			state.addNode(proseType, {
 				componentName: name,
 				props: JSON.stringify(props),
 				hasExpressions,
+				children,
 			})
 		},
 	},
@@ -110,13 +176,24 @@ export const mdxComponentNode = $node('mdx_component', () => ({
 		runner: (state: SerializerState, node: PmNode) => {
 			const componentName = node.attrs.componentName as string
 			const props: Record<string, string> = JSON.parse(node.attrs.props as string)
+			const childrenText = (node.attrs.children as string) || ''
 			const attributes = serializePropsToAttributes(props)
 
-			state.addNode('mdxJsxFlowElement', undefined, undefined, {
-				name: componentName,
-				attributes,
-				children: [],
-			} as any)
+			if (childrenText.trim()) {
+				// Parse children markdown into proper mdast nodes so headings, lists, etc. are preserved
+				const childrenAst = remarkParser.parse(childrenText)
+				state.addNode('mdxJsxFlowElement', undefined, undefined, {
+					name: componentName,
+					attributes,
+					children: childrenAst.children,
+				} as any)
+			} else {
+				state.addNode('mdxJsxFlowElement', undefined, undefined, {
+					name: componentName,
+					attributes,
+					children: [],
+				} as any)
+			}
 		},
 	},
 }))
@@ -124,6 +201,7 @@ export const mdxComponentNode = $node('mdx_component', () => ({
 export interface InsertMdxComponentPayload {
 	componentName: string
 	props: Record<string, string>
+	children?: string
 }
 
 export const insertMdxComponentCommand = $command('insertMdxComponent', (ctx) => {
@@ -137,6 +215,7 @@ export const insertMdxComponentCommand = $command('insertMdxComponent', (ctx) =>
 				componentName: payload.componentName,
 				props: JSON.stringify(payload.props),
 				hasExpressions: false,
+				children: payload.children || '',
 			})
 
 			if (dispatch) {
@@ -156,27 +235,36 @@ export const mdxComponentView = $view(mdxComponentNode, () => {
 		container.setAttribute('data-cms-ui', '')
 		container.contentEditable = 'false'
 
-		let lastAttrs: { componentName: string; props: string; hasExpressions: boolean } | null = null
+		let lastAttrs: { componentName: string; props: string; hasExpressions: boolean; children: string } | null = null
 
 		const renderCard = (node: PmNode) => {
 			const componentName = node.attrs.componentName as string
 			const propsJson = node.attrs.props as string
 			const props: Record<string, string> = JSON.parse(propsJson)
 			const hasExpressions = node.attrs.hasExpressions as boolean
+			const children = (node.attrs.children as string) || ''
+			const definition = getComponentDefinition(manifest.value, componentName)
+			const hasDefaultSlot = definition?.slots?.includes('default') ?? false
+
+			lastAttrs = { componentName, props: propsJson, hasExpressions, children }
 
-			lastAttrs = { componentName, props: propsJson, hasExpressions }
+			const updateNodeAttrs = (update: Record<string, unknown>) => {
+				const pos = typeof getPos === 'function' ? getPos() : null
+				if (pos != null) {
+					const currentNode = view.state.doc.nodeAt(pos)
+					if (currentNode) {
+						const tr = view.state.tr.setNodeMarkup(pos, undefined, { ...currentNode.attrs, ...update })
+						view.dispatch(tr)
+					}
+				}
+			}
 
 			render(
 				<MdxBlockCard
 					componentName={componentName}
 					props={props}
 					hasExpressions={hasExpressions}
-					onEdit={(cursorPos) => {
-						const pos = typeof getPos === 'function' ? getPos() : null
-						if (pos != null) {
-							openMdxPropsEditor(pos, componentName, props, cursorPos)
-						}
-					}}
+					slotContent={children}
 					onRemove={() => {
 						const pos = typeof getPos === 'function' ? getPos() : null
 						if (pos != null) {
@@ -187,6 +275,12 @@ export const mdxComponentView = $view(mdxComponentNode, () => {
 							}
 						}
 					}}
+					onSlotContentChange={hasDefaultSlot
+						? (newContent: string) => updateNodeAttrs({ children: newContent })
+						: undefined}
+					onPropsChange={!hasExpressions
+						? (newProps: Record<string, string>) => updateNodeAttrs({ props: JSON.stringify(newProps) })
+						: undefined}
 				/>,
 				container,
 			)
@@ -197,11 +291,13 @@ export const mdxComponentView = $view(mdxComponentNode, () => {
 		return {
 			dom: container,
 			stopEvent: (event: Event) => {
+				const target = event.target as HTMLElement
+				// Allow all events on inline editors (textarea, input, contenteditable)
+				if (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT') return true
+				if (target.isContentEditable || target.closest('[contenteditable]')) return true
+				if (target.closest('[data-mdx-action="children"]') || target.closest('[data-mdx-action="props"]')) return true
 				if (event.type === 'mousedown' || event.type === 'click') {
-					const target = event.target as HTMLElement
-					if (target.closest('button') || target.closest('[data-mdx-action]')) {
-						return true
-					}
+					if (target.closest('button') || target.closest('[data-mdx-action]')) return true
 				}
 				return false
 			},
@@ -214,6 +310,7 @@ export const mdxComponentView = $view(mdxComponentNode, () => {
 					&& attrs.componentName === lastAttrs.componentName
 					&& attrs.props === lastAttrs.props
 					&& attrs.hasExpressions === lastAttrs.hasExpressions
+					&& attrs.children === lastAttrs.children
 				) {
 					return true
 				}

package/src/editor/milkdown-utils.ts

@@ -0,0 +1,174 @@
+import type { Editor } from '@milkdown/core'
+import { editorViewCtx } from '@milkdown/core'
+import type { EditorView } from '@milkdown/prose/view'
+
+export interface ActiveFormats {
+	bold: boolean
+	italic: boolean
+	strikethrough: boolean
+	link: boolean
+	linkHref: string | null
+	bulletList: boolean
+	orderedList: boolean
+	blockquote: boolean
+	heading: number | null
+}
+
+export const defaultActiveFormats: ActiveFormats = {
+	bold: false,
+	italic: false,
+	strikethrough: false,
+	link: false,
+	linkHref: null,
+	bulletList: false,
+	orderedList: false,
+	blockquote: false,
+	heading: null,
+}
+
+/**
+ * Detect active inline/block formats at the current selection in a ProseMirror view.
+ */
+export function getActiveFormats(view: EditorView): ActiveFormats {
+	const { state } = view
+	const { $from, from, to } = state.selection
+
+	// Check marks (inline formatting)
+	let bold = false
+	let italic = false
+	let strikethrough = false
+	let link = false
+	let linkHref: string | null = null
+
+	const marks = state.storedMarks || $from.marks()
+	for (const mark of marks) {
+		if (mark.type.name === 'strong') bold = true
+		if (mark.type.name === 'emphasis') italic = true
+		if (mark.type.name === 'strikethrough') strikethrough = true
+		if (mark.type.name === 'link') {
+			link = true
+			linkHref = mark.attrs.href as string
+		}
+	}
+
+	// Also check marks in the selection range
+	if (from !== to) {
+		state.doc.nodesBetween(from, to, (node) => {
+			if (node.marks) {
+				for (const mark of node.marks) {
+					if (mark.type.name === 'strong') bold = true
+					if (mark.type.name === 'emphasis') italic = true
+					if (mark.type.name === 'strikethrough') strikethrough = true
+					if (mark.type.name === 'link') {
+						link = true
+						linkHref = mark.attrs.href as string
+					}
+				}
+			}
+		})
+	}
+
+	// Check block types (lists, blockquote, heading)
+	let bulletList = false
+	let orderedList = false
+	let blockquote = false
+	let heading: number | null = null
+
+	for (let depth = $from.depth; depth > 0; depth--) {
+		const node = $from.node(depth)
+		if (node.type.name === 'bullet_list') bulletList = true
+		if (node.type.name === 'ordered_list') orderedList = true
+		if (node.type.name === 'blockquote') blockquote = true
+	}
+
+	if ($from.parent.type.name === 'heading') {
+		heading = $from.parent.attrs.level as number
+	}
+
+	return { bold, italic, strikethrough, link, linkHref, bulletList, orderedList, blockquote, heading }
+}
+
+/**
+ * Check whether the current selection is inside a list of the given type.
+ */
+export function isInListType(view: EditorView, listType: string): boolean {
+	const { $from } = view.state.selection
+	for (let depth = $from.depth; depth > 0; depth--) {
+		if ($from.node(depth).type.name === listType) return true
+	}
+	return false
+}
+
+/**
+ * Toggle a heading level at the current selection. If the selection is already
+ * a heading of the given level, convert it back to a paragraph.
+ */
+export function toggleHeading(view: EditorView, level: number): void {
+	const { state } = view
+	const headingType = state.schema.nodes.heading
+	const paragraphType = state.schema.nodes.paragraph
+	if (!headingType) return
+
+	const { $from } = state.selection
+	const isCurrentHeading = $from.parent.type.name === 'heading' && $from.parent.attrs.level === level
+	const targetType = isCurrentHeading ? paragraphType : headingType
+	const attrs = isCurrentHeading ? undefined : { level }
+	if (!targetType) return
+
+	const blockFrom = $from.before($from.depth)
+	const blockTo = state.selection.$to.after(state.selection.$to.depth)
+	view.dispatch(state.tr.setBlockType(blockFrom, blockTo, targetType, attrs))
+	view.focus()
+}
+
+function formatsEqual(a: ActiveFormats, b: ActiveFormats): boolean {
+	return a.bold === b.bold
+		&& a.italic === b.italic
+		&& a.strikethrough === b.strikethrough
+		&& a.link === b.link
+		&& a.linkHref === b.linkHref
+		&& a.bulletList === b.bulletList
+		&& a.orderedList === b.orderedList
+		&& a.blockquote === b.blockquote
+		&& a.heading === b.heading
+}
+
+/**
+ * Intercept dispatch on the editor view to track active formats via rAF
+ * debouncing. Fires the callback only when formats actually change.
+ * Returns a cleanup function that cancels the pending rAF.
+ */
+export function setupFormatTracking(editor: Editor, callback: (formats: ActiveFormats) => void): () => void {
+	let formatRaf = 0
+	let lastFormats: ActiveFormats = defaultActiveFormats
+
+	const update = () => {
+		try {
+			const view = editor.ctx.get(editorViewCtx)
+			const formats = getActiveFormats(view)
+			if (!formatsEqual(formats, lastFormats)) {
+				lastFormats = formats
+				callback(formats)
+			}
+		} catch { /* ignore */ }
+	}
+
+	try {
+		const view = editor.ctx.get(editorViewCtx)
+		const origDispatch = view.dispatch.bind(view)
+		view.dispatch = (tr) => {
+			origDispatch(tr)
+			if (tr.selectionSet || tr.docChanged) {
+				cancelAnimationFrame(formatRaf)
+				formatRaf = requestAnimationFrame(update)
+			}
+		}
+	} catch { /* ignore */ }
+
+	// Fire initial check
+	update()
+
+	return () => {
+		cancelAnimationFrame(formatRaf)
+	}
+}

package/src/editor/signals.ts

@@ -26,7 +26,6 @@ import type {
 	FieldDefinition,
 	MarkdownEditorState,
 	MarkdownPageEntry,
-	MdxPropsEditorState,
 	MediaItem,
 	MediaLibraryState,
 	PendingAttributeChange,
@@ -346,24 +345,8 @@ export const isMarkdownPreview = signal(false)
 // MDX Component Block State Signals
 // ============================================================================
 
-export const mdxPropsEditorState = signal<MdxPropsEditorState>({
-	isOpen: false,
-	nodePos: null,
-	componentName: null,
-	props: {},
-	cursorPos: null,
-})
-
 export const mdxComponentPickerOpen = signal(false)
 
-export function openMdxPropsEditor(nodePos: number, componentName: string, props: Record<string, string>, cursorPos: { x: number; y: number }): void {
-	mdxPropsEditorState.value = { isOpen: true, nodePos, componentName, props, cursorPos }
-}
-
-export function closeMdxPropsEditor(): void {
-	mdxPropsEditorState.value = { isOpen: false, nodePos: null, componentName: null, props: {}, cursorPos: null }
-}
-
 // ============================================================================
 // Reference Picker State Signals
 // ============================================================================
@@ -825,7 +808,7 @@ export function setAIStreamingContent(content: string | null): void {
 }
 
 export function setAIError(error: string | null): void {
-	aiState.value = { ...aiState.value, error: error }
+	aiState.value = { ...aiState.value, error }
 }
 
 export function resetAIState(): void {

package/src/editor/types.ts

@@ -698,16 +698,6 @@ export type UndoAction =
 // MDX Component Block Types
 // ============================================================================
 
-export interface MdxPropsEditorState {
-	isOpen: boolean
-	/** ProseMirror document position of the node being edited */
-	nodePos: number | null
-	componentName: string | null
-	props: Record<string, string>
-	/** Position for the floating editor panel */
-	cursorPos: { x: number; y: number } | null
-}
-
 declare global {
 	interface Window {
 		NuaCmsConfig?: Partial<CmsConfig>

package/src/html-processor.ts

@@ -1,6 +1,6 @@
 import { type HTMLElement as ParsedHTMLElement, parse } from 'node-html-parser'
 import { processSeoFromHtml } from './seo-processor'
-import { enhanceManifestWithSourceSnippets } from './source-finder'
+
 import { extractBackgroundImageClasses, extractColorClasses, extractTextStyleClasses } from './tailwind-colors'
 import type {
 	Attribute,
@@ -90,6 +90,8 @@ export interface ProcessHtmlResult {
 	collectionWrapperId?: string
 	/** Extracted SEO data from the page */
 	seo?: PageSeoData
+	/** Collection definitions passed through for deferred enhancement */
+	collectionDefinitions?: Record<string, CollectionDefinition>
 }
 
 /**
@@ -440,7 +442,10 @@ export async function processHtml(
 		let foundWrapper = false
 
 		// 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
 
@@ -1023,10 +1028,6 @@ export async function processHtml(
 		node.removeAttribute('data-astro-source-line')
 	})
 
-	// Enhance manifest entries with actual source snippets from source files
-	// This allows the CMS to match and replace dynamic content in source files
-	const enhancedEntries = await enhanceManifestWithSourceSnippets(entries, collectionDefinitions)
-
 	// Get the current HTML for SEO processing
 	let finalHtml = root.toString()
 
@@ -1048,7 +1049,7 @@ export async function processHtml(
 
 		// If title was marked with CMS ID, add it to entries
 		if (seoResult.titleId && seo.title) {
-			enhancedEntries[seoResult.titleId] = {
+			entries[seoResult.titleId] = {
 				id: seoResult.titleId,
 				tag: 'title',
 				text: seo.title.content,
@@ -1061,10 +1062,11 @@ export async function processHtml(
 
 	return {
 		html: finalHtml,
-		entries: enhancedEntries,
+		entries,
 		components,
 		collectionWrapperId,
 		seo,
+		collectionDefinitions,
 	}
 }
 

package/src/index.ts

@@ -112,6 +112,9 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 		name: '@nuasite/cms',
 		hooks: {
 			'astro:config:setup': async ({ updateConfig, command, injectScript, logger }) => {
+				// CMS is only needed during dev — skip all setup during build
+				if (command !== 'dev') return
+
 				// --- CMS Marker setup ---
 				idCounter.value = 0
 				manifestWriter.reset()
@@ -295,21 +298,8 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 			},
 
 			'astro:build:done': async ({ dir, logger }) => {
-				if (generateManifest) {
-					await processBuildOutput(dir, markerConfig, manifestWriter, idCounter, logger)
-				}
-
 				// Merge CMS-managed redirects (src/_redirects) into dist/_redirects
 				await mergeRedirects(dir, logger)
-
-				const errorCollector = getErrorCollector()
-				if (errorCollector.hasWarnings()) {
-					const warnings = errorCollector.getWarnings()
-					logger.warn(`${warnings.length} warning(s) during processing:`)
-					for (const { context, message } of warnings) {
-						logger.warn(`  - ${context}: ${message}`)
-					}
-				}
 			},
 		},
 	}

package/src/source-finder/cache.ts

@@ -18,6 +18,9 @@ const textSearchIndex: SearchIndexEntry[] = []
 const imageSearchIndex: ImageIndexEntry[] = []
 let searchIndexInitialized = false
 
+/** Files that changed since last indexing — tracked by Vite watcher */
+const dirtyFiles = new Set<string>()
+
 // ============================================================================
 // Cache Access Functions
 // ============================================================================
@@ -58,6 +61,49 @@ export function addToImageSearchIndex(entry: ImageIndexEntry): void {
 	imageSearchIndex.push(entry)
 }
 
+// ============================================================================
+// Dirty File Tracking (incremental re-indexing)
+// ============================================================================
+
+/**
+ * Mark a file as dirty so its index entries are refreshed on next page load.
+ * Called by the Vite file watcher when source files change.
+ * @param absPath - Absolute path to the changed file
+ */
+export function markFileDirty(absPath: string): void {
+	dirtyFiles.add(absPath)
+	// Also evict the parsed file cache so it's re-read from disk
+	parsedFileCache.delete(absPath)
+}
+
+export function getDirtyFiles(): Set<string> {
+	return dirtyFiles
+}
+
+export function clearDirtyFiles(): void {
+	dirtyFiles.clear()
+}
+
+/**
+ * Remove all index entries for a specific file (by relative path).
+ * Used before re-indexing a changed file to avoid duplicates.
+ */
+export function removeFileFromIndexes(relFile: string): void {
+	filterInPlace(textSearchIndex, (e) => e.file !== relFile)
+	filterInPlace(imageSearchIndex, (e) => e.file !== relFile)
+}
+
+/** Remove non-matching elements in-place (single pass, no per-element splice). */
+function filterInPlace<T>(arr: T[], keep: (item: T) => boolean): void {
+	let write = 0
+	for (const item of arr) {
+		if (keep(item)) {
+			arr[write++] = item
+		}
+	}
+	arr.length = write
+}
+
 // ============================================================================
 // Cache Clear Function
 // ============================================================================
@@ -69,6 +115,7 @@ export function clearSourceFinderCache(): void {
 	parsedFileCache.clear()
 	directoryCache.clear()
 	markdownFileCache.clear()
+	dirtyFiles.clear()
 	// Clear arrays in-place to avoid stale references from consumers
 	textSearchIndex.length = 0
 	imageSearchIndex.length = 0