react-block-editor-lib/README.md

A modern, extensible block editor for React applications with WordPress compatibility

# Block Editor Library - Quick Start

## 🚀 **3 Ways to Use Your Block Editor**

### **1. React Component (Easiest)**
```bash
npm install @your-org/block-editor
```

```tsx
import { BlockEditor } from '@your-org/block-editor';
import '@your-org/block-editor/dist/styles/themes.css';

function App() {
  return (
    <BlockEditor
      config={{ theme: 'wordpress' }}
      onSave={(content) => console.log('Saved:', content)}
    />
  );
}
```

### **2. Browser Script (No Build Required)**
```html
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="./dist/browser.js"></script>
<link rel="stylesheet" href="./dist/styles/themes.css">

<script>
  const editor = window.BlockEditorAPI.init('editor-container', {
    theme: 'wordpress'
  });
</script>
```

### **3. Next.js/Vue.js/Any Framework**
```javascript
// Works with any framework that supports React components
import { BlockEditorAPI } from '@your-org/block-editor';

// Initialize in your framework's lifecycle
const editor = BlockEditorAPI.init(containerElement, config);
```

---

## 📦 **Installation Commands**

```bash
# NPM
npm install @your-org/block-editor

# Yarn  
yarn add @your-org/block-editor

# Local development
npm link @your-org/block-editor
```

---

## 🎨 **Themes Available**

- `'wordpress'` - WordPress Gutenberg style
- `'modern'` - Clean, modern design  
- `'minimal'` - Simple, distraction-free

---

## ⚡ **Quick Examples**

### **Basic Usage**
```tsx
<BlockEditor 
  placeholder="Start writing..."
  onSave={(content) => saveToAPI(content)}
/>
```

### **With Image Search**
```tsx
<BlockEditor
  config={{
    enableImageSearch: true,
    imageSearchConfig: {
      apiKey: 'your-unsplash-key'
    }
  }}
/>
```

### **WordPress Integration**
```tsx
<BlockEditor
  config={{
    enableWordPressIntegration: true,
    wordPressConfig: {
      apiUrl: 'https://yoursite.com/wp-json/wp/v2'
    }
  }}
/>
```

---

## 🔧 **API Methods**

```javascript
// Get content as WordPress HTML
const content = editor.getContent();

// Get raw blocks data
const blocks = editor.getBlocks();

// Set content from WordPress HTML
editor.setContent('<!-- wp:paragraph --><p>Hello</p><!-- /wp:paragraph -->');

// Add new block
editor.addBlock('core/heading', { content: 'New Heading', level: 2 });

// Save content
editor.save();
```

---

## 📱 **File Sizes**

- **Browser build**: 54KB (gzipped: ~18KB)
- **React component**: 45KB  
- **CSS themes**: 8KB

---

## 🌐 **Browser Support**

- ✅ Chrome 80+
- ✅ Firefox 75+  
- ✅ Safari 13+
- ✅ Edge 80+

---

## 📚 **Full Documentation**

See `USAGE_GUIDE.md` for complete examples and advanced usage.

---

## 🆘 **Need Help?**

1. Check the examples in `/examples/` folder
2. Look at `react-integration.html` for a working demo
3. Open browser dev tools to see console logs
4. Make sure React/ReactDOM are loaded before the editor