# @hansevision/tp-richtexteditor-control

A standalone, reusable React component for rendering the Syncfusion Richtext Editor in SharePoint Framework (SPFx) solutions.

## Installation

```bash
npm install @hansevision/tp-richtexteditor-control
```

## Peer Dependencies

| Package     | Version    |
| ----------- | ---------- |
| `react`     | `>=16.8.0` |
| `react-dom` | `>=16.8.0` |

## Usage

### Basic usage in an SPFx web part

```tsx
import { DisplayMode } from '@microsoft/sp-core-library';
import { RichTextEditor, ErrorService } from '@hansevision/tp-richtexteditor-control';

const errorService = new ErrorService();

<RichTextEditor
  spfxContext={this.context}
  licenseKey="XXX"
  displayMode={this.displayMode}
  value={this.properties.textContent}
  onChange={(html) => {
    this.properties.textContent = html;
  }}
  errorService={errorService}
/>;
```

### Props

| Prop           | Type                     | Default      | Description                                                                                                             |
| -------------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------- |
| `spfxContext`  | `WebPartContext`         | **required** | SPFx WebPartContext from the host web part. Required for file picker access.                                            |
| `displayMode`  | `DisplayMode`            | **required** | Current DisplayMode from `@microsoft/sp-core-library`. Read mode renders plain HTML; Edit mode renders the full editor. |
| `licenseKey`   | `string`                 | **required** | Syncfusion EJ2 React License Key                                                                                        |
| `value`        | `string`                 | `undefined`  | HTML content to display / edit.                                                                                         |
| `onChange`     | `(html: string) => void` | `undefined`  | Called whenever the HTML content changes.                                                                               |
| `errorService` | `ErrorService`           | new instance | Optional ErrorService for custom error handling. Register handlers via `errorService.register(...)`.                    |
| `required`     | `boolean`                | `false`      | Marks the content as required.                                                                                          |
| `setFocus`     | `boolean`                | `false`      | Focuses the editor on mount.                                                                                            |
| `placeholder`  | `string`                 | `null`       | Placeholder text shown when the editor is empty.                                                                        |
| `saveInterval` | `number`                 | `10000`      | Auto-save interval in milliseconds. The `onChange` callback fires if content changed since the last interval.           |
| `maxLength`    | `number`                 | `-1`         | Maximum number of characters allowed (`-1` = unlimited).                                                                |
| `maxImageSize` | `number`                 | `-1`         | Maximum image size in KB allowed (`-1` = unlimited).                                                                    |

## Development

For static testing:

```bash
# Install dependencies (in TP Richtext Editor Controls Project)
npm ci

# Build the package (in TP Richtext Editor Controls Project)
npm run build

# Create Package: hansevision-tp-richtexteditor-control-1.0.0.tgz (in TP Richtext Editor Controls Project)
npm pack

# in the consuming project
npm install ../your-custom-folder/hansevision-tp-richtexteditor-control-1.0.0.tgz
```

For live-reloading testing:

```bash
# In TP Richtext Editor Controls Project
npm link

# In the consuming project
npm link @hansevision/tp-richtexteditor-control

# In TP Richtext Editor Controls Project
npm run build:watch
```

The build outputs to `dist/`:

- `dist/index.js` — CommonJS bundle
- `dist/index.esm.js` — ES module bundle
- `dist/index.d.ts` — TypeScript declarations