@tfw.in/structura-lib 0.2.0

package/dist/cjs/HtmlViewer.js

@@ -0,0 +1,587 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vsc = require('react-icons/vsc');
+var index_esm = require('./node_modules/react-icons/fa/index.esm.js');
+var Table = require('./Table.js');
+var EditableContent = require('./EditableContent.js');
+var accuracyMetrics = require('./accuracyMetrics.js');
+
+// Utility function to clean HTML content
+const cleanHtml = html => {
+  if (!html) return "";
+  // Remove newline characters
+  return html.replace(/\n/g, " ").replace(/<br\s*\/?>/g, " ")
+  // Remove consecutive spaces
+  .replace(/\s+/g, " ")
+  // Trim leading and trailing spaces
+  .trim();
+};
+function JsonModal({
+  isOpen,
+  onClose,
+  data
+}) {
+  if (!isOpen) return null;
+  return jsxRuntime.jsx("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+    children: jsxRuntime.jsxs("div", {
+      className: "bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-auto",
+      children: [jsxRuntime.jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsxRuntime.jsx("h3", {
+          className: "text-lg font-semibold",
+          children: "JSON Data"
+        }), jsxRuntime.jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsxRuntime.jsx("pre", {
+        className: "bg-gray-100 p-4 rounded-lg overflow-auto",
+        children: JSON.stringify(data, null, 2)
+      })]
+    })
+  });
+}
+function AnalyticsModal({
+  isOpen,
+  onClose,
+  metrics
+}) {
+  if (!isOpen) return null;
+  return jsxRuntime.jsx("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+    children: jsxRuntime.jsxs("div", {
+      className: "bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-auto",
+      children: [jsxRuntime.jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsxRuntime.jsx("h3", {
+          className: "text-lg font-semibold",
+          children: "Analytics & Metrics"
+        }), jsxRuntime.jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: "space-y-4",
+        children: [jsxRuntime.jsxs("div", {
+          className: "bg-gray-50 p-4 rounded-lg",
+          children: [jsxRuntime.jsx("h4", {
+            className: "font-medium mb-2",
+            children: "Overall Accuracy"
+          }), jsxRuntime.jsx("div", {
+            className: "text-3xl font-bold mb-2",
+            children: jsxRuntime.jsxs("span", {
+              className: `${metrics.accuracyScore > 90 ? "text-green-600" : metrics.accuracyScore > 70 ? "text-yellow-600" : "text-red-600"}`,
+              children: [metrics.accuracyScore.toFixed(2), "%"]
+            })
+          })]
+        }), jsxRuntime.jsxs("div", {
+          className: "grid grid-cols-3 gap-4",
+          children: [jsxRuntime.jsxs("div", {
+            className: "bg-blue-50 p-4 rounded-lg",
+            children: [jsxRuntime.jsx("h4", {
+              className: "text-sm text-blue-700",
+              children: "Total Changes"
+            }), jsxRuntime.jsx("p", {
+              className: "text-2xl font-bold",
+              children: metrics.totalChanges
+            })]
+          }), jsxRuntime.jsxs("div", {
+            className: "bg-green-50 p-4 rounded-lg",
+            children: [jsxRuntime.jsx("h4", {
+              className: "text-sm text-green-700",
+              children: "Characters Edited"
+            }), jsxRuntime.jsx("p", {
+              className: "text-2xl font-bold",
+              children: metrics.totalCharactersEdited
+            })]
+          }), jsxRuntime.jsxs("div", {
+            className: "bg-purple-50 p-4 rounded-lg",
+            children: [jsxRuntime.jsx("h4", {
+              className: "text-sm text-purple-700",
+              children: "Words Edited"
+            }), jsxRuntime.jsx("p", {
+              className: "text-2xl font-bold",
+              children: metrics.totalWordsEdited
+            })]
+          })]
+        }), Object.entries(metrics.blockTypeStats).length > 0 && jsxRuntime.jsxs("div", {
+          className: "mt-6",
+          children: [jsxRuntime.jsx("h4", {
+            className: "font-medium mb-3",
+            children: "Changes by Block Type"
+          }), jsxRuntime.jsx("div", {
+            className: "space-y-2",
+            children: Object.entries(metrics.blockTypeStats).map(([type, stats]) => jsxRuntime.jsxs("div", {
+              className: "bg-gray-50 p-3 rounded-lg",
+              children: [jsxRuntime.jsxs("div", {
+                className: "flex justify-between items-center",
+                children: [jsxRuntime.jsx("span", {
+                  className: "font-medium",
+                  children: type
+                }), jsxRuntime.jsxs("span", {
+                  className: "text-gray-600",
+                  children: [stats.changes, " changes"]
+                })]
+              }), jsxRuntime.jsxs("div", {
+                className: "text-sm text-gray-500",
+                children: [stats.charactersEdited, " characters edited"]
+              })]
+            }, type))
+          })]
+        })]
+      })]
+    })
+  });
+}
+// Update icon usage in the JSX
+const VscJsonIcon = vsc.VscJson;
+const FaFileDownloadIcon = index_esm.FaFileDownload;
+const FaChartBarIcon = index_esm.FaChartBar;
+function HtmlViewer({
+  //NOSONAR
+  jsonData,
+  selectedBboxId,
+  isLoading,
+  onNodeClick,
+  onSave
+}) {
+  const [editedData, setEditedData] = React.useState(jsonData);
+  const [hasChanges, setHasChanges] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [modalData, setModalData] = React.useState(null);
+  const [showJsonIcons, setShowJsonIcons] = React.useState(true);
+  const [activeFormat, setActiveFormat] = React.useState("Show JSON");
+  const [accuracyMetrics$1, setAccuracyMetrics] = React.useState({
+    totalChanges: 0,
+    totalCharactersEdited: 0,
+    totalWordsEdited: 0,
+    accuracyScore: 100,
+    changeHistory: [],
+    blockTypeStats: {}
+  });
+  const [isAnalyticsOpen, setIsAnalyticsOpen] = React.useState(false);
+  React.useEffect(() => {
+    // Reset state when jsonData changes
+    // console.log("HtmlViewer received new jsonData");
+    setEditedData(jsonData);
+    setHasChanges(false); // Reset changes flag
+    setAccuracyMetrics({
+      totalChanges: 0,
+      totalCharactersEdited: 0,
+      totalWordsEdited: 0,
+      accuracyScore: 100,
+      changeHistory: [],
+      blockTypeStats: {}
+    });
+  }, [jsonData]);
+  const handleJsonClick = node => {
+    setModalData(node);
+    setIsModalOpen(true);
+  };
+  const updateAccuracyMetrics = React.useCallback((nodeId, blockType, originalContent, newContent) => {
+    const differences = accuracyMetrics.calculateDifferences(originalContent, newContent);
+    const change = {
+      id: nodeId,
+      blockType,
+      originalContent,
+      newContent,
+      timestamp: Date.now(),
+      charactersDifferent: differences.charactersDifferent,
+      wordsDifferent: differences.wordsDifferent
+    };
+    setAccuracyMetrics(prev => {
+      // Update block type stats
+      const blockStats = prev.blockTypeStats[blockType] || {
+        changes: 0,
+        charactersEdited: 0,
+        wordsEdited: 0
+      };
+      const newBlockStats = {
+        changes: blockStats.changes + 1,
+        charactersEdited: blockStats.charactersEdited + differences.charactersDifferent,
+        wordsEdited: blockStats.wordsEdited + differences.wordsDifferent
+      };
+      // Calculate total original characters
+      const totalOriginalCharacters = calculateTotalCharacters(jsonData);
+      // Calculate new accuracy score
+      const newTotalCharactersEdited = prev.totalCharactersEdited + differences.charactersDifferent;
+      const accuracyScore = Math.max(0, 100 - newTotalCharactersEdited / totalOriginalCharacters * 100);
+      return {
+        totalChanges: prev.totalChanges + 1,
+        totalCharactersEdited: newTotalCharactersEdited,
+        totalWordsEdited: prev.totalWordsEdited + differences.wordsDifferent,
+        accuracyScore,
+        changeHistory: [...prev.changeHistory, change],
+        blockTypeStats: {
+          ...prev.blockTypeStats,
+          [blockType]: newBlockStats
+        }
+      };
+    });
+  }, [jsonData]);
+  const handleContentChange = React.useCallback((nodeId, newContent) => {
+    setHasChanges(true);
+    setEditedData(prevData => {
+      const newData = JSON.parse(JSON.stringify(prevData));
+      const updateNode = node => {
+        if (!node) return false;
+        if (node.id === nodeId) {
+          const originalContent = node.html || "";
+          const blockType = node.block_type || "unknown";
+          // Update accuracy metrics before changing content
+          updateAccuracyMetrics(nodeId, blockType, originalContent, newContent);
+          node.html = newContent;
+          return true;
+        }
+        if (node.children && Array.isArray(node.children)) {
+          for (const child of node.children) {
+            if (updateNode(child)) return true;
+          }
+        }
+        return false;
+      };
+      updateNode(newData);
+      return newData;
+    });
+  }, [updateAccuracyMetrics]);
+  const handleDownload = () => {
+    if (!editedData) return;
+    const jsonString = JSON.stringify(editedData, null, 2);
+    const blob = new Blob([jsonString], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "updated_bio.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  // Function to get the appropriate HTML content based on settings
+  const getHtmlContent = node => {
+    // For individual nodes in the tree view, just return their HTML directly
+    // This preserves the node structure and click interactivity
+    // getBlockHtml/jsonToHtml should only be used for full page rendering/export
+    return cleanHtml(node.html || '');
+  };
+  const mergedTablesMap = React.useMemo(() => {
+    const map = new Map();
+    const findTables = node => {
+      if (!node) return;
+      if (node.block_type === "Table" && node.merged_table_id) {
+        console.log("Found table with merged_table_id:", node.merged_table_id, "ID:", node.id);
+        const tables = map.get(node.merged_table_id) || [];
+        tables.push(node);
+        map.set(node.merged_table_id, tables);
+      }
+      if (node.children) {
+        node.children.forEach(findTables);
+      }
+    };
+    if (jsonData) {
+      findTables(jsonData);
+    }
+    return map;
+  }, [jsonData]);
+  React.useEffect(() => {
+    // console.log(`[HtmlViewer] Scroll effect triggered. selectedBboxId: ${selectedBboxId}`);
+    if (selectedBboxId) {
+      let elementToScroll = document.getElementById(selectedBboxId);
+      // console.log(`[HtmlViewer] Attempt 1: document.getElementById('${selectedBboxId}') result:`, elementToScroll);
+      if (!elementToScroll && editedData) {
+        // console.log(`[HtmlViewer] Element ${selectedBboxId} not found directly. Proceeding to check if it's part of a merged table.`);
+        const findNodeByIdRecursive = (nodes, id) => {
+          for (const node of nodes) {
+            if (node.id === id) return node;
+            if (node.children) {
+              const foundInChildren = findNodeByIdRecursive(node.children, id);
+              if (foundInChildren) return foundInChildren;
+            }
+          }
+          return null;
+        };
+        const findNodeInDocument = (documentData, id) => {
+          if (!documentData) {
+            // console.log("[HtmlViewer] findNodeInDocument: documentData is null/undefined.");
+            return null;
+          }
+          if (documentData.id === id) return documentData; // Check root node
+          if (documentData.children) {
+            return findNodeByIdRecursive(documentData.children, id);
+          }
+          // console.log("[HtmlViewer] findNodeInDocument: documentData has no children to search.");
+          return null;
+        };
+        // console.log("[HtmlViewer] Searching for selectedNodeDetails in editedData:", editedData ? 'editedData exists' : 'editedData is null');
+        const selectedNodeDetails = findNodeInDocument(editedData, selectedBboxId);
+        // console.log(`[HtmlViewer] selectedNodeDetails for ID ${selectedBboxId}:`, selectedNodeDetails);
+        if (selectedNodeDetails && selectedNodeDetails.block_type === "Table" && selectedNodeDetails.merged_table_id) {
+          // console.log(`[HtmlViewer] Confirmed: Selected node ${selectedBboxId} (type: ${selectedNodeDetails.block_type}) is part of merged table group ${selectedNodeDetails.merged_table_id}.`);
+          const tablesInGroup = mergedTablesMap.get(selectedNodeDetails.merged_table_id);
+          // console.log(`[HtmlViewer] Tables in merged group ${selectedNodeDetails.merged_table_id} from mergedTablesMap:`, tablesInGroup);
+          if (tablesInGroup && tablesInGroup.length > 0) {
+            const primaryTableId = tablesInGroup[0].id; // The first table in the map is the one rendered
+            // console.log(`[HtmlViewer] Primary table ID for this group is ${primaryTableId}. Attempting to get this element.`);
+            elementToScroll = document.getElementById(primaryTableId);
+            // console.log(`[HtmlViewer] Attempt 2 (merged table): document.getElementById('${primaryTableId}') result:`, elementToScroll);
+            if (!elementToScroll) {
+              console.warn(`[HtmlViewer] Primary table element ${primaryTableId} (for merged group) also not found in DOM.`);
+            }
+          } else {
+            console.warn(`[HtmlViewer] No tables found in mergedTablesMap for group ${selectedNodeDetails.merged_table_id}. Cannot find primary table to scroll.`);
+          }
+        } else if (selectedNodeDetails) {
+          console.log(`[HtmlViewer] Selected node ${selectedBboxId} is type ${selectedNodeDetails.block_type}. It's not a merged table or 'merged_table_id' is missing.`);
+        } else {
+          console.log(`[HtmlViewer] Details for selected node ${selectedBboxId} not found within the 'editedData' structure. Cannot determine if it's part of a merged table.`);
+        }
+      }
+      if (elementToScroll) {
+        // console.log(`[HtmlViewer] SUCCESS: Scheduling scroll to element with ID: ${elementToScroll.id} using block: 'nearest'`);
+        setTimeout(() => {
+          const el = document.getElementById(elementToScroll.id); // Re-fetch element in timeout
+          if (el) {
+            // console.log(`[HtmlViewer] Timeout: Scrolling to element ${el.id} (align to top)`);
+            el.scrollIntoView(true); // Align to top, auto behavior
+          } else {
+            console.warn(`[HtmlViewer] Timeout: Element ${elementToScroll.id} not found at time of scroll.`);
+          }
+        }, 0); // Small delay to allow DOM to update
+      } else {
+        console.warn(`[HtmlViewer] FINAL: Element with ID ${selectedBboxId} (or its primary merged table, if applicable) was NOT found in the DOM. No scrolling will occur.`);
+      }
+    } else {
+      console.log("[HtmlViewer] Scroll effect: No selectedBboxId, so no scrolling action taken.");
+    }
+  }, [selectedBboxId, editedData, mergedTablesMap]); // Added editedData and mergedTablesMap
+  React.useMemo(() => {
+    const map = new Map();
+    const findHeaders = node => {
+      if (!node) return;
+      if (node.block_type === "Table" && node.merged_table_id) {
+        let currentNode = node;
+        while (currentNode.next) {
+          currentNode = currentNode.next;
+          if (currentNode.block_type === "Text" && currentNode.html.includes("BioprocessAl")) {
+            map.set(node.merged_table_id, currentNode);
+            break;
+          }
+        }
+      }
+      if (node.children) {
+        node.children.forEach(findHeaders);
+      }
+    };
+    if (jsonData) {
+      findHeaders(jsonData);
+    }
+    return map;
+  }, [jsonData]);
+  if (isLoading) {
+    return jsxRuntime.jsx("div", {
+      className: "flex items-center justify-center h-full",
+      children: jsxRuntime.jsxs("div", {
+        className: "animate-pulse flex flex-col items-center gap-4",
+        children: [jsxRuntime.jsx("div", {
+          className: "h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"
+        }), jsxRuntime.jsx("p", {
+          className: "text-gray-600",
+          children: "Processing PDF..."
+        })]
+      })
+    });
+  }
+  if (!editedData) {
+    return jsxRuntime.jsx("p", {
+      className: "text-center p-4",
+      children: "Upload a PDF and generate JSON to view content"
+    });
+  }
+  const renderHtmlContent = node => {
+    var _a;
+    if (!node) return null;
+    const isSelected = node.id === selectedBboxId;
+    const hasChildren = node.children && node.children.length > 0;
+    const isTable = ((_a = node.block_type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "table";
+    const isTableOfContents = node.block_type === "TableOfContents";
+    const isText = node.block_type === "Text";
+    const isHandwritten = node.block_type === "Handwriting";
+    const isSectionHeader = node.block_type === "SectionHeader";
+    const isPage = node.block_type === "Page";
+    // Get the appropriate HTML content
+    const htmlContent = getHtmlContent(node);
+    const isHeading = htmlContent && (htmlContent.startsWith("<h1") || htmlContent.startsWith("<h2") || htmlContent.startsWith("<h3") || htmlContent.startsWith("<h4"));
+    // Skip tables that are part of a merged group but aren't the first table
+    if (isTable && node.merged_table_id) {
+      const tables = mergedTablesMap.get(node.merged_table_id) || [];
+      if (tables.length > 0 && tables[0].id !== node.id) {
+        // Return null to completely skip rendering this table
+        return null;
+      }
+    }
+    // Handle click on content
+    const handleContentClick = e => {
+      // Check if the node has a valid ID that could correspond to a bbox in the PDF
+      // Only process direct clicks, not bubbled events from child elements
+      if (e.target === e.currentTarget && node.id && onNodeClick && !isPage) {
+        console.log("HTML content clicked:", node.id);
+        onNodeClick(node.id);
+      }
+    };
+    return jsxRuntime.jsxs("div", {
+      id: node.id,
+      className: `p-2 my-1 rounded transition-colors relative group max-w-full overflow-hidden ${isSelected ? "bg-blue-100 border-2 border-blue-500" : ""} ${onNodeClick && !isPage ? "cursor-pointer hover:bg-gray-50" : ""}`,
+      onClick: isPage ? undefined : handleContentClick,
+      children: [!isPage && showJsonIcons && jsxRuntime.jsx("button", {
+        onClick: e => {
+          e.stopPropagation(); // Prevent triggering parent onClick
+          handleJsonClick(node);
+        },
+        className: `absolute right-2 top-2 z-10 ${showJsonIcons ? "opacity-0 group-hover:opacity-100 transition-opacity" : "hidden"} text-gray-500 hover:text-gray-700`,
+        title: "View JSON",
+        children: jsxRuntime.jsx(VscJsonIcon, {
+          size: 18
+        })
+      }), isTable || isTableOfContents ? jsxRuntime.jsx(Table.default, {
+        node: node,
+        selectedBboxId: selectedBboxId,
+        onJsonClick: handleJsonClick,
+        onContentChange: handleContentChange,
+        mergedTables: node.merged_table_id ? (mergedTablesMap.get(node.merged_table_id) || []).slice(1) : [],
+        hasLlmHtml: !!node.llm_table_html,
+        showJsonIcons: showJsonIcons,
+        onNodeClick: onNodeClick
+      }) : isText || isHandwritten || isSectionHeader ? jsxRuntime.jsx(EditableContent.default, {
+        id: node.id,
+        content: htmlContent,
+        onContentChange: handleContentChange,
+        isHeading: !!isHeading,
+        onNodeClick: onNodeClick && !isPage ? () => onNodeClick(node.id) : undefined
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx("div", {
+          className: "prose max-w-none w-full overflow-hidden break-words",
+          dangerouslySetInnerHTML: {
+            __html: htmlContent
+          }
+        }), hasChildren && jsxRuntime.jsx("div", {
+          className: "ml-4 mt-2 border-l-2 border-gray-200 pl-4 max-w-full overflow-hidden",
+          children: node.children.map(child => renderHtmlContent(child))
+        })]
+      })]
+    }, node.id);
+  };
+  const getAllNodes = data => {
+    if (!data) return [];
+    // Get all children
+    const children = data.children || [];
+    // Filter out tables that should be hidden (part of a merge but not the first one)
+    return children.filter(node => {
+      if (node.block_type === "Table" && node.merged_table_id) {
+        const tables = mergedTablesMap.get(node.merged_table_id) || [];
+        // Keep only if this is the first table in the merge group
+        return tables.length === 0 || tables[0].id === node.id;
+      }
+      return true; // Keep all other nodes
+    });
+  };
+  const allNodes = getAllNodes(editedData);
+  // Update the header section to include both buttons
+  const renderHeader = () => jsxRuntime.jsxs("div", {
+    className: "sticky top-0 z-20 bg-white border-b border-gray-200 p-4 flex justify-between items-center flex-shrink-0",
+    children: [jsxRuntime.jsx("div", {
+      className: "flex gap-2",
+      children: hasChanges && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [onSave && jsxRuntime.jsxs("button", {
+          onClick: () => onSave(editedData),
+          className: "inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2",
+          title: "Save Changes",
+          children: [jsxRuntime.jsx(FaFileDownloadIcon, {
+            size: 18
+          }), "Save"]
+        }), jsxRuntime.jsxs("button", {
+          onClick: handleDownload,
+          className: "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+          title: "Download Updated JSON",
+          children: [jsxRuntime.jsx(FaFileDownloadIcon, {
+            size: 18
+          }), "Download"]
+        })]
+      })
+    }), jsxRuntime.jsxs("div", {
+      className: "flex gap-2 items-center",
+      children: [jsxRuntime.jsx("button", {
+        onClick: () => setIsAnalyticsOpen(true),
+        className: "inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2",
+        title: "View Analytics",
+        children: jsxRuntime.jsx(FaChartBarIcon, {
+          size: 18
+        })
+      }), jsxRuntime.jsxs("div", {
+        className: "flex bg-gray-100 rounded-lg p-1",
+        children: [jsxRuntime.jsx("button", {
+          onClick: () => {
+            setShowJsonIcons(true);
+            setActiveFormat("Show JSON");
+          },
+          className: `py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ${activeFormat === "Show JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+          children: "Show JSON"
+        }), jsxRuntime.jsx("button", {
+          onClick: () => {
+            setShowJsonIcons(false);
+            setActiveFormat("Hide JSON");
+          },
+          className: `py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ${activeFormat === "Hide JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+          children: "Hide JSON"
+        })]
+      })]
+    })]
+  });
+  return jsxRuntime.jsxs("div", {
+    className: "w-full h-full max-w-full flex flex-col overflow-hidden",
+    children: [renderHeader(), jsxRuntime.jsx("div", {
+      className: "flex-1 overflow-auto min-h-0 max-w-full",
+      children: jsxRuntime.jsx("div", {
+        className: "p-4 max-w-full",
+        children: allNodes.map(node => jsxRuntime.jsx("div", {
+          className: "w-full max-w-full overflow-hidden break-words",
+          children: renderHtmlContent(node)
+        }, node.id))
+      })
+    }), jsxRuntime.jsx(AnalyticsModal, {
+      isOpen: isAnalyticsOpen,
+      onClose: () => setIsAnalyticsOpen(false),
+      metrics: accuracyMetrics$1
+    }), jsxRuntime.jsx(JsonModal, {
+      isOpen: isModalOpen,
+      onClose: () => setIsModalOpen(false),
+      data: modalData
+    })]
+  });
+}
+// Utility function to calculate total characters in the document
+function calculateTotalCharacters(data) {
+  if (!data) return 0;
+  let total = 0;
+  const countCharacters = node => {
+    if (node.html) {
+      const cleanText = node.html.replace(/<[^>]*>/g, "").trim();
+      total += cleanText.length;
+    }
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach(countCharacters);
+    }
+  };
+  countCharacters(data);
+  return total;
+}
+
+exports.default = HtmlViewer;

package/dist/cjs/PdfComponents.js

@@ -0,0 +1,16 @@
+'use strict';
+
+require('react/jsx-runtime');
+var React = require('react');
+require('./lib/polyfills.js');
+
+// Lazy load the PDF components
+const Document = /*#__PURE__*/React.lazy(() => import('react-pdf').then(mod => ({
+  default: mod.Document
+})));
+const Page = /*#__PURE__*/React.lazy(() => import('react-pdf').then(mod => ({
+  default: mod.Page
+})));
+
+exports.Document = Document;
+exports.Page = Page;