@tfw.in/structura-lib 0.2.0 → 0.2.1

package/dist/esm/HtmlViewer.js

@@ -2,10 +2,11 @@ import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defin
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { VscJson } from 'react-icons/vsc';
-import { FaFileDownload, FaChartBar } from './node_modules/react-icons/fa/index.esm.js';
+import { FaEdit, FaTags, FaFileDownload, FaChartBar } from './node_modules/react-icons/fa/index.esm.js';
 import Table from './Table.js';
 import EditableContent from './EditableContent.js';
 import { calculateDifferences } from './accuracyMetrics.js';
+import { getTagTypeInfo } from './SemanticTagParser.js';
 
 // Utility function to clean HTML content
 var cleanHtml = function cleanHtml(html) {
@@ -140,16 +141,113 @@ function AnalyticsModal(_ref2) {
     })
   });
 }
+function TagModal(_ref5) {
+  var isOpen = _ref5.isOpen,
+    onClose = _ref5.onClose,
+    tag = _ref5.tag;
+  if (!isOpen || !tag) return null;
+  var typeInfo = getTagTypeInfo(tag.type);
+  return jsx("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",
+    children: jsxs("div", {
+      className: "bg-white rounded-lg p-6 max-w-md w-full shadow-xl",
+      children: [jsxs("div", {
+        className: "flex justify-between items-center mb-4",
+        children: [jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [jsx("span", {
+            className: "text-2xl",
+            children: typeInfo.icon
+          }), jsxs("h3", {
+            className: "text-lg font-semibold",
+            children: [typeInfo.label, " Tag"]
+          })]
+        }), jsx("button", {
+          onClick: onClose,
+          className: "text-gray-500 hover:text-gray-700",
+          children: "\u2715"
+        })]
+      }), jsx("div", {
+        className: "p-4 rounded-lg border ".concat(typeInfo.bgColor, " mb-4"),
+        children: jsxs("div", {
+          className: "text-2xl font-bold ".concat(typeInfo.color),
+          children: [tag.value, tag.attributes.uom && jsx("span", {
+            className: "text-lg ml-2 opacity-75",
+            children: tag.attributes.uom
+          })]
+        })
+      }), jsxs("div", {
+        className: "space-y-3",
+        children: [jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "Type"
+          }), jsx("span", {
+            className: "font-medium ".concat(typeInfo.color),
+            children: tag.type
+          })]
+        }), tag.attributes.uom && jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "Unit of Measure"
+          }), jsx("span", {
+            className: "font-medium",
+            children: tag.attributes.uom
+          })]
+        }), tag.attributes.id && jsxs("div", {
+          className: "py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600 block mb-1",
+            children: "Tag ID"
+          }), jsx("code", {
+            className: "text-xs bg-gray-100 p-2 rounded block break-all",
+            children: tag.attributes.id
+          })]
+        }), tag.attributes.format && jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "Format"
+          }), jsx("span", {
+            className: "font-mono text-sm",
+            children: tag.attributes.format
+          })]
+        }), tag.attributes.filter && jsxs("div", {
+          className: "flex justify-between py-2 border-b",
+          children: [jsx("span", {
+            className: "text-gray-600",
+            children: "File Filter"
+          }), jsx("span", {
+            className: "font-mono text-sm",
+            children: tag.attributes.filter
+          })]
+        }), jsxs("div", {
+          className: "py-2",
+          children: [jsx("span", {
+            className: "text-gray-600 block mb-1",
+            children: "Raw Tag"
+          }), jsx("code", {
+            className: "text-xs bg-gray-100 p-2 rounded block break-all text-gray-700",
+            children: tag.rawMatch
+          })]
+        })]
+      })]
+    })
+  });
+}
 // Update icon usage in the JSX
 var VscJsonIcon = VscJson;
 var FaFileDownloadIcon = FaFileDownload;
 var FaChartBarIcon = FaChartBar;
-function HtmlViewer(_ref5) {
-  var jsonData = _ref5.jsonData,
-    selectedBboxId = _ref5.selectedBboxId,
-    isLoading = _ref5.isLoading,
-    onNodeClick = _ref5.onNodeClick,
-    onSave = _ref5.onSave;
+var FaEditIcon = FaEdit;
+var FaTagsIcon = FaTags;
+function HtmlViewer(_ref6) {
+  var jsonData = _ref6.jsonData,
+    selectedBboxId = _ref6.selectedBboxId,
+    isLoading = _ref6.isLoading,
+    onNodeClick = _ref6.onNodeClick;
   var _useState = useState(jsonData),
     _useState2 = _slicedToArray(_useState, 2),
     editedData = _useState2[0],
@@ -166,15 +264,11 @@ function HtmlViewer(_ref5) {
     _useState8 = _slicedToArray(_useState7, 2),
     modalData = _useState8[0],
     setModalData = _useState8[1];
-  var _useState9 = useState(true),
+  var _useState9 = useState('read'),
     _useState0 = _slicedToArray(_useState9, 2),
-    showJsonIcons = _useState0[0],
-    setShowJsonIcons = _useState0[1];
-  var _useState1 = useState("Show JSON"),
-    _useState10 = _slicedToArray(_useState1, 2),
-    activeFormat = _useState10[0],
-    setActiveFormat = _useState10[1];
-  var _useState11 = useState({
+    viewMode = _useState0[0],
+    setViewMode = _useState0[1];
+  var _useState1 = useState({
       totalChanges: 0,
       totalCharactersEdited: 0,
       totalWordsEdited: 0,
@@ -182,13 +276,25 @@ function HtmlViewer(_ref5) {
       changeHistory: [],
       blockTypeStats: {}
     }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    accuracyMetrics = _useState10[0],
+    setAccuracyMetrics = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    accuracyMetrics = _useState12[0],
-    setAccuracyMetrics = _useState12[1];
+    isAnalyticsOpen = _useState12[0],
+    setIsAnalyticsOpen = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isAnalyticsOpen = _useState14[0],
-    setIsAnalyticsOpen = _useState14[1];
+    isTagModalOpen = _useState14[0],
+    setIsTagModalOpen = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedTag = _useState16[0],
+    setSelectedTag = _useState16[1];
+  var _useState17 = useState(true),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showSemanticTags = _useState18[0],
+    setShowSemanticTags = _useState18[1];
   useEffect(function () {
     // Reset state when jsonData changes
     // console.log("HtmlViewer received new jsonData");
@@ -207,6 +313,10 @@ function HtmlViewer(_ref5) {
     setModalData(node);
     setIsModalOpen(true);
   };
+  var handleSemanticTagClick = function handleSemanticTagClick(tag) {
+    setSelectedTag(tag);
+    setIsTagModalOpen(true);
+  };
   var updateAccuracyMetrics = useCallback(function (nodeId, blockType, originalContent, newContent) {
     var differences = calculateDifferences(originalContent, newContent);
     var change = {
@@ -296,10 +406,7 @@ function HtmlViewer(_ref5) {
   };
   // Function to get the appropriate HTML content based on settings
   var getHtmlContent = function 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 || '');
+    return cleanHtml(node.html || "");
   };
   var mergedTablesMap = useMemo(function () {
     var map = new Map();
@@ -450,10 +557,13 @@ function HtmlViewer(_ref5) {
     var hasChildren = node.children && node.children.length > 0;
     var isTable = ((_a = node.block_type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "table";
     var isTableOfContents = node.block_type === "TableOfContents";
-    var isText = node.block_type === "Text";
-    var isHandwritten = node.block_type === "Handwriting";
-    var isSectionHeader = node.block_type === "SectionHeader";
+    node.block_type === "Text";
+    node.block_type === "Handwriting";
+    node.block_type === "SectionHeader";
     var isPage = node.block_type === "Page";
+    var isFigure = node.block_type === "Figure" || node.block_type === "Picture";
+    var isPageHeader = node.block_type === "PageHeader";
+    var isPageFooter = node.block_type === "PageFooter";
     // Get the appropriate HTML content
     var htmlContent = getHtmlContent(node);
     var isHeading = htmlContent && (htmlContent.startsWith("<h1") || htmlContent.startsWith("<h2") || htmlContent.startsWith("<h3") || htmlContent.startsWith("<h4"));
@@ -474,50 +584,82 @@ function HtmlViewer(_ref5) {
         onNodeClick(node.id);
       }
     };
-    return jsxs("div", {
+    return jsx("div", {
       id: node.id,
-      className: "p-2 my-1 rounded transition-colors relative group max-w-full overflow-hidden ".concat(isSelected ? "bg-blue-100 border-2 border-blue-500" : "", " ").concat(onNodeClick && !isPage ? "cursor-pointer hover:bg-gray-50" : ""),
+      className: "px-1 py-0.5 rounded transition-colors relative group max-w-full overflow-hidden ".concat(isSelected ? "bg-blue-100 border-2 border-blue-500" : "", " ").concat(onNodeClick && !isPage ? "cursor-pointer hover:bg-gray-50" : ""),
       onClick: isPage ? undefined : handleContentClick,
-      children: [!isPage && showJsonIcons && jsx("button", {
-        onClick: function onClick(e) {
-          e.stopPropagation(); // Prevent triggering parent onClick
-          handleJsonClick(node);
-        },
-        className: "absolute right-2 top-2 z-10 ".concat(showJsonIcons ? "opacity-0 group-hover:opacity-100 transition-opacity" : "hidden", " text-gray-500 hover:text-gray-700"),
-        title: "View JSON",
-        children: jsx(VscJsonIcon, {
-          size: 18
-        })
-      }), isTable || isTableOfContents ? jsx(Table, {
+      children: isTable || isTableOfContents ? jsx(Table, {
         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 ? jsx(EditableContent, {
-        id: node.id,
-        content: htmlContent,
-        onContentChange: handleContentChange,
-        isHeading: !!isHeading,
-        onNodeClick: onNodeClick && !isPage ? function () {
-          return onNodeClick(node.id);
-        } : undefined
-      }) : jsxs(Fragment, {
-        children: [jsx("div", {
-          className: "prose max-w-none w-full overflow-hidden break-words",
+        showJsonIcons: false,
+        onNodeClick: onNodeClick,
+        isEditMode: viewMode === 'edit',
+        isJsonMode: viewMode === 'json'
+      }) : isFigure && node.images ? jsx("div", {
+        className: "my-2 ".concat(viewMode === 'json' ? 'cursor-pointer hover:opacity-80' : ''),
+        onClick: viewMode === 'json' ? function () {
+          return handleJsonClick(node);
+        } : undefined,
+        children: Object.entries(node.images).map(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            key = _ref8[0],
+            imageData = _ref8[1];
+          return jsx("img", {
+            src: typeof imageData === 'string' && imageData.startsWith('data:') ? imageData : "data:image/png;base64,".concat(imageData),
+            alt: "Figure ".concat(node.id),
+            className: "max-w-full h-auto rounded border border-gray-200"
+          }, key);
+        })
+      }) : isPageHeader || isPageFooter ? jsxs("div", {
+        className: "my-1 px-3 py-1.5 rounded-md border text-xs flex items-center gap-2\n\t\t\t\t\t\t\t".concat(isPageHeader ? 'bg-amber-50 border-amber-200 text-amber-800' : 'bg-slate-50 border-slate-200 text-slate-600', "\n\t\t\t\t\t\t\t").concat(viewMode === 'json' ? 'cursor-pointer hover:opacity-80' : ''),
+        onClick: viewMode === 'json' ? function () {
+          return handleJsonClick(node);
+        } : undefined,
+        children: [jsx("span", {
+          className: "font-semibold uppercase tracking-wide ".concat(isPageHeader ? 'text-amber-600' : 'text-slate-500'),
+          children: isPageHeader ? '⬆ Header' : '⬇ Footer'
+        }), htmlContent && jsx("span", {
+          className: "text-gray-600",
           dangerouslySetInnerHTML: {
             __html: htmlContent
           }
+        }), node.images && Object.entries(node.images).map(function (_ref9) {
+          var _ref0 = _slicedToArray(_ref9, 2),
+            key = _ref0[0],
+            imageData = _ref0[1];
+          return jsx("img", {
+            src: typeof imageData === 'string' && imageData.startsWith('data:') ? imageData : "data:image/png;base64,".concat(imageData),
+            alt: "".concat(isPageHeader ? 'Header' : 'Footer', " image"),
+            className: "h-6 w-auto"
+          }, key);
+        })]
+      }) : jsxs(Fragment, {
+        children: [jsx(EditableContent, {
+          id: node.id,
+          content: htmlContent,
+          onContentChange: handleContentChange,
+          isHeading: !!isHeading,
+          isEditMode: viewMode === 'edit',
+          isJsonMode: viewMode === 'json',
+          onJsonClick: function onJsonClick() {
+            return handleJsonClick(node);
+          },
+          onNodeClick: onNodeClick && !isPage ? function () {
+            return onNodeClick(node.id);
+          } : undefined,
+          enableSemanticTags: showSemanticTags,
+          onSemanticTagClick: handleSemanticTagClick
         }), hasChildren && jsx("div", {
-          className: "ml-4 mt-2 border-l-2 border-gray-200 pl-4 max-w-full overflow-hidden",
+          className: "ml-2 mt-1 border-l border-gray-200 pl-2 max-w-full overflow-hidden",
           children: node.children.map(function (child) {
             return _renderHtmlContent(child);
           })
         })]
-      })]
+      })
     }, node.id);
   };
   var getAllNodes = function getAllNodes(data) {
@@ -535,69 +677,80 @@ function HtmlViewer(_ref5) {
     });
   };
   var allNodes = getAllNodes(editedData);
-  // Update the header section to include both buttons
+  // Update the header section with toggle buttons
   var renderHeader = function renderHeader() {
     return 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: [jsx("div", {
-        className: "flex gap-2",
-        children: hasChanges && jsxs(Fragment, {
-          children: [onSave && jsxs("button", {
+      className: "sticky top-0 z-20 bg-white border-b border-gray-200 p-3 flex justify-between items-center flex-shrink-0",
+      children: [jsxs("div", {
+        className: "flex gap-1",
+        children: [jsxs("div", {
+          className: "flex bg-gray-100 rounded-lg p-1",
+          children: [jsxs("button", {
             onClick: function onClick() {
-              return onSave(editedData);
+              return setViewMode(viewMode === 'json' ? 'read' : 'json');
             },
-            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: [jsx(FaFileDownloadIcon, {
-              size: 18
-            }), "Save"]
+            className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ".concat(viewMode === 'json' ? "bg-blue-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900 hover:bg-gray-200"),
+            title: "JSON Mode - Click any element to view its JSON",
+            children: [jsx(VscJsonIcon, {
+              size: 16
+            }), jsx("span", {
+              className: "text-sm font-medium",
+              children: "JSON"
+            })]
           }), 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: [jsx(FaFileDownloadIcon, {
-              size: 18
-            }), "Download"]
+            onClick: function onClick() {
+              return setViewMode(viewMode === 'edit' ? 'read' : 'edit');
+            },
+            className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ".concat(viewMode === 'edit' ? "bg-green-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900 hover:bg-gray-200"),
+            title: "Edit Mode - Click any element to edit it",
+            children: [jsx(FaEditIcon, {
+              size: 16
+            }), jsx("span", {
+              className: "text-sm font-medium",
+              children: "Edit"
+            })]
           })]
-        })
-      }), jsxs("div", {
-        className: "flex gap-2 items-center",
-        children: [jsx("button", {
+        }), jsxs("button", {
           onClick: function onClick() {
-            return setIsAnalyticsOpen(true);
+            return setShowSemanticTags(!showSemanticTags);
           },
-          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: jsx(FaChartBarIcon, {
-            size: 18
-          })
-        }), jsxs("div", {
-          className: "flex bg-gray-100 rounded-lg p-1",
-          children: [jsx("button", {
-            onClick: function onClick() {
-              setShowJsonIcons(true);
-              setActiveFormat("Show JSON");
-            },
-            className: "py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ".concat(activeFormat === "Show JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"),
-            children: "Show JSON"
-          }), jsx("button", {
-            onClick: function onClick() {
-              setShowJsonIcons(false);
-              setActiveFormat("Hide JSON");
-            },
-            className: "py-1.5 px-3 text-sm font-medium rounded-md transition-colors whitespace-nowrap ".concat(activeFormat === "Hide JSON" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"),
-            children: "Hide JSON"
+          className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ml-2 ".concat(showSemanticTags ? "bg-amber-100 text-amber-700 border border-amber-300" : "bg-gray-100 text-gray-500 border border-gray-200"),
+          title: showSemanticTags ? "Hide Semantic Tags" : "Show Semantic Tags",
+          children: [jsx(FaTagsIcon, {
+            size: 16
+          }), jsx("span", {
+            className: "text-sm font-medium",
+            children: "Tags"
+          })]
+        }), hasChanges && jsxs("button", {
+          onClick: handleDownload,
+          className: "inline-flex items-center gap-2 px-3 py-1.5 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ml-2",
+          title: "Download Updated JSON",
+          children: [jsx(FaFileDownloadIcon, {
+            size: 16
+          }), jsx("span", {
+            className: "text-sm font-medium",
+            children: "Save"
           })]
         })]
+      }), jsx("button", {
+        onClick: function onClick() {
+          return setIsAnalyticsOpen(true);
+        },
+        className: "inline-flex items-center gap-1 px-3 py-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md",
+        title: "View Analytics",
+        children: jsx(FaChartBarIcon, {
+          size: 16
+        })
       })]
     });
   };
   return jsxs("div", {
     className: "w-full h-full max-w-full flex flex-col overflow-hidden",
     children: [renderHeader(), jsx("div", {
-      className: "flex-1 overflow-auto min-h-0 max-w-full",
+      className: "flex-1 overflow-auto min-h-0 max-w-full ".concat(viewMode === 'edit' ? 'bg-green-50/50' : viewMode === 'json' ? 'bg-blue-50/50' : ''),
       children: jsx("div", {
-        className: "p-4 max-w-full",
+        className: "p-2 max-w-full",
         children: allNodes.map(function (node) {
           return jsx("div", {
             className: "w-full max-w-full overflow-hidden break-words",
@@ -617,6 +770,12 @@ function HtmlViewer(_ref5) {
         return setIsModalOpen(false);
       },
       data: modalData
+    }), jsx(TagModal, {
+      isOpen: isTagModalOpen,
+      onClose: function onClose() {
+        return setIsTagModalOpen(false);
+      },
+      tag: selectedTag
     })]
   });
 }

package/dist/esm/MathRenderer.js

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import katex from 'katex';
+
+/**
+ * Renders LaTeX math expressions in HTML content using KaTeX.
+ * Supports both inline ($...$) and display ($$...$$) math.
+ */
+// Regex patterns for math delimiters
+var DISPLAY_MATH_REGEX = /\$\$([\s\S]*?)\$\$/g;
+var INLINE_MATH_REGEX = /\$([^\$\n]+?)\$/g;
+/**
+ * Render a single LaTeX expression to HTML using KaTeX
+ */
+function renderLatex(latex, displayMode) {
+  try {
+    return katex.renderToString(latex, {
+      displayMode: displayMode,
+      throwOnError: false,
+      errorColor: "#cc0000",
+      strict: false,
+      trust: true,
+      macros: {
+        "\\leq": "\\le",
+        "\\geq": "\\ge"
+      }
+    });
+  } catch (error) {
+    console.warn("KaTeX render error:", error);
+    // Return the original with error styling
+    return "<span class=\"katex-error\" style=\"color: #cc0000;\">".concat(latex, "</span>");
+  }
+}
+/**
+ * Process HTML content and render all math expressions
+ */
+function renderMathInHtml(html) {
+  if (!html) return "";
+  // First, handle display math ($$...$$)
+  var result = html.replace(DISPLAY_MATH_REGEX, function (match, latex) {
+    return renderLatex(latex.trim(), true);
+  });
+  // Then, handle inline math ($...$)
+  // The $...$ pattern with closing $ is always math, not currency
+  result = result.replace(INLINE_MATH_REGEX, function (match, latex) {
+    return renderLatex(latex.trim(), false);
+  });
+  return result;
+}
+/**
+ * Check if content contains any math expressions
+ */
+function containsMath(html) {
+  if (!html) return false;
+  return DISPLAY_MATH_REGEX.test(html) || INLINE_MATH_REGEX.test(html);
+}
+/**
+ * React component that renders HTML with math expressions
+ */
+function MathContent(_ref) {
+  var html = _ref.html,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "span" : _ref$as;
+  var renderedHtml = useMemo(function () {
+    return renderMathInHtml(html);
+  }, [html]);
+  return jsx(Component, {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: renderedHtml
+    }
+  });
+}
+/**
+ * Hook to get rendered math HTML
+ */
+function useMathHtml(html) {
+  return useMemo(function () {
+    return renderMathInHtml(html);
+  }, [html]);
+}
+
+export { MathContent, containsMath, MathContent as default, renderMathInHtml, useMathHtml };

package/dist/esm/PdfDocumentViewer.js

@@ -177,7 +177,7 @@ function PdfDocumentViewer(_ref2) {
                 var currentPath = "".concat(path, "/").concat(block.block_type, "[").concat(index, "](").concat(block.id, ")");
                 // Assuming block.polygon is number[][] (array of points)
                 var points = block.polygon;
-                if (points && Array.isArray(points) && points.length >= 2 && block.block_type !== "Page") {
+                if (points && Array.isArray(points) && points.length >= 2 && block.block_type !== "Page" && block.block_type !== "TableCell") {
                   // Calculate bbox from points
                   var x_coords = points.map(function (p) {
                     return p[0];