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