@nuasite/cms 0.18.0 → 0.19.0

package/src/editor/markdown-api.ts

@@ -1,224 +1,136 @@
 import { API } from './constants'
+import { fetchWithTimeout, getJson, postJson } from './fetch'
 import type {
+	AddRedirectRequest,
 	CmsConfig,
 	CreateMarkdownPageRequest,
 	CreateMarkdownPageResponse,
+	CreatePageRequest,
+	DeletePageRequest,
+	DeleteRedirectRequest,
+	DuplicatePageRequest,
+	GetRedirectsResponse,
+	LayoutInfo,
 	MediaItem,
 	MediaUploadResponse,
+	PageOperationResponse,
+	RedirectOperationResponse,
 	UpdateMarkdownPageRequest,
 	UpdateMarkdownPageResponse,
+	UpdateRedirectRequest,
 } from './types'
 
-/**
- * Create a fetch request with timeout
- */
-async function fetchWithTimeout(
-	url: string,
-	options: RequestInit = {},
-	timeoutMs: number = API.REQUEST_TIMEOUT_MS,
-): Promise<Response> {
-	const controller = new AbortController()
-	const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
-
-	try {
-		const response = await fetch(url, {
-			...options,
-			signal: controller.signal,
-		})
-		return response
-	} finally {
-		clearTimeout(timeoutId)
-	}
-}
-
-/**
- * Create a new markdown page (blog post)
- */
-export async function createMarkdownPage(
-	config: CmsConfig,
-	request: CreateMarkdownPageRequest,
-): Promise<CreateMarkdownPageResponse> {
-	const res = await fetchWithTimeout(`${config.apiBase}/markdown/create`, {
-		method: 'POST',
-		credentials: 'include',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify(request),
-	})
+// Markdown operations
 
-	if (!res.ok) {
-		const text = await res.text().catch(() => '')
-		return {
-			success: false,
-			error: `Create page failed (${res.status}): ${text || res.statusText}`,
-		}
-	}
-
-	return res.json()
+export function createMarkdownPage(config: CmsConfig, request: CreateMarkdownPageRequest): Promise<CreateMarkdownPageResponse> {
+	return postJson(`${config.apiBase}/markdown/create`, request, 'Create page failed')
 }
 
-/**
- * Update an existing markdown page
- */
-export async function updateMarkdownPage(
-	config: CmsConfig,
-	request: UpdateMarkdownPageRequest,
-): Promise<UpdateMarkdownPageResponse> {
-	const res = await fetchWithTimeout(`${config.apiBase}/markdown/update`, {
-		method: 'POST',
-		credentials: 'include',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify(request),
-	})
-
-	if (!res.ok) {
-		const text = await res.text().catch(() => '')
-		return {
-			success: false,
-			error: `Update page failed (${res.status}): ${text || res.statusText}`,
-		}
-	}
-
-	return res.json()
+export function updateMarkdownPage(config: CmsConfig, request: UpdateMarkdownPageRequest): Promise<UpdateMarkdownPageResponse> {
+	return postJson(`${config.apiBase}/markdown/update`, request, 'Update page failed')
 }
 
-/**
- * Fetch markdown content from a file path
- */
-export async function fetchMarkdownContent(
+export function renameMarkdownPage(
 	config: CmsConfig,
 	filePath: string,
-): Promise<{ content: string; frontmatter: Record<string, unknown> } | null> {
-	const res = await fetchWithTimeout(
-		`${config.apiBase}/markdown/content?path=${encodeURIComponent(filePath)}`,
-		{
-			method: 'GET',
-			credentials: 'include',
-		},
-	)
-
-	if (!res.ok) {
-		return null
-	}
+	newSlug: string,
+): Promise<{ success: boolean; newFilePath?: string; newSlug?: string; error?: string }> {
+	return postJson(`${config.apiBase}/markdown/rename`, { filePath, newSlug }, 'Rename failed')
+}
 
-	return res.json()
+export function deleteMarkdownPage(config: CmsConfig, filePath: string): Promise<{ success: boolean; error?: string }> {
+	return postJson(`${config.apiBase}/markdown/delete`, { filePath }, 'Delete failed')
 }
 
-/**
- * Delete a markdown page (collection entry)
- */
-export async function deleteMarkdownPage(
+export function fetchMarkdownContent(
 	config: CmsConfig,
 	filePath: string,
-): Promise<{ success: boolean; error?: string }> {
-	const res = await fetchWithTimeout(`${config.apiBase}/markdown/delete`, {
-		method: 'POST',
-		credentials: 'include',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({ filePath }),
-	})
-
-	if (!res.ok) {
-		const text = await res.text().catch(() => '')
-		return {
-			success: false,
-			error: `Delete failed (${res.status}): ${text || res.statusText}`,
-		}
-	}
-
-	return res.json()
+): Promise<{ content: string; frontmatter: Record<string, unknown> } | null> {
+	return getJson(`${config.apiBase}/markdown/content?path=${encodeURIComponent(filePath)}`, null)
 }
 
-/**
- * Fetch media library items
- */
+// Media operations
+
 export async function fetchMediaLibrary(
 	config: CmsConfig,
-	cursor?: string,
-	limit = 50,
-): Promise<{ items: MediaItem[]; hasMore: boolean; cursor?: string }> {
-	const params = new URLSearchParams({ limit: String(limit) })
-	if (cursor) {
-		params.set('cursor', cursor)
-	}
+	options?: { cursor?: string; limit?: number; folder?: string; type?: string },
+): Promise<{ items: MediaItem[]; folders?: Array<{ name: string; path: string }>; hasMore: boolean; cursor?: string }> {
+	const params = new URLSearchParams({ limit: String(options?.limit ?? 50) })
+	if (options?.cursor) params.set('cursor', options.cursor)
+	if (options?.folder) params.set('folder', options.folder)
+	if (options?.type && options.type !== 'all') params.set('type', options.type)
 
 	const res = await fetchWithTimeout(`${config.apiBase}/media/list?${params}`, {
 		method: 'GET',
 		credentials: 'include',
 	})
 
-	if (!res.ok) {
-		throw new Error(`Failed to fetch media library (${res.status})`)
-	}
-
+	if (!res.ok) throw new Error(`Failed to fetch media library (${res.status})`)
 	return res.json()
 }
 
-/**
- * Upload a media file
- */
-export async function uploadMedia(
+export function uploadMedia(
 	config: CmsConfig,
 	file: File,
 	onProgress?: (percent: number) => void,
+	options?: { folder?: string },
 ): Promise<MediaUploadResponse> {
 	const formData = new FormData()
 	formData.append('file', file)
 
-	// Use XMLHttpRequest for progress tracking
+	const params = new URLSearchParams()
+	if (options?.folder) params.set('folder', options.folder)
+	const qs = params.toString()
+
 	return new Promise((resolve) => {
 		const xhr = new XMLHttpRequest()
 
 		xhr.upload.addEventListener('progress', (e) => {
 			if (e.lengthComputable && onProgress) {
-				const percent = Math.round((e.loaded / e.total) * 100)
-				onProgress(percent)
+				onProgress(Math.round((e.loaded / e.total) * 100))
 			}
 		})
 
 		xhr.addEventListener('load', () => {
 			if (xhr.status >= 200 && xhr.status < 300) {
 				try {
-					const response = JSON.parse(xhr.responseText)
-					resolve(response)
+					resolve(JSON.parse(xhr.responseText))
 				} catch {
 					resolve({ success: false, error: 'Invalid response format' })
 				}
 			} else {
-				resolve({
-					success: false,
-					error: `Upload failed (${xhr.status}): ${xhr.statusText}`,
-				})
+				resolve({ success: false, error: `Upload failed (${xhr.status}): ${xhr.statusText}` })
 			}
 		})
 
-		xhr.addEventListener('error', () => {
-			resolve({ success: false, error: 'Network error during upload' })
-		})
-
-		xhr.addEventListener('timeout', () => {
-			resolve({ success: false, error: 'Upload timed out' })
-		})
+		xhr.addEventListener('error', () => resolve({ success: false, error: 'Network error during upload' }))
+		xhr.addEventListener('timeout', () => resolve({ success: false, error: 'Upload timed out' }))
 
-		xhr.open('POST', `${config.apiBase}/media/upload`)
+		xhr.open('POST', `${config.apiBase}/media/upload${qs ? `?${qs}` : ''}`)
 		xhr.withCredentials = true
-		xhr.timeout = API.REQUEST_TIMEOUT_MS * 2 // Allow more time for uploads
+		xhr.timeout = API.REQUEST_TIMEOUT_MS * 2
 		xhr.send(formData)
 	})
 }
 
-/**
- * Delete a media item
- */
-export async function deleteMedia(
+export async function createMediaFolder(
 	config: CmsConfig,
-	mediaId: string,
+	folder: string,
 ): Promise<{ success: boolean; error?: string }> {
+	return postJson(`${config.apiBase}/media/folder`, { folder }, 'Create folder failed')
+}
+
+export async function fetchProjectImages(config: CmsConfig): Promise<{ items: MediaItem[] }> {
+	const res = await fetchWithTimeout(`${config.apiBase}/media/project-images`, {
+		method: 'GET',
+		credentials: 'include',
+	})
+
+	if (!res.ok) throw new Error(`Failed to fetch project images (${res.status})`)
+	return res.json()
+}
+
+export async function deleteMedia(config: CmsConfig, mediaId: string): Promise<{ success: boolean; error?: string }> {
 	const res = await fetchWithTimeout(`${config.apiBase}/media/${mediaId}`, {
 		method: 'DELETE',
 		credentials: 'include',
@@ -226,11 +138,48 @@ export async function deleteMedia(
 
 	if (!res.ok) {
 		const text = await res.text().catch(() => '')
-		return {
-			success: false,
-			error: `Delete failed (${res.status}): ${text || res.statusText}`,
-		}
+		return { success: false, error: `Delete failed (${res.status}): ${text || res.statusText}` }
 	}
 
 	return { success: true }
 }
+
+// Page operations
+
+export function createPage(config: CmsConfig, request: CreatePageRequest): Promise<PageOperationResponse> {
+	return postJson(`${config.apiBase}/page/create`, request)
+}
+
+export function duplicatePage(config: CmsConfig, request: DuplicatePageRequest): Promise<PageOperationResponse> {
+	return postJson(`${config.apiBase}/page/duplicate`, request)
+}
+
+export function deletePage(config: CmsConfig, request: DeletePageRequest): Promise<PageOperationResponse> {
+	return postJson(`${config.apiBase}/page/delete`, request)
+}
+
+export function checkSlugExists(config: CmsConfig, slug: string, signal?: AbortSignal): Promise<{ exists: boolean; filePath?: string }> {
+	return getJson(`${config.apiBase}/page/check-slug?slug=${encodeURIComponent(slug)}`, { exists: false }, signal)
+}
+
+export function getLayouts(config: CmsConfig): Promise<{ layouts: LayoutInfo[] }> {
+	return getJson(`${config.apiBase}/page/layouts`, { layouts: [] })
+}
+
+// Redirect operations
+
+export function getRedirects(config: CmsConfig): Promise<GetRedirectsResponse> {
+	return getJson(`${config.apiBase}/redirects`, { rules: [] })
+}
+
+export function addRedirect(config: CmsConfig, request: AddRedirectRequest): Promise<RedirectOperationResponse> {
+	return postJson(`${config.apiBase}/redirects/add`, request)
+}
+
+export function updateRedirect(config: CmsConfig, request: UpdateRedirectRequest): Promise<RedirectOperationResponse> {
+	return postJson(`${config.apiBase}/redirects/update`, request)
+}
+
+export function deleteRedirect(config: CmsConfig, request: DeleteRedirectRequest): Promise<RedirectOperationResponse> {
+	return postJson(`${config.apiBase}/redirects/delete`, request)
+}

package/src/editor/milkdown-mdx-plugin.tsx

@@ -0,0 +1,269 @@
+import type { Node as PmNode, NodeType } from '@milkdown/prose/model'
+import type { Command } from '@milkdown/prose/state'
+import type { MarkdownNode, SerializerState } from '@milkdown/transformer'
+import { $command, $node, $remark, $view } from '@milkdown/utils'
+import { render } from 'preact'
+import remarkMdx from 'remark-mdx'
+import { MdxBlockCard } from './components/mdx-block-view'
+import { openMdxPropsEditor } from './signals'
+
+/** Prefix used to distinguish expression attributes from string literals in serialized props */
+export const MDX_EXPR_PREFIX = '__mdx_expr__:'
+
+export const remarkMdxPlugin: any = $remark('remarkMdx', () => remarkMdx)
+
+function parseJsxAttributes(attributes: any[]): { props: Record<string, string>; hasExpressions: boolean } {
+	const props: Record<string, string> = {}
+	let hasExpressions = false
+
+	if (!Array.isArray(attributes)) return { props, hasExpressions }
+
+	for (const attr of attributes) {
+		if (attr.type === 'mdxJsxAttribute' && attr.name) {
+			if (attr.value === null || attr.value === undefined) {
+				// Boolean attribute: <Component flag />
+				props[attr.name] = 'true'
+			} else if (typeof attr.value === 'string') {
+				props[attr.name] = attr.value
+			} else if (attr.value?.type === 'mdxJsxAttributeValueExpression') {
+				// Expression attribute: prop={value}
+				props[attr.name] = `${MDX_EXPR_PREFIX}${attr.value.value}`
+				hasExpressions = true
+			}
+		}
+		if (attr.type === 'mdxJsxExpressionAttribute') {
+			hasExpressions = true
+		}
+	}
+
+	return { props, hasExpressions }
+}
+
+function serializePropsToAttributes(props: Record<string, string>): any[] {
+	const attributes: any[] = []
+
+	for (const [name, value] of Object.entries(props)) {
+		if (value.startsWith(MDX_EXPR_PREFIX)) {
+			attributes.push({
+				type: 'mdxJsxAttribute',
+				name,
+				value: {
+					type: 'mdxJsxAttributeValueExpression',
+					value: value.slice(MDX_EXPR_PREFIX.length),
+				},
+			})
+		} else {
+			attributes.push({
+				type: 'mdxJsxAttribute',
+				name,
+				value,
+			})
+		}
+	}
+
+	return attributes
+}
+
+export const mdxComponentNode = $node('mdx_component', () => ({
+	group: 'block',
+	atom: true,
+	isolating: true,
+	selectable: true,
+	draggable: true,
+	attrs: {
+		componentName: { default: '' },
+		props: { default: '{}' },
+		hasExpressions: { default: false },
+	},
+	toDOM: (node: PmNode) => {
+		const div = document.createElement('div')
+		div.setAttribute('data-mdx-component', node.attrs.componentName)
+		div.setAttribute('data-mdx-props', node.attrs.props)
+		div.className = 'mdx-component-block'
+		div.textContent = `<${node.attrs.componentName} />`
+		return div as any
+	},
+	parseDOM: [{
+		tag: 'div[data-mdx-component]',
+		getAttrs: (dom: HTMLElement) => ({
+			componentName: dom.getAttribute('data-mdx-component') || '',
+			props: dom.getAttribute('data-mdx-props') || '{}',
+		}),
+	}],
+	parseMarkdown: {
+		match: (node: MarkdownNode) => node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement',
+		runner: (state, node, proseType: NodeType) => {
+			const name = (node as any).name as string | null
+			if (!name) return // Skip fragments
+
+			const { props, hasExpressions } = parseJsxAttributes((node as any).attributes)
+
+			state.addNode(proseType, {
+				componentName: name,
+				props: JSON.stringify(props),
+				hasExpressions,
+			})
+		},
+	},
+	toMarkdown: {
+		match: (node: PmNode) => node.type.name === 'mdx_component',
+		runner: (state: SerializerState, node: PmNode) => {
+			const componentName = node.attrs.componentName as string
+			const props: Record<string, string> = JSON.parse(node.attrs.props as string)
+			const attributes = serializePropsToAttributes(props)
+
+			state.addNode('mdxJsxFlowElement', undefined, undefined, {
+				name: componentName,
+				attributes,
+				children: [],
+			} as any)
+		},
+	},
+}))
+
+export interface InsertMdxComponentPayload {
+	componentName: string
+	props: Record<string, string>
+}
+
+export const insertMdxComponentCommand = $command('insertMdxComponent', (ctx) => {
+	return (payload?: InsertMdxComponentPayload): Command => {
+		return (state, dispatch) => {
+			if (!payload) return false
+			const nodeType = state.schema.nodes.mdx_component
+			if (!nodeType) return false
+
+			const node = nodeType.create({
+				componentName: payload.componentName,
+				props: JSON.stringify(payload.props),
+				hasExpressions: false,
+			})
+
+			if (dispatch) {
+				const { from } = state.selection
+				const tr = state.tr.insert(from, node)
+				dispatch(tr)
+			}
+			return true
+		}
+	}
+})
+
+export const mdxComponentView = $view(mdxComponentNode, () => {
+	return (pmNode, view, getPos) => {
+		const container = document.createElement('div')
+		container.className = 'mdx-block-card-wrapper'
+		container.setAttribute('data-cms-ui', '')
+		container.contentEditable = 'false'
+
+		let lastAttrs: { componentName: string; props: string; hasExpressions: boolean } | null = null
+
+		const renderCard = (node: PmNode) => {
+			const componentName = node.attrs.componentName as string
+			const propsJson = node.attrs.props as string
+			const props: Record<string, string> = JSON.parse(propsJson)
+			const hasExpressions = node.attrs.hasExpressions as boolean
+
+			lastAttrs = { componentName, props: propsJson, hasExpressions }
+
+			render(
+				<MdxBlockCard
+					componentName={componentName}
+					props={props}
+					hasExpressions={hasExpressions}
+					onEdit={(cursorPos) => {
+						const pos = typeof getPos === 'function' ? getPos() : null
+						if (pos != null) {
+							openMdxPropsEditor(pos, componentName, props, cursorPos)
+						}
+					}}
+					onRemove={() => {
+						const pos = typeof getPos === 'function' ? getPos() : null
+						if (pos != null) {
+							const currentNode = view.state.doc.nodeAt(pos)
+							if (currentNode) {
+								const tr = view.state.tr.delete(pos, pos + currentNode.nodeSize)
+								view.dispatch(tr)
+							}
+						}
+					}}
+				/>,
+				container,
+			)
+		}
+
+		renderCard(pmNode)
+
+		return {
+			dom: container,
+			stopEvent: (event: Event) => {
+				if (event.type === 'mousedown' || event.type === 'click') {
+					const target = event.target as HTMLElement
+					if (target.closest('button') || target.closest('[data-mdx-action]')) {
+						return true
+					}
+				}
+				return false
+			},
+			ignoreMutation: () => true,
+			update: (updatedNode: PmNode) => {
+				if (updatedNode.type.name !== 'mdx_component') return false
+				const attrs = updatedNode.attrs
+				if (
+					lastAttrs
+					&& attrs.componentName === lastAttrs.componentName
+					&& attrs.props === lastAttrs.props
+					&& attrs.hasExpressions === lastAttrs.hasExpressions
+				) {
+					return true
+				}
+				renderCard(updatedNode)
+				return true
+			},
+			destroy: () => {
+				render(null, container)
+			},
+		}
+	}
+})
+
+/**
+ * Hidden node that preserves `import ... from '...'` statements through the editor round-trip.
+ * remark-mdx parses these as `mdxjsEsm` — without a matching ProseMirror node Milkdown throws.
+ */
+export const mdxEsmNode = $node('mdx_esm', () => ({
+	group: 'block',
+	atom: true,
+	attrs: {
+		value: { default: '' },
+	},
+	toDOM: () => {
+		// Render nothing — imports are invisible in the editor
+		const span = document.createElement('span')
+		span.style.display = 'none'
+		return span as any
+	},
+	parseDOM: [],
+	parseMarkdown: {
+		match: (node: MarkdownNode) => node.type === 'mdxjsEsm',
+		runner: (state, node, proseType: NodeType) => {
+			state.addNode(proseType, { value: (node as any).value ?? '' })
+		},
+	},
+	toMarkdown: {
+		match: (node: PmNode) => node.type.name === 'mdx_esm',
+		runner: (state: SerializerState, node: PmNode) => {
+			state.addNode('mdxjsEsm', undefined, undefined, {
+				value: node.attrs.value as string,
+			} as any)
+		},
+	},
+}))
+
+export const mdxComponentPlugin = [
+	remarkMdxPlugin,
+	mdxEsmNode,
+	mdxComponentNode,
+	mdxComponentView,
+	insertMdxComponentCommand,
+] as const