# Editor Components for @mdxui/widgets

This directory contains a comprehensive set of editor components for various content editing needs.

## Components

### 1. MarkdownEditor

A full-featured Markdown editor with live preview.

**Features:**
- Split-pane editing (edit + preview side-by-side)
- GitHub Flavored Markdown (GFM) support
- Syntax highlighting in preview
- Toolbar with common formatting actions
- Three viewing modes: edit, preview, split

**Usage:**
```tsx
import { MarkdownEditor } from '@mdxui/widgets/editor/markdown'

function MyComponent() {
  return (
    <MarkdownEditor
      initialValue="# Hello World"
      onChange={(value) => console.log(value)}
      defaultMode="split"
      enableGfm={true}
    />
  )
}
```

### 2. CodeEditor

Syntax-highlighted code editor powered by Shiki.

**Features:**
- Syntax highlighting for 100+ languages
- Line numbers
- Copy to clipboard
- Language selector
- Multiple themes
- Read-only mode

**Usage:**
```tsx
import { CodeEditor } from '@mdxui/widgets/editor/code'

function MyComponent() {
  return (
    <CodeEditor
      language="typescript"
      initialValue="const hello = 'world'"
      onChange={(value) => console.log(value)}
      showLineNumbers={true}
      theme="github-dark"
    />
  )
}
```

### 3. WYSIWYGEditor

Rich text WYSIWYG editor built on Tiptap.

**Features:**
- Full formatting toolbar (bold, italic, underline, etc.)
- Headings, lists, quotes
- Tables support
- Task lists (checkboxes)
- Links
- Undo/redo
- HTML and JSON output

**Usage:**
```tsx
import { WYSIWYGEditor } from '@mdxui/widgets/editor/wysiwyg'

function MyComponent() {
  return (
    <WYSIWYGEditor
      initialValue="<p>Start writing...</p>"
      onChange={(html, json) => console.log(html, json)}
      enableTables={true}
      enableTaskLists={true}
    />
  )
}
```

### 4. BlockEditor

Notion-style block-based editor.

**Features:**
- Block-based editing interface
- `/` command menu for block types
- Drag handles for reordering
- Multiple block types (text, headings, lists, code, quotes)
- Keyboard shortcuts
- JSON output

**Usage:**
```tsx
import { BlockEditor } from '@mdxui/widgets/editor/block'

function MyComponent() {
  return (
    <BlockEditor
      onChange={(json) => console.log(json)}
      placeholder="Type '/' for commands..."
      availableBlocks={['paragraph', 'heading1', 'heading2', 'bulletList']}
    />
  )
}
```

### 5. MDXEditor

MDX editor with JSX support and live preview.

**Features:**
- MDX syntax highlighting
- JSX component support
- Split-pane preview
- Error detection
- Custom component rendering
- Variable/component insertion

**Usage:**
```tsx
import { MDXEditor } from '@mdxui/widgets/editor/mdx'

function MyComponent() {
  return (
    <MDXEditor
      initialValue="# Hello\n\n<YourComponent />"
      onChange={(value) => console.log(value)}
      renderPreview={async (mdx) => {
        // Your MDX rendering logic
        return <div>Rendered content</div>
      }}
      components={{ YourComponent: () => <div>Custom!</div> }}
    />
  )
}
```

### 6. EmailBuilder

Email template builder and composer.

**Features:**
- Visual email editing
- Subject line editor
- Template presets
- Variable insertion ({{first_name}}, etc.)
- Mobile/desktop preview
- HTML source view
- Email-safe HTML output

**Usage:**
```tsx
import { EmailBuilder } from '@mdxui/widgets/editor/email'

function MyComponent() {
  return (
    <EmailBuilder
      initialSubject="Welcome!"
      onChange={(html, subject) => console.log(html, subject)}
      templates={[
        {
          id: 'welcome',
          name: 'Welcome Email',
          subject: 'Welcome to {{company}}',
          html: '<h2>Welcome!</h2>'
        }
      ]}
    />
  )
}
```

## Utilities

### Editor Utils

Helper functions for working with editor content:

```tsx
import {
  htmlToText,
  markdownToHtml,
  serializeToHtml,
  getWordCount,
  getReadingTime,
  extractText,
} from '@mdxui/widgets/editor/utils'

const text = htmlToText('<p>Hello</p>') // "Hello"
const html = markdownToHtml('**bold**') // "<strong>bold</strong>"
const words = getWordCount('Hello world') // 2
const minutes = getReadingTime('Long article...') // 5
```

## Hooks

### useEditorState

State management hook for editors with autosave support:

```tsx
import { useEditorState } from '@mdxui/widgets/editor/hooks/use-editor-state'

function MyEditor() {
  const {
    content,
    isDirty,
    isSaving,
    lastSaved,
    error,
    updateContent,
    save,
    reset,
  } = useEditorState({
    initialContent: 'Hello',
    autosaveDelay: 2000,
    onSave: async (content) => {
      await fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify({ content }),
      })
    },
  })

  return (
    <div>
      <textarea value={content} onChange={(e) => updateContent(e.target.value)} />
      {isDirty && <span>Unsaved changes</span>}
      {isSaving && <span>Saving...</span>}
    </div>
  )
}
```

### useEditorSync

Real-time collaborative editing hook with WebSocket support:

```tsx
import { useEditorSync } from '@mdxui/widgets/editor/hooks/use-editor-sync'

function CollaborativeEditor() {
  const {
    isConnected,
    isOnline,
    collaborators,
    sendChange,
    syncPendingChanges,
  } = useEditorSync({
    wsUrl: 'ws://localhost:3000',
    documentId: 'doc-123',
    userId: 'user-456',
    enableOffline: true,
  })

  return (
    <div>
      <div>
        {isConnected ? '🟢 Connected' : '🔴 Disconnected'}
        {collaborators.map((c) => (
          <span key={c.id}>{c.name}</span>
        ))}
      </div>
      {/* Your editor component */}
    </div>
  )
}
```

## TypeScript Support

All components are fully typed with TypeScript. Import types as needed:

```tsx
import type {
  MarkdownEditorProps,
  CodeEditorProps,
  WYSIWYGEditorProps,
  BlockEditorProps,
  BlockType,
  MDXEditorProps,
  EmailBuilderProps,
  EmailTemplate,
  EditorState,
  EditorSyncState,
  Collaborator,
} from '@mdxui/widgets/editor/components'
```

## Styling

All components use Tailwind CSS v4 and respect your theme configuration. They're built on top of `@mdxui/primitives` components for consistent styling.

## License

All components are extracted from MIT-licensed open source projects:
- Tiptap extensions: MIT License
- Shiki syntax highlighting: MIT License
- React Markdown: MIT License

## Dependencies

The following dependencies are included in the package:

- `@tiptap/react` and extensions - Rich text editing
- `shiki` - Syntax highlighting
- `react-markdown` - Markdown rendering
- `remark-gfm` - GitHub Flavored Markdown

No additional dependencies are required beyond what's in `package.json`.