Merge pull request #3 from mertguvencli/feat/katex-math-support

feat: add KaTeX math/LaTeX rendering support

Author: mertguvencli

app/globals.css

@@ -131,6 +131,60 @@
   }
 }
 
+/* Use tabular (fixed-width) numbers on ordered lists so markers align
+   consistently — html2canvas renders proportional figures at slightly
+   different widths, causing misaligned numbering in PDF exports. */
+.prose ol {
+  font-variant-numeric: tabular-nums;
+}
+.prose ol > li::marker {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Remove smart quotes that Tailwind Typography adds to blockquotes —
+   they show up as extra quotation marks in PDF exports. */
+.prose blockquote p::before,
+.prose blockquote p::after {
+  content: none !important;
+}
+
+/* Remove backtick pseudo-elements that Tailwind Typography adds to
+   inline code — html2canvas cannot resolve utility-class overrides
+   (before:content-none) reliably, causing text to vanish in PDF exports. */
+.prose :where(code):not(:where(pre *))::before,
+.prose :where(code):not(:where(pre *))::after {
+  content: none !important;
+}
+
+/* Ensure HTML align attributes work (html2canvas needs explicit CSS) */
+[align="center"] {
+  text-align: center !important;
+}
+[align="right"] {
+  text-align: right !important;
+}
+
+/* Style <details>/<summary> properly since html2canvas can't render
+   the native widget. */
+.prose details {
+  border: 1px solid var(--border, #e4e4e7);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.25rem;
+}
+.prose details summary {
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+  margin-bottom: 0;
+}
+.prose details summary::-webkit-details-marker {
+  display: none;
+}
+.prose details[open] summary {
+  margin-bottom: 0.5rem;
+}
+
 /* When exporting to PDF, force code blocks to wrap long lines instead of
    scrolling horizontally — otherwise html2canvas captures only the visible
    width and overflowing code gets clipped. */
@@ -142,4 +196,9 @@
 .pdf-exporting pre code {
   white-space: pre-wrap !important;
   word-break: break-word !important;
+}
+
+/* Force details open during PDF export */
+.pdf-exporting details {
+  open: true;
 }

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono, Inter } from "next/font/google";
+import "katex/dist/katex.min.css";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 

app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { MarkdownEditor } from "@/components/markdown-editor";
 import { MarkdownPreview } from "@/components/markdown-preview";
 import { usePdfExport } from "@/lib/use-pdf-export";
@@ -14,7 +14,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { Loader2, DownloadIcon } from "lucide-react";
+import { Loader2, DownloadIcon, EyeIcon, XIcon, Maximize2Icon, Minimize2Icon } from "lucide-react";
 
 type PageSize = "a4" | "letter" | "legal";
 
@@ -28,11 +28,21 @@ export default function Home() {
   const [markdown, setMarkdown] = useState(defaultMarkdown);
   const [pageSize, setPageSize] = useState<PageSize>("a4");
   const [editorWidth, setEditorWidth] = useState(35);
+  const [previewOnly, setPreviewOnly] = useState(false);
   const dragging = useRef(false);
   const previewRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const { exportPdf, exporting } = usePdfExport(previewRef, pageSize);
 
+  useEffect(() => {
+    if (!previewOnly) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setPreviewOnly(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [previewOnly]);
+
   const clampWidth = (pct: number) => Math.min(80, Math.max(20, pct));
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
@@ -98,6 +108,17 @@ export default function Home() {
         </div>
 
         <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setPreviewOnly(true)}
+            title="Preview only"
+          >
+            <Maximize2Icon className="size-4" />
+          </Button>
+
+          <Separator orientation="vertical" className="h-6" />
+
           <Select
             value={pageSize}
             onValueChange={(v) => setPageSize(v as PageSize)}
@@ -179,6 +200,28 @@ export default function Home() {
         </div>
       </div>
 
+      {/* Preview-only fullscreen modal */}
+      {previewOnly && (
+        <div className="fixed inset-0 z-50 flex flex-col bg-white">
+          <div className="flex shrink-0 justify-end p-4">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setPreviewOnly(false)}
+            >
+              <Minimize2Icon className="size-4" />
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto px-8 pb-8">
+            <MarkdownPreview
+              fluid
+              content={markdown}
+              pageSize={pageSize}
+            />
+          </div>
+        </div>
+      )}
+
       {/* SEO content — visible to crawlers, visually hidden from app UI */}
       <footer className="sr-only" aria-label="About MarkBloom">
         <h2>What is MarkBloom?</h2>

components/markdown-preview.tsx

@@ -2,15 +2,18 @@
 
 import { forwardRef } from "react";
 import ReactMarkdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 import { cn } from "@/lib/utils";
 import { markdownComponents } from "@/lib/markdown-components";
 
 interface MarkdownPreviewProps {
   content: string;
   className?: string;
   pageSize: "a4" | "letter" | "legal";
+  fluid?: boolean;
 }
 
 const pageSizes = {
@@ -20,26 +23,27 @@ const pageSizes = {
 };
 
 export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
-  function MarkdownPreview({ content, className, pageSize }, ref) {
+  function MarkdownPreview({ content, className, pageSize, fluid }, ref) {
     const size = pageSizes[pageSize];
 
     return (
       <div
         ref={ref}
         className={cn(
-          "bg-white text-zinc-900 shadow-lg mx-auto",
+          "bg-white text-zinc-900 mx-auto",
+          !fluid && "shadow-lg",
           className
         )}
-        style={{
+        style={fluid ? { maxWidth: "860px", width: "100%" } : {
           width: size.width,
           minHeight: size.minHeight,
-          padding: "40px 50px",
+          padding: !fluid && "40px 50px",
         }}
       >
-        <article className="prose prose-zinc max-w-none">
+        <article className="prose prose-zinc max-w-none" style={{ color: "#3f3f46" }}>
           <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={[rehypeRaw]}
+            remarkPlugins={[remarkGfm, remarkMath]}
+            rehypePlugins={[rehypeRaw, rehypeKatex]}
             components={markdownComponents}
           >
             {content}