Build a Live Blog Post Editor with React and mdx.do

// src/App.tsx
import { useState } from 'react';
import './App.css'; // We'll add some styles here later

function App() {
  const [mdxContent, setMdxContent] = useState('');

  return (
    <div className="container">
      <header>
        <h1>Live MDX Editor</h1>
        <p>Powered by <a href="https://mdx.do" target="_blank" rel="noopener noreferrer">mdx.do</a></p>
      </header>
      <main className="editor-layout">
        <section className="editor-pane">
          <h2>Editor</h2>
          <textarea
            value={mdxContent}
            onChange={(e) => setMdxContent(e.target.value)}
            placeholder="Type your MDX here..."
          />
        </section>
        <section className="preview-pane">
          <h2>Live Preview</h2>
          <div className="preview-content">
            {/* Our compiled component will go here! */}
          </div>
        </section>
      </main>
    </div>
  );
}

export default App;

// src/App.tsx (top of the file)
import React, { useState, useEffect } from 'react';
import { mdx } from '@do-sdk/mdx'; // Import the SDK
import './App.css';

// ... inside the App component
interface CompilationResult {
  component: string | null;  // The compiled component code
  frontmatter: Record<string, any>; // The parsed frontmatter
  error: string | null;
}

function App() {
  const [mdxContent, setMdxContent] = useState('');
  // State for our compiled result
  const [result, setResult] = useState<CompilationResult>({
    component: null,
    frontmatter: {},
    error: null,
  });

  // ... rest of the component

// src/App.tsx (inside the App component)
  useEffect(() => {
    // Basic debounce to avoid too many API calls while typing
    const handler = setTimeout(() => {
      if (!mdxContent) {
        setResult({ component: null, frontmatter: {}, error: null });
        return;
      }

      const compileMdx = async () => {
        try {
          const { component, frontmatter } = await mdx.compile({
            content: mdxContent
          });
          setResult({ component, frontmatter, error: null });
        } catch (e: any) {
          setResult({ component: null, frontmatter: {}, error: e.message });
        }
      };

      compileMdx();
    }, 500); // Wait 500ms after the user stops typing

    return () => clearTimeout(handler);
  }, [mdxContent]);

// src/MdxPreview.tsx
import React, { useState, useEffect, useMemo } from 'react';

// Define any custom components you want to be available in your MDX
const CustomTag = ({ children }: { children: React.ReactNode }) => (
  <strong style={{ color: '#ffb86c', fontVariant: 'small-caps' }}>
    {children}
  </strong>
);

const MdxPreview = ({ code }: { code: string | null }) => {
  const customComponents = { CustomTag };

  const Component = useMemo(() => {
    if (!code) return null;

    // The component is wrapped in an IIFE to get the module exports
    const getComponent = new Function('React', 'components', code);
    const mdxModule = getComponent(React, customComponents);
    return mdxModule.default;
  }, [code]);

  if (!Component) {
    return <div>Start typing to see a preview...</div>;
  }

  // Pass custom components so MDX can use them
  return <Component components={customComponents} />;
};

export default MdxPreview;

// src/App.tsx (updated)
import React, { useState, useEffect } from 'react';
import { mdx } from '@do-sdk/mdx';
import MdxPreview from './MdxPreview'; // Import the new component
import './App.css';

const defaultContent = `---
title: Hello MDX!
author: '.do'
date: '${new Date().toISOString().split('T')[0]}'
---

# This is a heading

And this is **Markdown** with a <CustomTag>Custom Component</CustomTag>!

- List item 1
- List item 2

\`\`\`javascript
console.log('Hello, world!');
\`\`\`
`;

interface CompilationResult {
  component: string | null;
  frontmatter: Record<string, any>;
  error: string | null;
}

function App() {
  const [mdxContent, setMdxContent] = useState(defaultContent);
  const [result, setResult] = useState<CompilationResult>({
    component: null,
    frontmatter: {},
    error: null,
  });

  useEffect(() => {
    const handler = setTimeout(() => {
      if (!mdxContent) {
        setResult({ component: null, frontmatter: {}, error: null });
        return;
      }

      const compileMdx = async () => {
        try {
          const { component, frontmatter } = await mdx.compile({ content: mdxContent });
          setResult({ component, frontmatter, error: null });
        } catch (e: any) {
          setResult({ component: null, frontmatter: {}, error: e.message });
        }
      };

      compileMdx();
    }, 500);

    return () => clearTimeout(handler);
  }, [mdxContent]);

  return (
    <div className="container">
      <header>
        <h1>Live MDX Editor</h1>
        <p>Powered by <a href="https://mdx.do" target="_blank" rel="noopener noreferrer">mdx.do</a></p>
      </header>
      <main className="editor-layout">
        <section className="editor-pane">
          <h2>Editor</h2>
          <textarea
            value={mdxContent}
            onChange={(e) => setMdxContent(e.target.value)}
            placeholder="Type your MDX here..."
          />
        </section>
        <section className="preview-pane">
          <h2>Live Preview</h2>
          <div className="preview-content">
            {result.error ? (
              <pre style={{ color: '#ff5555' }}>{result.error}</pre>
            ) : (
              <>
                {Object.keys(result.frontmatter).length > 0 && (
                  <div className="frontmatter">
                    <h3>Frontmatter:</h3>
                    <pre>{JSON.stringify(result.frontmatter, null, 2)}</pre>
                  </div>
                )}
                <hr />
                <MdxPreview code={result.component} />
              </>
            )}
          </div>
        </section>
      </main>
    </div>
  );
}

export default App;