fix: align markdown checkbox preview state

Author: chriswritescode-dev

frontend/src/components/file-browser/FilePreview.tsx

@@ -155,6 +155,9 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
     setIsSaving(true)
     try {
       await saveFileContent(editContent)
+      if (isMarkdownFile) {
+        setLocalMdContent(editContent)
+      }
       setViewMode('preview')
       const editEvent = new CustomEvent('editModeChange', { detail: { isEditing: false } })
       window.dispatchEvent(editEvent)
@@ -285,7 +288,8 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
 
       try {
         const textContent = decodeBase64(file.content)
-        if (!textContent) {
+        const displayContent = isMarkdownFile ? localMdContent ?? textContent : textContent
+        if (!displayContent) {
           return (
             <div className="text-center text-muted-foreground py-8">
               Empty file - click Edit to add content
@@ -294,11 +298,10 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
         }
 
         if (isMarkdownFile && markdownPreview) {
-          const mdContent = localMdContent ?? textContent
-          return <MarkdownRenderer content={mdContent} onContentChange={handleLocalMarkdownContentChange} />
+          return <MarkdownRenderer content={displayContent} onContentChange={handleLocalMarkdownContentChange} />
         }
 
-        const lines = textContent.split('\n')
+        const lines = displayContent.split('\n')
         return (
           <div className={`pb-[200px] text-sm bg-muted text-foreground rounded font-mono ${
             lineWrap ? 'overflow-x-hidden' : 'overflow-x-auto'

frontend/src/components/file-browser/MarkdownRenderer.tsx

@@ -31,7 +31,6 @@ function parseTaskItems(content: string): TaskItem[] {
 
 export const MarkdownRenderer = memo(function MarkdownRenderer({ content, className = '', onContentChange }: MarkdownRendererProps) {
   const taskItems = useMemo(() => parseTaskItems(content), [content])
-  let taskInputIndex = 0
 
   const handleToggle = useCallback((taskItem: TaskItem) => {
     if (!onContentChange) return
@@ -47,27 +46,33 @@ export const MarkdownRenderer = memo(function MarkdownRenderer({ content, classN
     }
   }, [content, onContentChange])
 
+  const handleInputToggle = useCallback((input: HTMLInputElement) => {
+    const inputs = Array.from(input.closest('.prose')?.querySelectorAll('input[type="checkbox"]') ?? [])
+    const taskItem = taskItems[inputs.indexOf(input)]
+    if (taskItem) {
+      handleToggle(taskItem)
+    }
+  }, [handleToggle, taskItems])
+
   const components: Components = {
     ...markdownComponents,
     input(props) {
-      const { type, ...rest } = props
+      const { type, checked, disabled, ...rest } = props
+      delete (rest as Record<string, unknown>).node
 
       if (type === 'checkbox') {
-        const taskItem = taskItems[taskInputIndex++]
-
-        if (taskItem) {
-          return (
-            <input
-              type="checkbox"
-              checked={taskItem.checked}
-              onChange={() => handleToggle(taskItem)}
-              className="cursor-pointer accent-primary"
-            />
-          )
-        }
+        return (
+          <input
+            type="checkbox"
+            checked={Boolean(checked)}
+            onChange={(event) => handleInputToggle(event.currentTarget)}
+            className="cursor-pointer accent-primary"
+            {...rest}
+          />
+        )
       }
 
-      return <input type={type} {...rest} />
+      return <input type={type} checked={checked} disabled={disabled} {...rest} />
     },
   }