Migrate to remark

frontend/src/components/ContentView.jsx

@@ -11,7 +11,7 @@ const ContentView = ({
   content,
   handleContentChange,
   handleSave,
-  handleLinkClick,
+  handleFileSelect,
 }) => {
   if (!selectedFile) {
     return (
@@ -47,7 +47,7 @@ const ContentView = ({
       selectedFile={selectedFile}
     />
   ) : (
-    <MarkdownPreview content={content} handleLinkClick={handleLinkClick} />
+    <MarkdownPreview content={content} handleFileSelect={handleFileSelect} />
   );
 };
 

frontend/src/components/Layout.jsx

@@ -9,8 +9,7 @@ import { useWorkspace } from '../contexts/WorkspaceContext';
 
 const Layout = () => {
   const { currentWorkspace, loading: workspaceLoading } = useWorkspace();
-  const { selectedFile, handleFileSelect, handleLinkClick } =
-    useFileNavigation();
+  const { selectedFile, handleFileSelect } = useFileNavigation();
   const { files, loadFileList } = useFileList();
 
   if (workspaceLoading) {
@@ -49,7 +48,6 @@ const Layout = () => {
           <MainContent
             selectedFile={selectedFile}
             handleFileSelect={handleFileSelect}
-            handleLinkClick={handleLinkClick}
             loadFileList={loadFileList}
           />
         </Container>

frontend/src/components/MainContent.jsx

@@ -12,12 +12,7 @@ import { useFileOperations } from '../hooks/useFileOperations';
 import { useGitOperations } from '../hooks/useGitOperations';
 import { useWorkspace } from '../contexts/WorkspaceContext';
 
-const MainContent = ({
-  selectedFile,
-  handleFileSelect,
-  handleLinkClick,
-  loadFileList,
-}) => {
+const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
   const [activeTab, setActiveTab] = useState('source');
   const { settings } = useWorkspace();
   const {
@@ -113,7 +108,7 @@ const MainContent = ({
           content={content}
           handleContentChange={handleContentChange}
           handleSave={handleSaveFile}
-          handleLinkClick={handleLinkClick}
+          handleFileSelect={handleFileSelect}
         />
       </Box>
       <CreateFileModal onCreateFile={handleCreateFile} />

frontend/src/components/MarkdownPreview.jsx

@@ -1,159 +1,117 @@
-import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
+import React, { useState, useEffect, useMemo } from 'react';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
 import remarkMath from 'remark-math';
+import remarkRehype from 'remark-rehype';
 import rehypeKatex from 'rehype-katex';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import rehypeReact from 'rehype-react';
+import rehypePrism from 'rehype-prism';
+import * as prod from 'react/jsx-runtime';
+import { notifications } from '@mantine/notifications';
 import 'katex/dist/katex.min.css';
-import { lookupFileByName } from '../services/api';
+import { remarkWikiLinks } from '../utils/remarkWikiLinks';
+import { useWorkspace } from '../contexts/WorkspaceContext';
 
-const MarkdownPreview = ({ content, handleLinkClick }) => {
-  const [processedContent, setProcessedContent] = useState(content);
+const MarkdownPreview = ({ content, handleFileSelect }) => {
+  const [processedContent, setProcessedContent] = useState(null);
   const baseUrl = window.API_BASE_URL;
+  const { currentWorkspace } = useWorkspace();
 
-  useEffect(() => {
-    const processContent = async (rawContent) => {
-      const regex = /(!?)\[\[(.*?)\]\]/g;
-      let result = rawContent;
-      const matches = [...rawContent.matchAll(regex)];
+  const handleLinkClick = (e, href) => {
+    e.preventDefault();
 
-      for (const match of matches) {
-        const [fullMatch, isImage, innerContent] = match;
-        let fileName, displayText, heading;
+    if (href.startsWith(`${baseUrl}/internal/`)) {
+      // For existing files, extract the path and directly select it
+      const [filePath, heading] = decodeURIComponent(
+        href.replace(`${baseUrl}/internal/`, '')
+      ).split('#');
+      handleFileSelect(filePath);
 
-        // Parse the inner content
-        const pipeIndex = innerContent.indexOf('|');
-        const hashIndex = innerContent.indexOf('#');
-
-        if (pipeIndex !== -1) {
-          displayText = innerContent.slice(pipeIndex + 1).trim();
-          fileName = innerContent.slice(0, pipeIndex).trim();
-        } else {
-          displayText = innerContent;
-          fileName = innerContent;
-        }
-
-        if (hashIndex !== -1 && (pipeIndex === -1 || hashIndex < pipeIndex)) {
-          heading = fileName.slice(hashIndex + 1).trim();
-          fileName = fileName.slice(0, hashIndex).trim();
-        }
-
-        try {
-          const paths = await lookupFileByName(fileName);
-          if (paths && paths.length > 0) {
-            const filePath = paths[0];
-            if (isImage) {
-              result = result.replace(
-                fullMatch,
-                `![${displayText}](${baseUrl}/files/${filePath})`
-              );
-            } else {
-              // Include heading in the URL if present
-              const url = heading
-                ? `${baseUrl}/internal/${encodeURIComponent(
-                    filePath
-                  )}#${encodeURIComponent(heading)}`
-                : `${baseUrl}/internal/${encodeURIComponent(filePath)}`;
-              result = result.replace(fullMatch, `[${displayText}](${url})`);
-            }
-          } else {
-            result = result.replace(
-              fullMatch,
-              `[${displayText}](${baseUrl}/notfound/${encodeURIComponent(
-                fileName
-              )})`
-            );
-          }
-        } catch (error) {
-          console.error('Error looking up file:', error);
-          result = result.replace(
-            fullMatch,
-            `[${displayText}](${baseUrl}/notfound/${encodeURIComponent(
-              fileName
-            )})`
-          );
-        }
+      // TODO: Handle heading navigation if needed
+      if (heading) {
+        console.debug('Heading navigation not implemented:', heading);
       }
-
-      return result;
-    };
-
-    processContent(content).then(setProcessedContent);
-  }, [content, baseUrl]);
-
-  const handleImageError = (event) => {
-    console.error('Failed to load image:', event.target.src);
-    event.target.alt = 'Failed to load image';
+    } else if (href.startsWith(`${baseUrl}/notfound/`)) {
+      // For non-existent files, show a notification
+      const fileName = decodeURIComponent(
+        href.replace(`${baseUrl}/notfound/`, '')
+      );
+      notifications.show({
+        title: 'File Not Found',
+        message: `The file "${fileName}" does not exist.`,
+        color: 'red',
+      });
+    }
   };
 
-  return (
-    <div className="markdown-preview">
-      <ReactMarkdown
-        remarkPlugins={[remarkMath]}
-        rehypePlugins={[rehypeKatex]}
-        components={{
-          code({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || '');
-            return !inline && match ? (
-              <SyntaxHighlighter
-                style={vscDarkPlus}
-                language={match[1]}
-                PreTag="div"
+  const processor = useMemo(
+    () =>
+      unified()
+        .use(remarkParse)
+        .use(remarkWikiLinks, currentWorkspace?.id)
+        .use(remarkMath)
+        .use(remarkRehype)
+        .use(rehypeKatex)
+        .use(rehypePrism)
+        .use(rehypeReact, {
+          production: true,
+          jsx: prod.jsx,
+          jsxs: prod.jsxs,
+          Fragment: prod.Fragment,
+          components: {
+            img: ({ src, alt, ...props }) => (
+              <img
+                src={src}
+                alt={alt}
+                onError={(event) => {
+                  console.error('Failed to load image:', event.target.src);
+                  event.target.alt = 'Failed to load image';
+                }}
+                {...props}
+              />
+            ),
+            a: ({ href, children, ...props }) => (
+              <a
+                href={href}
+                onClick={(e) => handleLinkClick(e, href)}
                 {...props}
               >
-                {String(children).replace(/\n$/, '')}
-              </SyntaxHighlighter>
-            ) : (
-              <code className={className} {...props}>
                 {children}
-              </code>
-            );
-          },
-          img: ({ src, alt, ...props }) => (
-            <img src={src} alt={alt} onError={handleImageError} {...props} />
-          ),
-          a: ({ href, children }) => {
-            if (href.startsWith(`${baseUrl}/internal/`)) {
-              const [filePath, heading] = decodeURIComponent(
-                href.replace(`${baseUrl}/internal/`, '')
-              ).split('#');
+              </a>
+            ),
+            code: ({ children, className, ...props }) => {
+              const language = className
+                ? className.replace('language-', '')
+                : null;
               return (
-                <a
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    handleLinkClick(filePath, heading);
-                  }}
-                >
-                  {children}
-                </a>
+                <pre className={className}>
+                  <code {...props}>{children}</code>
+                </pre>
               );
-            } else if (href.startsWith(`${baseUrl}/notfound/`)) {
-              const fileName = decodeURIComponent(
-                href.replace(`${baseUrl}/notfound/`, '')
-              );
-              return (
-                <a
-                  href="#"
-                  style={{ color: 'red', textDecoration: 'underline' }}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    handleLinkClick(fileName);
-                  }}
-                >
-                  {children}
-                </a>
-              );
-            }
-            // Regular markdown link
-            return <a href={href}>{children}</a>;
+            },
           },
-        }}
-      >
-        {processedContent}
-      </ReactMarkdown>
-    </div>
+        }),
+    [baseUrl, handleFileSelect, currentWorkspace?.id]
   );
+
+  useEffect(() => {
+    const processContent = async () => {
+      if (!currentWorkspace) {
+        return;
+      }
+
+      try {
+        const result = await processor.process(content);
+        setProcessedContent(result.result);
+      } catch (error) {
+        console.error('Error processing markdown:', error);
+      }
+    };
+
+    processContent();
+  }, [content, processor, currentWorkspace]);
+
+  return <div className="markdown-preview">{processedContent}</div>;
 };
 
 export default MarkdownPreview;