Document Editor Key Template

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

Installation

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):

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

Then, register the license:

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

// Register Syncfusion license
registerLicense(KEY);

Then use the component:

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