npm package: @opncanvas/react-editor
Description: Full React editor UI components for design schemas with drag & drop
Author: Edge Foundry, Inc.
Latest version: 0.1.0

# @opncanvas/react-editor

Full React editor UI components for design schemas with drag & drop support.

## Installation

```bash
npm install @opncanvas/react-editor @opncanvas/schema @opncanvas/engine @opncanvas/react-renderer @opncanvas/exporter react react-dom
```

## Quick Start

```tsx
import { Editor } from '@opncanvas/react-editor'
import { emailCaptureTemplate } from '@opncanvas/templates'

function App() {
  return (
    <Editor
      initialSchema={emailCaptureTemplate}
      onSchemaChange={(newSchema) => {
        console.log('Schema changed:', newSchema)
        // Save to localStorage, database, etc.
      }}
      onAction={(node) => {
        console.log('Action triggered:', node)
      }}
    />
  )
}
```

## Components

### Editor

Main editor component with panels, canvas, and export functionality.

**Props:**
- `initialSchema` - Initial schema to load
- `onSchemaChange?` - Callback when schema changes
- `onAction?` - Callback when an action is triggered

```tsx
<Editor
  initialSchema={mySchema}
  onSchemaChange={(schema) => saveSchema(schema)}
  onAction={(node) => handleAction(node)}
/>
```

### Canvas

Preview canvas with drag & drop support using dnd-kit.

**Props:**
- `schema` - Current schema
- `setSchema` - Schema updater function
- `selectedBlockId` - Currently selected block ID
- `setSelectedBlockId` - Function to set selected block
- `onAction?` - Action handler

```tsx
<Canvas
  schema={schema}
  setSchema={setSchema}
  selectedBlockId={selectedId}
  setSelectedBlockId={setSelectedId}
/>
```

### Editor Panels

Individual editor panels for different node types:

- `ButtonEditorPanel` - Edit button properties
- `TextEditorPanel` - Edit text properties (header, subtext, legal)
- `InputEditorPanel` - Edit input properties (email, phone)
- `BackgroundEditorPanel` - Edit background/container properties

### Editor Controls

Reusable form inputs:

- `TextInput` - Text input field
- `NumberInput` - Number input field
- `ColorInput` - Color picker
- `SelectInput` - Dropdown select
- `createPropertyHandler` - Helper for property change handlers

## Features

### Drag & Drop

The editor includes built-in drag & drop support for reordering elements. Users can click and drag elements to reorder them in the canvas.

### Property Editing

Click any element in the canvas to edit its properties in the side panel:

- Text content
- Colors (background, text, border)
- Sizing (width, height, padding, margins)
- Typography (font family, size, weight, alignment)
- Borders and shadows

### Export

Click the "Export" button to generate production-ready HTML/CSS/JS code.

## Styling

The editor uses CSS classes that you can style:

```css
.editor-container {
  display: flex;
  gap: 20px;
}

.editor-panel {
  width: 300px;
  padding: 20px;
  background: #f5f5f5;
}

.renderer-panel {
  flex: 1;
  padding: 20px;
}

.renderer-canvas {
  background: #fff;
  min-height: 500px;
  padding: 40px;
}

.form-container {
  margin: 0 auto;
}

.selected {
  outline: 2px solid #0066ff;
}

.export-controls {
  padding: 20px;
}
```

## Advanced Usage

### Custom Actions

```tsx
import { Editor } from '@opncanvas/react-editor'
import { ActionRegistry } from '@opncanvas/plugin-api'

const registry = new ActionRegistry()

registry.register({
  id: 'custom_submit',
  handler: async (data) => {
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }
})

function App() {
  return (
    <Editor
      initialSchema={mySchema}
      onAction={(node) => {
        if (node.type === 'button') {
          registry.execute(node.action)
        }
      }}
    />
  )
}
```

### Save/Load Schemas

```tsx
import { useState, useEffect } from 'react'
import { Editor } from '@opncanvas/react-editor'

function App() {
  const [schema, setSchema] = useState(() => {
    const saved = localStorage.getItem('my-schema')
    return saved ? JSON.parse(saved) : defaultSchema
  })

  return (
    <Editor
      initialSchema={schema}
      onSchemaChange={(newSchema) => {
        setSchema(newSchema)
        localStorage.setItem('my-schema', JSON.stringify(newSchema))
      }}
    />
  )
}
```

### With History (Undo/Redo)

```tsx
import { Editor } from '@opncanvas/react-editor'
import { useHistory } from '@opncanvas/history'

function App() {
  const { schema, setSchema, undo, redo, canUndo, canRedo } = useHistory(initialSchema)

  return (
    <div>
      <div className="toolbar">
        <button onClick={undo} disabled={!canUndo}>Undo</button>
        <button onClick={redo} disabled={!canRedo}>Redo</button>
      </div>
      <Editor
        initialSchema={schema}
        onSchemaChange={(newSchema) => {
          setSchema(() => newSchema, 'Update schema')
        }}
      />
    </div>
  )
}
```

## License

Apache 2.0