@tfw.in/structura-lib 0.2.0 → 0.2.1

package/dist/cjs/SemanticTagParser.js

@@ -0,0 +1,189 @@
+'use strict';
+
+// 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]...]}
+const STANDARD_TAG_PATTERN = /\[\[([^\]]+)\](\[([^\]]+)\])*\]/g;
+const HIDDEN_TAG_PATTERN = /\{\[([^\]]+)\](\[([^\]]+)\])*\]\}/g;
+// Parse a single tag's attribute string like "[type:MEASUREMENT][uom:mL/min][id:abc-123]"
+function parseTagAttributes(attributeStr) {
+  const attributes = {};
+  let type = 'VALUE'; // Default type
+  // Match all [key:value] pairs
+  const attrPattern = /\[([^:\]]+):([^\]]+)\]/g;
+  let match;
+  while ((match = attrPattern.exec(attributeStr)) !== null) {
+    const key = match[1].toLowerCase();
+    const 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,
+    attributes
+  };
+}
+// Parse a single tag match
+function parseTag(match, isHidden) {
+  const rawMatch = match[0];
+  const startIndex = match.index;
+  const endIndex = startIndex + rawMatch.length;
+  // Extract the value (first bracket content) and attributes (remaining brackets)
+  let 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
+  const parts = innerContent.split('][');
+  const value = parts[0];
+  const attributeStr = parts.length > 1 ? '[' + parts.slice(1).join('][') + ']' : '';
+  const {
+    type,
+    attributes
+  } = parseTagAttributes(attributeStr);
+  // Adjust type for hidden tags
+  const finalType = isHidden ? 'HIDDEN_MEASUREMENT' : type;
+  return {
+    type: finalType,
+    value,
+    rawMatch,
+    startIndex,
+    endIndex,
+    attributes,
+    isHidden
+  };
+}
+// Main parsing function
+function parseSemanticTags(text) {
+  const tags = [];
+  // Find all standard tags
+  let match;
+  const standardPattern = new RegExp(STANDARD_TAG_PATTERN.source, 'g');
+  while ((match = standardPattern.exec(text)) !== null) {
+    tags.push(parseTag(match, false));
+  }
+  // Find all hidden tags
+  const 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((a, b) => a.startIndex - b.startIndex);
+  // Build segments
+  const segments = [];
+  let currentIndex = 0;
+  for (const tag of tags) {
+    // 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
+      });
+    }
+    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,
+    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'
+      };
+  }
+}
+
+exports.getTagTypeInfo = getTagTypeInfo;
+exports.hasSemanticTags = hasSemanticTags;
+exports.parseSemanticTags = parseSemanticTags;

package/dist/cjs/SemanticTagRenderer.js

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var SemanticTagParser = require('./SemanticTagParser.js');
+
+// Individual tag badge component
+function TagBadge({
+  tag,
+  showTooltip = true,
+  onClick
+}) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const typeInfo = SemanticTagParser.getTagTypeInfo(tag.type);
+  return jsxRuntime.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
+        ${typeInfo.bgColor} ${typeInfo.color}
+        ${onClick ? 'cursor-pointer hover:shadow-md' : ''}
+        ${isHovered ? 'ring-2 ring-offset-1 ring-blue-400' : ''}`,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onClick: onClick,
+    children: [jsxRuntime.jsx("span", {
+      className: "text-[10px]",
+      children: typeInfo.icon
+    }), jsxRuntime.jsx("span", {
+      children: tag.value
+    }), tag.attributes.uom && jsxRuntime.jsx("span", {
+      className: "text-[10px] opacity-75 ml-0.5",
+      children: tag.attributes.uom
+    }), showTooltip && isHovered && jsxRuntime.jsx("div", {
+      className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 pointer-events-none",
+      children: jsxRuntime.jsxs("div", {
+        className: "bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg whitespace-nowrap",
+        children: [jsxRuntime.jsxs("div", {
+          className: "font-semibold mb-1",
+          children: [typeInfo.label, " Tag"]
+        }), jsxRuntime.jsxs("div", {
+          className: "space-y-0.5 text-gray-300",
+          children: [jsxRuntime.jsxs("div", {
+            children: ["Value: ", jsxRuntime.jsx("span", {
+              className: "text-white",
+              children: tag.value
+            })]
+          }), tag.attributes.uom && jsxRuntime.jsxs("div", {
+            children: ["Unit: ", jsxRuntime.jsx("span", {
+              className: "text-white",
+              children: tag.attributes.uom
+            })]
+          }), tag.attributes.id && jsxRuntime.jsxs("div", {
+            className: "text-[10px] text-gray-400 truncate max-w-[200px]",
+            children: ["ID: ", tag.attributes.id]
+          }), tag.attributes.format && jsxRuntime.jsxs("div", {
+            children: ["Format: ", jsxRuntime.jsx("span", {
+              className: "text-white",
+              children: tag.attributes.format
+            })]
+          })]
+        }), jsxRuntime.jsx("div", {
+          className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px",
+          children: jsxRuntime.jsx("div", {
+            className: "border-4 border-transparent border-t-gray-900"
+          })
+        })]
+      })
+    })]
+  });
+}
+// Main renderer component
+function SemanticTagRenderer({
+  content,
+  className = '',
+  showTooltips = true,
+  onTagClick
+}) {
+  // If no semantic tags, just return the content as-is
+  if (!SemanticTagParser.hasSemanticTags(content)) {
+    return jsxRuntime.jsx("span", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    });
+  }
+  const parsed = SemanticTagParser.parseSemanticTags(content);
+  return jsxRuntime.jsx("span", {
+    className: className,
+    children: parsed.segments.map((segment, index) => {
+      if (segment.type === 'text') {
+        // Render plain text (may contain HTML)
+        return jsxRuntime.jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: segment.content
+          }
+        }, index);
+      } else if (segment.type === 'tag' && segment.tag) {
+        // Render semantic tag badge
+        return jsxRuntime.jsx(TagBadge, {
+          tag: segment.tag,
+          showTooltip: showTooltips,
+          onClick: onTagClick ? () => onTagClick(segment.tag) : undefined
+        }, index);
+      }
+      return null;
+    })
+  });
+}
+function SmartContent({
+  content,
+  className = '',
+  enableSemanticTags = true,
+  showTooltips = true,
+  onTagClick
+}) {
+  if (enableSemanticTags && SemanticTagParser.hasSemanticTags(content)) {
+    return jsxRuntime.jsx(SemanticTagRenderer, {
+      content: content,
+      className: className,
+      showTooltips: showTooltips,
+      onTagClick: onTagClick
+    });
+  }
+  // Regular content without semantic tags
+  return jsxRuntime.jsx("span", {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  });
+}
+
+exports.SmartContent = SmartContent;
+exports.default = SemanticTagRenderer;

package/dist/cjs/Structura.js

@@ -12,7 +12,6 @@ var PdfDocumentViewer = require('./PdfDocumentViewer.js');
 var HtmlViewer = require('./HtmlViewer.js');
 var preprocessData = require('./helpers/preprocessData.js');
 var reactResizablePanels = require('react-resizable-panels');
-var badge = require('./ui/badge.js');
 var progress = require('./ui/progress.js');
 var scrollArea = require('./ui/scroll-area.js');
 var route = require('./route.js');
@@ -56,7 +55,7 @@ function Structura({
   const [selectedField, setSelectedField] = React.useState(null);
   const [file, setFile] = React.useState(null);
   const [fileUrl, setFileUrl] = React.useState(initialPdfPath || null);
-  const [jsonData, setJsonData] = React.useState(null);
+  const [jsonData, setJsonData] = React.useState(initialJsonData || null);
   const [allowedPages, setAllowedPages] = React.useState(null);
   const pdfWrapperRef = React.useRef(null);
   const [flattenedFields, setFlattenedFields] = React.useState([]);
@@ -68,18 +67,18 @@ function Structura({
   const [activeTab, setActiveTab] = React.useState("pdf");
   const [backendStatus, setBackendStatus] = React.useState('checking');
   const [isDraggingOver, setIsDraggingOver] = React.useState(false); //NOSONAR
-  // Load initial JSON data if provided (for faster iteration without API calls)
+  // Sync initialJsonData prop with state when it changes
   React.useEffect(() => {
-    var _a;
     if (initialJsonData) {
-      console.log('[Structura] Loading initial JSON data from props');
       setJsonData(initialJsonData);
-      const pageCount = ((_a = initialJsonData.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
-      setAllowedPages(Array.from({
-        length: pageCount
-      }, (_, i) => i + 1));
     }
   }, [initialJsonData]);
+  // Sync initialPdfPath prop with state when it changes
+  React.useEffect(() => {
+    if (initialPdfPath) {
+      setFileUrl(initialPdfPath);
+    }
+  }, [initialPdfPath]);
   React.useEffect(() => {
     const handleDragOver = e => {
       e.preventDefault();
@@ -273,12 +272,10 @@ function Structura({
   // Add logging to the useEffect that watches isFileLoaded
   React.useEffect(() => {
     // 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
@@ -455,28 +452,7 @@ function Structura({
   }
   return jsxRuntime.jsxs("div", {
     className: "h-screen max-h-screen flex flex-col bg-background text-foreground",
-    children: [jsxRuntime.jsx("header", {
-      className: "border-b border-border bg-card p-4",
-      children: jsxRuntime.jsxs("div", {
-        className: "container mx-auto flex justify-between items-center",
-        children: [jsxRuntime.jsxs("div", {
-          className: "flex items-center space-x-2",
-          children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
-            className: "h-6 w-6 text-primary"
-          }), jsxRuntime.jsx("h1", {
-            className: "text-2xl mt-2.5 font-bold",
-            children: "PLAYGROUND"
-          })]
-        }), jsxRuntime.jsx("div", {
-          className: "flex items-center gap-2",
-          children: jsxRuntime.jsx(badge.Badge, {
-            variant: "outline",
-            className: "px-3 py-1 text-xs",
-            children: isFileLoaded ? "Document Loaded" : "No Document"
-          })
-        })]
-      })
-    }), jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "md:hidden",
       children: jsxRuntime.jsxs(tabs.Tabs, {
         value: activeTab,
@@ -607,8 +583,7 @@ function Structura({
               jsonData: jsonData,
               selectedBboxId: selectedBboxId,
               isLoading: isLoading,
-              onNodeClick: handleHtmlNodeClick,
-              onSave: props.onSave
+              onNodeClick: handleHtmlNodeClick
             })
           })
         })]
@@ -621,22 +596,10 @@ function Structura({
         children: [jsxRuntime.jsx(reactResizablePanels.Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxRuntime.jsxs(card.Card, {
+          children: jsxRuntime.jsx(card.Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsxRuntime.jsx(card.CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxRuntime.jsxs(card.CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
-                  className: "h-4 w-4"
-                }), "PDF Document", file && jsxRuntime.jsx(badge.Badge, {
-                  variant: "secondary",
-                  className: "ml-2",
-                  children: file.name
-                })]
-              })
-            }), jsxRuntime.jsx(card.CardContent, {
-              className: "p-0 flex-1 flex flex-col overflow-hidden",
+            children: jsxRuntime.jsx(card.CardContent, {
+              className: "p-0 flex-1 flex flex-col overflow-hidden h-full",
               children: jsxRuntime.jsx(scrollArea.ScrollArea, {
                 className: "w-full h-[calc(100vh-220px)]",
                 children: fileUrl ? jsxRuntime.jsx(PdfDocumentViewer.default, {
@@ -731,33 +694,24 @@ function Structura({
                   })
                 })
               })
-            })]
+            })
           })
         }), jsxRuntime.jsx(reactResizablePanels.PanelResizeHandle, {
           className: "w-1.5 bg-black hover:bg-primary/20 transition-colors cursor-col-resize"
         }), jsxRuntime.jsx(reactResizablePanels.Panel, {
           minSize: 20,
           defaultSize: 50,
-          children: jsxRuntime.jsxs(card.Card, {
+          children: jsxRuntime.jsx(card.Card, {
             className: "h-full border-0 rounded-none",
-            children: [jsxRuntime.jsx(card.CardHeader, {
-              className: "py-3 px-4 border-b bg-muted/30",
-              children: jsxRuntime.jsxs(card.CardTitle, {
-                className: "text-base flex items-center gap-2",
-                children: [jsxRuntime.jsx(LucideIcons__namespace.FileText, {
-                  className: "h-4 w-4"
-                }), "HTML Structure"]
-              })
-            }), jsxRuntime.jsx(card.CardContent, {
-              className: "p-0 h-[calc(100%-56px)] relative overflow-hidden",
+            children: jsxRuntime.jsx(card.CardContent, {
+              className: "p-0 h-full relative overflow-hidden",
               children: jsxRuntime.jsx("div", {
                 className: "absolute inset-0",
                 children: jsonData ? jsxRuntime.jsx(HtmlViewer.default, {
                   jsonData: jsonData,
                   selectedBboxId: selectedBboxId,
                   isLoading: isLoading,
-                  onNodeClick: handleHtmlNodeClick,
-                  onSave: props.onSave
+                  onNodeClick: handleHtmlNodeClick
                 }) : jsxRuntime.jsx("div", {
                   className: "flex flex-col items-center justify-center h-full p-8 text-center",
                   children: jsxRuntime.jsxs("div", {
@@ -774,7 +728,7 @@ function Structura({
                   })
                 })
               })
-            })]
+            })
           })
         })]
       })

package/dist/cjs/Table.js

@@ -35,7 +35,9 @@ function Table({
   mergedTables = [],
   hasLlmHtml = false,
   showJsonIcons = true,
-  onNodeClick
+  onNodeClick,
+  isEditMode = false,
+  isJsonMode = false
 }) {
   const [useLlmHtml, setUseLlmHtml] = React.useState(false);
   // Get the appropriate HTML content
@@ -56,7 +58,40 @@ function Table({
   const processTable = tableNode => {
     const tempDiv = document.createElement("div");
     tempDiv.innerHTML = getHtmlContent(tableNode);
-    const tableElement = tempDiv.querySelector("table");
+    let tableElement = tempDiv.querySelector("table");
+    // If no table element found but we have children, reconstruct from children
+    if (!tableElement && tableNode.children && tableNode.children.length > 0) {
+      const table = document.createElement("table");
+      table.className = "w-full border-collapse";
+      const tbody = document.createElement("tbody");
+      // Determine columns: assume 4 columns for typical signature tables
+      const colCount = 4;
+      let currentRow = null;
+      let cellsInRow = 0;
+      tableNode.children.forEach((child, index) => {
+        var _a, _b;
+        if (child.block_type === "TableCell") {
+          if (cellsInRow === 0 || cellsInRow >= colCount) {
+            currentRow = document.createElement("tr");
+            tbody.appendChild(currentRow);
+            cellsInRow = 0;
+          }
+          const isHeader = ((_a = child.html) === null || _a === void 0 ? void 0 : _a.includes("<th")) || index < colCount;
+          const cell = document.createElement(isHeader ? "th" : "td");
+          // Strip wrapper th/td tags from child HTML
+          const 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
     const rows = Array.from(tableElement.querySelectorAll("tr"));
@@ -79,14 +114,34 @@ function Table({
   // Combine rows from main table and merged tables
   const allRows = [...mainTable.rows, ...mergedRows];
   // Map cells to children
+  let globalCellCounter = 0;
   const processedRows = allRows.map((row, rowIndex) => {
     const cells = Array.from(row.querySelectorAll("th, td"));
     return cells.map((cell, colIndex) => {
       var _a;
-      const globalCellIndex = rowIndex * cells.length + colIndex;
-      const childNode = (_a = node.children) === null || _a === void 0 ? void 0 : _a[globalCellIndex];
+      const cellElement = cell;
+      const childNode = (_a = node.children) === null || _a === void 0 ? void 0 : _a[globalCellCounter];
+      globalCellCounter++;
       let cellContent = cleanHtml(cell.innerHTML);
       const isHeaderCell = cell.tagName.toLowerCase() === "th"; // Check if this is a header cell
+      // Extract rowspan and colspan attributes
+      const rowSpan = cellElement.rowSpan > 1 ? cellElement.rowSpan : undefined;
+      const colSpan = cellElement.colSpan > 1 ? cellElement.colSpan : undefined;
+      // Extract style attribute
+      const styleAttr = cellElement.getAttribute("style");
+      let cellStyle;
+      if (styleAttr) {
+        // Parse inline style string to style object
+        cellStyle = {};
+        styleAttr.split(";").forEach(rule => {
+          const [property, value] = rule.split(":").map(s => s.trim());
+          if (property && value) {
+            // Convert kebab-case to camelCase
+            const camelProperty = property.replace(/-([a-z])/g, (_, letter) => 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 || "");
@@ -94,12 +149,15 @@ function Table({
       // TODO: to be fixed later - only apply dubious highlighting if the cell has llm_table_html
       const 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) || `${node.id}-cell-${globalCellIndex}`,
+        id: (childNode === null || childNode === void 0 ? void 0 : childNode.id) || `${node.id}-cell-${globalCellCounter}`,
         content: cellContent,
         isHeader: isHeaderCell,
         isDubious: isDubious,
+        rowSpan,
+        colSpan,
+        style: cellStyle,
         nodeData: childNode || {
-          id: `${node.id}-cell-${globalCellIndex}`,
+          id: `${node.id}-cell-${globalCellCounter}`,
           html: cellContent,
           block_type: "TableCell"
         }
@@ -140,9 +198,11 @@ function Table({
     }), jsxRuntime.jsx("div", {
       className: "w-full overflow-x-auto",
       children: jsxRuntime.jsx("table", {
-        className: "min-w-full divide-y divide-gray-200",
+        className: "min-w-full structura-bg-white",
         children: jsxRuntime.jsx("tbody", {
+          className: "structura-bg-white",
           children: processedRows.map((row, rowIndex) => jsxRuntime.jsx("tr", {
+            className: "structura-bg-white",
             children: row.map(cell => jsxRuntime.jsx(TableCell.default, {
               id: cell.id,
               content: cell.content,
@@ -150,9 +210,14 @@ function Table({
               isSelected: cell.id === selectedBboxId,
               isHeader: cell.isHeader,
               isDubious: cell.isDubious,
+              rowSpan: cell.rowSpan,
+              colSpan: cell.colSpan,
+              style: cell.style,
               onContentChange: onContentChange ? newContent => handleCellContentChange(cell.id, newContent) : undefined,
               showJsonIcons: showJsonIcons,
-              onNodeClick: onNodeClick ? () => onNodeClick(cell.id) : undefined
+              onNodeClick: onNodeClick ? () => onNodeClick(node.id) : undefined,
+              isEditMode: isEditMode,
+              isJsonMode: isJsonMode
             }, cell.id))
           }, rowIndex))
         })