Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

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: "<p>Start typing here…</p>",
     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);