npm package: @ncds/editor
Description: Froala Editor component for NHN Commerce
Author: nhn-commerce-fe
Latest version: 0.1.16

# @ncds/editor

A React component wrapper for Froala WYSIWYG Editor designed for NHN Commerce applications.

## Features

- 🚀 Easy-to-use React wrapper for Froala Editor
- 📦 TypeScript support with full type definitions
- 🎨 Customizable styling and configuration
- 🖼️ Built-in image upload handling
- 🌐 Korean language support included
- 📱 Responsive design support

## Installation

```bash
npm install @ncds/editor
```

### Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install react react-dom froala-editor react-froala-wysiwyg
```

## Quick Start

```tsx
import React, { useState, useRef } from 'react';
import { FroalaEditor, FroalaEditorType } from '@ncds/editor';

function MyEditor() {
  const [content, setContent] = useState('<p>Hello World!</p>');
  const editorRef = useRef<FroalaEditorType | null>(null);

  return (
    <FroalaEditor
      value={content}
      onChange={setContent}
      editorRef={editorRef}
      placeholder="Start typing..."
      height={400}
      licenseKey="your-license-key"
    />
  );
}
```

## API Reference

### Props

| Prop                       | Type                          | Default                  | Description                                  |
| -------------------------- | ----------------------------- | ------------------------ | -------------------------------------------- |
| `value`                    | `string`                      | -                        | Current HTML content of the editor           |
| `onChange`                 | `(value: string) => void`     | -                        | Callback fired when content changes          |
| `editorRef`                | `RefObject<FroalaEditorType>` | -                        | Ref to access editor instance methods        |
| `placeholder`              | `string`                      | `'내용을 입력해주세요.'` | Placeholder text when editor is empty        |
| `height`                   | `number`                      | `300`                    | Editor height in pixels                      |
| `width`                    | `number`                      | `100%`                   | Editor width                                 |
| `disabled`                 | `boolean`                     | `false`                  | Whether the editor is read-only              |
| `licenseKey`               | `string`                      | -                        | Froala license key (required for production) |
| `imageUploadOptions`       | `object`                      | -                        | Custom image upload configuration            |
| `customImageUploadOptions` | `object`                      | -                        | Additional image upload options              |
| `viewContentSize`          | `boolean`                     | `true`                   | Show content size in status bar              |
| `className`                | `string`                      | -                        | Additional CSS classes for wrapper           |
| `tag`                      | `string`                      | `'div'`                  | HTML tag for editor container                |

### Editor Instance Methods

Access editor methods through the `editorRef`:

```tsx
const editorRef = useRef<FroalaEditorType | null>(null);

// Get HTML content
const html = editorRef.current?.getHTML();

// Set HTML content
editorRef.current?.setHTML('<p>New content</p>');

// Focus editor
editorRef.current?.focus();

// Get selection
const selection = editorRef.current?.getSelection();
```

## Advanced Usage

### Custom Image Upload

```tsx
<FroalaEditor
  value={content}
  onChange={setContent}
  imageUploadOptions={{
    uploadUrl: '/api/upload-image',
    uploadParams: { folder: 'editor-images' },
    maxImageSize: 5 * 1024 * 1024, // 5MB
  }}
/>
```

### Event Handlers

```tsx
<FroalaEditor
  value={content}
  onChange={setContent}
  onInit={(editor) => console.log('Editor initialized')}
  onBlur={() => console.log('Editor lost focus')}
/>
```

## Styling

The component includes default styles, but you can customize the appearance:

```css
.my-editor {
  border: 2px solid #e1e5e9;
  border-radius: 8px;
}

.my-editor .fr-box {
  border: none;
}
```

## TypeScript Support

Full TypeScript support with proper type definitions:

```tsx
import { FroalaEditorProps, FroalaEditorType } from '@ncds/editor';

interface MyEditorProps extends Partial<FroalaEditorProps> {
  customProp?: string;
}
```

## Requirements

- React >= 16.8.0
- react-dom >= 16.8.0
- froala-editor >= 4.0.0
- react-froala-wysiwyg >= 4.0.0

## License

MIT License - see LICENSE file for details.