feat: convert file manager into a plugin

plugins/file-manager/src/frontend/components/MarkdownRenderer.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark as syntaxTheme } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface MarkdownRendererProps {
+  content: string;
+  compact?: boolean;
+}
+
+export function MarkdownRenderer({
+  content,
+  compact = false,
+}: MarkdownRendererProps) {
+  const h1Class = compact
+    ? "text-2xl font-bold mb-4 mt-6 text-foreground border-b border-border pb-2"
+    : "text-3xl font-bold mb-6 mt-8 text-foreground border-b border-border pb-2";
+  const h2Class = compact
+    ? "text-xl font-semibold mb-3 mt-5 text-foreground border-b border-border pb-1"
+    : "text-2xl font-semibold mb-4 mt-6 text-foreground border-b border-border pb-1";
+  const h3Class = compact
+    ? "text-lg font-semibold mb-2 mt-4 text-foreground"
+    : "text-xl font-semibold mb-3 mt-4 text-foreground";
+  const h4Class = compact
+    ? "text-base font-semibold mb-2 mt-3 text-foreground"
+    : "text-lg font-semibold mb-2 mt-3 text-foreground";
+  const pClass = compact
+    ? "mb-3 text-foreground leading-relaxed"
+    : "mb-4 text-foreground leading-relaxed";
+  const listClass = compact
+    ? "mb-3 ml-4 text-foreground"
+    : "mb-4 ml-6 text-foreground";
+  const quoteClass = compact
+    ? "border-l-4 border-blue-500 pl-3 mb-3 italic text-muted-foreground bg-muted/30 py-1"
+    : "border-l-4 border-blue-500 pl-4 mb-4 italic text-muted-foreground bg-muted/30 py-2";
+  const tableWrapClass = compact
+    ? "mb-3 overflow-x-auto thin-scrollbar"
+    : "mb-4 overflow-x-auto thin-scrollbar";
+  const tableClass = compact
+    ? "min-w-full border border-border rounded-lg text-sm"
+    : "min-w-full border border-border rounded-lg";
+  const thClass = compact
+    ? "px-3 py-2 text-left font-semibold text-foreground"
+    : "px-4 py-2 text-left font-semibold text-foreground";
+  const tdClass = compact
+    ? "px-3 py-2 text-foreground"
+    : "px-4 py-2 text-foreground";
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        code({ className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          // v9 removed the `inline` flag; a fenced block always carries a
+          // language- class, an inline span never does.
+          const inline = !className;
+          return !inline && match ? (
+            <SyntaxHighlighter
+              style={syntaxTheme}
+              language={match[1]}
+              PreTag="div"
+              className="rounded-lg"
+              {...props}
+            >
+              {String(children).replace(/\n$/, "")}
+            </SyntaxHighlighter>
+          ) : (
+            <code
+              className="bg-muted px-1 py-0.5 rounded text-sm font-mono"
+              {...props}
+            >
+              {children}
+            </code>
+          );
+        },
+        h1: ({ children }) => <h1 className={h1Class}>{children}</h1>,
+        h2: ({ children }) => <h2 className={h2Class}>{children}</h2>,
+        h3: ({ children }) => <h3 className={h3Class}>{children}</h3>,
+        h4: ({ children }) => <h4 className={h4Class}>{children}</h4>,
+        p: ({ children }) => <p className={pClass}>{children}</p>,
+        ul: ({ children }) => (
+          <ul className={`${listClass} list-disc`}>{children}</ul>
+        ),
+        ol: ({ children }) => (
+          <ol className={`${listClass} list-decimal`}>{children}</ol>
+        ),
+        li: ({ children }) => (
+          <li className="mb-1 text-foreground">{children}</li>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className={quoteClass}>{children}</blockquote>
+        ),
+        table: ({ children }) => (
+          <div className={tableWrapClass}>
+            <table className={tableClass}>{children}</table>
+          </div>
+        ),
+        thead: ({ children }) => <thead className="bg-muted">{children}</thead>,
+        tbody: ({ children }) => <tbody>{children}</tbody>,
+        tr: ({ children }) => (
+          <tr className="border-b border-border">{children}</tr>
+        ),
+        th: ({ children }) => <th className={thClass}>{children}</th>,
+        td: ({ children }) => <td className={tdClass}>{children}</td>,
+        a: ({ href, children }) => (
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 hover:text-blue-800 underline"
+          >
+            {children}
+          </a>
+        ),
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}