fix(super-converter): fix table-cell shading export — strip # prefix and emit val="clear" (SD-3142)

packages/super-editor/src/editors/v1/core/super-converter/helpers.js

@@ -530,7 +530,7 @@ const resolveShadingFillColor = (shading) => {
   if (!shading || typeof shading !== 'object') return null;
 
   const fill = normalizeHexColor(shading.fill);
-  if (!fill) return null;
+  if (!fill || !isValidHexColor(fill)) return null;
 
   const val = typeof shading.val === 'string' ? shading.val.trim().toLowerCase() : '';
   const pctMatch = val.match(/^pct(\d{1,3})$/);

packages/super-editor/src/editors/v1/core/super-converter/helpers.test.js

@@ -10,6 +10,7 @@ import {
   dataUriToArrayBuffer,
   detectImageType,
   eighthPointsToPixels,
+  resolveShadingFillColor,
 } from './helpers.js';
 
 describe('polygonToObj', () => {
@@ -560,3 +561,39 @@ describe('eighthPointsToPixels', () => {
     });
   });
 });
+
+describe('resolveShadingFillColor', () => {
+  it('returns null for null input', () => {
+    expect(resolveShadingFillColor(null)).toBeNull();
+  });
+
+  it('returns null for non-object input', () => {
+    expect(resolveShadingFillColor('FFFFFF')).toBeNull();
+  });
+
+  it('returns normalized 6-char hex for a solid fill', () => {
+    expect(resolveShadingFillColor({ fill: 'FF00FF', val: 'clear' })).toBe('FF00FF');
+  });
+
+  it('normalizes lowercase hex to uppercase', () => {
+    expect(resolveShadingFillColor({ fill: 'ff00ff' })).toBe('FF00FF');
+  });
+
+  it('returns null for w:fill="auto" (not a valid hex color)', () => {
+    expect(resolveShadingFillColor({ fill: 'auto', val: 'clear' })).toBeNull();
+  });
+
+  it('returns null when fill is missing', () => {
+    expect(resolveShadingFillColor({ val: 'clear' })).toBeNull();
+  });
+
+  it('blends foreground into background for pct patterns', () => {
+    // pct50 = 50% black (#000000) over white (#FFFFFF) → #808080
+    const result = resolveShadingFillColor({ fill: 'FFFFFF', color: '000000', val: 'pct50' });
+    expect(result).toBe('808080');
+  });
+
+  it('returns the fill directly when val is not a pct pattern', () => {
+    expect(resolveShadingFillColor({ fill: 'ABCDEF', val: 'solid' })).toBe('ABCDEF');
+  });
+});

packages/super-editor/src/editors/v1/core/super-converter/v3/handlers/w/tc/helpers/translate-table-cell.js

@@ -1,4 +1,4 @@
-import { pixelsToTwips, inchesToTwips, twipsToPixels } from '@converter/helpers';
+import { pixelsToTwips, inchesToTwips, twipsToPixels, normalizeHexColor, isValidHexColor } from '@converter/helpers';
 import { translateChildNodes } from '@converter/v2/exporter/helpers/index';
 import { translator as tcPrTranslator } from '../../tcPr';
 import {
@@ -73,8 +73,11 @@ export function generateTableCellProperties(node) {
 
   // Background
   const { background = {} } = attrs;
-  if (background?.color && tableCellProperties.shading?.fill !== background?.color) {
-    tableCellProperties['shading'] = { fill: background.color };
+  if (background?.color) {
+    const fill = normalizeHexColor(background.color);
+    if (fill && isValidHexColor(fill) && tableCellProperties.shading?.fill?.toUpperCase() !== fill) {
+      tableCellProperties['shading'] = { fill, val: 'clear' };
+    }
   } else if (!background?.color && tableCellProperties?.shading?.fill) {
     delete tableCellProperties.shading;
   }

packages/super-editor/src/editors/v1/core/super-converter/v3/handlers/w/tc/helpers/translate-table-cell.test.js

@@ -43,8 +43,9 @@ describe('translate-table-cell helpers', () => {
     // gridSpan
     expect(byName['w:gridSpan'].attributes['w:val']).toBe('2');
 
-    // background
-    expect(byName['w:shd'].attributes['w:fill']).toBe('#FF00FF');
+    // background — OOXML requires bare 6-char hex (no #) and w:val="clear" for solid fills
+    expect(byName['w:shd'].attributes['w:fill']).toBe('FF00FF');
+    expect(byName['w:shd'].attributes['w:val']).toBe('clear');
 
     // tcMar
     const mar = byName['w:tcMar'];
@@ -116,6 +117,21 @@ describe('translate-table-cell helpers', () => {
     expect(byName['w:tcW']).toBeTruthy();
   });
 
+  it('generateTableCellProperties strips # from background color and adds val:clear', () => {
+    const node = { attrs: { background: { color: '#A1B2C3' } } };
+    const tcPr = generateTableCellProperties(node);
+    const shd = tcPr.elements.find((e) => e.name === 'w:shd');
+    expect(shd.attributes['w:fill']).toBe('A1B2C3');
+    expect(shd.attributes['w:val']).toBe('clear');
+  });
+
+  it('generateTableCellProperties does not write w:shd for non-hex background (e.g. auto)', () => {
+    const node = { attrs: { colwidth: [100], widthUnit: 'px', background: { color: 'auto' } } };
+    const tcPr = generateTableCellProperties(node);
+    const shd = tcPr.elements.find((e) => e.name === 'w:shd');
+    expect(shd).toBeUndefined();
+  });
+
   it('translateTableCell wraps children with tcPr as the first element', async () => {
     const params = {
       node: { attrs: { colwidth: [60], widthUnit: 'px' } },