@nuasite/cms 0.30.0 → 0.31.0

package/package.json

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

package/src/collection-scanner.ts

@@ -325,12 +325,41 @@ function buildCollectionDefinition(
  */
 async function scanCollection(collectionPath: string, collectionName: string, contentDir: string): Promise<CollectionDefinition | null> {
 	try {
-		const entries = await fs.readdir(collectionPath, { withFileTypes: true })
-		const markdownFiles = entries.filter(e => e.isFile() && (e.name.endsWith('.md') || e.name.endsWith('.mdx')))
+		const dirEntries = await fs.readdir(collectionPath, { withFileTypes: true })
 
-		if (markdownFiles.length === 0) return null
+		const sources: Array<{ slug: string; relPath: string }> = []
+		const takenSlugs = new Set<string>()
 
-		const hasMd = markdownFiles.some(f => f.name.endsWith('.md'))
+		for (const entry of dirEntries) {
+			if (!entry.isFile()) continue
+			if (!entry.name.endsWith('.md') && !entry.name.endsWith('.mdx')) continue
+			const slug = entry.name.replace(/\.(md|mdx)$/, '')
+			sources.push({ slug, relPath: entry.name })
+			takenSlugs.add(slug)
+		}
+
+		// Hugo-style layout: <slug>/index.md(x). Flat files win on slug conflict.
+		const subdirs = dirEntries.filter(e => e.isDirectory() && !e.name.startsWith('_') && !e.name.startsWith('.'))
+		const indexLookups = await Promise.all(subdirs.map(async dir => {
+			if (takenSlugs.has(dir.name)) return null
+			for (const ext of ['md', 'mdx'] as const) {
+				const relPath = path.join(dir.name, `index.${ext}`)
+				try {
+					await fs.access(path.join(collectionPath, relPath))
+					return { slug: dir.name, relPath }
+				} catch {
+					// try next extension
+				}
+			}
+			return null
+		}))
+		for (const entry of indexLookups) {
+			if (entry) sources.push(entry)
+		}
+
+		if (sources.length === 0) return null
+
+		const hasMd = sources.some(s => s.relPath.endsWith('.md'))
 		const fileExtension: 'md' | 'mdx' = hasMd ? 'md' : 'mdx'
 
 		const fieldMap = new Map<string, FieldObservation>()
@@ -339,11 +368,11 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 		let hasDraft = false
 
 		const fileContents = await Promise.all(
-			markdownFiles.map(file => fs.readFile(path.join(collectionPath, file.name), 'utf-8')),
+			sources.map(s => fs.readFile(path.join(collectionPath, s.relPath), 'utf-8')),
 		)
 
-		for (let i = 0; i < markdownFiles.length; i++) {
-			const file = markdownFiles[i]!
+		for (let i = 0; i < sources.length; i++) {
+			const source = sources[i]!
 			const content = fileContents[i]!
 			const frontmatter = parseFrontmatter(content)
 
@@ -354,10 +383,9 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 				}
 			}
 
-			const slug = file.name.replace(/\.(md|mdx)$/, '')
 			const entryInfo: CollectionEntryInfo = {
-				slug,
-				sourcePath: path.join(contentDir, collectionName, file.name),
+				slug: source.slug,
+				sourcePath: path.join(contentDir, collectionName, source.relPath),
 			}
 			if (frontmatter) {
 				if (typeof frontmatter.title === 'string') {
@@ -373,10 +401,10 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 			if (!frontmatter) continue
 
 			if (frontmatter.draft === true) hasDraft = true
-			collectFieldObservations(fieldMap, frontmatter, markdownFiles.length)
+			collectFieldObservations(fieldMap, frontmatter, sources.length)
 		}
 
-		const def = buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, markdownFiles.length, {
+		const def = buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
 			supportsDraft: hasDraft,
 			fileExtension,
 		})
@@ -886,42 +914,76 @@ function detectDerivedHrefFields(collections: Record<string, CollectionDefinitio
  */
 async function scanDataCollection(collectionPath: string, collectionName: string, contentDir: string): Promise<CollectionDefinition | null> {
 	try {
-		const entries = await fs.readdir(collectionPath, { withFileTypes: true })
-		const dataFiles = entries.filter(e => e.isFile() && (e.name.endsWith('.json') || e.name.endsWith('.yaml') || e.name.endsWith('.yml')))
-		if (dataFiles.length === 0) return null
+		const dirEntries = await fs.readdir(collectionPath, { withFileTypes: true })
+
+		const sources: Array<{ slug: string; relPath: string }> = []
+		const takenSlugs = new Set<string>()
+
+		for (const entry of dirEntries) {
+			if (!entry.isFile()) continue
+			if (!entry.name.endsWith('.json') && !entry.name.endsWith('.yaml') && !entry.name.endsWith('.yml')) continue
+			const slug = entry.name.replace(/\.(json|ya?ml)$/, '')
+			sources.push({ slug, relPath: entry.name })
+			takenSlugs.add(slug)
+		}
+
+		// Hugo-style layout: <slug>/index.{json,yaml,yml}. Flat files win on slug conflict.
+		const subdirs = dirEntries.filter(e => e.isDirectory() && !e.name.startsWith('_') && !e.name.startsWith('.'))
+		const indexLookups = await Promise.all(subdirs.map(async dir => {
+			if (takenSlugs.has(dir.name)) return null
+			for (const indexExt of ['json', 'yaml', 'yml'] as const) {
+				const relPath = path.join(dir.name, `index.${indexExt}`)
+				try {
+					await fs.access(path.join(collectionPath, relPath))
+					return { slug: dir.name, relPath }
+				} catch {
+					// try next extension
+				}
+			}
+			return null
+		}))
+		for (const entry of indexLookups) {
+			if (entry) sources.push(entry)
+		}
+
+		if (sources.length === 0) return null
 
 		const fieldMap = new Map<string, FieldObservation>()
 		const entryInfos: CollectionEntryInfo[] = []
-		const ext = dataFiles.some(file => file.name.endsWith('.json'))
+		const ext = sources.some(s => s.relPath.endsWith('.json'))
 			? 'json' as const
-			: dataFiles.some(file => file.name.endsWith('.yaml'))
+			: sources.some(s => s.relPath.endsWith('.yaml'))
 			? 'yaml' as const
 			: 'yml' as const
 
 		const fileContents = await Promise.all(
-			dataFiles.map(file => fs.readFile(path.join(collectionPath, file.name), 'utf-8').catch(() => null)),
+			sources.map(s => fs.readFile(path.join(collectionPath, s.relPath), 'utf-8').catch(() => null)),
 		)
 
-		for (let i = 0; i < dataFiles.length; i++) {
-			const file = dataFiles[i]!
+		for (let i = 0; i < sources.length; i++) {
+			const source = sources[i]!
 			const raw = fileContents[i]!
 			if (raw === null) continue
 			let data: Record<string, unknown> | null = null
 			try {
-				data = file.name.endsWith('.json') ? JSON.parse(raw) : parseYaml(raw) as Record<string, unknown>
+				data = source.relPath.endsWith('.json') ? JSON.parse(raw) : parseYaml(raw) as Record<string, unknown>
 			} catch {
 				continue
 			}
 			if (!data || typeof data !== 'object') continue
 
-			const slug = file.name.replace(/\.(json|ya?ml)$/, '')
 			const title = typeof data.name === 'string' ? data.name : typeof data.title === 'string' ? data.title : undefined
-			entryInfos.push({ slug, title, sourcePath: path.join(contentDir, collectionName, file.name), data })
+			entryInfos.push({
+				slug: source.slug,
+				title,
+				sourcePath: path.join(contentDir, collectionName, source.relPath),
+				data,
+			})
 
-			collectFieldObservations(fieldMap, data, dataFiles.length)
+			collectFieldObservations(fieldMap, data, sources.length)
 		}
 
-		return buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, dataFiles.length, {
+		return buildCollectionDefinition(collectionName, contentDir, fieldMap, entryInfos, sources.length, {
 			type: 'data',
 			fileExtension: ext,
 		})

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
+import { getCaretRangeFromPoint } from '../dom'
 import * as signals from '../signals'
 
 export interface ImageOverlayProps {
@@ -122,24 +123,12 @@ export function ImageOverlay({ visible, rect, element, cmsId }: ImageOverlayProp
 				if (el instanceof HTMLElement && el.contentEditable === 'true') {
 					e.preventDefault()
 					e.stopPropagation()
-					// Focus the element and place cursor at click position
 					el.focus()
-					// Try to place cursor at the click position using caretPositionFromPoint
-					const caretPos = document.caretPositionFromPoint?.(e.clientX, e.clientY)
-						?? (document as { caretRangeFromPoint?: (x: number, y: number) => Range | null }).caretRangeFromPoint?.(e.clientX, e.clientY)
-					if (caretPos) {
+					const range = getCaretRangeFromPoint(e.clientX, e.clientY)
+					if (range) {
 						const selection = window.getSelection()
 						if (selection) {
 							selection.removeAllRanges()
-							const range = document.createRange()
-							if ('offsetNode' in caretPos) {
-								// caretPositionFromPoint result
-								range.setStart(caretPos.offsetNode, caretPos.offset)
-							} else {
-								// caretRangeFromPoint result (Range)
-								range.setStart(caretPos.startContainer, caretPos.startOffset)
-							}
-							range.collapse(true)
 							selection.addRange(range)
 						}
 					}

package/src/editor/components/plain-text-chip-utils.ts

@@ -0,0 +1,14 @@
+import type { ManifestEntry } from '../../types'
+
+export function describeSource(entry: ManifestEntry | undefined): string {
+	if (!entry) return 'no formatting'
+	if (entry.collectionName) {
+		return `${entry.collectionName} collection field`
+	}
+	if (entry.variableName) {
+		return `${entry.variableName} prop`
+	}
+	// Entry marked non-styleable but missing both collection and variable context —
+	// visible fallback so the edge case surfaces instead of masquerading as a missing entry.
+	return 'unknown source'
+}

package/src/editor/components/plain-text-chip.tsx

@@ -0,0 +1,61 @@
+import type { ManifestEntry } from '../../types'
+import { Z_INDEX } from '../constants'
+import { positionFloatingChip } from '../dom'
+import { describeSource } from './plain-text-chip-utils'
+
+export interface PlainTextChipProps {
+	visible: boolean
+	rect: DOMRect | null
+	entry: ManifestEntry | undefined
+}
+
+export function PlainTextChip({ visible, rect, entry }: PlainTextChipProps) {
+	if (!visible || !rect) {
+		return null
+	}
+
+	const maxChipWidth = 280
+	const { left, top } = positionFloatingChip(rect, { width: maxChipWidth, height: 28 })
+
+	const source = describeSource(entry)
+
+	return (
+		<div
+			data-cms-ui
+			onMouseDown={(e) => {
+				e.preventDefault()
+				e.stopPropagation()
+			}}
+			onClick={(e) => e.stopPropagation()}
+			style={{
+				position: 'fixed',
+				left: `${left}px`,
+				top: `${top}px`,
+				zIndex: Z_INDEX.MODAL,
+				fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+				fontSize: '11px',
+				maxWidth: `${maxChipWidth}px`,
+			}}
+		>
+			<div class="flex items-center gap-2 px-3 py-1.5 bg-cms-dark border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)] rounded-cms-xl text-white/80 min-w-0">
+				<svg
+					class="shrink-0"
+					width="12"
+					height="12"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M4 7V4h16v3" />
+					<path d="M9 20h6" />
+					<path d="M12 4v16" />
+				</svg>
+				<span class="truncate" title={`Plain text · ${source}`}>Plain text · {source}</span>
+			</div>
+		</div>
+	)
+}

package/src/editor/components/text-style-toolbar.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { CSS, Z_INDEX } from '../constants'
+import { positionFloatingChip } from '../dom'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import {
@@ -177,21 +178,7 @@ export function TextStyleToolbar({ visible, rect, element, onStyleChange }: Text
 		return null
 	}
 
-	// Position toolbar above the selection
-	const toolbarHeight = 44
-	const toolbarWidth = 320
-	let left = rect.left + rect.width / 2 - toolbarWidth / 2
-	let top = rect.top - toolbarHeight - 8
-
-	const padding = 10
-	const maxLeft = window.innerWidth - toolbarWidth - padding
-	const minLeft = padding
-
-	left = Math.max(minLeft, Math.min(left, maxLeft))
-
-	if (top < padding) {
-		top = rect.bottom + 8
-	}
+	const { left, top } = positionFloatingChip(rect, { width: 320, height: 44 })
 
 	return (
 		<div

package/src/editor/dom.ts

@@ -420,3 +420,40 @@ function preventInteraction(event: Event): void {
 		event.stopImmediatePropagation()
 	}
 }
+
+// Chromium exposes `caretRangeFromPoint`; Firefox exposes `caretPositionFromPoint`.
+// Neither is universally supported, hence the fallback cascade.
+export function getCaretRangeFromPoint(x: number, y: number): Range | null {
+	const doc = document as Document & {
+		caretRangeFromPoint?: (x: number, y: number) => Range | null
+		caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null
+	}
+	if (typeof doc.caretRangeFromPoint === 'function') {
+		return doc.caretRangeFromPoint(x, y)
+	}
+	if (typeof doc.caretPositionFromPoint === 'function') {
+		const pos = doc.caretPositionFromPoint(x, y)
+		if (pos) {
+			const range = document.createRange()
+			range.setStart(pos.offsetNode, pos.offset)
+			range.collapse(true)
+			return range
+		}
+	}
+	return null
+}
+
+export function positionFloatingChip(
+	rect: DOMRect,
+	opts: { width: number; height: number; padding?: number; gap?: number },
+): { left: number; top: number } {
+	const { width, height } = opts
+	const padding = opts.padding ?? 10
+	const gap = opts.gap ?? 8
+	let left = rect.left + rect.width / 2 - width / 2
+	let top = rect.top - height - gap
+	const maxLeft = window.innerWidth - width - padding
+	left = Math.max(padding, Math.min(left, maxLeft))
+	if (top < padding) top = rect.bottom + gap
+	return { left, top }
+}

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/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}