@signiphi/pdf-signer 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/core/index.js

@@ -76,7 +76,7 @@ function initializePdfJs() {
 async function checkPdfJsVersion(viewerBasePath = "/pdfjs") {
   const workerVersion = pdfjsLib__namespace.version;
   try {
-    const versionUrl = `${viewerBasePath}/.version`;
+    const versionUrl = `${viewerBasePath}/version.txt`;
     const response = await fetch(versionUrl);
     if (!response.ok) {
       return {
@@ -181,6 +181,79 @@ var PdfViewerCore = react.forwardRef(
       }
       return PDFViewerApplication;
     }, [getPDFViewerApplication]);
+    const fieldMetadataRef = react.useRef([]);
+    const setFieldMetadata = react.useCallback((fields) => {
+      fieldMetadataRef.current = fields;
+      logger.info("[FIELD METADATA] Updated field metadata:", fields.map((f) => ({ name: f.name, fontSize: f.fontSize, type: f.type })));
+    }, []);
+    const extractFieldFontSizes = react.useCallback(async () => {
+      const fontSizeMap = {};
+      for (const field of fieldMetadataRef.current) {
+        if (field.type === "text" /* TEXT */) {
+          if (field.fontSize && field.fontSize >= 8 && field.fontSize <= 72) {
+            fontSizeMap[field.name] = field.fontSize;
+          }
+        }
+      }
+      if (Object.keys(fontSizeMap).length === 0) {
+        try {
+          const PDFViewerApplication = await waitForInitialization();
+          if (PDFViewerApplication?.pdfDocument?.getFieldObjects) {
+            const fieldObjects = await PDFViewerApplication.pdfDocument.getFieldObjects();
+            for (const [fieldName, fields] of Object.entries(fieldObjects)) {
+              const fieldArray = fields;
+              for (const field of fieldArray) {
+                if (field.alternateText) {
+                  const match = field.alternateText.match(/\|fontSize:(\d+)$/);
+                  if (match) {
+                    fontSizeMap[fieldName] = parseInt(match[1], 10);
+                    break;
+                  }
+                }
+              }
+            }
+          }
+        } catch (error) {
+          logger.warn("[FONT SIZE] Error extracting from PDF:", error);
+        }
+      }
+      return fontSizeMap;
+    }, [waitForInitialization]);
+    const injectFormFieldFontSizeCSS = react.useCallback(async (doc) => {
+      const styleId = "signiphi-pdf-font-size-style";
+      const existingStyle = doc.getElementById(styleId);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+      const fontSizeMap = await extractFieldFontSizes();
+      const cssRules = [];
+      for (const [fieldName, fontSize] of Object.entries(fontSizeMap)) {
+        cssRules.push(`
+      input[name="${fieldName}"],
+      input[name="${fieldName}_date"],
+      select[name="${fieldName}"] {
+        font-size: ${fontSize}px !important;
+      }
+    `);
+      }
+      cssRules.push(`
+    input[data-element-id][name*="date"],
+    select[data-element-id] {
+      font-size: 18px !important;
+    }
+  `);
+      cssRules.push(`
+    input[type="text"][data-element-id]:not([style*="font-size"]),
+    select[data-element-id]:not([style*="font-size"]) {
+      font-size: 12px !important; /* Default fallback */
+    }
+  `);
+      const style = doc.createElement("style");
+      style.id = styleId;
+      style.textContent = `/* Dynamic font sizes from PDF metadata */
+${cssRules.join("\n")}`;
+      doc.head.appendChild(style);
+    }, [extractFieldFontSizes]);
     const loadPdf = react.useCallback(
       async (pdfUrl) => {
         const iframe = iframeRef.current;
@@ -211,7 +284,10 @@ var PdfViewerCore = react.forwardRef(
               try {
                 const PDFViewerApplication = getPDFViewerApplication();
                 if (PDFViewerApplication && PDFViewerApplication.initializedPromise) {
-                  PDFViewerApplication.initializedPromise.then(() => {
+                  PDFViewerApplication.initializedPromise.then(async () => {
+                    if (iframe.contentDocument) {
+                      await injectFormFieldFontSizeCSS(iframe.contentDocument);
+                    }
                     resolve();
                   }).catch(reject);
                 } else {
@@ -291,6 +367,7 @@ var PdfViewerCore = react.forwardRef(
             }
           }
           logger.info(`[RADIO DETECT] Found ${Object.keys(radioGroups).length} radio groups:`, Object.keys(radioGroups));
+          const processedRadioFieldNames = new Set(Object.keys(radioGroups));
           for (const [fieldName, radioButtons] of Object.entries(radioGroups)) {
             const selectedRadio = radioButtons.find(
               (rb) => rb.data && typeof rb.data === "object" && rb.data.value === true
@@ -316,7 +393,7 @@ var PdfViewerCore = react.forwardRef(
           }
           for (const [id, data] of Object.entries(storedData)) {
             const fieldName = idToNameMap[id];
-            if (fieldName && values[fieldName]) {
+            if (fieldName && (fieldName in values || processedRadioFieldNames.has(fieldName))) {
               continue;
             }
             if (fieldName) {
@@ -333,13 +410,13 @@ var PdfViewerCore = react.forwardRef(
               } else if (data !== void 0 && data !== null) {
                 extractedValue = String(data);
               }
-              if (extractedValue !== void 0 && extractedValue !== "") {
+              if (extractedValue !== void 0) {
                 values[fieldName] = extractedValue;
               }
             }
           }
           for (const [name, fields] of Object.entries(fieldObjects)) {
-            if (!values[name]) {
+            if (!(name in values)) {
               const fieldArray = fields;
               const field = fieldArray[0];
               if (field && field.value !== void 0 && field.value !== null) {
@@ -540,6 +617,8 @@ var PdfViewerCore = react.forwardRef(
         }
       }, 1e3);
     }, []);
+    const injectRadioLabels = react.useCallback((_fields) => {
+    }, []);
     const zoomIn = react.useCallback(async () => {
       try {
         const PDFViewerApplication = await waitForInitialization();
@@ -610,7 +689,7 @@ var PdfViewerCore = react.forwardRef(
         return null;
       }
     }, [waitForInitialization]);
-    const attachFieldClickInterceptors = react.useCallback((onFieldClick) => {
+    const attachFieldClickInterceptors = react.useCallback(async (onFieldClick) => {
       const iframe = iframeRef.current;
       if (!iframe?.contentDocument) {
         logger.warn("Cannot attach field interceptors: iframe not ready");
@@ -618,6 +697,7 @@ var PdfViewerCore = react.forwardRef(
       }
       try {
         const doc = iframe.contentDocument;
+        await injectFormFieldFontSizeCSS(doc);
         const clickHighlightStyleId = "signiphi-click-highlight-style";
         if (!doc.getElementById(clickHighlightStyleId)) {
           const style = doc.createElement("style");
@@ -688,7 +768,7 @@ var PdfViewerCore = react.forwardRef(
             return;
           }
           logger.info(`Field click intercepted: ${fieldName}`, e.type);
-          const shouldProceed = onFieldClick(fieldName);
+          const shouldProceed = onFieldClick(fieldName, target);
           logger.info(`Field ${fieldName} shouldProceed: ${shouldProceed}`);
           if (e.type !== "pointerdown" && e.type !== "mousedown") {
             if (!shouldProceed) {
@@ -764,6 +844,57 @@ var PdfViewerCore = react.forwardRef(
         logger.error("Error attaching field click interceptors:", error);
       }
     }, []);
+    const attachFieldChangeListeners = react.useCallback(async (onFieldChange) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot attach field change listeners: iframe not ready");
+          return () => {
+          };
+        }
+        const doc = iframe.contentDocument;
+        const handleChange = (event) => {
+          const target = event.target;
+          if (!target || !["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName)) {
+            return;
+          }
+          const fieldName = target.getAttribute("name") || target.getAttribute("data-element-id") || target.getAttribute("id") || "";
+          if (!fieldName) return;
+          let value = "";
+          if (target.tagName === "INPUT") {
+            const inputElement = target;
+            if (inputElement.type === "checkbox") {
+              value = inputElement.checked ? "true" : "false";
+            } else if (inputElement.type === "radio") {
+              if (inputElement.checked) {
+                value = inputElement.value || "true";
+              } else {
+                return;
+              }
+            } else {
+              value = inputElement.value;
+            }
+          } else if (target.tagName === "SELECT") {
+            value = target.value;
+          } else if (target.tagName === "TEXTAREA") {
+            value = target.value;
+          }
+          onFieldChange(fieldName, value, target);
+        };
+        doc.addEventListener("change", handleChange, true);
+        doc.addEventListener("input", handleChange, true);
+        logger.info("Attached field change listeners to iframe document");
+        return () => {
+          doc.removeEventListener("change", handleChange, true);
+          doc.removeEventListener("input", handleChange, true);
+          logger.info("Removed field change listeners from iframe document");
+        };
+      } catch (error) {
+        logger.error("Error attaching field change listeners:", error);
+        return () => {
+        };
+      }
+    }, []);
     const addFieldIndicator = react.useCallback(async (fieldName, indicatorType = "completed", allowedFieldIds) => {
       try {
         const iframe = iframeRef.current;
@@ -979,6 +1110,275 @@ var PdfViewerCore = react.forwardRef(
         logger.error("Error removing field indicator:", error);
       }
     }, []);
+    const addDateFieldIndicator = react.useCallback((fieldName) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot add date field indicator: iframe not ready");
+          return;
+        }
+        const doc = iframe.contentDocument;
+        const formElement = doc.querySelector(
+          `input[name="${fieldName}"], input[data-element-id="${fieldName}"], textarea[name="${fieldName}"], textarea[data-element-id="${fieldName}"]`
+        );
+        if (!formElement) {
+          logger.warn(`Cannot add date indicator: field not found for "${fieldName}"`);
+          return;
+        }
+        const annotationSection = formElement.closest("section");
+        if (!annotationSection) {
+          logger.warn(`Cannot add date indicator: no annotation section for "${fieldName}"`);
+          return;
+        }
+        const existingIndicator = annotationSection.querySelector(".signiphi-date-field-indicator");
+        if (existingIndicator) {
+          existingIndicator.remove();
+        }
+        const indicator = doc.createElement("div");
+        indicator.className = "signiphi-date-field-indicator";
+        indicator.setAttribute("role", "button");
+        indicator.setAttribute("aria-label", "Open calendar picker");
+        indicator.setAttribute("tabindex", "0");
+        indicator.innerHTML = `
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="2" y="3" width="14" height="13" rx="2" stroke="#6b7280" stroke-width="1.5" fill="white"/>
+            <line x1="2" y1="6.5" x2="16" y2="6.5" stroke="#6b7280" stroke-width="1.5"/>
+            <line x1="5.5" y1="1" x2="5.5" y2="5" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="12.5" y1="1" x2="12.5" y2="5" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/>
+            <circle cx="5.5" cy="9.5" r="0.8" fill="#6b7280"/>
+            <circle cx="9" cy="9.5" r="0.8" fill="#6b7280"/>
+            <circle cx="12.5" cy="9.5" r="0.8" fill="#6b7280"/>
+            <circle cx="5.5" cy="12.5" r="0.8" fill="#6b7280"/>
+            <circle cx="9" cy="12.5" r="0.8" fill="#6b7280"/>
+            <circle cx="12.5" cy="12.5" r="0.8" fill="#6b7280"/>
+          </svg>
+        `;
+        Object.assign(indicator.style, {
+          position: "absolute",
+          top: "50%",
+          right: "4px",
+          transform: "translateY(-50%)",
+          width: "24px",
+          height: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: "1000",
+          cursor: "pointer",
+          opacity: "0.7",
+          transition: "opacity 0.2s ease-in-out",
+          pointerEvents: "auto",
+          padding: "3px",
+          borderRadius: "4px"
+        });
+        indicator.addEventListener("mouseenter", () => {
+          indicator.style.opacity = "1";
+          indicator.style.backgroundColor = "#f3f4f6";
+        });
+        indicator.addEventListener("mouseleave", () => {
+          indicator.style.opacity = "0.7";
+          indicator.style.backgroundColor = "transparent";
+        });
+        indicator.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            indicator.click();
+          }
+        });
+        const currentPosition = window.getComputedStyle(annotationSection).position;
+        if (currentPosition === "static") {
+          annotationSection.style.position = "relative";
+        }
+        annotationSection.appendChild(indicator);
+        logger.info(`Added date field indicator for: ${fieldName}`);
+      } catch (error) {
+        logger.error("Error adding date field indicator:", error);
+      }
+    }, []);
+    const removeDateFieldIndicator = react.useCallback((fieldName) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) return;
+        const doc = iframe.contentDocument;
+        const formElement = doc.querySelector(
+          `input[name="${fieldName}"], input[data-element-id="${fieldName}"], textarea[name="${fieldName}"], textarea[data-element-id="${fieldName}"]`
+        );
+        if (!formElement) return;
+        const annotationSection = formElement.closest("section");
+        if (!annotationSection) return;
+        const indicator = annotationSection.querySelector(".signiphi-date-field-indicator");
+        if (indicator) {
+          indicator.remove();
+          logger.info(`Removed date field indicator from: ${fieldName}`);
+        }
+      } catch (error) {
+        logger.error("Error removing date field indicator:", error);
+      }
+    }, []);
+    const findFieldElements = react.useCallback((fieldName) => {
+      const iframe = iframeRef.current;
+      if (!iframe?.contentDocument) return [];
+      const doc = iframe.contentDocument;
+      const targetElements = [];
+      if (fieldName === "signature_field_main") {
+        const allInputs = doc.querySelectorAll("input[name], input[data-element-id]");
+        allInputs.forEach((input) => {
+          const name = input.getAttribute("name") || input.getAttribute("data-element-id") || "";
+          if (name.toLowerCase().includes("signature") && !name.toLowerCase().includes("initials")) {
+            targetElements.push(input);
+          }
+        });
+      } else if (fieldName === "initials_field_main") {
+        const allInputs = doc.querySelectorAll("input[name], input[data-element-id]");
+        allInputs.forEach((input) => {
+          const name = input.getAttribute("name") || input.getAttribute("data-element-id") || "";
+          if (name.toLowerCase().includes("initials")) {
+            targetElements.push(input);
+          }
+        });
+      } else {
+        const formElement = doc.querySelector(
+          `input[name="${fieldName}"], input[data-element-id="${fieldName}"]`
+        );
+        if (formElement) {
+          targetElements.push(formElement);
+        }
+      }
+      return targetElements;
+    }, []);
+    const previewSignature = react.useCallback((fieldName, dataUrl) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot preview signature: iframe not ready");
+          return;
+        }
+        const doc = iframe.contentDocument;
+        const targetElements = findFieldElements(fieldName);
+        targetElements.forEach((formElement) => {
+          const annotationSection = formElement.closest("section");
+          if (!annotationSection) return;
+          const existing = annotationSection.querySelector(".signiphi-signature-preview");
+          if (existing) existing.remove();
+          if (!dataUrl) return;
+          const preview = doc.createElement("div");
+          preview.className = "signiphi-signature-preview";
+          preview.setAttribute("aria-hidden", "true");
+          const img = doc.createElement("img");
+          img.src = dataUrl;
+          img.alt = "";
+          Object.assign(img.style, {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            pointerEvents: "none"
+          });
+          preview.appendChild(img);
+          Object.assign(preview.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: "999",
+            pointerEvents: "none",
+            padding: "2px",
+            boxSizing: "border-box",
+            backgroundColor: "rgba(255, 255, 255, 0.85)",
+            opacity: "0",
+            transition: "opacity 0.3s ease-in-out"
+          });
+          const currentPosition = annotationSection.style.position || getComputedStyle(annotationSection).position;
+          if (currentPosition === "static" || !currentPosition) {
+            annotationSection.style.position = "relative";
+          }
+          annotationSection.appendChild(preview);
+          requestAnimationFrame(() => {
+            preview.style.opacity = "1";
+          });
+        });
+        logger.info(`Previewed signature on ${targetElements.length} field(s) for: ${fieldName}`);
+      } catch (error) {
+        logger.error("Error previewing signature:", error);
+      }
+    }, [findFieldElements]);
+    const previewInitials = react.useCallback((fieldName, text) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot preview initials: iframe not ready");
+          return;
+        }
+        const doc = iframe.contentDocument;
+        const targetElements = findFieldElements(fieldName);
+        targetElements.forEach((formElement) => {
+          const annotationSection = formElement.closest("section");
+          if (!annotationSection) return;
+          const existing = annotationSection.querySelector(".signiphi-initials-preview");
+          if (existing) existing.remove();
+          if (!text) return;
+          const preview = doc.createElement("div");
+          preview.className = "signiphi-initials-preview";
+          preview.setAttribute("aria-hidden", "true");
+          preview.textContent = text;
+          Object.assign(preview.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: "999",
+            pointerEvents: "none",
+            fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
+            fontStyle: "italic",
+            fontSize: "70%",
+            color: "#000000",
+            backgroundColor: "rgba(255, 255, 255, 0.85)",
+            overflow: "hidden",
+            opacity: "0",
+            transition: "opacity 0.3s ease-in-out"
+          });
+          const currentPosition = annotationSection.style.position || getComputedStyle(annotationSection).position;
+          if (currentPosition === "static" || !currentPosition) {
+            annotationSection.style.position = "relative";
+          }
+          annotationSection.appendChild(preview);
+          requestAnimationFrame(() => {
+            preview.style.opacity = "1";
+          });
+        });
+        logger.info(`Previewed initials on ${targetElements.length} field(s) for: ${fieldName}`);
+      } catch (error) {
+        logger.error("Error previewing initials:", error);
+      }
+    }, [findFieldElements]);
+    const clearFieldPreviews = react.useCallback((fieldName) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) return;
+        const doc = iframe.contentDocument;
+        const selectors = ".signiphi-signature-preview, .signiphi-initials-preview";
+        if (fieldName) {
+          const targetElements = findFieldElements(fieldName);
+          targetElements.forEach((el) => {
+            const section = el.closest("section");
+            if (section) {
+              section.querySelectorAll(selectors).forEach((p) => p.remove());
+            }
+          });
+        } else {
+          doc.querySelectorAll(selectors).forEach((el) => el.remove());
+        }
+      } catch (error) {
+        logger.error("Error clearing field previews:", error);
+      }
+    }, [findFieldElements]);
     react.useEffect(() => {
       if (!versionChecked) {
         const config = getPdfJsConfig();
@@ -1040,22 +1440,14 @@ Or check your configuration.`;
               await initializationPromise.current;
               isLoadingRef.current = false;
               onLoad?.();
-            } else {
-              const PDFViewerApplication = getPDFViewerApplication();
-              if (PDFViewerApplication) {
-                isLoadingRef.current = false;
-                onLoad?.();
-              } else {
-                throw new Error("PDFViewerApplication not found after iframe load");
-              }
             }
           } catch (error) {
-            const errorMessage = error instanceof Error ? error.message : "Unknown error loading PDF viewer";
-            logger.error("Error in PDF.js initialization:", error);
+            const errorMessage = error instanceof Error ? error.message : "Failed to load PDF viewer";
+            logger.error("Error in handleIframeLoad:", errorMessage);
             isLoadingRef.current = false;
             onError?.(errorMessage);
           }
-        }, 1e3);
+        }, 100);
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "Unknown error in iframe load handler";
         logger.error("Error in iframe load handler:", error);
@@ -1073,6 +1465,8 @@ Or check your configuration.`;
         saveDocument,
         getPDFViewerApplication,
         injectPlaceholders,
+        injectRadioLabels,
+        setFieldMetadata,
         zoomIn,
         zoomOut,
         nextPage,
@@ -1080,10 +1474,16 @@ Or check your configuration.`;
         getCurrentPage,
         getTotalPages,
         attachFieldClickInterceptors,
+        attachFieldChangeListeners,
         addFieldIndicator,
-        removeFieldIndicator
+        removeFieldIndicator,
+        addDateFieldIndicator,
+        removeDateFieldIndicator,
+        previewSignature,
+        previewInitials,
+        clearFieldPreviews
       }),
-      [loadPdf, getFormFieldValues, setFormFieldValues, getAllFieldNames, saveDocument, getPDFViewerApplication, injectPlaceholders, zoomIn, zoomOut, nextPage, previousPage, getCurrentPage, getTotalPages, attachFieldClickInterceptors, addFieldIndicator, removeFieldIndicator]
+      [loadPdf, getFormFieldValues, setFormFieldValues, getAllFieldNames, saveDocument, getPDFViewerApplication, injectPlaceholders, injectRadioLabels, setFieldMetadata, zoomIn, zoomOut, nextPage, previousPage, getCurrentPage, getTotalPages, attachFieldClickInterceptors, attachFieldChangeListeners, addFieldIndicator, removeFieldIndicator, addDateFieldIndicator, removeDateFieldIndicator, previewSignature, previewInitials, clearFieldPreviews]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ iframeRef, handleIframeLoad }) });
   }