markdown-editor-integrator

# Markdown Editor Integrator

Install and configure @uiw/react-md-editor with theme integration, server-side sanitization, controlled/uncontrolled modes, and proper persistence for worldbuilding content.

## When to Use This Skill

Apply this skill when:
- Adding markdown editing capability to forms
- Creating rich text editing for entity descriptions
- Building content management features
- Adding WYSIWYG editing with markdown preview
- Implementing text formatting for character bios, location descriptions, lore entries
- Setting up markdown support for notes and documentation
- Creating editing interfaces for narrative content

## Overview

@uiw/react-md-editor is a React markdown editor with:
- Live preview with split/edit/preview modes
- Syntax highlighting
- Markdown shortcuts and toolbar
- Theme customization
- No SSR issues
- TypeScript support

## Installation Process

### Step 1: Install Dependencies

```bash
npm install @uiw/react-md-editor
```

For sanitization (security):
```bash
npm install rehype-sanitize
```

### Step 2: Configure Next.js (if using)

Add to next.config.js to avoid SSR issues:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Other config...
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@uiw/react-md-editor': '@uiw/react-md-editor',
    }
    return config
  },
}

module.exports = nextConfig
```

### Step 3: Create Editor Component

Create wrapper component at `components/MarkdownEditor.tsx`:

See assets/MarkdownEditor.tsx for full implementation.

### Step 4: Create Preview Component

Create preview component at `components/MarkdownPreview.tsx`:

See assets/MarkdownPreview.tsx for full implementation.

### Step 5: Integrate Theme Styling

Configure editor to match shadcn/ui theme:

See references/theme-integration.md for detailed theming.

### Step 6: Add Server-Side Sanitization

Implement sanitization for security:

See references/sanitization.md for imple