@tfw.in/structura-lib 0.2.0 → 0.2.1

package/dist/esm/SemanticTagParser.js

@@ -0,0 +1,187 @@
+// Semantic Tag Parser for SOP/Batch Record domain tags
+// Supports: MeasurementTag, HiddenMeasurementTag, ValueTag, DateTimeTag, FileTag, ImageTag
+// Regular expression patterns for tag detection
+// Standard tag: [[value][type:TYPE][attr:value]...]
+// Hidden tag: {[value][type:TYPE][attr:value]...]}
+var STANDARD_TAG_PATTERN = /\[\[([^\]]+)\](\[([^\]]+)\])*\]/g;
+var HIDDEN_TAG_PATTERN = /\{\[([^\]]+)\](\[([^\]]+)\])*\]\}/g;
+// Parse a single tag's attribute string like "[type:MEASUREMENT][uom:mL/min][id:abc-123]"
+function parseTagAttributes(attributeStr) {
+  var attributes = {};
+  var type = 'VALUE'; // Default type
+  // Match all [key:value] pairs
+  var attrPattern = /\[([^:\]]+):([^\]]+)\]/g;
+  var match;
+  while ((match = attrPattern.exec(attributeStr)) !== null) {
+    var key = match[1].toLowerCase();
+    var value = match[2];
+    switch (key) {
+      case 'type':
+        type = value.toUpperCase();
+        break;
+      case 'uom':
+        attributes.uom = value;
+        break;
+      case 'id':
+        attributes.id = value;
+        break;
+      case 'format':
+        attributes.format = value;
+        break;
+      case 'filter':
+        attributes.filter = value;
+        break;
+    }
+  }
+  return {
+    type: type,
+    attributes: attributes
+  };
+}
+// Parse a single tag match
+function parseTag(match, isHidden) {
+  var rawMatch = match[0];
+  var startIndex = match.index;
+  var endIndex = startIndex + rawMatch.length;
+  // Extract the value (first bracket content) and attributes (remaining brackets)
+  var innerContent;
+  if (isHidden) {
+    // Remove {[ and ]} wrapper
+    innerContent = rawMatch.slice(2, -2);
+  } else {
+    // Remove [[ and ]] wrapper (but there might be more brackets for attributes)
+    innerContent = rawMatch.slice(2, -1);
+  }
+  // Split by ][ to get value and attributes
+  var parts = innerContent.split('][');
+  var value = parts[0];
+  var attributeStr = parts.length > 1 ? '[' + parts.slice(1).join('][') + ']' : '';
+  var _parseTagAttributes = parseTagAttributes(attributeStr),
+    type = _parseTagAttributes.type,
+    attributes = _parseTagAttributes.attributes;
+  // Adjust type for hidden tags
+  var finalType = isHidden ? 'HIDDEN_MEASUREMENT' : type;
+  return {
+    type: finalType,
+    value: value,
+    rawMatch: rawMatch,
+    startIndex: startIndex,
+    endIndex: endIndex,
+    attributes: attributes,
+    isHidden: isHidden
+  };
+}
+// Main parsing function
+function parseSemanticTags(text) {
+  var tags = [];
+  // Find all standard tags
+  var match;
+  var standardPattern = new RegExp(STANDARD_TAG_PATTERN.source, 'g');
+  while ((match = standardPattern.exec(text)) !== null) {
+    tags.push(parseTag(match, false));
+  }
+  // Find all hidden tags
+  var hiddenPattern = new RegExp(HIDDEN_TAG_PATTERN.source, 'g');
+  while ((match = hiddenPattern.exec(text)) !== null) {
+    tags.push(parseTag(match, true));
+  }
+  // Sort tags by start index
+  tags.sort(function (a, b) {
+    return a.startIndex - b.startIndex;
+  });
+  // Build segments
+  var segments = [];
+  var currentIndex = 0;
+  for (var _i = 0, _tags = tags; _i < _tags.length; _i++) {
+    var tag = _tags[_i];
+    // Add text before this tag
+    if (tag.startIndex > currentIndex) {
+      segments.push({
+        type: 'text',
+        content: text.slice(currentIndex, tag.startIndex)
+      });
+    }
+    // Add the tag segment (skip hidden tags in output)
+    if (!tag.isHidden) {
+      segments.push({
+        type: 'tag',
+        content: tag.value,
+        tag: tag
+      });
+    }
+    currentIndex = tag.endIndex;
+  }
+  // Add remaining text after last tag
+  if (currentIndex < text.length) {
+    segments.push({
+      type: 'text',
+      content: text.slice(currentIndex)
+    });
+  }
+  return {
+    originalText: text,
+    tags: tags,
+    segments: segments
+  };
+}
+// Check if text contains any semantic tags
+function hasSemanticTags(text) {
+  if (!text) return false;
+  return STANDARD_TAG_PATTERN.test(text) || HIDDEN_TAG_PATTERN.test(text);
+}
+// Get tag type display info (for styling)
+function getTagTypeInfo(type) {
+  switch (type) {
+    case 'MEASUREMENT':
+      return {
+        color: 'text-blue-700',
+        bgColor: 'bg-blue-100 border-blue-300',
+        icon: '📏',
+        label: 'Measurement'
+      };
+    case 'VALUE':
+      return {
+        color: 'text-emerald-700',
+        bgColor: 'bg-emerald-100 border-emerald-300',
+        icon: '📝',
+        label: 'Value'
+      };
+    case 'FILE':
+      return {
+        color: 'text-purple-700',
+        bgColor: 'bg-purple-100 border-purple-300',
+        icon: '📄',
+        label: 'File'
+      };
+    case 'IMAGE':
+      return {
+        color: 'text-pink-700',
+        bgColor: 'bg-pink-100 border-pink-300',
+        icon: '🖼️',
+        label: 'Image'
+      };
+    case 'DATETIME':
+      return {
+        color: 'text-orange-700',
+        bgColor: 'bg-orange-100 border-orange-300',
+        icon: '📅',
+        label: 'DateTime'
+      };
+    case 'HIDDEN_MEASUREMENT':
+      return {
+        color: 'text-gray-500',
+        bgColor: 'bg-gray-100 border-gray-300',
+        icon: '👁️‍🗨️',
+        label: 'Hidden'
+      };
+    default:
+      return {
+        color: 'text-gray-700',
+        bgColor: 'bg-gray-100 border-gray-300',
+        icon: '🏷️',
+        label: 'Tag'
+      };
+  }
+}
+
+export { getTagTypeInfo, hasSemanticTags, parseSemanticTags };

package/dist/esm/SemanticTagRenderer.js

@@ -0,0 +1,140 @@
+import { slicedToArray as _slicedToArray } from './_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { hasSemanticTags, parseSemanticTags, getTagTypeInfo } from './SemanticTagParser.js';
+
+// Individual tag badge component
+function TagBadge(_ref) {
+  var tag = _ref.tag,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+    onClick = _ref.onClick;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var typeInfo = getTagTypeInfo(tag.type);
+  return jsxs("span", {
+    className: "relative inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 rounded border text-xs font-medium cursor-default transition-all\n        ".concat(typeInfo.bgColor, " ").concat(typeInfo.color, "\n        ").concat(onClick ? 'cursor-pointer hover:shadow-md' : '', "\n        ").concat(isHovered ? 'ring-2 ring-offset-1 ring-blue-400' : ''),
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    onClick: onClick,
+    children: [jsx("span", {
+      className: "text-[10px]",
+      children: typeInfo.icon
+    }), jsx("span", {
+      children: tag.value
+    }), tag.attributes.uom && jsx("span", {
+      className: "text-[10px] opacity-75 ml-0.5",
+      children: tag.attributes.uom
+    }), showTooltip && isHovered && jsx("div", {
+      className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 pointer-events-none",
+      children: jsxs("div", {
+        className: "bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg whitespace-nowrap",
+        children: [jsxs("div", {
+          className: "font-semibold mb-1",
+          children: [typeInfo.label, " Tag"]
+        }), jsxs("div", {
+          className: "space-y-0.5 text-gray-300",
+          children: [jsxs("div", {
+            children: ["Value: ", jsx("span", {
+              className: "text-white",
+              children: tag.value
+            })]
+          }), tag.attributes.uom && jsxs("div", {
+            children: ["Unit: ", jsx("span", {
+              className: "text-white",
+              children: tag.attributes.uom
+            })]
+          }), tag.attributes.id && jsxs("div", {
+            className: "text-[10px] text-gray-400 truncate max-w-[200px]",
+            children: ["ID: ", tag.attributes.id]
+          }), tag.attributes.format && jsxs("div", {
+            children: ["Format: ", jsx("span", {
+              className: "text-white",
+              children: tag.attributes.format
+            })]
+          })]
+        }), jsx("div", {
+          className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px",
+          children: jsx("div", {
+            className: "border-4 border-transparent border-t-gray-900"
+          })
+        })]
+      })
+    })]
+  });
+}
+// Main renderer component
+function SemanticTagRenderer(_ref2) {
+  var content = _ref2.content,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    _ref2$showTooltips = _ref2.showTooltips,
+    showTooltips = _ref2$showTooltips === void 0 ? true : _ref2$showTooltips,
+    onTagClick = _ref2.onTagClick;
+  // If no semantic tags, just return the content as-is
+  if (!hasSemanticTags(content)) {
+    return jsx("span", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    });
+  }
+  var parsed = parseSemanticTags(content);
+  return jsx("span", {
+    className: className,
+    children: parsed.segments.map(function (segment, index) {
+      if (segment.type === 'text') {
+        // Render plain text (may contain HTML)
+        return jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: segment.content
+          }
+        }, index);
+      } else if (segment.type === 'tag' && segment.tag) {
+        // Render semantic tag badge
+        return jsx(TagBadge, {
+          tag: segment.tag,
+          showTooltip: showTooltips,
+          onClick: onTagClick ? function () {
+            return onTagClick(segment.tag);
+          } : undefined
+        }, index);
+      }
+      return null;
+    })
+  });
+}
+function SmartContent(_ref3) {
+  var content = _ref3.content,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    _ref3$enableSemanticT = _ref3.enableSemanticTags,
+    enableSemanticTags = _ref3$enableSemanticT === void 0 ? true : _ref3$enableSemanticT,
+    _ref3$showTooltips = _ref3.showTooltips,
+    showTooltips = _ref3$showTooltips === void 0 ? true : _ref3$showTooltips,
+    onTagClick = _ref3.onTagClick;
+  if (enableSemanticTags && hasSemanticTags(content)) {
+    return jsx(SemanticTagRenderer, {
+      content: content,
+      className: className,
+      showTooltips: showTooltips,
+      onTagClick: onTagClick
+    });
+  }
+  // Regular content without semantic tags
+  return jsx("span", {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  });
+}
+
+export { SmartContent, SemanticTagRenderer as default };

package/dist/esm/Structura.js

@@ -2,14 +2,13 @@ import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator,
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { Button } from './ui/button.js';
-import { Card, CardHeader, CardTitle, CardContent } from './ui/card.js';
+import { Card, CardContent } from './ui/card.js';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs.js';
 import * as LucideIcons from 'lucide-react';
 import PdfDocumentViewer from './PdfDocumentViewer.js';
 import HtmlViewer from './HtmlViewer.js';
 import { preprocessData } from './helpers/preprocessData.js';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
-import { Badge } from './ui/badge.js';
 import { Progress } from './ui/progress.js';
 import { ScrollArea } from './ui/scroll-area.js';
 import { GET, POST } from './route.js';
@@ -48,7 +47,7 @@ function Structura(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     fileUrl = _useState0[0],
     setFileUrl = _useState0[1];
-  var _useState1 = useState(null),
+  var _useState1 = useState(initialJsonData || null),
     _useState10 = _slicedToArray(_useState1, 2),
     jsonData = _useState10[0],
     setJsonData = _useState10[1];
@@ -93,20 +92,18 @@ function Structura(_ref) {
     _useState30 = _slicedToArray(_useState29, 2),
     isDraggingOver = _useState30[0],
     setIsDraggingOver = _useState30[1]; //NOSONAR
-  // Load initial JSON data if provided (for faster iteration without API calls)
+  // Sync initialJsonData prop with state when it changes
   useEffect(function () {
-    var _a;
     if (initialJsonData) {
-      console.log('[Structura] Loading initial JSON data from props');
       setJsonData(initialJsonData);
-      var pageCount = ((_a = initialJsonData.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
-      setAllowedPages(Array.from({
-        length: pageCount
-      }, function (_, i) {
-        return i + 1;
-      }));
     }
   }, [initialJsonData]);
+  // Sync initialPdfPath prop with state when it changes
+  useEffect(function () {
+    if (initialPdfPath) {
+      setFileUrl(initialPdfPath);
+    }
+  }, [initialPdfPath]);
   useEffect(function () {
     var handleDragOver = function handleDragOver(e) {
       e.preventDefault();
@@ -350,12 +347,10 @@ function Structura(_ref) {
   // Add logging to the useEffect that watches isFileLoaded
   useEffect(function () {
     // console.log("!!! [Structura] isFileLoaded changed:", isFileLoaded);
-    // Skip API call if we already have initialJsonData (cached mode)
+    // Skip auto-generation if we already have JSON data from props
     if (isFileLoaded && !initialJsonData) {
       // console.log("!!! [Structura] Calling handleGenerateJSON due to isFileLoaded");
       handleGenerateJSON();
-    } else if (isFileLoaded && initialJsonData) {
-      console.log('[Structura] Skipping API call - using cached JSON data');
     }
   }, [isFileLoaded, initialJsonData]);
   // Handle removing the PDF and resetting state
@@ -600,28 +595,7 @@ function Structura(_ref) {
   }
   return jsxs("div", {
     className: "h-screen max-h-screen flex flex-col bg-background text-foreground",
-    children: [jsx("header", {
-      className: "border-b border-border bg-card p-4",
-      children: jsxs("div", {
-        className: "container mx-auto flex justify-between items-center",
-        children: [jsxs("div", {
-          className: "flex items-center space-x-2",
-          children: [jsx(LucideIcons.FileText, {
-            className: "h-6 w-6 text-primary"
-          }), jsx("h1", {
-            className: "text-2xl mt-2.5 font-bold",
-            children: "PLAYGROUND"
-          })]
-        }), jsx("div", {
-          className: "flex items-center gap-2",
-          children: jsx(Badge, {
-            variant: "outline",
-            className: "px-3 py-1 text-xs",
-            children: isFileLoaded ? "Document Loaded" : "No Document"
-          })
-        })]
-      })
-    }), jsx("div", {
+    children: [jsx("div", {
       className: "md:hidden",
       children: jsxs(Tabs, {
         value: activeTab,
@@ -752,8 +726,7 @@ function Structura(_ref) {
               jsonData: jsonData,
               selectedBboxId: selectedBboxId,
               isLoading: isLoading,
-              onNodeClick: handleHtmlNodeClick,
-              onSave: props.onSave
+              onNodeClick: handleHtmlNodeClick
             })
           })
         })]
@@ -766,22 +739,10 @@ function Structura(_ref) {
         children: [jsx(Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxs(Card, {
+          children: jsx(Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsx(CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxs(CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsx(LucideIcons.FileText, {
-                  className: "h-4 w-4"
-                }), "PDF Document", file && jsx(Badge, {
-                  variant: "secondary",
-                  className: "ml-2",
-                  children: file.name
-                })]
-              })
-            }), jsx(CardContent, {
-              className: "p-0 flex-1 flex flex-col overflow-hidden",
+            children: jsx(CardContent, {
+              className: "p-0 flex-1 flex flex-col overflow-hidden h-full",
               children: jsx(ScrollArea, {
                 className: "w-full h-[calc(100vh-220px)]",
                 children: fileUrl ? jsx(PdfDocumentViewer, {
@@ -876,33 +837,24 @@ function Structura(_ref) {
                   })
                 })
               })
-            })]
+            })
           })
         }), jsx(PanelResizeHandle, {
           className: "w-1.5 bg-black hover:bg-primary/20 transition-colors cursor-col-resize"
         }), jsx(Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxs(Card, {
+          children: jsx(Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsx(CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxs(CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsx(LucideIcons.FileText, {
-                  className: "h-4 w-4"
-                }), "HTML Structure"]
-              })
-            }), jsx(CardContent, {
-              className: "p-0 h-[calc(100%-56px)] relative overflow-hidden",
+            children: jsx(CardContent, {
+              className: "p-0 h-full relative overflow-hidden",
               children: jsx("div", {
                 className: "absolute inset-0",
                 children: jsonData ? jsx(HtmlViewer, {
                   jsonData: jsonData,
                   selectedBboxId: selectedBboxId,
                   isLoading: isLoading,
-                  onNodeClick: handleHtmlNodeClick,
-                  onSave: props.onSave
+                  onNodeClick: handleHtmlNodeClick
                 }) : jsx("div", {
                   className: "flex flex-col items-center justify-center h-full p-8 text-center",
                   children: jsxs("div", {
@@ -919,7 +871,7 @@ function Structura(_ref) {
                   })
                 })
               })
-            })]
+            })
           })
         })]
       })

package/dist/esm/Table.js

@@ -35,7 +35,11 @@ function Table(_ref) {
     hasLlmHtml = _ref$hasLlmHtml === void 0 ? false : _ref$hasLlmHtml,
     _ref$showJsonIcons = _ref.showJsonIcons,
     showJsonIcons = _ref$showJsonIcons === void 0 ? true : _ref$showJsonIcons,
-    onNodeClick = _ref.onNodeClick;
+    onNodeClick = _ref.onNodeClick,
+    _ref$isEditMode = _ref.isEditMode,
+    isEditMode = _ref$isEditMode === void 0 ? false : _ref$isEditMode,
+    _ref$isJsonMode = _ref.isJsonMode,
+    isJsonMode = _ref$isJsonMode === void 0 ? false : _ref$isJsonMode;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     useLlmHtml = _useState2[0],
@@ -61,6 +65,39 @@ function Table(_ref) {
     var tempDiv = document.createElement("div");
     tempDiv.innerHTML = getHtmlContent(tableNode);
     var tableElement = tempDiv.querySelector("table");
+    // If no table element found but we have children, reconstruct from children
+    if (!tableElement && tableNode.children && tableNode.children.length > 0) {
+      var table = document.createElement("table");
+      table.className = "w-full border-collapse";
+      var tbody = document.createElement("tbody");
+      // Determine columns: assume 4 columns for typical signature tables
+      var colCount = 4;
+      var currentRow = null;
+      var cellsInRow = 0;
+      tableNode.children.forEach(function (child, index) {
+        var _a, _b;
+        if (child.block_type === "TableCell") {
+          if (cellsInRow === 0 || cellsInRow >= colCount) {
+            currentRow = document.createElement("tr");
+            tbody.appendChild(currentRow);
+            cellsInRow = 0;
+          }
+          var isHeader = ((_a = child.html) === null || _a === void 0 ? void 0 : _a.includes("<th")) || index < colCount;
+          var cell = document.createElement(isHeader ? "th" : "td");
+          // Strip wrapper th/td tags from child HTML
+          var cellHtml = ((_b = child.html) === null || _b === void 0 ? void 0 : _b.replace(/<\/?t[hd][^>]*>/gi, "")) || "";
+          cell.innerHTML = cellHtml;
+          cell.className = "px-4 py-2 border border-gray-200 text-left";
+          cell.id = child.id;
+          currentRow.appendChild(cell);
+          cellsInRow++;
+        }
+      });
+      table.appendChild(tbody);
+      tempDiv.innerHTML = "";
+      tempDiv.appendChild(table);
+      tableElement = table;
+    }
     if (!tableElement) return null;
     // Get all rows
     var rows = Array.from(tableElement.querySelectorAll("tr"));
@@ -83,14 +120,41 @@ function Table(_ref) {
   // Combine rows from main table and merged tables
   var allRows = [].concat(_toConsumableArray(mainTable.rows), mergedRows);
   // Map cells to children
+  var globalCellCounter = 0;
   var processedRows = allRows.map(function (row, rowIndex) {
     var cells = Array.from(row.querySelectorAll("th, td"));
     return cells.map(function (cell, colIndex) {
       var _a;
-      var globalCellIndex = rowIndex * cells.length + colIndex;
-      var childNode = (_a = node.children) === null || _a === void 0 ? void 0 : _a[globalCellIndex];
+      var cellElement = cell;
+      var childNode = (_a = node.children) === null || _a === void 0 ? void 0 : _a[globalCellCounter];
+      globalCellCounter++;
       var cellContent = cleanHtml(cell.innerHTML);
       var isHeaderCell = cell.tagName.toLowerCase() === "th"; // Check if this is a header cell
+      // Extract rowspan and colspan attributes
+      var rowSpan = cellElement.rowSpan > 1 ? cellElement.rowSpan : undefined;
+      var colSpan = cellElement.colSpan > 1 ? cellElement.colSpan : undefined;
+      // Extract style attribute
+      var styleAttr = cellElement.getAttribute("style");
+      var cellStyle;
+      if (styleAttr) {
+        // Parse inline style string to style object
+        cellStyle = {};
+        styleAttr.split(";").forEach(function (rule) {
+          var _rule$split$map = rule.split(":").map(function (s) {
+              return s.trim();
+            }),
+            _rule$split$map2 = _slicedToArray(_rule$split$map, 2),
+            property = _rule$split$map2[0],
+            value = _rule$split$map2[1];
+          if (property && value) {
+            // Convert kebab-case to camelCase
+            var camelProperty = property.replace(/-([a-z])/g, function (_, letter) {
+              return letter.toUpperCase();
+            });
+            cellStyle[camelProperty] = value;
+          }
+        });
+      }
       // If we should use TableCell content and we have a childNode with llm_table_html
       if (shouldUseTableCellContents() && childNode && childNode.llm_table_html !== undefined) {
         cellContent = useLlmHtml && childNode.llm_table_html ? cleanHtml(childNode.llm_table_html) : cleanHtml(childNode.html || "");
@@ -98,12 +162,15 @@ function Table(_ref) {
       // TODO: to be fixed later - only apply dubious highlighting if the cell has llm_table_html
       var isDubious = (childNode === null || childNode === void 0 ? void 0 : childNode.dubious) && (childNode === null || childNode === void 0 ? void 0 : childNode.llm_table_html) !== undefined ? true : false;
       return {
-        id: (childNode === null || childNode === void 0 ? void 0 : childNode.id) || "".concat(node.id, "-cell-").concat(globalCellIndex),
+        id: (childNode === null || childNode === void 0 ? void 0 : childNode.id) || "".concat(node.id, "-cell-").concat(globalCellCounter),
         content: cellContent,
         isHeader: isHeaderCell,
         isDubious: isDubious,
+        rowSpan: rowSpan,
+        colSpan: colSpan,
+        style: cellStyle,
         nodeData: childNode || {
-          id: "".concat(node.id, "-cell-").concat(globalCellIndex),
+          id: "".concat(node.id, "-cell-").concat(globalCellCounter),
           html: cellContent,
           block_type: "TableCell"
         }
@@ -148,10 +215,12 @@ function Table(_ref) {
     }), jsx("div", {
       className: "w-full overflow-x-auto",
       children: jsx("table", {
-        className: "min-w-full divide-y divide-gray-200",
+        className: "min-w-full structura-bg-white",
         children: jsx("tbody", {
+          className: "structura-bg-white",
           children: processedRows.map(function (row, rowIndex) {
             return jsx("tr", {
+              className: "structura-bg-white",
               children: row.map(function (cell) {
                 return jsx(TableCell, {
                   id: cell.id,
@@ -162,13 +231,18 @@ function Table(_ref) {
                   isSelected: cell.id === selectedBboxId,
                   isHeader: cell.isHeader,
                   isDubious: cell.isDubious,
+                  rowSpan: cell.rowSpan,
+                  colSpan: cell.colSpan,
+                  style: cell.style,
                   onContentChange: onContentChange ? function (newContent) {
                     return handleCellContentChange(cell.id, newContent);
                   } : undefined,
                   showJsonIcons: showJsonIcons,
                   onNodeClick: onNodeClick ? function () {
-                    return onNodeClick(cell.id);
-                  } : undefined
+                    return onNodeClick(node.id);
+                  } : undefined,
+                  isEditMode: isEditMode,
+                  isJsonMode: isJsonMode
                 }, cell.id);
               })
             }, rowIndex);