@nuasite/cms 0.27.0 → 0.28.0

package/src/editor/components/mdx-block-view.tsx

@@ -4,21 +4,22 @@ import {
 	commonmark,
 	liftListItemCommand,
 	toggleEmphasisCommand,
-	toggleLinkCommand,
 	toggleStrongCommand,
 	wrapInBlockquoteCommand,
 	wrapInBulletListCommand,
 	wrapInOrderedListCommand,
 } from '@milkdown/preset-commonmark'
 import { gfm, toggleStrikethroughCommand } from '@milkdown/preset-gfm'
-import { callCommand, insert, replaceAll } from '@milkdown/utils'
+import { callCommand, replaceAll } from '@milkdown/utils'
 import type { ComponentChildren } from 'preact'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { useLinkPopover } from '../hooks/useLinkPopover'
 import { getComponentDefinition } from '../manifest'
 import { MDX_EXPR_PREFIX } from '../milkdown-mdx-plugin'
 import { type ActiveFormats, defaultActiveFormats, isInListType, setupFormatTracking, toggleHeading } from '../milkdown-utils'
 import { manifest, openMediaLibraryWithCallback } from '../signals'
 import type { ComponentProp } from '../types'
+import { LinkEditPopover } from './link-edit-popover'
 
 const MDX_COMPONENT_ICON_PATH =
 	'M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5'
@@ -78,6 +79,7 @@ function MiniMilkdownEditor({ value, onChange }: { value: string; onChange: (v:
 	const latestMarkdown = useRef(value)
 	const isFocused = useRef(false)
 	const [formats, setFormats] = useState<ActiveFormats>(defaultActiveFormats)
+	const link = useLinkPopover(editorRef, formats)
 
 	useEffect(() => {
 		const el = containerRef.current
@@ -144,18 +146,6 @@ function MiniMilkdownEditor({ value, onChange }: { value: string; onChange: (v:
 		return false
 	}, [])
 
-	const handleLink = useCallback(() => {
-		if (!editorRef.current) return
-		const url = prompt('Enter URL:', 'https://')
-		if (!url) return
-		try {
-			editorRef.current.action(callCommand(toggleLinkCommand.key, { href: url }))
-		} catch {
-			const linkText = window.getSelection()?.toString() || 'Link'
-			editorRef.current.action(insert(`[${linkText}](${url})`))
-		}
-	}, [])
-
 	const handleHeadingToggle = useCallback((level: number) => {
 		if (!editorRef.current) return
 		try {
@@ -242,7 +232,7 @@ function MiniMilkdownEditor({ value, onChange }: { value: string; onChange: (v:
 				<div class="w-px h-4 bg-white/15 mx-0.5" />
 
 				{/* Link */}
-				<MiniToolbarButton onClick={handleLink} title="Link" active={formats.link}>
+				<MiniToolbarButton onClick={link.toggleLinkPopover} title="Link" active={formats.link || link.linkPopoverOpen}>
 					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 						<path
 							stroke-linecap="round"
@@ -253,6 +243,19 @@ function MiniMilkdownEditor({ value, onChange }: { value: string; onChange: (v:
 				</MiniToolbarButton>
 			</div>
 
+			{link.linkPopoverState && (
+				<div class="mb-1.5">
+					<LinkEditPopover
+						inline
+						initialUrl={link.linkPopoverState.href}
+						suggestions={link.pageSuggestions}
+						onApply={link.applyLink}
+						onRemove={link.linkPopoverState.isEdit ? link.removeLink : undefined}
+						onClose={link.closeLinkPopover}
+					/>
+				</div>
+			)}
+
 			{/* Editor */}
 			<div
 				ref={(el) => {
@@ -426,11 +429,11 @@ export function MdxBlockCard({ componentName, props, hasExpressions, slotContent
 
 	return (
 		<div
-			class="my-3 mx-0 bg-white/5 border border-white/15 rounded-cms-md overflow-hidden select-none"
+			class="my-3 mx-0 bg-white/5 border border-white/15 rounded-cms-md select-none"
 			data-cms-ui
 		>
 			{/* Header */}
-			<div class="flex items-center justify-between px-4 py-2.5 bg-white/5 border-b border-white/10">
+			<div class="flex items-center justify-between px-4 py-2.5 bg-white/5 border-b border-white/10 rounded-t-cms-md">
 				<div class="flex items-center gap-2">
 					<MdxComponentIcon />
 					<span class="text-[13px] font-semibold text-white">{componentName}</span>

package/src/editor/hooks/useLinkPopover.ts

@@ -0,0 +1,64 @@
+import type { Editor } from '@milkdown/core'
+import { editorViewCtx } from '@milkdown/core'
+import { toggleLinkCommand, updateLinkCommand } from '@milkdown/preset-commonmark'
+import { callCommand } from '@milkdown/utils'
+import type { RefObject } from 'preact'
+import { useCallback, useMemo, useState } from 'preact/hooks'
+import type { LinkSuggestion } from '../components/link-edit-popover'
+import type { ActiveFormats } from '../milkdown-utils'
+import { removeLinkMark } from '../milkdown-utils'
+import { manifest } from '../signals'
+
+export interface LinkPopoverState {
+	href: string
+	isEdit: boolean
+}
+
+export function useLinkPopover(editorRef: RefObject<Editor | null>, activeFormats: ActiveFormats) {
+	const [linkPopoverState, setLinkPopoverState] = useState<LinkPopoverState | null>(null)
+	const linkPopoverOpen = linkPopoverState !== null
+	const closeLinkPopover = useCallback(() => setLinkPopoverState(null), [])
+
+	const pageSuggestions = useMemo<LinkSuggestion[]>(() =>
+		(manifest.value.pages || []).map(p => ({
+			value: p.pathname,
+			label: p.title || p.pathname,
+			description: p.title ? p.pathname : undefined,
+		})), [manifest.value.pages])
+
+	const toggleLinkPopover = useCallback(() => {
+		if (!editorRef.current) return
+		setLinkPopoverState((prev) => prev !== null ? null : { href: activeFormats.linkHref || 'https://', isEdit: activeFormats.link })
+	}, [activeFormats.link, activeFormats.linkHref, editorRef])
+
+	const applyLink = useCallback((url: string) => {
+		if (!editorRef.current) return
+		const isEdit = linkPopoverState?.isEdit ?? false
+		closeLinkPopover()
+		try {
+			const view = editorRef.current.ctx.get(editorViewCtx)
+			view.focus()
+			if (isEdit) {
+				editorRef.current.action(callCommand(updateLinkCommand.key, { href: url }))
+			} else {
+				editorRef.current.action(callCommand(toggleLinkCommand.key, { href: url }))
+			}
+		} catch (error) {
+			console.error('Failed to apply link:', error)
+		}
+	}, [linkPopoverState, closeLinkPopover, editorRef])
+
+	const removeLink = useCallback(() => {
+		if (!editorRef.current) return
+		closeLinkPopover()
+		try {
+			const view = editorRef.current.ctx.get(editorViewCtx)
+			view.focus()
+			removeLinkMark(view)
+		} catch (error) {
+			console.error('Failed to remove link:', error)
+		}
+	}, [closeLinkPopover, editorRef])
+
+	return { linkPopoverState, linkPopoverOpen, closeLinkPopover, toggleLinkPopover, applyLink, removeLink, pageSuggestions }
+}

package/src/editor/milkdown-utils.ts

@@ -121,6 +121,27 @@ export function toggleHeading(view: EditorView, level: number): void {
 	view.focus()
 }
 
+/**
+ * Remove the link mark around the current cursor position.
+ * Finds the text node with a link mark at/near the selection and dispatches a removeMark transaction.
+ */
+export function removeLinkMark(view: EditorView): void {
+	const { state } = view
+	const { from, to } = state.selection
+	const linkType = state.schema.marks.link
+	if (!linkType) return
+	let linkFrom = from
+	let linkTo = to
+	state.doc.nodesBetween(from, from === to ? to + 1 : to, (node, pos) => {
+		if (linkType.isInSet(node.marks)) {
+			linkFrom = pos
+			linkTo = pos + node.nodeSize
+			return false
+		}
+	})
+	view.dispatch(state.tr.removeMark(linkFrom, linkTo, linkType))
+}
+
 function formatsEqual(a: ActiveFormats, b: ActiveFormats): boolean {
 	return a.bold === b.bold
 		&& a.italic === b.italic

package/src/field-types.ts

@@ -1,47 +1,129 @@
 import { z } from 'astro/zod'
 
 /**
- * Semantic field type schemas for content collections.
+ * Schema helpers for content collections.
  *
- * Each method returns a `z.string()` schema that Astro resolves
- * statically (concrete return type, no generics). The CMS collection
- * scanner detects them by name in the source and renders the
- * appropriate editor input.
+ * Combines Zod passthrough methods with CMS-aware semantic types,
+ * so a content config can import only `n` instead of both `n` and `z`.
  *
- * Chain Zod methods as usual (`.optional()`, `.default()`, etc.).
+ * Pass an options object to configure editor hints and Zod validation
+ * in one place. Chain `.orderBy('asc' | 'desc')` to mark the ordering field.
  *
  * @example
  * ```ts
  * import { n } from '@nuasite/cms'
- * import { z } from 'astro/zod'
  *
- * const schema = z.object({
+ * const schema = n.object({
+ *   title: n.text({ placeholder: "Enter title", maxLength: 120 }),
  *   photo: n.image(),
- *   website: n.url().optional(),
- *   contact: n.email(),
- *   accent: n.color(),
- *   publishedAt: n.date(),
- *   startsAt: n.datetime(),
- *   opensAt: n.time(),
- *   bio: n.textarea(),
+ *   bio: n.textarea({ rows: 4, maxLength: 500 }),
+ *   order: n.number({ min: 1, max: 100, step: 1 }).orderBy('asc'),
+ *   date: n.date().orderBy('desc'),
+ *   tags: n.array(n.string()),
+ *   featured: n.boolean().default(false),
  * })
  * ```
  */
+
+// --- Per-type hint interfaces ---
+
+export interface NumberHints {
+	min?: number
+	max?: number
+	step?: number
+	placeholder?: string
+}
+
+export interface TextHints {
+	placeholder?: string
+	maxLength?: number
+	minLength?: number
+}
+
+export interface TextareaHints {
+	placeholder?: string
+	maxLength?: number
+	rows?: number
+}
+
+export interface DateHints {
+	min?: string
+	max?: string
+}
+
+export interface ImageHints {
+	accept?: string
+}
+
+// --- Internals ---
+
+type OrderByDirection = 'asc' | 'desc'
+type WithOrderBy<T> = T & { orderBy(direction?: OrderByDirection): T }
+
+/** Normalize YAML Date objects to ISO date strings (YYYY-MM-DD) */
+const toISODate = (v: unknown) => (v instanceof Date ? v.toISOString().slice(0, 10) : v)
+/** Normalize YAML Date objects to ISO datetime strings */
+const toISODatetime = (v: unknown) => (v instanceof Date ? v.toISOString() : v)
+
+/** Add a chainable `.orderBy()` method to a Zod schema. The scanner detects it from source code. */
+function withOrderBy<T extends z.ZodTypeAny>(schema: T): WithOrderBy<T> {
+	const s = schema as WithOrderBy<T>
+	s.orderBy = (_direction?: OrderByDirection) => schema
+	return s
+}
+
+/** Build a CMS string field with optional length validation. Shared by text, url, email, textarea. */
+function stringField(cmsType: string, hints?: { minLength?: number; maxLength?: number }) {
+	let schema = z.string()
+	if (hints?.minLength != null) schema = schema.min(hints.minLength)
+	if (hints?.maxLength != null) schema = schema.max(hints.maxLength)
+	return withOrderBy(schema.describe(`cms:${cmsType}`))
+}
+
 export const n = {
-	/** Image picker (opens media library) */
-	image: () => z.string().describe('cms:image'),
+	// --- Zod passthroughs ---
+	/** Object schema */
+	object: <T extends z.ZodRawShape>(shape: T) => z.object(shape),
+	/** Array schema */
+	array: <T extends z.ZodTypeAny>(schema: T) => z.array(schema),
+	/** Enum schema */
+	enum: <U extends string, T extends [U, ...U[]]>(values: T) => z.enum(values),
+	/** Coerce namespace — parses input into the target type */
+	coerce: {
+		date: () => withOrderBy(z.coerce.date()),
+		number: () => withOrderBy(z.coerce.number()),
+		string: () => withOrderBy(z.coerce.string()),
+		boolean: () => withOrderBy(z.coerce.boolean()),
+	},
+
+	// --- CMS semantic types ---
+	/** Boolean / checkbox */
+	boolean: () => withOrderBy(z.boolean().describe('cms:checkbox')),
+	/** Number input with optional min/max/step */
+	number: (hints?: NumberHints) => {
+		let schema = z.number()
+		if (hints?.min != null) schema = schema.min(hints.min)
+		if (hints?.max != null) schema = schema.max(hints.max)
+		return withOrderBy(schema.describe('cms:number'))
+	},
+	/** Image picker (opens media library). Accepts hints for the scanner; no Zod validation applied. */
+	image: (_hints?: ImageHints) => withOrderBy(z.string().describe('cms:image')),
 	/** URL input */
-	url: () => z.string().describe('cms:url'),
+	url: (hints?: TextHints) => stringField('url', hints),
 	/** Email input */
-	email: () => z.string().describe('cms:email'),
+	email: (hints?: TextHints) => stringField('email', hints),
 	/** Color picker */
-	color: () => z.string().describe('cms:color'),
-	/** Date picker */
-	date: () => z.string().describe('cms:date'),
-	/** Date + time picker */
-	datetime: () => z.string().describe('cms:datetime'),
-	/** Time picker */
-	time: () => z.string().describe('cms:time'),
+	color: () => withOrderBy(z.string().describe('cms:color')),
+	/** Date picker (handles YAML Date coercion → ISO date string). Accepts hints for the scanner; no Zod validation applied. */
+	date: (_hints?: DateHints) => withOrderBy(z.preprocess(toISODate, z.string()).describe('cms:date')),
+	/** Date + time picker (handles YAML Date coercion → ISO datetime string). Accepts hints for the scanner; no Zod validation applied. */
+	datetime: (_hints?: DateHints) => withOrderBy(z.preprocess(toISODatetime, z.string()).describe('cms:datetime')),
+	/** Time picker. Accepts hints for the scanner; no Zod validation applied. */
+	time: (_hints?: DateHints) => withOrderBy(z.string().describe('cms:time')),
 	/** Multiline textarea */
-	textarea: () => z.string().describe('cms:textarea'),
+	textarea: (hints?: TextareaHints) => stringField('textarea', hints),
+	/** Text input */
+	text: (hints?: TextHints) => stringField('text', hints),
+	/** Plain string (no CMS type hint — type inferred from values) */
+	string: () => withOrderBy(z.string()),
 }

package/src/index.ts

@@ -358,6 +358,7 @@ async function mergeRedirects(dir: URL, logger: { info: (msg: string) => void })
 }
 
 export { n } from './field-types'
+export type { DateHints, ImageHints, NumberHints, TextareaHints, TextHints } from './field-types'
 export { createContemberStorageAdapter as contemberMedia } from './media/contember'
 export { createLocalStorageAdapter as localMedia } from './media/local'
 export { createS3StorageAdapter as s3Media } from './media/s3'
@@ -393,6 +394,7 @@ export type {
 	ComponentProp,
 	ContentConstraints,
 	FieldDefinition,
+	FieldHints,
 	FieldType,
 	ImageMetadata,
 	JsonLdEntry,

package/src/types.ts

@@ -242,6 +242,18 @@ export type FieldType =
 	| 'object'
 	| 'reference'
 
+/** Editor hints for enhanced field rendering (extracted from `n.*()` options in content config) */
+export interface FieldHints {
+	min?: number | string
+	max?: number | string
+	step?: number
+	placeholder?: string
+	maxLength?: number
+	minLength?: number
+	rows?: number
+	accept?: string
+}
+
 /** Definition of a single field in a collection's schema */
 export interface FieldDefinition {
 	/** Field name as it appears in frontmatter */
@@ -270,6 +282,8 @@ export interface FieldDefinition {
 	hidden?: boolean
 	/** Source field name this field is derived from (e.g. categoryHref derived from category) */
 	derivedFrom?: string
+	/** Editor hints for enhanced field rendering */
+	hints?: FieldHints
 }
 
 /** Per-entry metadata for collection browsing */
@@ -304,6 +318,10 @@ export interface CollectionDefinition {
 	fileExtension: 'md' | 'mdx' | 'json' | 'yaml' | 'yml'
 	/** Per-entry metadata for browsing */
 	entries?: CollectionEntryInfo[]
+	/** Frontmatter field name to sort entries by (detected from `.orderBy()` in content config) */
+	orderBy?: string
+	/** Sort direction for orderBy field */
+	orderDirection?: 'asc' | 'desc'
 }
 
 /** Manifest metadata for versioning and conflict detection */