@nuasite/cms 0.19.1 → 0.20.1

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

@@ -50,6 +50,7 @@ export function MarkdownEditorOverlay() {
 	// Preview mode state
 	const [isPreview, setIsPreview] = useState(false)
 	const originalHTMLRef = useRef<string | null>(null)
+	const previewTargetRef = useRef<HTMLElement | null>(null)
 	const editorInstanceRef = useRef<Editor | null>(null)
 
 	useEffect(() => {
@@ -58,6 +59,19 @@ export function MarkdownEditorOverlay() {
 		}
 	}, [isCreateMode, isDataCollection])
 
+	// Auto-generate slug from title in create mode (unless user manually edited the slug)
+	useEffect(() => {
+		if (!isCreateMode || slugManuallyEdited) return
+		const title = (page?.frontmatter.title as string) || (page?.frontmatter.name as string) || ''
+		if (!title) return
+		markdownEditorState.value = {
+			...markdownEditorState.value,
+			currentPage: markdownEditorState.value.currentPage
+				? { ...markdownEditorState.value.currentPage, slug: slugify(title), isDirty: true }
+				: null,
+		}
+	}, [isCreateMode, slugManuallyEdited, page?.frontmatter.title, page?.frontmatter.name])
+
 	const handleDeploymentComplete = useCallback(
 		(status: 'completed' | 'failed' | 'timeout') => {
 			if (status === 'failed') {
@@ -67,14 +81,21 @@ export function MarkdownEditorOverlay() {
 		[],
 	)
 
+	/** Find the [data-cms-markdown] wrapper element on the actual page (not CMS UI). */
+	const findMarkdownWrapper = useCallback((): HTMLElement | null => {
+		const SKIP_TAGS = new Set(['BODY', 'HTML', 'BUTTON', 'SPAN', 'A'])
+		const candidates = document.querySelectorAll('[data-cms-markdown]:not([data-cms-ui])')
+		for (const c of candidates) {
+			if (!SKIP_TAGS.has(c.tagName)) return c as HTMLElement
+		}
+		return null
+	}, [])
+
 	const restoreOriginalHTML = useCallback(() => {
-		const activeId = markdownEditorState.value.activeElementId
-		if (originalHTMLRef.current !== null && activeId) {
-			const el = document.querySelector(`[data-cms-id="${activeId}"]`)
-			if (el) {
-				el.innerHTML = originalHTMLRef.current
-			}
+		if (originalHTMLRef.current !== null && previewTargetRef.current) {
+			previewTargetRef.current.innerHTML = originalHTMLRef.current
 			originalHTMLRef.current = null
+			previewTargetRef.current = null
 		}
 	}, [])
 
@@ -95,11 +116,8 @@ export function MarkdownEditorOverlay() {
 				if (result.success) {
 					// Keep the preview HTML in place so user sees changes immediately
 					// If not in preview mode, inject editor HTML into the page element
-					const activeId = markdownEditorState.value.activeElementId
-					if (activeId && editorInstanceRef.current && !isPreview) {
-						const el = document.querySelector(
-							`[data-cms-id="${activeId}"]`,
-						)
+					if (editorInstanceRef.current && !isPreview) {
+						const el = findMarkdownWrapper()
 						if (el) {
 							try {
 								const view = editorInstanceRef.current.ctx.get(editorViewCtx)
@@ -133,7 +151,7 @@ export function MarkdownEditorOverlay() {
 				setIsSaving(false)
 			}
 		},
-		[isSaving, isPreview, handleDeploymentComplete],
+		[isSaving, isPreview, handleDeploymentComplete, findMarkdownWrapper],
 	)
 
 	const handleCreate = useCallback(async () => {
@@ -215,19 +233,21 @@ export function MarkdownEditorOverlay() {
 		if (!editorInstanceRef.current || !activeId) return
 
 		if (!isPreview) {
-			// Enter preview
-			const el = document.querySelector(`[data-cms-id="${activeId}"]`)
+			// Enter preview — inject editor HTML into the markdown wrapper element.
+			const el = findMarkdownWrapper()
 			if (!el) {
 				showToast('Could not find page element to preview', 'error')
 				return
 			}
 			originalHTMLRef.current = el.innerHTML
+			previewTargetRef.current = el
 			try {
 				const view = editorInstanceRef.current.ctx.get(editorViewCtx)
 				el.innerHTML = view.dom.innerHTML
 			} catch (error) {
 				console.error('Failed to get editor HTML for preview:', error)
 				originalHTMLRef.current = null
+				previewTargetRef.current = null
 				showToast('Failed to generate preview', 'error')
 				return
 			}
@@ -239,7 +259,7 @@ export function MarkdownEditorOverlay() {
 			setIsPreview(false)
 			isMarkdownPreview.value = false
 		}
-	}, [isPreview, restoreOriginalHTML])
+	}, [isPreview, restoreOriginalHTML, findMarkdownWrapper])
 
 	const handleCancel = useCallback(() => {
 		restoreOriginalHTML()
@@ -326,8 +346,8 @@ export function MarkdownEditorOverlay() {
 			>
 				{/* Header */}
 				<div class="flex items-center justify-between px-5 py-4 border-b border-white/10">
-					<div class="flex items-center gap-3">
-						<div class="flex items-center text-white">
+					<div class="flex items-center gap-3 flex-1 min-w-0">
+						<div class="flex items-center text-white shrink-0">
 							<svg
 								width="20"
 								height="20"
@@ -345,36 +365,11 @@ export function MarkdownEditorOverlay() {
 								<line x1="10" y1="9" x2="8" y2="9" />
 							</svg>
 						</div>
-						<div>
-							<input
-								type="text"
-								value={(page.frontmatter.title as string) || (page.frontmatter.name as string) || ''}
-								placeholder={isDataCollection ? 'Entry name...' : 'Page title...'}
-								onInput={(e) => {
-									const title = (e.target as HTMLInputElement).value
-									// Data collections may use 'name' instead of 'title'
-									const titleField = isDataCollection && !('title' in page.frontmatter) && 'name' in page.frontmatter ? 'name' : 'title'
-									updateMarkdownFrontmatter({ [titleField]: title })
-									// Auto-generate slug in create mode if not manually edited
-									if (isCreateMode && !slugManuallyEdited) {
-										markdownEditorState.value = {
-											...markdownEditorState.value,
-											currentPage: markdownEditorState.value.currentPage
-												? {
-													...markdownEditorState.value.currentPage,
-													slug: slugify(title),
-													isDirty: true,
-												}
-												: null,
-										}
-									}
-								}}
-								class="text-base font-semibold text-white m-0 bg-transparent border-none outline-none placeholder-white/40 w-64"
-								data-cms-ui
-							/>
-						</div>
+						<span class="text-base font-semibold text-white truncate">
+							{(page.frontmatter.title as string) || (page.frontmatter.name as string) || (isDataCollection ? 'Entry name' : 'Page title')}
+						</span>
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-2 shrink-0">
 						{!isDataCollection && (
 							<button
 								type="button"

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

@@ -1,4 +1,4 @@
-import { commandsCtx, defaultValueCtx, Editor, editorViewCtx, rootCtx } from '@milkdown/core'
+import { defaultValueCtx, Editor, editorViewCtx, rootCtx } from '@milkdown/core'
 import { listener, listenerCtx } from '@milkdown/plugin-listener'
 import {
 	commonmark,
@@ -15,10 +15,10 @@ import { callCommand, insert, replaceAll } from '@milkdown/utils'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 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 { MdxComponentIcon } from './mdx-block-view'
 import { MdxComponentPicker } from './mdx-component-picker'
-import { MdxPropsEditor } from './mdx-props-editor'
 
 export interface MarkdownInlineEditorProps {
 	elementId: string
@@ -45,27 +45,7 @@ export function MarkdownInlineEditor({
 	const [uploadProgress, setUploadProgress] = useState<number | null>(null)
 
 	// Track active formatting for toolbar highlighting
-	const [activeFormats, setActiveFormats] = useState<{
-		bold: boolean
-		italic: boolean
-		strikethrough: boolean
-		link: boolean
-		linkHref: string | null
-		bulletList: boolean
-		orderedList: boolean
-		blockquote: boolean
-		heading: number | null
-	}>({
-		bold: false,
-		italic: false,
-		strikethrough: false,
-		link: false,
-		linkHref: null,
-		bulletList: false,
-		orderedList: false,
-		blockquote: false,
-		heading: null,
-	})
+	const [activeFormats, setActiveFormats] = useState<ActiveFormats>(defaultActiveFormats)
 
 	// Store initial content in ref to avoid stale closure issues
 	const initialContentRef = useRef(initialContent)
@@ -79,91 +59,11 @@ export function MarkdownInlineEditor({
 	const isMdxRef = useRef(isMdx ?? false)
 	isMdxRef.current = isMdx ?? false
 
-	// Check active formatting at current selection
-	const updateActiveFormats = useCallback(() => {
-		if (!editorInstanceRef.current) return
-
-		try {
-			const view = editorInstanceRef.current.ctx.get(editorViewCtx)
-			const { state } = view
-			const { $from, from, to } = state.selection
-
-			// Check marks (inline formatting)
-			let bold = false
-			let italic = false
-			let strikethrough = false
-			let link = false
-			let linkHref: string | null = null
-
-			// Check if marks are active in the selection
-			const marks = state.storedMarks || $from.marks()
-			for (const mark of marks) {
-				if (mark.type.name === 'strong') bold = true
-				if (mark.type.name === 'emphasis') italic = true
-				if (mark.type.name === 'strikethrough') strikethrough = true
-				if (mark.type.name === 'link') {
-					link = true
-					linkHref = mark.attrs.href as string
-				}
-			}
-
-			// Also check marks in the selection range
-			if (from !== to) {
-				state.doc.nodesBetween(from, to, (node) => {
-					if (node.marks) {
-						for (const mark of node.marks) {
-							if (mark.type.name === 'strong') bold = true
-							if (mark.type.name === 'emphasis') italic = true
-							if (mark.type.name === 'strikethrough') strikethrough = true
-							if (mark.type.name === 'link') {
-								link = true
-								linkHref = mark.attrs.href as string
-							}
-						}
-					}
-				})
-			}
-
-			// Check block types (lists, blockquote, heading)
-			let bulletList = false
-			let orderedList = false
-			let blockquote = false
-			let heading: number | null = null
-
-			for (let depth = $from.depth; depth > 0; depth--) {
-				const node = $from.node(depth)
-				if (node.type.name === 'bullet_list') bulletList = true
-				if (node.type.name === 'ordered_list') orderedList = true
-				if (node.type.name === 'blockquote') blockquote = true
-			}
-
-			// Check heading at current position
-			const parentNode = $from.parent
-			if (parentNode.type.name === 'heading') {
-				heading = parentNode.attrs.level as number
-			}
-
-			setActiveFormats({
-				bold,
-				italic,
-				strikethrough,
-				link,
-				linkHref,
-				bulletList,
-				orderedList,
-				blockquote,
-				heading,
-			})
-		} catch {
-			// Ignore errors during format checking
-		}
-	}, [])
-
 	// Initialize Milkdown editor
 	useEffect(() => {
 		if (!editorRef.current) return
 
-		let formatRaf = 0
+		let cleanupTracking: (() => void) | undefined
 
 		const initEditor = async () => {
 			try {
@@ -193,20 +93,8 @@ export function MarkdownInlineEditor({
 				setIsReady(true)
 				onEditorReadyRef.current?.(editor)
 
-				// Set up selection change listener — debounce via rAF to avoid
-				// redundant mark-scanning on every keystroke
-				const view = editor.ctx.get(editorViewCtx)
-				const originalDispatch = view.dispatch.bind(view)
-				view.dispatch = (tr) => {
-					originalDispatch(tr)
-					if (tr.selectionSet || tr.docChanged) {
-						cancelAnimationFrame(formatRaf)
-						formatRaf = requestAnimationFrame(updateActiveFormats)
-					}
-				}
-
-				// Initial format check
-				updateActiveFormats()
+				// Set up selection change listener with shallow equality check
+				cleanupTracking = setupFormatTracking(editor, setActiveFormats)
 			} catch (error) {
 				console.error('Milkdown editor initialization failed:', error)
 				showToast('Failed to initialize markdown editor', 'error')
@@ -216,11 +104,11 @@ export function MarkdownInlineEditor({
 		initEditor()
 
 		return () => {
-			cancelAnimationFrame(formatRaf)
+			cleanupTracking?.()
 			editorInstanceRef.current?.destroy()
 			editorInstanceRef.current = null
 		}
-	}, [updateActiveFormats])
+	}, [])
 
 	const handleSave = useCallback(() => {
 		onSave(content)
@@ -283,18 +171,12 @@ export function MarkdownInlineEditor({
 	)
 
 	// Check if selection is inside a list of given type
-	const isInList = useCallback(
+	const checkInList = useCallback(
 		(listType: 'bullet_list' | 'ordered_list'): boolean => {
 			if (!editorInstanceRef.current) return false
 			try {
 				const view = editorInstanceRef.current.ctx.get(editorViewCtx)
-				const { state } = view
-				const { $from } = state.selection
-				for (let depth = $from.depth; depth > 0; depth--) {
-					const node = $from.node(depth)
-					if (node.type.name === listType) return true
-				}
-				return false
+				return isInListType(view, listType)
 			} catch {
 				return false
 			}
@@ -304,21 +186,21 @@ export function MarkdownInlineEditor({
 
 	// Toggle bullet list - if in bullet list, remove it; otherwise add it
 	const handleBulletList = useCallback(() => {
-		if (isInList('bullet_list')) {
+		if (checkInList('bullet_list')) {
 			runCommand(liftListItemCommand.key)
 		} else {
 			runCommand(wrapInBulletListCommand.key)
 		}
-	}, [runCommand, isInList])
+	}, [runCommand, checkInList])
 
 	// Toggle ordered list - if in ordered list, remove it; otherwise add it
 	const handleOrderedList = useCallback(() => {
-		if (isInList('ordered_list')) {
+		if (checkInList('ordered_list')) {
 			runCommand(liftListItemCommand.key)
 		} else {
 			runCommand(wrapInOrderedListCommand.key)
 		}
-	}, [runCommand, isInList])
+	}, [runCommand, checkInList])
 
 	const handleInsertLink = useCallback(() => {
 		if (!editorInstanceRef.current) return
@@ -369,24 +251,20 @@ export function MarkdownInlineEditor({
 	}, [activeFormats.link, activeFormats.linkHref])
 
 	const handleInsertHeading = useCallback((level: number) => {
-		const prefix = '#'.repeat(level) + ' '
-		const headingMarkdown = `\n\n${prefix}Heading\n\n`
-
-		// Insert at cursor position
-		if (editorInstanceRef.current) {
-			try {
-				editorInstanceRef.current.action(insert(headingMarkdown))
-			} catch (error) {
-				console.error('Failed to insert heading:', error)
-			}
+		if (!editorInstanceRef.current) return
+		try {
+			const view = editorInstanceRef.current.ctx.get(editorViewCtx)
+			toggleHeading(view, level)
+		} catch (error) {
+			console.error('Failed to toggle heading:', error)
 		}
 	}, [])
 
 	// MDX component insertion
-	const handleInsertMdxComponent = useCallback((componentName: string, props: Record<string, string>) => {
+	const handleInsertMdxComponent = useCallback((componentName: string, props: Record<string, string>, children?: string) => {
 		if (editorInstanceRef.current) {
 			try {
-				editorInstanceRef.current.action(callCommand(insertMdxComponentCommand.key, { componentName, props }))
+				editorInstanceRef.current.action(callCommand(insertMdxComponentCommand.key, { componentName, props, children }))
 			} catch (error) {
 				console.error('Failed to insert MDX component:', error)
 			}
@@ -397,42 +275,36 @@ export function MarkdownInlineEditor({
 		mdxComponentPickerOpen.value = true
 	}, [])
 
-	const handleUpdateMdxProps = useCallback((nodePos: number, props: Record<string, string>) => {
-		if (!editorInstanceRef.current) return
-		try {
-			const view = editorInstanceRef.current.ctx.get(editorViewCtx)
-			const node = view.state.doc.nodeAt(nodePos)
-			if (node && node.type.name === 'mdx_component') {
-				const tr = view.state.tr.setNodeMarkup(nodePos, undefined, {
-					...node.attrs,
-					props: JSON.stringify(props),
-				})
-				view.dispatch(tr)
-			}
-		} catch (error) {
-			console.error('Failed to update MDX component props:', error)
-		}
-	}, [])
-
 	// Drag and drop handlers for direct image upload
+	// Only intercept external file drags — let ProseMirror handle internal drags (node reorder)
+	const hasFiles = (e: DragEvent) => e.dataTransfer?.types?.includes('Files') ?? false
+
 	const handleDragOver = useCallback((e: DragEvent) => {
+		if (!hasFiles(e)) return
 		e.preventDefault()
 		e.stopPropagation()
 		setIsDragging(true)
 	}, [])
 
 	const handleDragLeave = useCallback((e: DragEvent) => {
+		if (!hasFiles(e)) return
 		e.preventDefault()
 		e.stopPropagation()
 		setIsDragging(false)
 	}, [])
 
 	const handleDrop = useCallback(async (e: DragEvent) => {
+		// Only handle external file drops — let ProseMirror handle internal drags (e.g. node reorder)
+		if (!hasFiles(e)) return
+
 		e.preventDefault()
 		e.stopPropagation()
 		setIsDragging(false)
 
-		const file = e.dataTransfer?.files[0]
+		const files = e.dataTransfer?.files
+		if (!files || files.length === 0) return
+
+		const file = files[0]
 		if (!file || !file.type.startsWith('image/')) {
 			showToast('Please drop an image file', 'error')
 			return
@@ -811,9 +683,6 @@ export function MarkdownInlineEditor({
 
 			{/* MDX Component Picker */}
 			{isMdx && <MdxComponentPicker onInsert={handleInsertMdxComponent} />}
-
-			{/* MDX Props Editor */}
-			{isMdx && <MdxPropsEditor onUpdateProps={handleUpdateMdxProps} />}
 		</div>
 	)
 }