import { useState, useRef } from "react";
import SuperDocTemplateBuilder from "@superdoc-dev/template-builder";
import type {
SuperDocTemplateBuilderHandle,
FieldDefinition,
} from "@superdoc-dev/template-builder";
import "superdoc/style.css";
import "@superdoc-dev/template-builder/field-types.css";
function TemplateEditor() {
const builderRef = useRef<SuperDocTemplateBuilderHandle>(null);
const [fields, setFields] = useState<FieldDefinition[]>([
{ id: "1", label: "Customer Name" },
{ id: "2", label: "Customer Email" },
{ id: "3", label: "Invoice Date" },
{ id: "4", label: "Total Amount" },
{ id: "5", label: "Signer Name", fieldType: "signer" },
{ id: "6", label: "Signature", mode: "block", fieldType: "signer" },
]);
const handleExport = async () => {
await builderRef.current?.exportTemplate({
fileName: "invoice-template",
});
};
const handleFieldCreate = async (field: FieldDefinition) => {
const saved = await fetch("/api/fields", {
method: "POST",
body: JSON.stringify(field),
}).then((r) => r.json());
setFields((prev) => [...prev, { ...field, id: saved.id }]);
return { ...field, id: saved.id };
};
return (
<div>
<header>
<h1>Invoice Template Builder</h1>
<button onClick={handleExport}>Export Template</button>
</header>
<SuperDocTemplateBuilder
ref={builderRef}
document={{
source: "invoice-base.docx",
mode: "editing",
}}
fields={{
available: fields,
allowCreate: true,
}}
list={{ position: "right" }}
toolbar={true}
onFieldsChange={(templateFields) => {
console.log("Template updated:", templateFields);
}}
onFieldCreate={handleFieldCreate}
onExport={(event) => {
console.log("Exported", event.fields.length, "fields");
}}
/>
</div>
);
}
