@@ -18,22 +18,19 @@ function TemplateEditor() {
1818 return (
1919 < SuperDocTemplateBuilder
2020 document = {{
21- source: " template.docx" ,
22- mode: " editing"
21+ source: ' template.docx' ,
22+ mode: ' editing' ,
2323 }}
24-
2524 fields= {{
2625 available: [
2726 { id: ' 1324567890' , label: ' Customer Name' , category: ' Contact' },
2827 { id: ' 1324567891' , label: ' Invoice Date' , category: ' Invoice' },
29- { id: ' 1324567892' , label: ' Amount' , category: ' Invoice' }
30- ]
28+ { id: ' 1324567892' , label: ' Amount' , category: ' Invoice' },
29+ ],
3130 }}
32-
3331 onTrigger= {(event ) => {
3432 console .log (' User typed trigger at' , event .position );
3533 }}
36-
3734 onFieldInsert= {(field ) => {
3835 console .log (' Field inserted:' , field .alias );
3936 }}
@@ -58,7 +55,7 @@ function TemplateEditor() {
5855
5956- ** 🎯 Trigger Detection** - Type ` {{ ` (customizable) to insert fields
6057- ** 📝 Field Management** - Insert, update, delete, and navigate fields
61- - ** 🔍 Field Discovery** - Automatically finds existing fields in documents
58+ - ** 🔍 Field Discovery** - Automatically finds existing fields in documents
6259- ** 🎨 UI Agnostic** - Bring your own menus, panels, and components
6360- ** 📄 SDT Based** - Uses structured content tags for Word compatibility
6461- ** ⚡ Simple API** - Clear callbacks for trigger events and field changes
@@ -74,32 +71,32 @@ function TemplateEditor() {
7471 source : File | Blob | string ,
7572 mode : ' editing' | ' viewing'
7673 }}
77-
74+
7875 // Field configuration
7976 fields = {{
8077 available : FieldDefinition [], // Fields user can insert
8178 initial : TemplateField [] // Pre-existing fields
8279 }}
83-
80+
8481 // UI components (optional)
8582 menu = {{
8683 trigger : ' {{' , // Trigger pattern
8784 component : CustomFieldMenu // Custom menu component
8885 }}
89-
86+
9087 list = {{
9188 position : ' left' | ' right' , // Sidebar position
9289 component : CustomFieldList // Custom list component
9390 }}
94-
91+
9592 // Toolbar (optional)
9693 toolbar = {true } // Render built-in toolbar container
9794 // toolbar="#my-toolbar" // Mount into existing element
9895 // toolbar={{ // Configure built-in toolbar
9996 // toolbarGroups: ['center'],
10097 // excludeItems: ['italic', 'bold'],
10198 // }}
102-
99+
103100 // Event handlers
104101 onReady = {() => {}}
105102 onTrigger = {(event) => {}}
@@ -126,8 +123,8 @@ ref.current.deleteField(fieldId);
126123
127124// Navigation
128125ref .current .selectField (fieldId);
129- ref .current .nextField (); // Tab behavior
130- ref .current .previousField (); // Shift+Tab behavior
126+ ref .current .nextField (); // Tab behavior
127+ ref .current .previousField (); // Shift+Tab behavior
131128
132129// Get data
133130const fields = ref .current .getFields ();
@@ -141,10 +138,10 @@ const template = await ref.current.exportTemplate();
141138``` jsx
142139const CustomFieldMenu = ({ isVisible, position, availableFields, onSelect, onClose }) => {
143140 if (! isVisible) return null ;
144-
141+
145142 return (
146143 < div style= {{ position: ' fixed' , left: position? .left , top: position? .top }}>
147- {availableFields .map (field => (
144+ {availableFields .map (( field ) => (
148145 < button key= {field .id } onClick= {() => onSelect (field)}>
149146 {field .label }
150147 < / button>
@@ -162,8 +159,8 @@ const CustomFieldList = ({ fields, onSelect, onDelete, selectedFieldId }) => {
162159 return (
163160 < div>
164161 < h3> Fields ({fields .length })< / h3>
165- {fields .map (field => (
166- < div
162+ {fields .map (( field ) => (
163+ < div
167164 key= {field .id }
168165 onClick= {() => onSelect (field)}
169166 style= {{ background: selectedFieldId === field .id ? ' #blue' : ' #gray' }}
@@ -184,7 +181,7 @@ Enable Tab/Shift+Tab navigation:
184181` ` ` jsx
185182function TemplateEditor () {
186183 const ref = useRef ();
187-
184+
188185 const handleKeyDown = (e ) => {
189186 if (e .key === ' Tab' ) {
190187 e .preventDefault ();
@@ -195,7 +192,7 @@ function TemplateEditor() {
195192 }
196193 }
197194 };
198-
195+
199196 return (
200197 < div onKeyDown= {handleKeyDown}>
201198 < SuperDocTemplateBuilder ref= {ref} {... props} / >
@@ -219,7 +216,7 @@ const handleDownload = async () => {
219216
220217 // Or with custom filename
221218 await ref .current ? .exportTemplate ({
222- fileName: ' invoice-template.docx'
219+ fileName: ' invoice-template.docx' ,
223220 });
224221};
225222` ` `
@@ -233,7 +230,7 @@ const handleSave = async () => {
233230 // Get the blob without triggering download
234231 const blob = await ref .current ? .exportTemplate ({
235232 fileName: ' invoice-template.docx' ,
236- triggerDownload: false
233+ triggerDownload: false ,
237234 });
238235
239236 if (blob) {
@@ -243,7 +240,7 @@ const handleSave = async () => {
243240
244241 await fetch (' /api/templates' , {
245242 method: ' POST' ,
246- body: formData
243+ body: formData,
247244 });
248245 }
249246};
@@ -262,6 +259,7 @@ exportTemplate(config?: ExportConfig): Promise<void | Blob>
262259` ` `
263260
264261**Return value:**
262+
265263- ` Promise < void > ` when ` triggerDownload: true ` (download happens automatically)
266264- ` Promise < Blob > ` when ` triggerDownload: false ` (returns the docx data)
267265
@@ -276,12 +274,12 @@ import type {
276274 FieldDefinition ,
277275 TriggerEvent ,
278276 ExportConfig ,
279- SuperDocTemplateBuilderHandle
277+ SuperDocTemplateBuilderHandle ,
280278} from ' @superdoc-dev/template-builder' ;
281279
282280const ref = useRef< SuperDocTemplateBuilderHandle> (null );
283281` ` `
284282
285283## License
286284
287- MIT
285+ AGPLv3
0 commit comments