@nuasite/cms 0.18.0 → 0.19.0

package/src/editor/components/mdx-component-picker.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'preact/hooks'
+import { getComponentDefinitions } from '../manifest'
+import { manifest, mdxComponentPickerOpen } from '../signals'
+import { ComponentCard, getDefaultProps } from './component-card'
+import { CancelButton, ModalBackdrop, ModalHeader } from './modal-shell'
+import { PropEditor } from './prop-editor'
+
+export interface MdxComponentPickerProps {
+	onInsert: (componentName: string, props: Record<string, string>) => void
+}
+
+export function MdxComponentPicker({ onInsert }: MdxComponentPickerProps) {
+	const isOpen = mdxComponentPickerOpen.value
+	const [selectedComponent, setSelectedComponent] = useState<string | null>(null)
+	const [propValues, setPropValues] = useState<Record<string, string>>({})
+	const [searchQuery, setSearchQuery] = useState('')
+
+	if (!isOpen) return null
+
+	const componentDefinitions = getComponentDefinitions(manifest.value)
+
+	const resetSelection = () => {
+		setSelectedComponent(null)
+		setPropValues({})
+	}
+
+	const close = () => {
+		mdxComponentPickerOpen.value = false
+		resetSelection()
+		setSearchQuery('')
+	}
+
+	const handleSelectComponent = (name: string) => {
+		const def = componentDefinitions[name]
+		if (!def) return
+		setSelectedComponent(name)
+		setPropValues(getDefaultProps(def))
+	}
+
+	const handleConfirmInsert = () => {
+		if (selectedComponent) {
+			onInsert(selectedComponent, propValues)
+			close()
+		}
+	}
+
+	const mdxAllowList = manifest.value?.mdxComponents
+	const filteredDefs = Object.values(componentDefinitions).filter((def) => {
+		if (mdxAllowList && !mdxAllowList.includes(def.name)) return false
+		return !searchQuery || def.name.toLowerCase().includes(searchQuery.toLowerCase())
+			|| def.description?.toLowerCase().includes(searchQuery.toLowerCase())
+	})
+
+	return (
+		<ModalBackdrop onClose={close} maxWidth="max-w-md" extraClass="max-h-[80vh] flex flex-col overflow-hidden">
+			{selectedComponent
+				? (
+					<>
+						<ModalHeader title={`Configure ${selectedComponent}`} onBack={resetSelection} onClose={close} />
+						<div class="p-5 overflow-y-auto flex-1">
+							<div class="px-4 py-3 bg-white/10 rounded-cms-md mb-4 text-[13px] text-white">
+								Inserting <strong>{selectedComponent}</strong> at cursor position
+							</div>
+							{(() => {
+								const selectedDef = componentDefinitions[selectedComponent]
+								if (!selectedDef || selectedDef.props.length === 0) {
+									return (
+										<div class="text-white/50 text-[13px]">
+											This component has no configurable props.
+										</div>
+									)
+								}
+								return selectedDef.props.map((prop) => (
+									<PropEditor
+										key={prop.name}
+										prop={prop}
+										value={propValues[prop.name] || ''}
+										onChange={(value) => setPropValues((prev) => ({ ...prev, [prop.name]: value }))}
+									/>
+								))
+							})()}
+						</div>
+						<div class="px-5 py-4 border-t border-white/10 flex gap-2 justify-end">
+							<CancelButton onClick={resetSelection} label="Back" />
+							<button
+								onClick={handleConfirmInsert}
+								class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+							>
+								Insert
+							</button>
+						</div>
+					</>
+				)
+				: (
+					<>
+						<ModalHeader title="Insert Component" onClose={close} />
+						<div class="px-5 pt-4">
+							<input
+								type="text"
+								value={searchQuery}
+								onInput={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
+								placeholder="Search components..."
+								class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+							/>
+						</div>
+						<div class="p-5 overflow-y-auto flex-1">
+							{filteredDefs.length === 0
+								? (
+									<div class="text-center text-white/50 py-8">
+										{searchQuery ? 'No components match your search.' : 'No components available.'}
+									</div>
+								)
+								: (
+									<div class="flex flex-col gap-2">
+										{filteredDefs.map((def) => <ComponentCard key={def.name} def={def} onClick={() => handleSelectComponent(def.name)} />)}
+									</div>
+								)}
+						</div>
+					</>
+				)}
+		</ModalBackdrop>
+	)
+}

package/src/editor/components/mdx-props-editor.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'preact/hooks'
+import { clampPanelPosition, Z_INDEX } from '../constants'
+import { getComponentDefinition } from '../manifest'
+import { closeMdxPropsEditor, manifest, mdxPropsEditorState } from '../signals'
+import { MdxComponentIcon } from './mdx-block-view'
+import { CancelButton, CloseButton } from './modal-shell'
+import { PropEditor } from './prop-editor'
+
+export function MdxPropsEditor({
+	onUpdateProps,
+}: {
+	onUpdateProps: (nodePos: number, props: Record<string, string>) => void
+}) {
+	const state = mdxPropsEditorState.value
+	const isVisible = state.isOpen && state.componentName !== null && state.nodePos !== null
+
+	const definition = isVisible ? getComponentDefinition(manifest.value, state.componentName!) : undefined
+	const [propValues, setPropValues] = useState<Record<string, string>>(state.props)
+
+	useEffect(() => {
+		if (isVisible) setPropValues(state.props)
+	}, [state.nodePos, state.componentName, state.props, isVisible])
+
+	if (!isVisible) return null
+
+	const panelStyle = state.cursorPos ? clampPanelPosition(state.cursorPos, 360) : {}
+
+	const handleSave = () => {
+		if (state.nodePos !== null) {
+			onUpdateProps(state.nodePos, propValues)
+			closeMdxPropsEditor()
+		}
+	}
+
+	return (
+		<>
+			<div
+				data-cms-ui
+				onClick={closeMdxPropsEditor}
+				style={{ zIndex: Z_INDEX.SELECTION }}
+				class="fixed inset-0"
+			/>
+
+			<div
+				data-cms-ui
+				onClick={(e: MouseEvent) => e.stopPropagation()}
+				class="fixed w-90 bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.4)] font-sans text-sm overflow-hidden flex flex-col rounded-cms-xl border border-white/10"
+				style={{ ...panelStyle, zIndex: Z_INDEX.MODAL }}
+			>
+				<div class="px-5 py-4 flex justify-between items-center border-b border-white/10">
+					<div class="flex items-center gap-2">
+						<MdxComponentIcon />
+						<span class="font-semibold text-white">{state.componentName}</span>
+					</div>
+					<CloseButton onClick={closeMdxPropsEditor} />
+				</div>
+
+				<div class="p-5 overflow-y-auto flex-1">
+					{definition
+						? (
+							definition.props.map((prop) => (
+								<PropEditor
+									key={prop.name}
+									prop={prop}
+									value={propValues[prop.name] || ''}
+									onChange={(value) => setPropValues((prev) => ({ ...prev, [prop.name]: value }))}
+								/>
+							))
+						)
+						: (
+							<div class="text-white/50 text-[13px]">
+								<div class="mb-3">Unknown component — props not editable.</div>
+								<div class="font-mono text-[11px] text-white/30 bg-white/5 p-3 rounded-cms-md break-all">
+									{Object.entries(propValues).map(([k, v]) => <div key={k}>{k}="{v}"</div>)}
+								</div>
+							</div>
+						)}
+				</div>
+
+				{definition && (
+					<div class="px-5 py-4 border-t border-white/10 flex gap-2 justify-end">
+						<CancelButton onClick={closeMdxPropsEditor} />
+						<button
+							onClick={handleSave}
+							class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+						>
+							Save
+						</button>
+					</div>
+				)}
+			</div>
+		</>
+	)
+}