A modern MDX editor component for Next.js applications with image upload support.

• Rich text editing with MDX support
• Image upload with drag & drop
• Image URL insertion
• Markdown formatting toolbar
• Auto-resizing textarea
• Supabase storage integration
• TypeScript support
• Tailwind CSS styling

npm install nextjs-mdx-editor
# or
yarn add nextjs-mdx-editor

This package uses Tailwind CSS for styling. Make sure you have Tailwind CSS installed and configured in your Next.js project. Add the following to your tailwind.config.js:

module.exports = {
  content: [
    // ... your existing content paths
    './node_modules/nextjs-mdx-editor/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
}

For image upload functionality, you need to configure Supabase:

1. Create a Supabase project at https://supabase.com
2. Create a storage bucket named 'blog' (or your preferred name)
3. Add your Supabase URL and anon key to your environment variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

import { Editor } from 'nextjs-mdx-editor';

export default function MyPage() {
  const handleContentChange = (content: string) => {
    console.log('Content changed:', content);
  };

  const handleContentCompiled = (mdxSource: any) => {
    console.log('MDX compiled:', mdxSource);
  };

  return (
    <Editor
      initialContent="# Hello World"
      onChange={handleContentChange}
      onContentCompiled={handleContentCompiled}
    />
  );
}

This package requires the following peer dependencies:

• react: ^18.0.0
• next: ^14.0.0
• next-mdx-remote: ^4.0.0
• lucide-react: ^0.300.0
• @heroicons/react: ^2.0.0
• react-hot-toast: ^2.4.0
• @supabase/supabase-js: ^2.0.0
• tailwindcss: ^3.0.0

MIT