@nuasite/cms 0.27.0 → 0.29.0

package/src/editor/components/fields.tsx

@@ -39,13 +39,18 @@ export interface TextFieldProps {
 	label: string
 	value: string | undefined
 	placeholder?: string
+	maxLength?: number
+	minLength?: number
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
 	inputType?: string
+	required?: boolean
 }
 
-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', required }: TextFieldProps,
+) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -53,6 +58,9 @@ export function TextField({ label, value, placeholder, onChange, isDirty, onRese
 				type={inputType}
 				value={value ?? ''}
 				placeholder={placeholder}
+				maxLength={maxLength}
+				minLength={minLength}
+				required={required}
 				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',
@@ -78,9 +86,10 @@ export interface ImageFieldProps {
 	onBrowse: () => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ImageField({ label, value, placeholder, onChange, onBrowse, isDirty, onReset }: ImageFieldProps) {
+export function ImageField({ label, value, placeholder, onChange, onBrowse, isDirty, onReset, required }: ImageFieldProps) {
 	const hasImage = !!value && value.length > 0
 
 	return (
@@ -110,6 +119,7 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder}
+					required={required}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
 						'flex-1 min-w-0 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',
@@ -143,9 +153,10 @@ export interface ColorFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ColorField({ label, value, placeholder, onChange, isDirty, onReset }: ColorFieldProps) {
+export function ColorField({ label, value, placeholder, onChange, isDirty, onReset, required }: ColorFieldProps) {
 	const colorValue = value || '#000000'
 	// Validate hex for the native picker (must be #rrggbb)
 	const isValidHex = /^#[0-9a-fA-F]{6}$/.test(colorValue)
@@ -166,6 +177,7 @@ export function ColorField({ label, value, placeholder, onChange, isDirty, onRes
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder ?? '#000000'}
+					required={required}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
 						'flex-1 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 +282,14 @@ export interface NumberFieldProps {
 	placeholder?: string
 	min?: number
 	max?: number
+	step?: number
 	onChange: (value: number | undefined) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function NumberField({ label, value, placeholder, min, max, onChange, isDirty, onReset }: NumberFieldProps) {
+export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset, required }: NumberFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -285,6 +299,8 @@ export function NumberField({ label, value, placeholder, min, max, onChange, isD
 				placeholder={placeholder}
 				min={min}
 				max={max}
+				step={step}
+				required={required}
 				onInput={(e) => {
 					const val = (e.target as HTMLInputElement).value
 					onChange(val === '' ? undefined : Number(val))
@@ -330,9 +346,10 @@ export interface ComboBoxFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ComboBoxField({ label, value, placeholder, options, onChange, isDirty, onReset }: ComboBoxFieldProps) {
+export function ComboBoxField({ label, value, placeholder, options, onChange, isDirty, onReset, required }: ComboBoxFieldProps) {
 	const [query, setQuery] = useState('')
 	const [isOpen, setIsOpen] = useState(false)
 	const [highlightedIndex, setHighlightedIndex] = useState(-1)
@@ -372,6 +389,13 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 	}, [onChange])
 
 	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			if (isOpen && highlightedIndex >= 0 && filtered[highlightedIndex]) {
+				selectOption(filtered[highlightedIndex]!.value)
+			}
+			return
+		}
 		if (!isOpen || filtered.length === 0) return
 		if (e.key === 'ArrowDown') {
 			e.preventDefault()
@@ -379,9 +403,6 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 		} 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)
 		} else if (e.key === 'Escape') {
 			setIsOpen(false)
 		}
@@ -405,6 +426,7 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 				type="text"
 				value={value ?? ''}
 				placeholder={placeholder}
+				required={required}
 				onInput={handleInput}
 				onFocus={handleFocus}
 				onBlur={handleBlur}

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

@@ -394,7 +394,8 @@ export function SchemaFrontmatterField({
 	value,
 	onChange,
 }: SchemaFrontmatterFieldProps) {
-	const label = formatFieldLabel(field.name)
+	const label = field.required ? `${formatFieldLabel(field.name)} *` : formatFieldLabel(field.name)
+	const hints = field.hints
 
 	switch (field.type) {
 		case 'text':
@@ -404,9 +405,12 @@ 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}
+					required={field.required}
 				/>
 			)
 
@@ -422,6 +426,7 @@ export function SchemaFrontmatterField({
 							onChange(url)
 						})
 					}}
+					required={field.required}
 				/>
 			)
 
@@ -432,6 +437,7 @@ export function SchemaFrontmatterField({
 					value={(value as string) ?? ''}
 					placeholder={getPlaceholder(field)}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 
@@ -442,8 +448,10 @@ 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}
+						required={field.required}
 						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 +467,9 @@ 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}
+						required={field.required}
 						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,7 +482,12 @@ 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)}
+					required={field.required}
 				/>
 			)
 
@@ -495,6 +511,7 @@ export function SchemaFrontmatterField({
 						label: opt,
 					}))}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 
@@ -507,6 +524,7 @@ export function SchemaFrontmatterField({
 					placeholder={`Select ${label.toLowerCase()}...`}
 					options={refOptions}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 		}

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-editor-overlay.tsx

@@ -375,11 +375,22 @@ export function MarkdownEditorOverlay() {
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}
 		>
-			<div
+			<form
 				class={`bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 w-full max-h-[90vh] flex flex-col ${
 					hasSidebar ? 'max-w-6xl' : 'max-w-4xl'
 				}`}
 				data-cms-ui
+				onSubmit={(e) => {
+					e.preventDefault()
+					if (isCreateMode) {
+						handleCreate()
+					} else {
+						const currentContent = currentMarkdownPage.value?.content
+						if (currentContent !== undefined) {
+							handleSave(currentContent)
+						}
+					}
+				}}
 			>
 				{/* Header */}
 				<div class="flex items-center justify-between px-5 py-4 border-b border-white/10">
@@ -495,9 +506,8 @@ export function MarkdownEditorOverlay() {
 						{isCreateMode
 							? (
 								<button
-									type="button"
-									onClick={handleCreate}
-									disabled={isSaving || !(page.frontmatter.title as string)?.trim()}
+									type="submit"
+									disabled={isSaving}
 									class="px-4 py-2 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
 									data-cms-ui
 								>
@@ -507,13 +517,7 @@ export function MarkdownEditorOverlay() {
 							)
 							: (
 								<button
-									type="button"
-									onClick={() => {
-										const currentContent = currentMarkdownPage.value?.content
-										if (currentContent !== undefined) {
-											handleSave(currentContent)
-										}
-									}}
+									type="submit"
 									disabled={isSaving}
 									class="px-4 py-2 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
 									data-cms-ui
@@ -577,7 +581,7 @@ export function MarkdownEditorOverlay() {
 						/>
 					)}
 				</div>
-			</div>
+			</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' : ''}`}