Skip to content
This repository was archived by the owner on Jan 30, 2026. It is now read-only.

Commit 18ca298

Browse files
caio-pizzolcaio-pizzol
committed
refactor: update available fields and enhance field handling in App component
1 parent e0e6d31 commit 18ca298

File tree

4 files changed

+39
-49
lines changed

4 files changed

+39
-49
lines changed

‎demo/src/App.tsx‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,13 @@ import "./App.css";
1010

1111
const availableFields: FieldDefinition[] = [
1212
// Contact Information
13-
{ id: "customer_name", label: "Customer Name", category: "Contact" },
14-
{ id: "customer_email", label: "Customer Email", category: "Contact" },
15-
{ id: "customer_phone", label: "Customer Phone", category: "Contact" },
16-
{ id: "customer_address", label: "Customer Address", category: "Contact" },
13+
{ id: "applicant_name", label: "Applicant Name", category: "Applicant" },
14+
{ id: "applicant_email", label: "Applicant Email", category: "Applicant" },
15+
{ id: "applicant_phone", label: "Applicant Phone", category: "Applicant" },
1716

1817
// Company Information
19-
{ id: 'company_name', label: 'Company Name', category: 'Company' },
20-
{ id: 'company_address', label: 'Company Address', category: 'Company' },
21-
{ id: 'company_phone', label: 'Company Phone', category: 'Company' },
22-
{ id: 'company_email', label: 'Company Email', category: 'Company' },
23-
24-
// Invoice/Order
25-
{ id: 'invoice_number', label: 'Invoice Number', category: 'Invoice' },
26-
{ id: 'invoice_date', label: 'Invoice Date', category: 'Invoice' },
27-
{ id: 'due_date', label: 'Due Date', category: 'Invoice' },
28-
{ id: 'total_amount', label: 'Total Amount', category: 'Invoice' },
29-
{ id: 'tax_amount', label: 'Tax Amount', category: 'Invoice' },
30-
{ id: 'subtotal', label: 'Subtotal', category: 'Invoice' },
18+
{ id: 'organization_name', label: 'Organization Name', category: 'Organization' },
19+
{ id: 'organization_email', label: 'Organization Email', category: 'Organization' },
3120

3221
// Legal
3322
{ id: 'effective_date', label: 'Effective Date', category: 'Legal' },
@@ -36,10 +25,7 @@ const availableFields: FieldDefinition[] = [
3625
{ id: 'governing_law', label: 'Governing Law', category: 'Legal' },
3726

3827
// Product/Service
39-
{ id: 'product_name', label: 'Product Name', category: 'Product' },
40-
{ id: 'product_description', label: 'Product Description', category: 'Product' },
41-
{ id: 'quantity', label: 'Quantity', category: 'Product' },
42-
{ id: 'unit_price', label: 'Unit Price', category: 'Product' },
28+
{ id: 'service_description', label: 'Service Description', category: 'Product' },
4329
];
4430

4531
export function App() {

‎src/defaults/FieldMenu.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
6060
return groups;
6161
}, [fieldsToDisplay]);
6262

63-
const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({});
63+
const [expandedCategories, setExpandedCategories] = useState<
64+
Record<string, boolean>
65+
>({});
6466

6567
useEffect(() => {
6668
setExpandedCategories((previous) => {
@@ -243,7 +245,8 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
243245
<div
244246
key={category}
245247
style={{
246-
borderTop: index === 0 && allowCreate ? undefined : "1px solid #f0f0f0",
248+
borderTop:
249+
index === 0 && allowCreate ? undefined : "1px solid #f0f0f0",
247250
}}
248251
>
249252
<button
@@ -311,7 +314,8 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
311314
</div>
312315
</div>
313316
);
314-
}))}
317+
})
318+
)}
315319

316320
<div
317321
style={{

‎src/index.tsx‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,9 @@ export { FieldMenu, FieldList };
1515

1616
type Editor = NonNullable<SuperDoc["activeEditor"]>;
1717

18-
const getTemplateFieldsFromEditor = (
19-
editor: Editor,
20-
): Types.TemplateField[] => {
21-
const structuredContentHelpers =
22-
(editor.helpers as any)?.structuredContentCommands;
18+
const getTemplateFieldsFromEditor = (editor: Editor): Types.TemplateField[] => {
19+
const structuredContentHelpers = (editor.helpers as any)
20+
?.structuredContentCommands;
2321

2422
if (!structuredContentHelpers?.getStructuredContentTags) {
2523
return [];
@@ -141,9 +139,9 @@ const SuperDocTemplateBuilder = forwardRef<
141139
const [templateFields, setTemplateFields] = useState<Types.TemplateField[]>(
142140
fields.initial || [],
143141
);
144-
const [selectedFieldId, setSelectedFieldId] = useState<string | number | null>(
145-
null,
146-
);
142+
const [selectedFieldId, setSelectedFieldId] = useState<
143+
string | number | null
144+
>(null);
147145
const [menuVisible, setMenuVisible] = useState(false);
148146
const [menuPosition, setMenuPosition] = useState<DOMRect | undefined>();
149147
const [menuQuery, setMenuQuery] = useState<string>("");
@@ -207,23 +205,23 @@ const SuperDocTemplateBuilder = forwardRef<
207205
const success =
208206
mode === "inline"
209207
? editor.commands.insertStructuredContentInline?.({
210-
attrs: {
211-
alias: field.alias,
212-
tag: field.metadata
213-
? JSON.stringify(field.metadata)
214-
: field.category,
215-
},
216-
text: field.defaultValue || field.alias,
217-
})
208+
attrs: {
209+
alias: field.alias,
210+
tag: field.metadata
211+
? JSON.stringify(field.metadata)
212+
: field.category,
213+
},
214+
text: field.defaultValue || field.alias,
215+
})
218216
: editor.commands.insertStructuredContentBlock?.({
219-
attrs: {
220-
alias: field.alias,
221-
tag: field.metadata
222-
? JSON.stringify(field.metadata)
223-
: field.category,
224-
},
225-
text: field.defaultValue || field.alias,
226-
});
217+
attrs: {
218+
alias: field.alias,
219+
tag: field.metadata
220+
? JSON.stringify(field.metadata)
221+
: field.category,
222+
},
223+
text: field.defaultValue || field.alias,
224+
});
227225

228226
if (success) {
229227
const updatedFields = getTemplateFieldsFromEditor(editor);
@@ -591,11 +589,10 @@ const SuperDocTemplateBuilder = forwardRef<
591589

592590
const exportTemplate = useCallback(
593591
async (options?: { fileName?: string }): Promise<void> => {
594-
595592
try {
596593
await superdocRef.current?.export({
597594
exportType: ["docx"],
598-
exportedName: options?.fileName ? options?.fileName : "document"
595+
exportedName: options?.fileName ? options?.fileName : "document",
599596
});
600597
} catch (error) {
601598
console.error("Failed to export DOCX", error);
@@ -637,6 +634,7 @@ const SuperDocTemplateBuilder = forwardRef<
637634
fields={templateFields}
638635
onSelect={(field) => selectField(field.id)}
639636
onDelete={deleteField}
637+
onUpdate={(field) => updateField(field.id, field)}
640638
selectedFieldId={selectedFieldId || undefined}
641639
/>
642640
</div>
@@ -666,6 +664,7 @@ const SuperDocTemplateBuilder = forwardRef<
666664
fields={templateFields}
667665
onSelect={(field) => selectField(field.id)}
668666
onDelete={deleteField}
667+
onUpdate={(field) => updateField(field.id, field)}
669668
selectedFieldId={selectedFieldId || undefined}
670669
/>
671670
</div>

‎src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export interface FieldListProps {
3939
fields: TemplateField[];
4040
onSelect: (field: TemplateField) => void;
4141
onDelete: (fieldId: string | number) => void;
42+
onUpdate?: (field: TemplateField) => void;
4243
selectedFieldId?: string | number;
4344
}
4445

0 commit comments

Comments
 (0)