wikilinks and graph working

frontend/src/components/NoteViewer.tsx

@@ -35,6 +35,21 @@ export function NoteViewer({
     [onWikilinkClick]
   );
 
+  // Pre-process markdown to convert wikilinks to standard links
+  // [[Link]] -> [Link](wikilink:Link)
+  // [[Link|Alias]] -> [Alias](wikilink:Link)
+  const processedBody = useMemo(() => {
+    if (!note.body) return '';
+    const processed = note.body.replace(/\[\[([^\]]+)\]\]/g, (match, content) => {
+      const [link, alias] = content.split('|');
+      const displayText = alias || link;
+      const href = `wikilink:${encodeURIComponent(link)}`;
+      return `[${displayText}](${href})`;
+    });
+    // console.log('Processed Body:', processed);
+    return processed;
+  }, [note.body]);
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -72,12 +87,17 @@ export function NoteViewer({
 
       {/* Content */}
       <ScrollArea className="flex-1 p-6">
+        {/* Debug: Verify processed output */}
+        {/* <pre className="text-xs text-muted-foreground mb-4 whitespace-pre-wrap bg-muted p-2 rounded">
+          {processedBody}
+        </pre> */}
         <div className="prose prose-slate dark:prose-invert max-w-none">
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={markdownComponents}
+            urlTransform={(url) => url} // Allow all protocols including wikilink:
           >
-            {note.body}
+            {processedBody}
           </ReactMarkdown>
         </div>
 

frontend/src/lib/markdown.tsx

@@ -17,27 +17,13 @@ export function createWikilinkComponent(
   onWikilinkClick?: (linkText: string) => void
 ): Components {
   return {
-    // Override the text renderer to handle wikilinks
-    text: ({ children }: any) => {
-      const value = String(children || '');
-      const parts: React.ReactNode[] = [];
-      const pattern = /\[\[([^\]]+)\]\]/g;
-      let lastIndex = 0;
-      let match;
-      let key = 0;
-
-      while ((match = pattern.exec(value)) !== null) {
-        // Add text before the wikilink
-        if (match.index > lastIndex) {
-          parts.push(value.slice(lastIndex, match.index));
-        }
-
-        // Add the wikilink as a clickable element
-        const linkText = match[1];
-        parts.push(
+    // Style links
+    a: ({ href, children, ...props }) => {
+      if (href?.startsWith('wikilink:')) {
+        const linkText = decodeURIComponent(href.replace('wikilink:', ''));
+        return (
           <span
-            key={key++}
-            className="wikilink cursor-pointer text-primary hover:underline"
+            className="wikilink cursor-pointer text-primary hover:underline font-medium text-blue-500 dark:text-blue-400"
             onClick={(e) => {
               e.preventDefault();
               onWikilinkClick?.(linkText);
@@ -50,47 +36,13 @@ export function createWikilinkComponent(
                 onWikilinkClick?.(linkText);
               }
             }}
+            title={`Go to ${linkText}`}
           >
-            [[{linkText}]]
-          </span>
-        );
-
-        lastIndex = pattern.lastIndex;
-      }
-
-      // Add remaining text
-      if (lastIndex < value.length) {
-        parts.push(value.slice(lastIndex));
-      }
-
-      return parts.length > 0 ? <>{parts}</> : value;
-    },
-    
-    // Style code blocks
-    code: ({ className, children, ...props }) => {
-      const match = /language-(\w+)/.exec(className || '');
-      const isInline = !match;
-
-      if (isInline) {
-        return (
-          <code className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
             {children}
-          </code>
+          </span>
         );
       }
 
-      return (
-        <code
-          className={`${className} block bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono`}
-          {...props}
-        >
-          {children}
-        </code>
-      );
-    },
-
-    // Style links
-    a: ({ href, children, ...props }) => {
       const isExternal = href?.startsWith('http');
       return (
         <a

frontend/src/pages/MainApp.tsx

@@ -126,6 +126,7 @@ export function MainApp() {
   // Handle wikilink clicks
   const handleWikilinkClick = async (linkText: string) => {
     const slug = normalizeSlug(linkText);
+    console.log(`[Wikilink] Clicked: "${linkText}", Slug: "${slug}"`);
     
     // Try to find exact match first
     let targetNote = notes.find(
@@ -136,11 +137,13 @@ export function MainApp() {
     if (!targetNote) {
       targetNote = notes.find((note) => {
         const pathSlug = normalizeSlug(note.note_path.replace(/\.md$/, ''));
+        // console.log(`Checking path: ${note.note_path}, Slug: ${pathSlug}`);
         return pathSlug.endsWith(slug);
       });
     }
 
     if (targetNote) {
+      console.log(`[Wikilink] Found target: ${targetNote.note_path}`);
       setSelectedPath(targetNote.note_path);
     } else {
       // TODO: Show "Create note" dialog