image-editor-canva/README.md

A Canva-like image editor plugin for React

# Image Editor Canva

A powerful and customizable image editor built with React and Fabric.js.

## Latest Release

Version 1.3.0 is now available on npm! You can install it using:

```bash
npm install image-editor-canva@1.3.0
```

Or simply:

```bash
npm install image-editor-canva
```

## Features

- 🎨 Rich set of editing tools
- 📝 Text editing with multiple fonts and styles
- 🖼️ Image manipulation and filters
- 🎯 Shape drawing and manipulation
- 🎨 Color management
- 📏 Size and position controls
- 🔄 Undo/Redo functionality
- 💾 Multiple export formats (PNG, JPG, SVG, JSON)
- ⌨️ Keyboard shortcuts
- 🎯 Selection tools
- 🖌️ Drawing tools
- 🎨 Background customization
- 📦 Template support
- 🛡️ Enhanced error handling for corrupted data
- 📦 Optimized bundle size (~200KB)

## What's New in v1.3.0

- **Enhanced Error Handling**: Added robust error handling for JSON data loading and Fabric.js integration
- **Optimized Bundle Size**: Reduced bundle size from 58MB to ~200KB
- **Fabric.js TypeError Fix**: Includes automatic patching for the Fabric.js "Cannot read properties of undefined" error
- **Improved Dependency Management**: Better organization of dependencies to reduce installation size
- **Enhanced Initial Load**: More reliable canvas initialization with graceful fallbacks

## Installation

```bash
npm install image-editor-canva
# or
yarn add image-editor-canva
```

## Usage

```tsx
import { Editor } from 'image-editor-canva';
import 'image-editor-canva/dist/styles.css'; // Import styles

function App() {
  return (
    <Editor 
      initialData={{
        json: "",
        name: "New Project",
        id: '123',
        userId: "anonymous",
        height: 720,
        width: 1280,
        thumbnailUrl: null,
        isTemplate: null,
        isPro: null,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      }}
      onClose={() => {
        // Handle editor close
        console.log('Editor closed');
      }}
    />
  );
}
```

## Props

### Editor Component Props

| Prop | Type | Description |
|------|------|-------------|
| `initialData` | `Object` | Initial editor data |
| `templates` | `Array` | Optional array of templates |
| `templateImagePath` | `string` | Path to template images |
| `onClose` | `Function` | Callback when editor is closed |

### Editor Data Structure

```typescript
interface EditorData {
  json: string;
  name: string;
  id: string;
  userId: string;
  height: number;
  width: number;
  thumbnailUrl: string | null;
  isTemplate: boolean | null;
  isPro: boolean | null;
  createdAt: string;
  updatedAt: string;
}
```

## Available Tools

- Select
- Shapes
- Text
- Images
- Elements
- Draw
- Fill
- Stroke Color
- Stroke Width
- Font
- Opacity
- Filter
- Settings
- AI
- Remove Background
- Background
- Templates

## Export Formats

- PNG
- JPG
- SVG
- JSON

## Keyboard Shortcuts

- `Ctrl + Z` / `Cmd + Z`: Undo
- `Ctrl + Y` / `Cmd + Y`: Redo
- `Ctrl + C` / `Cmd + C`: Copy
- `Ctrl + V` / `Cmd + V`: Paste
- `Delete`: Delete selected object
- `Ctrl + S` / `Cmd + S`: Save

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Build optimized version
npm run build:slim
```

## Bundle Size Optimization

The package is now significantly smaller:
- ESM bundle: ~92KB
- CommonJS bundle: ~96KB 
- Styles: ~28KB

This is achieved through:
- Better tree-shaking
- External dependencies
- Smaller core package with peer dependencies

## Error Handling

The editor now gracefully handles:
- Invalid or corrupted JSON data
- Fabric.js TypeErrors related to object properties
- Missing or incomplete canvas elements
- Invalid dimensions and coordinates

## License

MIT

## Links

- [NPM Package](https://www.npmjs.com/package/image-editor-canva)
- [GitHub Repository](https://github.com/avneesh0612/image-editor-canva) 

## Including Styles

To ensure styles load properly and avoid styling delays:

1. **Method 1: Import CSS in your HTML head (Recommended)**
   
   Add this to your HTML head tag:
   ```html
   <link rel="stylesheet" href="node_modules/image-editor-canva/dist/styles.css">
   ```
   
   For bundlers that support it (webpack, Vite, etc.), you can also:
   ```js
   import 'image-editor-canva/dist/styles.css';
   ```
   This is the preferred method to ensure styles load before components render.

2. **Method 2: Import with plugin**
   
   You can still use the old method (not recommended for production):
   ```js
   import 'image-editor-canva/dist/index.js'; // This will include styles but may lead to style delay
   ```