Merge pull request #67 from lordmathis/fix/file-upload

Fix file upload

app/src/App.scss

@@ -108,29 +108,3 @@ $navbar-height: 64px;
 .tree {
   padding-top: $padding;
 }
-
-// Syntax highlighting themes
-@import 'highlight.js/styles/github.css' layer(light-theme);
-@import 'highlight.js/styles/github-dark.css' layer(dark-theme);
-
-// Show light theme by default
-@layer light-theme {
-  [data-mantine-color-scheme='light'] .markdown-preview {
-    pre code.hljs {
-      display: block;
-      overflow-x: auto;
-      padding: 1em;
-    }
-  }
-}
-
-// Show dark theme in dark mode
-@layer dark-theme {
-  [data-mantine-color-scheme='dark'] .markdown-preview {
-    pre code.hljs {
-      display: block;
-      overflow-x: auto;
-      padding: 1em;
-    }
-  }
-}

app/src/api/api.ts

@@ -29,10 +29,16 @@ export const apiCall = async (
     // Set up headers with CSRF token for non-GET requests
     const method = options.method || 'GET';
     const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
       ...(options.headers as Record<string, string>),
     };
 
+    // Only set Content-Type to application/json if not already set and body is not FormData
+    // FormData requires the browser to set Content-Type with the boundary parameter
+    const isFormData = options.body instanceof FormData;
+    if (!headers['Content-Type'] && !isFormData) {
+      headers['Content-Type'] = 'application/json';
+    }
+
     // Add CSRF token for non-GET methods
     if (method !== 'GET') {
       const csrfToken = getCsrfToken();
@@ -41,11 +47,18 @@ export const apiCall = async (
       }
     }
 
+    // For FormData, don't include Content-Type in headers - let the browser set it
+    const fetchHeaders = isFormData
+      ? Object.fromEntries(
+          Object.entries(headers).filter(([key]) => key !== 'Content-Type')
+        )
+      : headers;
+
     const response = await fetch(url, {
       ...options,
       // Include credentials to send/receive cookies
       credentials: 'include',
-      headers,
+      headers: fetchHeaders,
     });
     console.debug(`Response status: ${response.status} for URL: ${url}`);
 

app/src/components/editor/MarkdownPreview.test.tsx

@@ -120,6 +120,34 @@ describe('MarkdownPreview', () => {
     });
   });
 
+  it('renders code blocks with correct structure for theme switching', async () => {
+    const content = '```javascript\nconst hello = "world";\n```';
+
+    render(
+      <MarkdownPreview
+        content={content}
+        handleFileSelect={mockHandleFileSelect}
+      />
+    );
+
+    await waitFor(() => {
+      // Check that rehype-highlight generates the correct structure
+      const preElement = screen
+        .getByRole('code', { hidden: true })
+        .closest('pre');
+      const codeElement = preElement?.querySelector('code');
+
+      expect(preElement).toBeInTheDocument();
+      expect(codeElement).toBeInTheDocument();
+
+      // The code element should have hljs class for theme switching to work
+      expect(codeElement).toHaveClass('hljs');
+
+      // Should also have language class
+      expect(codeElement).toHaveClass('language-javascript');
+    });
+  });
+
   it('handles image loading errors gracefully', async () => {
     const content = '![Test Image](invalid-image.jpg)';
 

app/src/components/editor/MarkdownPreview.tsx

@@ -10,6 +10,7 @@ import * as prod from 'react/jsx-runtime';
 import { notifications } from '@mantine/notifications';
 import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
 import { useWorkspace } from '../../hooks/useWorkspace';
+import { useHighlightTheme } from '../../hooks/useHighlightTheme';
 
 interface MarkdownPreviewProps {
   content: string;
@@ -28,12 +29,6 @@ interface MarkdownLinkProps {
   [key: string]: unknown;
 }
 
-interface MarkdownCodeProps {
-  children: ReactNode;
-  className?: string;
-  [key: string]: unknown;
-}
-
 const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   content,
   handleFileSelect,
@@ -42,7 +37,10 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
     null
   );
   const baseUrl = window.API_BASE_URL;
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, colorScheme } = useWorkspace();
+
+  // Use the highlight theme hook
+  useHighlightTheme(colorScheme === 'auto' ? 'light' : colorScheme);
 
   const processor = useMemo(() => {
     const handleLinkClick = (
@@ -107,13 +105,6 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               {children}
             </a>
           ),
-          code: ({ children, className, ...props }: MarkdownCodeProps) => {
-            return (
-              <pre className={className}>
-                <code {...props}>{children}</code>
-              </pre>
-            );
-          },
         },
       } as Options);
   }, [currentWorkspace?.name, baseUrl, handleFileSelect]);

app/src/hooks/useFileOperations.ts

@@ -122,7 +122,8 @@ export const useFileOperations = (): UseFileOperationsResult => {
       if (!currentWorkspace) return false;
 
       try {
-        await uploadFile(currentWorkspace.name, targetPath || '', files);
+        // Default to '.' (root directory) if no target path is provided
+        await uploadFile(currentWorkspace.name, targetPath || '.', files);
 
         notifications.show({
           title: 'Success',

app/src/hooks/useHighlightTheme.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+// Import theme CSS as text that will be bundled
+import atomOneLightTheme from 'highlight.js/styles/atom-one-light.css?inline';
+import atomOneDarkTheme from 'highlight.js/styles/atom-one-dark.css?inline';
+
+export const useHighlightTheme = (colorScheme: 'light' | 'dark') => {
+  useEffect(() => {
+    // Remove existing highlight theme
+    const existingStylesheet = document.querySelector(
+      'style[data-highlight-theme]'
+    );
+    if (existingStylesheet) {
+      existingStylesheet.remove();
+    }
+
+    // Add new theme stylesheet using bundled CSS
+    const style = document.createElement('style');
+    style.setAttribute('data-highlight-theme', 'true');
+
+    if (colorScheme === 'dark') {
+      style.textContent = atomOneDarkTheme as string;
+    } else {
+      style.textContent = atomOneLightTheme as string;
+    }
+
+    document.head.appendChild(style);
+
+    return () => {
+      // Cleanup on unmount
+      const stylesheet = document.querySelector('style[data-highlight-theme]');
+      if (stylesheet) {
+        stylesheet.remove();
+      }
+    };
+  }, [colorScheme]);
+};

app/src/types/css-inline.d.ts

@@ -0,0 +1,5 @@
+// Type declarations for CSS imports with ?inline modifier
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}

server/internal/app/routes.go

@@ -152,7 +152,9 @@ func setupRouter(o Options) *chi.Mux {
 	})
 
 	// Handle all other routes with static file server
-	r.Get("/*", handlers.NewStaticHandler(o.Config.StaticPath).ServeHTTP)
+	staticHandler := handlers.NewStaticHandler(o.Config.StaticPath)
+	r.Get("/*", staticHandler.ServeHTTP)
+	r.Head("/*", staticHandler.ServeHTTP)
 
 	return r
 }

server/internal/handlers/file_handlers.go

@@ -410,7 +410,8 @@ func (h *Handler) UploadFile() http.HandlerFunc {
 				}
 			}()
 
-			filePath := decodedPath + "/" + formFile.Filename
+			// Use filepath.Join to properly construct the path
+		filePath := filepath.Join(decodedPath, formFile.Filename)
 
 			content, err := io.ReadAll(file)
 			if err != nil {

server/internal/handlers/file_handlers_integration_test.go

@@ -352,15 +352,6 @@ func testFileHandlers(t *testing.T, dbConfig DatabaseConfig) {
 				assert.Equal(t, http.StatusBadRequest, rr.Code)
 			})
 
-			t.Run("upload with missing file_path parameter", func(t *testing.T) {
-				fileName := "test.txt"
-				fileContent := "test content"
-				files := map[string]string{fileName: fileContent}
-
-				rr := h.makeUploadRequest(t, baseURL+"/upload", files, h.RegularTestUser)
-				assert.Equal(t, http.StatusBadRequest, rr.Code)
-			})
-
 			t.Run("upload with invalid file_path", func(t *testing.T) {
 				fileName := "test.txt"
 				fileContent := "test content"