document-editor-key-template/README.md

A reusable React TypeScript component

# Document Editor Key Template

A React TypeScript component for document editing with key template functionality.

## Installation

```bash
npm install document-editor-key-template
# or
yarn add document-editor-key-template
```

## Usage

First, import the required CSS in your app's entry point (e.g., `index.tsx` or `App.tsx`):

```typescript
// Import package styles
import 'document-editor-key-template/styles.css';
```

Then, register the license:

```typescript
import { registerLicense } from 'document-editor-key-template';

// Register Syncfusion license
registerLicense(KEY);
```

Then use the component:

```typescript
import { DocumentEditorKeyTemplate } from 'document-editor-key-template';

function App() {
  return (
    <DocumentEditorKeyTemplate
      file="path/to/your/document.docx"
      defaultKeys={[
        {
          key: "example",
          type: "Single",
          description: "Example key"
        }
      ]}
      language="en"
      callbackAddKey={(key) => console.log('Key added:', key)}
      callbackRemoveKey={(key) => console.log('Key removed:', key)}
      callbackSaveFile={(file) => console.log('File saved:', file)}
    />
  );
}
```

## Props

| Prop | Type | Description |
|------|------|-------------|
| file | string \| File \| Blob | The document file to edit |
| defaultKeys | IKeyTemplate[] | Array of available keys |
| language | 'vi' \| 'en' | Language for the editor (default: 'en') |
| callbackAddKey | (key: IKeyTemplate \| null) => void | Callback when a key is added |
| callbackRemoveKey | (key: IKeyTemplate \| null) => void | Callback when a key is removed |
| callbackSaveFile | (file: Blob) => void | Callback when file is saved |

## Dependencies

This package requires the following peer dependencies:

- @syncfusion/ej2-base: ^29.2.5
- @syncfusion/ej2-react-documenteditor: ^29.2.5
- react: ^19.0.0
- react-dom: ^19.0.0
- @iconify/react: ^6.0.0
- @mui/material: ^5.15.0

## License

MIT