@nuasite/cms 0.27.0 → 0.28.0

package/package.json

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

package/src/collection-scanner.ts

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { isMap, isPair, isScalar, parse as parseYaml, parseDocument } from 'yaml'
 import { getProjectRoot } from './config'
 import { slugifyHref } from './shared'
-import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldType } from './types'
+import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldHints, FieldType } from './types'
 
 /** Regex patterns for type inference */
 const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}/
@@ -31,7 +31,6 @@ const SIDEBAR_FIELD_NAMES = new Set([
 	'author',
 ])
 
-/** Directive pattern: # @position <value> or # @group <value> */
 /** Matches `@position <value>` or `@group <value>` in YAML comment text (# already stripped by parser) */
 const DIRECTIVE_PATTERN = /^\s*@(position|group)\s+(.+)$/
 
@@ -400,10 +399,6 @@ async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName:
 			const fullPath = path.join(projectRoot, configPath)
 			const content = await fs.readFile(fullPath, 'utf-8')
 
-			const collectionBlocks = content.matchAll(
-				/(?:const\s+(\w+)\s*=\s*)?defineCollection\s*\(\s*\{[\s\S]*?schema\s*:\s*z\.object\s*\(\s*\{([\s\S]*?)\}\s*\)/g,
-			)
-
 			// Map variable names to collection names from exports
 			const varToName = new Map<string, string>()
 			const exportMatch = content.match(/export\s+const\s+collections\s*=\s*\{([\s\S]*?)\}/)
@@ -414,13 +409,32 @@ async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName:
 				}
 			}
 
+			// Find schema block starts via regex, then extract bodies with brace counting
+			// to correctly handle nested objects like n.number({ min: 1, max: 100 })
+			const schemaStart = /(?:const\s+(\w+)\s*=\s*)?defineCollection\s*\(\s*\{[\s\S]*?schema\s*:\s*(?:z|n)\.object\s*\(\s*\{/g
 			const blocks: Array<{ collectionName: string; schemaBody: string }> = []
-			for (const block of collectionBlocks) {
-				const varName = block[1]
-				const schemaBody = block[2]!
+
+			let match
+			while ((match = schemaStart.exec(content)) !== null) {
+				const varName = match[1]
 				const collectionName = varName ? varToName.get(varName) : undefined
 				if (!collectionName) continue
-				blocks.push({ collectionName, schemaBody })
+
+				// Brace-balanced extraction: the regex consumed the opening {,
+				// so start at depth 1 and scan forward for the matching }
+				const bodyStart = match.index + match[0].length
+				let depth = 1
+				let i = bodyStart
+				while (i < content.length && depth > 0) {
+					if (content[i] === '{') depth++
+					else if (content[i] === '}') depth--
+					i++
+				}
+
+				if (depth === 0) {
+					// i is one past the matching }, so body is [bodyStart, i-1)
+					blocks.push({ collectionName, schemaBody: content.slice(bodyStart, i - 1) })
+				}
 			}
 
 			if (blocks.length > 0) return blocks
@@ -455,7 +469,7 @@ function parseContentConfigReferences(
 }
 
 /** Valid field type names exported by `n` helper from @nuasite/cms */
-const FIELD_HELPER_TYPES = new Set(['image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
+const FIELD_HELPER_TYPES = new Set(['text', 'number', 'image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
 
 /**
  * Parse the content config file to extract explicit field type hints:
@@ -500,6 +514,54 @@ function parseContentConfigFieldTypes(
 	return result
 }
 
+/**
+ * Parse the content config to find `.orderBy('asc'|'desc')` markers on fields.
+ * Matches patterns like `fieldName: n.number().orderBy('asc')`.
+ * Returns a map: collectionName → { field, direction }.
+ */
+function parseContentConfigOrderBy(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, { field: string; direction: 'asc' | 'desc' }> {
+	const result = new Map<string, { field: string; direction: 'asc' | 'desc' }>()
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const match = schemaBody.match(/(\w+)\s*:.*\.orderBy\s*\(\s*(?:['"](\w+)['"])?\s*\)/)
+		if (match) {
+			const direction = match[2] === 'desc' ? 'desc' as const : 'asc' as const
+			result.set(collectionName, { field: match[1]!, direction })
+		}
+	}
+	return result
+}
+
+/**
+ * Apply orderBy configuration: set the field name and direction on the definition, then re-sort entries.
+ */
+function applyCollectionOrderBy(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	const orderByFields = parseContentConfigOrderBy(schemaBlocks)
+	for (const [collectionName, { field: fieldName, direction }] of orderByFields) {
+		const def = collections[collectionName]
+		if (!def) continue
+		def.orderBy = fieldName
+		def.orderDirection = direction
+		if (def.entries && def.entries.length > 1) {
+			const dir = direction === 'desc' ? -1 : 1
+			def.entries.sort((a, b) => {
+				const aVal = a.data?.[fieldName]
+				const bVal = b.data?.[fieldName]
+				if (aVal == null && bVal == null) return 0
+				if (aVal == null) return 1
+				if (bVal == null) return -1
+				if (typeof aVal === 'number' && typeof bVal === 'number') return (aVal - bVal) * dir
+				if (aVal instanceof Date && bVal instanceof Date) return (aVal.getTime() - bVal.getTime()) * dir
+				return String(aVal).localeCompare(String(bVal)) * dir
+			})
+		}
+	}
+}
+
 /**
  * Extract all top-level field names from a schema body string.
  * Matches `fieldName:` patterns at the start of lines within z.object({...}).
@@ -552,6 +614,82 @@ function applyConfigFieldTypes(
 	}
 }
 
+/** All recognized hint keys */
+const VALID_HINT_KEYS = new Set(['min', 'max', 'step', 'placeholder', 'maxLength', 'minLength', 'rows', 'accept'])
+/** Subset of hint keys that take numeric values */
+const NUMERIC_HINT_KEYS = new Set(['min', 'max', 'step', 'maxLength', 'minLength', 'rows'])
+
+/**
+ * Parse `n.type({ key: value, ... })` options objects from schema blocks.
+ * Returns a map: collectionName → fieldName → FieldHints.
+ */
+function parseContentConfigFieldHints(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, FieldHints>> {
+	const result = new Map<string, Map<string, FieldHints>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, FieldHints>()
+
+		// Match: fieldName: n.helperName({ ...options })
+		const fieldMatches = schemaBody.matchAll(/(\w+)\s*:\s*n\.\w+\s*\(\s*\{([\s\S]*?)}\s*\)/g)
+		for (const m of fieldMatches) {
+			const fieldName = m[1]!
+			const optionsBody = m[2]!
+			const raw: Record<string, string | number> = {}
+
+			// Extract key-value pairs from the options body
+			const kvMatches = optionsBody.matchAll(/(\w+)\s*:\s*(?:"([^"]*)"|'([^']*)'|(-?[\d.]+))/g)
+			for (const kv of kvMatches) {
+				const key = kv[1]!
+				if (!VALID_HINT_KEYS.has(key)) continue
+				const strValue = kv[2] ?? kv[3]
+				const numValue = kv[4]
+
+				if (numValue != null && NUMERIC_HINT_KEYS.has(key)) {
+					raw[key] = Number(numValue)
+				} else if (strValue != null) {
+					if (NUMERIC_HINT_KEYS.has(key)) {
+						const parsed = Number(strValue)
+						raw[key] = Number.isNaN(parsed) ? strValue : parsed
+					} else {
+						raw[key] = strValue
+					}
+				}
+			}
+			const hints = raw as FieldHints
+
+			if (Object.keys(hints).length > 0) {
+				fields.set(fieldName, hints)
+			}
+		}
+
+		if (fields.size > 0) {
+			result.set(collectionName, fields)
+		}
+	}
+	return result
+}
+
+/**
+ * Apply field hints from content config parsing to scanned collections.
+ */
+function applyConfigFieldHints(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	const configHints = parseContentConfigFieldHints(schemaBlocks)
+	for (const [collectionName, fieldHints] of configHints) {
+		const def = collections[collectionName]
+		if (!def) continue
+		for (const [fieldName, hints] of fieldHints) {
+			const field = def.fields.find(f => f.name === fieldName)
+			if (!field) continue
+			field.hints = hints
+		}
+	}
+}
+
 /**
  * After all collections are scanned, detect reference fields.
  * Prefers explicit reference() declarations from the content config file.
@@ -787,12 +925,14 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 		// Content directory doesn't exist or isn't readable
 	}
 
-	// Post-scan: apply explicit type hints, detect references, and derived fields
+	// Post-scan: apply explicit type hints, field hints, detect references, derived fields, and ordering
 	const schemaBlocks = await parseContentConfigSchemaBlocks()
 	filterFieldsBySchema(collections, schemaBlocks)
 	applyConfigFieldTypes(collections, schemaBlocks)
+	applyConfigFieldHints(collections, schemaBlocks)
 	await detectReferenceFields(collections, schemaBlocks)
 	detectDerivedHrefFields(collections)
+	applyCollectionOrderBy(collections, schemaBlocks)
 
 	return collections
 }

package/src/editor/components/fields.tsx

@@ -39,13 +39,15 @@ export interface TextFieldProps {
 	label: string
 	value: string | undefined
 	placeholder?: string
+	maxLength?: number
+	minLength?: number
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
 	inputType?: string
 }
 
-export function TextField({ label, value, placeholder, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
+export function TextField({ label, value, placeholder, maxLength, minLength, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -53,6 +55,8 @@ export function TextField({ label, value, placeholder, onChange, isDirty, onRese
 				type={inputType}
 				value={value ?? ''}
 				placeholder={placeholder}
+				maxLength={maxLength}
+				minLength={minLength}
 				onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 				class={cn(
 					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -270,12 +274,13 @@ export interface NumberFieldProps {
 	placeholder?: string
 	min?: number
 	max?: number
+	step?: number
 	onChange: (value: number | undefined) => void
 	isDirty?: boolean
 	onReset?: () => void
 }
 
-export function NumberField({ label, value, placeholder, min, max, onChange, isDirty, onReset }: NumberFieldProps) {
+export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset }: NumberFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -285,6 +290,7 @@ export function NumberField({ label, value, placeholder, min, max, onChange, isD
 				placeholder={placeholder}
 				min={min}
 				max={max}
+				step={step}
 				onInput={(e) => {
 					const val = (e.target as HTMLInputElement).value
 					onChange(val === '' ? undefined : Number(val))

package/src/editor/components/frontmatter-fields.tsx

@@ -395,6 +395,7 @@ export function SchemaFrontmatterField({
 	onChange,
 }: SchemaFrontmatterFieldProps) {
 	const label = formatFieldLabel(field.name)
+	const hints = field.hints
 
 	switch (field.type) {
 		case 'text':
@@ -404,7 +405,9 @@ export function SchemaFrontmatterField({
 				<TextField
 					label={label}
 					value={(value as string) ?? ''}
-					placeholder={getPlaceholder(field)}
+					placeholder={hints?.placeholder ?? getPlaceholder(field)}
+					maxLength={hints?.maxLength as number | undefined}
+					minLength={hints?.minLength as number | undefined}
 					onChange={(v) => onChange(v)}
 					inputType={field.type === 'text' ? undefined : field.type}
 				/>
@@ -442,8 +445,9 @@ export function SchemaFrontmatterField({
 					<textarea
 						value={(value as string) ?? ''}
 						onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}
-						placeholder={getPlaceholder(field)}
-						rows={3}
+						placeholder={hints?.placeholder ?? getPlaceholder(field)}
+						rows={hints?.rows ?? 3}
+						maxLength={hints?.maxLength as number | undefined}
 						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40 resize-none"
 						data-cms-ui
 					/>
@@ -459,6 +463,8 @@ export function SchemaFrontmatterField({
 					<input
 						type={field.type === 'datetime' ? 'datetime-local' : field.type}
 						value={(value as string) ?? ''}
+						min={hints?.min != null ? String(hints.min) : undefined}
+						max={hints?.max != null ? String(hints.max) : undefined}
 						onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-white/40"
 						data-cms-ui
@@ -471,6 +477,10 @@ export function SchemaFrontmatterField({
 				<NumberField
 					label={label}
 					value={(value as number) ?? undefined}
+					placeholder={hints?.placeholder}
+					min={typeof hints?.min === 'number' ? hints.min : undefined}
+					max={typeof hints?.max === 'number' ? hints.max : undefined}
+					step={hints?.step}
 					onChange={(v) => onChange(v ?? 0)}
 				/>
 			)

package/src/editor/components/link-edit-popover.tsx

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { HighlightMatch } from './fields'
+
+export interface LinkSuggestion {
+	value: string
+	label: string
+	description?: string
+}
+
+export interface LinkEditPopoverProps {
+	initialUrl: string
+	suggestions?: LinkSuggestion[]
+	onApply: (url: string) => void
+	onRemove?: () => void
+	onClose: () => void
+	/** Use static positioning instead of absolute (for inline contexts) */
+	inline?: boolean
+}
+
+export function LinkEditPopover({ initialUrl, suggestions, onApply, onRemove, onClose, inline }: LinkEditPopoverProps) {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const rootRef = useRef<HTMLDivElement>(null)
+	const listRef = useRef<HTMLDivElement>(null)
+	const [query, setQuery] = useState(initialUrl)
+	const [showSuggestions, setShowSuggestions] = useState(false)
+	const [highlightedIndex, setHighlightedIndex] = useState(-1)
+
+	const filtered = useMemo(() => {
+		if (!suggestions?.length) return []
+		if (!query || query === 'https://') return suggestions
+		const q = query.toLowerCase()
+		return suggestions.filter(
+			o => o.value.toLowerCase().includes(q) || o.label.toLowerCase().includes(q),
+		)
+	}, [query, suggestions])
+
+	useEffect(() => {
+		const input = inputRef.current
+		if (input) {
+			input.focus()
+			input.select()
+		}
+	}, [])
+
+	// Close on click outside — uses `click` in bubble phase so form submit
+	// (which fires synchronously during the button's click) completes first
+	useEffect(() => {
+		const handler = (e: MouseEvent) => {
+			if (rootRef.current && !e.composedPath().includes(rootRef.current)) {
+				onClose()
+			}
+		}
+		document.addEventListener('click', handler)
+		return () => document.removeEventListener('click', handler)
+	}, [onClose])
+
+	// Scroll highlighted item into view
+	useEffect(() => {
+		if (highlightedIndex >= 0 && listRef.current) {
+			const item = listRef.current.children[highlightedIndex] as HTMLElement | undefined
+			item?.scrollIntoView({ block: 'nearest' })
+		}
+	}, [highlightedIndex])
+
+	const handleSubmit = useCallback((e: Event) => {
+		e.preventDefault()
+		const url = inputRef.current?.value.trim()
+		if (url) {
+			onApply(url)
+		}
+	}, [onApply])
+
+	const selectOption = useCallback((value: string) => {
+		if (inputRef.current) inputRef.current.value = value
+		setQuery(value)
+		setShowSuggestions(false)
+		onApply(value)
+	}, [onApply])
+
+	const handleInput = useCallback((e: Event) => {
+		const v = (e.target as HTMLInputElement).value
+		setQuery(v)
+		setShowSuggestions(true)
+		setHighlightedIndex(-1)
+	}, [])
+
+	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			if (showSuggestions && filtered.length > 0) {
+				e.preventDefault()
+				e.stopPropagation()
+				setShowSuggestions(false)
+				return
+			}
+			e.preventDefault()
+			e.stopPropagation()
+			onClose()
+			return
+		}
+
+		if (!showSuggestions || filtered.length === 0) return
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault()
+			setHighlightedIndex(i => Math.min(i + 1, filtered.length - 1))
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault()
+			setHighlightedIndex(i => Math.max(i - 1, 0))
+		} else if (e.key === 'Enter' && highlightedIndex >= 0) {
+			e.preventDefault()
+			selectOption(filtered[highlightedIndex]!.value)
+		}
+	}, [showSuggestions, filtered, highlightedIndex, selectOption, onClose])
+
+	const handleFocus = useCallback(() => {
+		setShowSuggestions(true)
+	}, [])
+
+	const handleBlur = useCallback(() => {
+		setTimeout(() => setShowSuggestions(false), 150)
+	}, [])
+
+	const showDropdown = showSuggestions && filtered.length > 0
+
+	return (
+		<div
+			ref={rootRef}
+			class={inline ? 'slide-in' : 'relative z-[9999] slide-in shrink-0'}
+			data-cms-ui
+		>
+			<form
+				onSubmit={handleSubmit}
+				class={`flex items-center gap-2 ${inline ? 'py-1.5' : 'px-4 py-2.5 bg-cms-dark border-b border-white/10'}`}
+			>
+				<svg class="w-4 h-4 text-white/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+					/>
+				</svg>
+
+				<div class="flex-1 min-w-0 relative">
+					<input
+						ref={inputRef}
+						type="text"
+						defaultValue={initialUrl}
+						placeholder="https://example.com or /page"
+						onInput={handleInput}
+						onFocus={handleFocus}
+						onBlur={handleBlur}
+						onKeyDown={handleKeyDown}
+						autocomplete="off"
+						class="w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white placeholder:text-white/30 outline-none focus:border-cms-primary/50 transition-colors"
+						data-cms-ui
+					/>
+					{showDropdown && (
+						<div
+							ref={listRef}
+							class="absolute z-50 left-0 right-0 mt-1 max-h-48 overflow-y-auto bg-cms-dark border border-white/15 rounded-cms-sm shadow-lg"
+							data-cms-ui
+						>
+							{filtered.map((opt, i) => (
+								<button
+									key={opt.value}
+									type="button"
+									onMouseDown={(e) => {
+										e.preventDefault()
+										selectOption(opt.value)
+									}}
+									class={`w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer ${
+										i === highlightedIndex
+											? 'bg-white/15 text-white'
+											: 'text-white/70 hover:bg-white/10 hover:text-white'
+									}`}
+									data-cms-ui
+								>
+									<span class="block truncate font-medium">
+										<HighlightMatch text={opt.label} query={query === 'https://' ? '' : query} />
+									</span>
+									{opt.description && (
+										<span class="block truncate text-white/40">
+											<HighlightMatch text={opt.description} query={query === 'https://' ? '' : query} />
+										</span>
+									)}
+								</button>
+							))}
+						</div>
+					)}
+				</div>
+
+				<button
+					type="submit"
+					class="px-3 py-1.5 bg-cms-primary text-cms-primary-text text-[12px] font-medium rounded-cms-sm hover:bg-cms-primary-hover transition-colors shrink-0"
+					data-cms-ui
+				>
+					Apply
+				</button>
+
+				{onRemove && (
+					<button
+						type="button"
+						onClick={onRemove}
+						class="p-1.5 text-white/40 hover:text-red-400 hover:bg-red-500/10 rounded-cms-sm transition-colors shrink-0"
+						title="Remove link"
+						data-cms-ui
+					>
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+							/>
+						</svg>
+					</button>
+				)}
+
+				<button
+					type="button"
+					onClick={onClose}
+					class="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-cms-sm transition-colors shrink-0"
+					title="Cancel"
+					data-cms-ui
+				>
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</form>
+		</div>
+	)
+}

package/src/editor/components/markdown-inline-editor.tsx

@@ -4,7 +4,6 @@ import {
 	commonmark,
 	liftListItemCommand,
 	toggleEmphasisCommand,
-	toggleLinkCommand,
 	toggleStrongCommand,
 	wrapInBlockquoteCommand,
 	wrapInBulletListCommand,
@@ -13,10 +12,12 @@ import {
 import { gfm, toggleStrikethroughCommand } from '@milkdown/preset-gfm'
 import { callCommand, insert, replaceAll } from '@milkdown/utils'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { useLinkPopover } from '../hooks/useLinkPopover'
 import { uploadMedia } from '../markdown-api'
 import { insertMdxComponentCommand, mdxComponentPlugin } from '../milkdown-mdx-plugin'
 import { type ActiveFormats, defaultActiveFormats, isInListType, setupFormatTracking, toggleHeading } from '../milkdown-utils'
 import { config, mdxComponentPickerOpen, openMediaLibraryWithCallback, resetMarkdownEditorState, showToast, updateMarkdownContent } from '../signals'
+import { LinkEditPopover } from './link-edit-popover'
 import { MdxComponentIcon } from './mdx-block-view'
 import { MdxComponentPicker } from './mdx-component-picker'
 
@@ -46,6 +47,15 @@ export function MarkdownInlineEditor({
 
 	// Track active formatting for toolbar highlighting
 	const [activeFormats, setActiveFormats] = useState<ActiveFormats>(defaultActiveFormats)
+	const {
+		linkPopoverState,
+		linkPopoverOpen,
+		closeLinkPopover,
+		toggleLinkPopover,
+		applyLink,
+		removeLink,
+		pageSuggestions,
+	} = useLinkPopover(editorInstanceRef, activeFormats)
 
 	// Store initial content in ref to avoid stale closure issues
 	const initialContentRef = useRef(initialContent)
@@ -202,54 +212,6 @@ export function MarkdownInlineEditor({
 		}
 	}, [runCommand, checkInList])
 
-	const handleInsertLink = useCallback(() => {
-		if (!editorInstanceRef.current) return
-
-		// If already in a link, remove it
-		if (activeFormats.link) {
-			try {
-				// Use toggleLinkCommand with empty href to remove link
-				editorInstanceRef.current.action(
-					callCommand(toggleLinkCommand.key, { href: '' }),
-				)
-				return
-			} catch (error) {
-				console.error('Failed to remove link:', error)
-			}
-		}
-
-		// Get selected text from editor
-		let selectedText = ''
-		try {
-			const view = editorInstanceRef.current.ctx.get(editorViewCtx)
-			const { state } = view
-			const { from, to } = state.selection
-			if (from !== to) {
-				selectedText = state.doc.textBetween(from, to, ' ')
-			}
-		} catch {
-			// Ignore errors
-		}
-
-		// Prompt for URL (pre-fill with existing URL if editing)
-		const defaultUrl = activeFormats.linkHref || ''
-		const url = prompt('Enter URL:', defaultUrl)
-		if (url) {
-			try {
-				// Use toggleLinkCommand to add/update link
-				editorInstanceRef.current.action(
-					callCommand(toggleLinkCommand.key, { href: url }),
-				)
-			} catch (error) {
-				console.error('Failed to add link:', error)
-				// Fallback: use markdown insertion
-				const linkText = selectedText || prompt('Enter link text:', 'Link') || 'Link'
-				const linkMarkdown = `[${linkText}](${url})`
-				editorInstanceRef.current.action(insert(linkMarkdown))
-			}
-		}
-	}, [activeFormats.link, activeFormats.linkHref])
-
 	const handleInsertHeading = useCallback((level: number) => {
 		if (!editorInstanceRef.current) return
 		try {
@@ -575,9 +537,9 @@ export function MarkdownInlineEditor({
 				{/* Links & Images */}
 				<div class="flex items-center gap-0.5">
 					<ToolbarButton
-						onClick={handleInsertLink}
-						title={activeFormats.link ? 'Remove Link' : 'Insert Link'}
-						active={activeFormats.link}
+						onClick={toggleLinkPopover}
+						title={activeFormats.link ? 'Edit Link' : 'Insert Link'}
+						active={activeFormats.link || linkPopoverOpen}
 					>
 						<svg
 							class="w-4 h-4"
@@ -620,6 +582,17 @@ export function MarkdownInlineEditor({
 				</div>
 			</div>
 
+			{/* Link edit popover — rendered outside the toolbar stacking context so it layers above the sidebar */}
+			{linkPopoverState && (
+				<LinkEditPopover
+					initialUrl={linkPopoverState.href}
+					suggestions={pageSuggestions}
+					onApply={applyLink}
+					onRemove={linkPopoverState.isEdit ? removeLink : undefined}
+					onClose={closeLinkPopover}
+				/>
+			)}
+
 			{/* Editor */}
 			<div
 				class={`flex-1 min-h-0 overflow-auto relative transition-colors ${isDragging ? 'bg-cms-primary/10' : ''}`}