diff --git a/src/components/forms/custom-form-builder.tsx b/src/components/forms/custom-form-builder.tsx index 082939f..13f2206 100644 --- a/src/components/forms/custom-form-builder.tsx +++ b/src/components/forms/custom-form-builder.tsx @@ -307,6 +307,11 @@ export function CustomFormBuilder() { TableRow, BorderedTableHeader, BorderedTableCell, + TiptapImage.configure({ + inline: false, + allowBase64: true, + HTMLAttributes: { class: "cf-img", style: "max-width:100%;height:auto;" }, + }), ], content: "
Start typing hereā¦
", editorProps: { @@ -317,6 +322,37 @@ export function CustomFormBuilder() { }, }); + // Hidden file input for image uploads + const insertImageFromFile = (file: File) => { + if (!editor) return; + if (!file.type.startsWith("image/")) { + toast.error("Please select an image file"); + return; + } + if (file.size > 5 * 1024 * 1024) { + toast.error("Image too large", { description: "Max 5 MB. Resize before inserting." }); + return; + } + const reader = new FileReader(); + reader.onload = () => { + const src = String(reader.result || ""); + if (!src) return; + editor.chain().focus().setImage({ src, alt: file.name }).run(); + }; + reader.readAsDataURL(file); + }; + + const triggerImagePicker = () => { + const input = document.createElement("input"); + input.type = "file"; + input.accept = "image/png,image/jpeg,image/jpg,image/gif,image/webp"; + input.onchange = () => { + const f = input.files?.[0]; + if (f) insertImageFromFile(f); + }; + input.click(); + }; + useEffect(() => { fetchFirm().then(setFirm); fetchCustomFieldDefs().then(setCustomDefs);