fix: handle table cell borders from styles (#1722)

* fix: separate table borders from row borders

* fix: handle table cell borders from styles

* fix: update screenshots

* fix: additional borders fixes

Author: VladaHarbour

e2e-tests/tests/visuals/basic-documents.spec.js-snapshots/basic-documents-advanced-tables-docx-1-chromium-linux.png

@@ -6,6 +6,7 @@ import { translateChildNodes } from '@core/super-converter/v2/exporter/helpers/i
 import { translator as trTranslator } from '../tr';
 import { translator as tblPrTranslator } from '../tblPr';
 import { translator as tblGridTranslator } from '../tblGrid';
+import { translator as tblStylePrTranslator } from '@converter/v3/handlers/w/tblStylePr';
 import { buildFallbackGridForTable } from '@core/super-converter/helpers/tableFallbackHelpers.js';
 
 /** @type {import('@translator').XmlNodeName} */
@@ -83,6 +84,8 @@ const encode = (params, encodedAttrs) => {
       };
     }
   }
+
+  const tableLook = encodedAttrs.tableProperties.tblLook;
   // Table borders can be specified in tblPr or inside a referenced style tag
   const borderProps = _processTableBorders(encodedAttrs.tableProperties.borders || {});
   const referencedStyles = _getReferencedTableStyles(encodedAttrs.tableStyleId, params) || {};
@@ -124,7 +127,8 @@ const encode = (params, encodedAttrs) => {
       extraParams: {
         row,
         table: node,
-        rowBorders: encodedAttrs.borders,
+        tableBorders: encodedAttrs.borders,
+        tableLook,
         columnWidths,
         activeRowSpans: activeRowSpans.slice(),
         rowIndex,
@@ -340,7 +344,19 @@ export function _getReferencedTableStyles(tableStyleReference, params) {
     }
   }
 
-  return stylesToReturn;
+  const tblStylePr = styleTag.elements.filter((el) => el.name === 'w:tblStylePr');
+  let styleProps = {};
+  if (tblStylePr) {
+    styleProps = tblStylePr.reduce((acc, el) => {
+      acc[el.attributes['w:type']] = tblStylePrTranslator.encode({ ...params, nodes: [el] });
+      return acc;
+    }, {});
+  }
+
+  return {
+    ...stylesToReturn,
+    ...styleProps,
+  };
 }
 
 /**

e2e-tests/tests/visuals/basic-documents.spec.js-snapshots/basic-documents-vanced-tables-docx-1-chromium-linux.png

@@ -1,6 +1,39 @@
 import { NodeTranslator } from '@translator';
 import { createAttributeHandler, parseBoolean, booleanToString } from '../../utils.js';
 
+/**
+ * Bitmask values for tblLook conditional formatting flags.
+ * These correspond to OOXML tblLook@w:val bitmask positions.
+ * @see ECMA-376 Part 1, Section 17.4.56
+ */
+const tblLookBitmask = Object.freeze({
+  firstRow: 0x0020,
+  lastRow: 0x0040,
+  firstColumn: 0x0080,
+  lastColumn: 0x0100,
+  noHBand: 0x0200,
+  noVBand: 0x0400,
+});
+
+/**
+ * Decodes a tblLook w:val bitmask string into individual boolean flags.
+ * @param {string|number|null|undefined} val - The bitmask value (hex or decimal string)
+ * @returns {Object<string, boolean>|null} Object with boolean flags, or null if invalid
+ */
+const decodeTblLookVal = (val) => {
+  if (!val) return null;
+  const raw = typeof val === 'string' ? val.trim() : String(val);
+
+  // Try hex first (most common in OOXML), then fall back to decimal
+  let numeric = Number.parseInt(raw, 16);
+  if (!Number.isFinite(numeric)) {
+    numeric = Number.parseInt(raw, 10);
+  }
+  if (!Number.isFinite(numeric)) return null;
+
+  return Object.fromEntries(Object.entries(tblLookBitmask).map(([key, mask]) => [key, (numeric & mask) === mask]));
+};
+
 /**
  * The NodeTranslator instance for the tblLook element.
  * @type {import('@translator').NodeTranslator}
@@ -14,6 +47,14 @@ export const translator = NodeTranslator.from({
     .concat([createAttributeHandler('w:val')]),
   encode: (params, encodedAttrs) => {
     void params;
+    const decoded = decodeTblLookVal(encodedAttrs.val);
+    if (decoded) {
+      Object.entries(decoded).forEach(([key, value]) => {
+        if (!Object.prototype.hasOwnProperty.call(encodedAttrs, key)) {
+          encodedAttrs[key] = value;
+        }
+      });
+    }
     return Object.keys(encodedAttrs).length > 0 ? encodedAttrs : undefined;
   },
   decode: function ({ node }, context) {

packages/super-editor/src/core/super-converter/v3/handlers/w/tbl/tbl-translator.js

@@ -29,6 +29,28 @@ describe('w:tblLook translator', () => {
         val: 'someValue',
       });
     });
+
+    it('decodes w:val bitmask into conditional flags', () => {
+      const result = translator.encode({
+        nodes: [
+          {
+            attributes: {
+              'w:val': '04A0',
+            },
+          },
+        ],
+      });
+
+      expect(result).toEqual({
+        val: '04A0',
+        firstRow: true,
+        lastRow: false,
+        firstColumn: true,
+        lastColumn: false,
+        noHBand: false,
+        noVBand: true,
+      });
+    });
   });
 
   describe('decode', () => {

packages/super-editor/src/core/super-converter/v3/handlers/w/tblLook/tblLook-translator.js

@@ -0,0 +1 @@
+export * from './tblStylePr-translator.js';

packages/super-editor/src/core/super-converter/v3/handlers/w/tblLook/tblLook-translator.test.js

@@ -0,0 +1,15 @@
+import { NodeTranslator } from '@translator';
+import { translator as tblPrTranslator } from '@converter/v3/handlers/w/tblPr';
+import { translator as tcPrTranslator } from '@converter/v3/handlers/w/tcPr';
+import { createNestedPropertiesTranslator } from '@converter/v3/handlers/utils.js';
+
+/** @type {import('@translator').NodeTranslatorConfig[]} */
+const propertyTranslators = [tblPrTranslator, tcPrTranslator];
+
+/**
+ * The NodeTranslator instance for the w:tblStylePr element.
+ * @type {import('@translator').NodeTranslator}
+ */
+export const translator = NodeTranslator.from(
+  createNestedPropertiesTranslator('w:tblStylePr', 'tableStyleProperties', propertyTranslators),
+);

packages/super-editor/src/core/super-converter/v3/handlers/w/tblStylePr/index.js

@@ -0,0 +1,172 @@
+import { describe, it, expect } from 'vitest';
+import { NodeTranslator } from '@translator';
+import { translator } from './tblStylePr-translator.js';
+
+describe('w:tblStylePr translator', () => {
+  describe('config', () => {
+    it('exports a NodeTranslator instance', () => {
+      expect(translator).toBeDefined();
+      expect(translator).toBeInstanceOf(NodeTranslator);
+      expect(translator.xmlName).toBe('w:tblStylePr');
+      expect(translator.sdNodeOrKeyName).toBe('tableStyleProperties');
+    });
+  });
+
+  describe('encode', () => {
+    it('encodes nested <w:tblPr> and <w:tcPr> correctly', () => {
+      const params = {
+        nodes: [
+          {
+            name: 'w:tblStylePr',
+            elements: [
+              {
+                name: 'w:tblPr',
+                elements: [
+                  { name: 'w:tblStyle', attributes: { 'w:val': 'TableGrid' } },
+                  { name: 'w:tblW', attributes: { 'w:w': '5000', 'w:type': 'pct' } },
+                  { name: 'w:jc', attributes: { 'w:val': 'center' } },
+                ],
+              },
+              {
+                name: 'w:tcPr',
+                elements: [
+                  { name: 'w:tcW', attributes: { 'w:w': '2000', 'w:type': 'dxa' } },
+                  { name: 'w:gridSpan', attributes: { 'w:val': '2' } },
+                  { name: 'w:noWrap' },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const result = translator.encode(params);
+
+      expect(result).toEqual({
+        tableProperties: {
+          tableStyleId: 'TableGrid',
+          tableWidth: { value: 5000, type: 'pct' },
+          justification: 'center',
+        },
+        tableCellProperties: {
+          cellWidth: { value: 2000, type: 'dxa' },
+          gridSpan: 2,
+          noWrap: true,
+        },
+      });
+    });
+
+    it('returns undefined when no nested properties are encoded', () => {
+      const params = {
+        nodes: [
+          {
+            name: 'w:tblStylePr',
+            elements: [
+              { name: 'w:tblPr', elements: [{ name: 'w:tblW', attributes: {} }] },
+              { name: 'w:tcPr', elements: [{ name: 'w:tcW', attributes: {} }] },
+            ],
+          },
+        ],
+      };
+
+      expect(translator.encode(params)).toBeUndefined();
+    });
+
+    it('encodes when at least one nested property group is present', () => {
+      const params = {
+        nodes: [
+          {
+            name: 'w:tblStylePr',
+            elements: [
+              {
+                name: 'w:tblPr',
+                elements: [{ name: 'w:tblStyle', attributes: { 'w:val': 'TableGrid' } }],
+              },
+            ],
+          },
+        ],
+      };
+
+      expect(translator.encode(params)).toEqual({
+        tableProperties: { tableStyleId: 'TableGrid' },
+      });
+    });
+  });
+
+  describe('decode', () => {
+    it('decodes a complex tableStyleProperties object correctly', () => {
+      const tableStyleProperties = {
+        tableProperties: {
+          tableStyleId: 'TableGrid',
+          tableWidth: { value: 5000, type: 'pct' },
+          justification: 'center',
+        },
+        tableCellProperties: {
+          cellWidth: { value: 2000, type: 'dxa' },
+          gridSpan: 2,
+          noWrap: true,
+        },
+      };
+
+      const result = translator.decode({ node: { attrs: { tableStyleProperties } } });
+
+      expect(result).toEqual({
+        name: 'w:tblStylePr',
+        type: 'element',
+        attributes: {},
+        elements: expect.arrayContaining([
+          {
+            name: 'w:tblPr',
+            type: 'element',
+            attributes: {},
+            elements: expect.arrayContaining([
+              { name: 'w:tblStyle', attributes: { 'w:val': 'TableGrid' } },
+              { name: 'w:tblW', attributes: { 'w:w': '5000', 'w:type': 'pct' } },
+              { name: 'w:jc', attributes: { 'w:val': 'center' } },
+            ]),
+          },
+          {
+            name: 'w:tcPr',
+            type: 'element',
+            attributes: {},
+            elements: expect.arrayContaining([
+              { name: 'w:tcW', attributes: { 'w:w': '2000', 'w:type': 'dxa' } },
+              { name: 'w:gridSpan', attributes: { 'w:val': '2' } },
+              { name: 'w:noWrap', attributes: { 'w:val': '1' } },
+            ]),
+          },
+        ]),
+      });
+    });
+
+    it('handles missing tableStyleProperties object', () => {
+      expect(translator.decode({ node: { attrs: {} } })).toBeUndefined();
+    });
+
+    it('handles empty tableStyleProperties object', () => {
+      expect(translator.decode({ node: { attrs: { tableStyleProperties: {} } } })).toBeUndefined();
+    });
+  });
+
+  describe('round-trip', () => {
+    it('maintains consistency for a complex object', () => {
+      const tableStyleProperties = {
+        tableProperties: {
+          tableStyleId: 'TableGrid',
+          tableWidth: { value: 5000, type: 'pct' },
+          justification: 'center',
+        },
+        tableCellProperties: {
+          cellWidth: { value: 2000, type: 'dxa' },
+          gridSpan: 2,
+          noWrap: true,
+        },
+      };
+
+      const decodedResult = translator.decode({ node: { attrs: { tableStyleProperties } } });
+      const encodedResult = translator.encode({ nodes: [decodedResult] });
+
+      expect(encodedResult).toEqual(tableStyleProperties);
+    });
+  });
+});