[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" import typography from "@tailwindcss/typography" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate"), typography], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import type React from "react" import { useRef, useState } from "react" import ReactMarkdown from "react-markdown" import remarkGfm from "remark-gfm" import { Bold, Italic, Link, Heading1, Heading2, List, ListOrdered, Code, Quote, Image, Copy, CheckSquare, Table, } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" export default function MarkdownEditor() { const [markdown, setMarkdown] = useState(`# Welcome to Markdown Editor ## Features - **Live Preview**: See your changes in real-time - **GitHub Flavored Markdown**: Supports tables, code blocks, and more - **Copy to Clipboard**: Easily copy your markdown content - **Formatting Toolbar**: Quickly add markdown formatting ## Example | Feature | Description | |---------|-------------| | Preview | See rendered markdown | | Edit | Write markdown content | | Copy | Copy to clipboard | \`\`\`javascript // Example code block function hello() { console.log("Hello, world!"); } \`\`\` > This is a blockquote with **bold text** and *italic text*. - [x] Task 1 - [ ] Task 2 - [ ] Task 3 `) const { toast } = useToast() const textareaRef = useRef(null) const handleCopy = () => { navigator.clipboard.writeText(markdown) toast({ title: "Copied to clipboard", description: "Your markdown has been copied to the clipboard", }) } const insertFormatting = (formatType: string) => { if (!textareaRef.current) return const textarea = textareaRef.current const selectionStart = textarea.selectionStart const selectionEnd = textarea.selectionEnd const selectedText = markdown.substring(selectionStart, selectionEnd) let formattedText = "" let cursorOffset = 0 switch (formatType) { case "bold": formattedText = `**${selectedText || "bold text"}**` cursorOffset = selectedText ? 0 : -2 break case "italic": formattedText = `*${selectedText || "italic text"}*` cursorOffset = selectedText ? 0 : -1 break case "link": formattedText = `[${selectedText || "link text"}](url)` cursorOffset = selectedText ? -1 : -4 break case "h1": formattedText = `\n# ${selectedText || "Heading 1"}` cursorOffset = selectedText ? 0 : 0 break case "h2": formattedText = `\n## ${selectedText || "Heading 2"}` cursorOffset = selectedText ? 0 : 0 break case "ul": formattedText = `\n- ${selectedText || "List item"}` cursorOffset = selectedText ? 0 : 0 break case "ol": formattedText = `\n1. ${selectedText || "List item"}` cursorOffset = selectedText ? 0 : 0 break case "code": formattedText = selectedText.includes("\n") ? `\n\`\`\`\n${selectedText || "code block"}\n\`\`\`\n` : `\`${selectedText || "inline code"}\`` cursorOffset = selectedText ? 0 : selectedText.includes("\n") ? -4 : -1 break case "quote": formattedText = `\n> ${selectedText || "Blockquote"}` cursorOffset = selectedText ? 0 : 0 break case "image": formattedText = `![${selectedText || "alt text"}](image-url)` cursorOffset = selectedText ? -1 : -10 break case "task": formattedText = `\n- [ ] ${selectedText || "Task item"}` cursorOffset = selectedText ? 0 : 0 break case "table": formattedText = `\n| Header 1 | Header 2 | Header 3 |\n| -------- | -------- | -------- |\n| Cell 1 | Cell 2 | Cell 3 |\n| Cell 4 | Cell 5 | Cell 6 |` cursorOffset = 0 break default: return } const newText = markdown.substring(0, selectionStart) + formattedText + markdown.substring(selectionEnd) setMarkdown(newText) // Set focus back to textarea and position cursor appropriately setTimeout(() => { textarea.focus() const newCursorPosition = selectionStart + formattedText.length + cursorOffset textarea.setSelectionRange(newCursorPosition, newCursorPosition) }, 0) } return (

Markdown Editor

Create and preview markdown with a beautiful interface

Edit

} onClick={() => insertFormatting("bold")} tooltip="Bold" /> } onClick={() => insertFormatting("italic")} tooltip="Italic" />

} onClick={() => insertFormatting("h1")} tooltip="Heading 1" /> } onClick={() => insertFormatting("h2")} tooltip="Heading 2" />

} onClick={() => insertFormatting("ul")} tooltip="Bullet List" /> } onClick={() => insertFormatting("ol")} tooltip="Numbered List" /> } onClick={() => insertFormatting("task")} tooltip="Task List" />

} onClick={() => insertFormatting("code")} tooltip="Code" /> } onClick={() => insertFormatting("quote")} tooltip="Quote" />

} onClick={() => insertFormatting("link")} tooltip="Link" /> } onClick={() => insertFormatting("image")} tooltip="Image" /> } onClick={() => insertFormatting("table")} tooltip="Table" />

setMarkdown(e.target.value)}
              className="min-h-[400px] lg:min-h-[600px] font-mono text-sm p-4 rounded-t-none rounded-b-xl border-t-0 shadow-md resize-none focus-visible:ring-1 focus-visible:ring-primary/50 transition-all duration-200"
              placeholder="Write your markdown here..."
            />
          </div>

<div className="flex flex-col">
            <div className="bg-card rounded-t-xl shadow-md">
              <div className="flex items-center justify-between p-4 border-b">
                <h2 className="text-lg font-medium">Preview</h2>
                <div className="flex items-center space-x-2">
                  <span className="h-3 w-3 rounded-full bg-red-500"></span>
                  <span className="h-3 w-3 rounded-full bg-yellow-500"></span>
                  <span className="h-3 w-3 rounded-full bg-green-500"></span>
                </div>
              </div>
            </div>

<div className="border border-t-0 rounded-b-xl p-6 min-h-[400px] lg:min-h-[600px] prose dark:prose-invert max-w-none overflow-auto bg-white dark:bg-black shadow-md">
              <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function FormatButton({
  icon,
  onClick,
  tooltip,
  active,
}: {
  icon: React.ReactNode
  onClick: () => void
  tooltip: string
  active?: boolean
}) {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className={cn(
              "h-8 w-8 rounded-md hover:bg-muted transition-all duration-200",
              active && "bg-primary/10 text-primary",
            )}
            onClick={onClick}
          >
            {icon}
          </Button>
        </TooltipTrigger>
        <TooltipContent className="bg-popover/95 backdrop-blur-sm border border-border/40 shadow-lg">
          <p>{tooltip}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
</article></body></html>

About

Tags

Share

More from febryardiansyah

More Templates Like This

About

Tags

Share

About

Tags

Share

More from febryardiansyah

More Templates Like This