@nuasite/cms 0.41.0 → 0.42.0

package/src/editor/styled-list-plugin.ts

@@ -0,0 +1,233 @@
+import { remarkStringifyOptionsCtx } from '@milkdown/core'
+import { bulletListAttr, bulletListSchema } from '@milkdown/preset-commonmark'
+import type { Node as PmNode } from '@milkdown/prose/model'
+import type { Command } from '@milkdown/prose/state'
+import type { MarkdownNode, SerializerState } from '@milkdown/transformer'
+import { $command, $remark } from '@milkdown/utils'
+
+const LIST_DIRECTIVE_NAME = 'list'
+
+function normalizeListStyleClass(value: unknown): string | null {
+	if (typeof value !== 'string') return null
+	const [className] = value.trim().split(/\s+/)
+	return className || null
+}
+
+function getDirectiveClass(node: any): string | null {
+	const className = node.attributes?.class
+	return normalizeListStyleClass(className)
+}
+
+function isParagraphText(node: any, value?: string): boolean {
+	if (node?.type !== 'paragraph' || node.children?.length !== 1) return false
+	const text = node.children[0]
+	if (text?.type !== 'text') return false
+	return value === undefined ? true : text.value === value
+}
+
+function parseOpeningDirective(node: any): string | null {
+	if (!isParagraphText(node)) return null
+	const value = node.children[0].value
+	const match = /^:::list\{\.([^}\s]+)\}$/.exec(value)
+	return match?.[1] ?? null
+}
+
+function stripRawClosingDirective(listNode: any, siblings: any[], indexAfterList: number): boolean {
+	if (isParagraphText(siblings[indexAfterList], ':::')) {
+		siblings.splice(indexAfterList, 1)
+		return true
+	}
+
+	const lastItem = listNode.children?.at(-1)
+	const lastBlock = lastItem?.children?.at(-1)
+	if (!lastBlock || lastBlock.type !== 'paragraph') return false
+	const lastText = lastBlock.children?.at(-1)
+	if (lastText?.type !== 'text' || typeof lastText.value !== 'string') return false
+
+	if (lastText.value === ':::') {
+		lastBlock.children.pop()
+	} else if (lastText.value.endsWith('\n:::')) {
+		lastText.value = lastText.value.slice(0, -4)
+	} else {
+		return false
+	}
+
+	if (lastBlock.children.length === 0) lastItem.children.pop()
+	return true
+}
+
+function transformListDirectives(parent: any): void {
+	if (!Array.isArray(parent?.children)) return
+
+	for (let index = 0; index < parent.children.length; index++) {
+		const child = parent.children[index]
+
+		if (child?.type === 'containerDirective' && child.name === LIST_DIRECTIVE_NAME) {
+			const className = getDirectiveClass(child)
+			const list = child.children?.length === 1 ? child.children[0] : null
+			if (className && list?.type === 'list' && !list.ordered) {
+				parent.children[index] = {
+					...list,
+					listStyle: className,
+				}
+				continue
+			}
+		}
+
+		const rawClassName = parseOpeningDirective(child)
+		const rawList = parent.children[index + 1]
+		if (rawClassName && rawList?.type === 'list' && !rawList.ordered && stripRawClosingDirective(rawList, parent.children, index + 2)) {
+			parent.children.splice(index, 1)
+			parent.children[index] = {
+				...rawList,
+				listStyle: rawClassName,
+			}
+			continue
+		}
+
+		transformListDirectives(child)
+	}
+}
+
+function listDirectiveHandler(node: any, _parent: any, state: any, info: any): string {
+	const className = normalizeListStyleClass(node.attributes?.class)
+	const children = state.containerFlow(node, info)
+	return `:::list${className ? `{.${className}}` : ''}\n${children}\n:::`
+}
+
+function remarkListDirective(this: { data: () => any }) {
+	const data = this.data()
+	const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = [])
+	toMarkdownExtensions.push({
+		handlers: {
+			containerDirective: listDirectiveHandler,
+		},
+	})
+
+	return (tree: any) => {
+		transformListDirectives(tree)
+	}
+}
+
+export const remarkListDirectivePlugin: any = $remark('remarkListDirective', () => remarkListDirective as any)
+
+export const styledBulletListSchema = bulletListSchema.extendSchema((prev) => (ctx) => {
+	const schema = prev(ctx)
+	return {
+		...schema,
+		attrs: {
+			...schema.attrs,
+			listStyle: {
+				default: null,
+				validate: 'string|null',
+			},
+		},
+		parseDOM: [
+			{
+				tag: 'ul',
+				getAttrs: (dom) => {
+					const previousAttrs = schema.parseDOM?.[0]?.getAttrs?.(dom) ?? {}
+					const className = dom instanceof HTMLElement ? normalizeListStyleClass(dom.className) : null
+					return {
+						...(typeof previousAttrs === 'object' ? previousAttrs : {}),
+						listStyle: className,
+					}
+				},
+			},
+		],
+		toDOM: (node: PmNode) => {
+			const className = normalizeListStyleClass(node.attrs.listStyle)
+			return [
+				'ul',
+				{
+					...ctx.get(bulletListAttr.key)(node),
+					...(className ? { class: className } : {}),
+					'data-spread': node.attrs.spread,
+				},
+				0,
+			]
+		},
+		parseMarkdown: {
+			match: ({ type, ordered }: MarkdownNode & { ordered?: boolean }) => type === 'list' && !ordered,
+			runner: (state, node: MarkdownNode & { spread?: boolean; listStyle?: string }, type) => {
+				state.openNode(type, {
+					spread: node.spread ?? false,
+					listStyle: normalizeListStyleClass(node.listStyle),
+				}).next(node.children).closeNode()
+			},
+		},
+		toMarkdown: {
+			match: (node: PmNode) => node.type.name === 'bullet_list',
+			runner: (state: SerializerState, node: PmNode) => {
+				const listStyle = normalizeListStyleClass(node.attrs.listStyle)
+				if (listStyle) {
+					state.openNode('containerDirective', undefined, {
+						name: LIST_DIRECTIVE_NAME,
+						attributes: { class: listStyle },
+					})
+				}
+
+				state
+					.openNode('list', undefined, {
+						ordered: false,
+						spread: node.attrs.spread === true,
+					})
+					.next(node.content)
+					.closeNode()
+
+				if (listStyle) state.closeNode()
+			},
+		},
+	}
+})
+
+export const setBulletListStyleCommand = $command('SetBulletListStyle', () => {
+	return (listStyle?: string | null): Command => {
+		return (state, dispatch) => {
+			const bulletListType = state.schema.nodes.bullet_list
+			if (!bulletListType) return false
+
+			const nextStyle = normalizeListStyleClass(listStyle)
+			const positions = new Map<number, PmNode>()
+			const { from, to, $from } = state.selection
+
+			for (let depth = $from.depth; depth > 0; depth--) {
+				const node = $from.node(depth)
+				if (node.type === bulletListType) {
+					positions.set($from.before(depth), node)
+					break
+				}
+			}
+
+			state.doc.nodesBetween(from, to, (node, pos) => {
+				if (node.type === bulletListType) positions.set(pos, node)
+			})
+
+			if (positions.size === 0) return false
+
+			if (dispatch) {
+				let tr = state.tr
+				for (const [pos, node] of positions) {
+					tr = tr.setNodeMarkup(pos, undefined, {
+						...node.attrs,
+						listStyle: nextStyle,
+					})
+				}
+				dispatch(tr)
+			}
+			return true
+		}
+	}
+})
+
+export const styledListPlugin = [
+	remarkListDirectivePlugin,
+	styledBulletListSchema,
+	setBulletListStyleCommand,
+	(ctx: any) => () => {
+		ctx.update(remarkStringifyOptionsCtx, (options: any) => ({
+			...options,
+			bullet: '-',
+		}))
+	},
+].flat()

package/src/editor/types.ts

@@ -52,6 +52,9 @@ export interface CmsConfig {
 	theme?: CmsThemeConfig
 	themePreset?: CmsThemePreset
 	features?: CmsFeatures
+	listStyles?: Array<{ label: string; class: string }>
+	/** Open the entry editor's metadata (frontmatter) panel by default instead of collapsed. */
+	openMetadataByDefault?: boolean
 	/** Maximum upload size in bytes for media uploads (injected by the integration). */
 	maxUploadSize?: number
 	/**

package/src/handlers/markdown-ops.ts

@@ -1,7 +1,9 @@
+import type { Dirent } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import yaml from 'yaml'
 import { getProjectRoot } from '../config'
+import { parseContentConfig } from '../content-config-ast'
 import type { ComponentDefinition } from '../types'
 import { acquireFileLock, isNodeError, relativeImportPath, resolveAndValidatePath, slugify } from '../utils'
 
@@ -149,7 +151,10 @@ export async function handleCreateMarkdown(
 		return { success: false, error: `Invalid file extension "${ext}". Allowed: ${allowedExtensions.join(', ')}` }
 	}
 	const isData = ext === 'json' || ext === 'yaml' || ext === 'yml'
-	const filePath = `src/content/${collection}/${normalizedSlug}.${ext}`
+	const layout = isData ? 'flat' : await detectCollectionMarkdownLayout(collection)
+	const filePath = layout === 'index'
+		? `src/content/${collection}/${normalizedSlug}/index.${ext}`
+		: `src/content/${collection}/${normalizedSlug}.${ext}`
 	const fullPath = resolveAndValidatePath(filePath)
 
 	let fileContent: string
@@ -275,6 +280,75 @@ function isDataFile(filePath: string): boolean {
 	return filePath.endsWith('.json') || filePath.endsWith('.yaml') || filePath.endsWith('.yml')
 }
 
+type MarkdownCollectionLayout = 'flat' | 'index'
+
+async function detectCollectionMarkdownLayout(collection: string): Promise<MarkdownCollectionLayout> {
+	const existingLayout = await inferLayoutFromExistingEntries(collection)
+	if (existingLayout) return existingLayout
+
+	const configLayout = await inferLayoutFromContentConfig(collection)
+	if (configLayout) return configLayout
+
+	return 'flat'
+}
+
+async function inferLayoutFromExistingEntries(collection: string): Promise<MarkdownCollectionLayout | null> {
+	const collectionPath = path.join(getProjectRoot(), 'src', 'content', collection)
+
+	let dirEntries: Dirent[]
+	try {
+		dirEntries = await fs.readdir(collectionPath, { withFileTypes: true })
+	} catch {
+		return null
+	}
+
+	let flatCount = 0
+	let indexCount = 0
+	const flatSlugs = new Set<string>()
+
+	for (const entry of dirEntries) {
+		if (!entry.isFile()) continue
+		const match = entry.name.match(/^(.+)\.(md|mdx)$/)
+		if (!match) continue
+		flatCount++
+		flatSlugs.add(match[1]!)
+	}
+
+	const subdirs = dirEntries.filter(entry => entry.isDirectory() && !entry.name.startsWith('_') && !entry.name.startsWith('.'))
+	const indexLookups = await Promise.all(subdirs.map(async dir => {
+		if (flatSlugs.has(dir.name)) return false
+		for (const ext of ['md', 'mdx'] as const) {
+			try {
+				await fs.access(path.join(collectionPath, dir.name, `index.${ext}`))
+				return true
+			} catch {
+				// try next extension
+			}
+		}
+		return false
+	}))
+	indexCount = indexLookups.filter(Boolean).length
+
+	if (indexCount > flatCount) return 'index'
+	if (flatCount > 0) return 'flat'
+	return null
+}
+
+async function inferLayoutFromContentConfig(collection: string): Promise<MarkdownCollectionLayout | null> {
+	try {
+		const parsed = await parseContentConfig()
+		const pattern = parsed.get(collection)?.loaderPattern
+		if (!pattern) return null
+		return isIndexStyleGlobPattern(pattern) ? 'index' : 'flat'
+	} catch {
+		return null
+	}
+}
+
+function isIndexStyleGlobPattern(pattern: string): boolean {
+	return pattern.includes('index.{') || pattern.includes('*/index') || pattern.includes('**/index')
+}
+
 function parseFrontmatter(raw: string): { frontmatter: Record<string, unknown>; content: string } {
 	const trimmed = raw.trimStart()
 	if (!trimmed.startsWith('---')) {

package/src/html-processor.ts

@@ -1,4 +1,6 @@
 import { type HTMLElement as ParsedHTMLElement, parse } from 'node-html-parser'
+import path from 'node:path'
+import { getProjectRoot } from './config'
 import { processSeoFromHtml } from './seo-processor'
 
 import { extractBackgroundImageClasses, extractColorClasses, extractTextStyleClasses } from './tailwind-colors'
@@ -283,6 +285,7 @@ export async function processHtml(
 	const components: Record<string, ComponentInstance> = {}
 	const sourceLocationMap = new Map<string, { file: string; line: number }>()
 	const markedComponentRoots = new Set<HTMLNode>()
+	const markdownRegionPaths = new Map<string, string>()
 	let collectionWrapperId: string | undefined
 	const componentCountPerParent = new Map<string, Map<string, number>>()
 
@@ -462,6 +465,7 @@ export async function processHtml(
 	// Collection wrapper detection pass: find the element that wraps markdown content
 	// This needs to run BEFORE image marking so we can skip images inside markdown
 	let markdownWrapperNode: HTMLNode | null = null
+	const markdownWrapperNodes = new Set<HTMLNode>()
 
 	// Three strategies in priority order:
 	// 0. Rehype marker: the rehype-cms-marker plugin marks the first rendered element
@@ -473,16 +477,24 @@ export async function processHtml(
 		let foundWrapper = false
 
 		// Strategy 0: Rehype marker — most reliable
-		const markerEl = root.querySelector('[data-cms-markdown-content]')
-		if (markerEl) {
+		const markerEls = root.querySelectorAll('[data-cms-markdown-content]')
+		for (const markerEl of markerEls) {
+			const markerPath = markerEl.getAttribute('data-cms-markdown-content') ?? ''
 			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
+				if (markerPath) {
+					const relPath = path.relative(getProjectRoot(), markerPath).split(path.sep).join('/').replace(/\\/g, '/')
+					markdownRegionPaths.set(id, relPath)
+				}
+				if (!collectionWrapperId) {
+					collectionWrapperId = id
+					markdownWrapperNode = parent
+				}
+				markdownWrapperNodes.add(parent)
 				foundWrapper = true
 			}
 		}
@@ -517,6 +529,7 @@ export async function processHtml(
 					node.setAttribute('data-cms-markdown', 'true')
 					collectionWrapperId = id
 					markdownWrapperNode = node
+					markdownWrapperNodes.add(node)
 					foundWrapper = true
 				}
 			}
@@ -584,6 +597,7 @@ export async function processHtml(
 					bestWrapper.setAttribute('data-cms-markdown', 'true')
 					collectionWrapperId = id
 					markdownWrapperNode = bestWrapper
+					markdownWrapperNodes.add(bestWrapper)
 					foundWrapper = true
 				}
 			}
@@ -635,6 +649,7 @@ export async function processHtml(
 						best.node.setAttribute('data-cms-markdown', 'true')
 						collectionWrapperId = id
 						markdownWrapperNode = best.node
+						markdownWrapperNodes.add(best.node)
 						foundWrapper = true
 					}
 				}
@@ -644,10 +659,10 @@ export async function processHtml(
 
 	// Helper function to check if a node is inside the markdown wrapper
 	const isInsideMarkdownWrapper = (node: HTMLNode): boolean => {
-		if (!markdownWrapperNode) return false
+		if (!markdownWrapperNode && markdownWrapperNodes.size === 0) return false
 		let current = node.parentNode as HTMLNode | null
 		while (current) {
-			if (current === markdownWrapperNode) return true
+			if (current === markdownWrapperNode || markdownWrapperNodes.has(current)) return true
 			current = current.parentNode as HTMLNode | null
 		}
 		return false
@@ -998,7 +1013,7 @@ export async function processHtml(
 				// Add collection info for the wrapper entry
 				collectionName: isCollectionWrapper ? collectionInfo?.name : undefined,
 				collectionSlug: isCollectionWrapper ? collectionInfo?.slug : undefined,
-				contentPath: isCollectionWrapper ? collectionInfo?.contentPath : undefined,
+				contentPath: markdownRegionPaths.get(id) ?? (isCollectionWrapper ? collectionInfo?.contentPath : undefined),
 				// Robustness fields
 				stableId,
 				// Image metadata for image entries

package/src/index.ts

@@ -34,6 +34,9 @@ export interface NuaCmsOptions extends CmsMarkerOptions {
 		theme?: Record<string, string>
 		themePreset?: string
 		features?: CmsFeatures
+		listStyles?: Array<{ label: string; class: string }>
+		/** Open the entry editor's metadata (frontmatter) panel by default instead of collapsed. */
+		openMetadataByDefault?: boolean
 		/**
 		 * Describes the host site's color theme. The CMS draws editor chrome and outlines
 		 * in a contrasting color. 'auto' (default) detects via prefers-color-scheme and
@@ -58,10 +61,12 @@ export interface NuaCmsOptions extends CmsMarkerOptions {
 	 */
 	mdxComponentDirs?: string[]
 	/**
-	 * Per-collection field overrides for position and grouping.
+	 * Per-collection overrides for the CMS browser.
 	 * Highest priority — overrides scanner defaults and frontmatter comment directives.
 	 */
 	collections?: Record<string, {
+		/** Display label shown in the CMS (overrides the name-derived default, e.g. "Jsem Otazky" → "Otázky"). */
+		label?: string
 		fields?: Record<string, { position?: 'sidebar' | 'header'; group?: string }>
 	}>
 	/**
@@ -185,7 +190,9 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 				if (options.collections) {
 					for (const [collectionName, overrides] of Object.entries(options.collections)) {
 						const def = collectionDefinitions[collectionName]
-						if (!def || !overrides.fields) continue
+						if (!def) continue
+						if (overrides.label) def.label = overrides.label
+						if (!overrides.fields) continue
 						for (const field of def.fields) {
 							const fieldOverride = overrides.fields[field.name]
 							if (!fieldOverride) continue

package/src/rehype-cms-marker.ts

@@ -5,11 +5,11 @@
  * relying on heuristics.
  */
 export function rehypeCmsMarker() {
-	return (tree: any) => {
+	return (tree: any, file: any) => {
 		const firstElement = tree.children?.find((n: any) => n.type === 'element')
 		if (firstElement) {
 			firstElement.properties ??= {}
-			firstElement.properties['dataCmsMarkdownContent'] = ''
+			firstElement.properties['dataCmsMarkdownContent'] = file?.path ?? (Array.isArray(file?.history) ? file.history[0] : '') ?? ''
 		}
 	}
 }

package/src/types.ts

@@ -345,6 +345,12 @@ export interface CollectionDefinition {
 	orderBy?: string
 	/** Sort direction for orderBy field */
 	orderDirection?: 'asc' | 'desc'
+	/**
+	 * Name of the collection this one is nested under in the CMS browser, when it shares a base
+	 * directory with another collection (e.g. a nested `*​/otazky/*` collection grouped under the
+	 * `*​/index.md` collection at the same base). Purely presentational grouping.
+	 */
+	parentCollection?: string
 }
 
 /** Manifest metadata for versioning and conflict detection */