Problem in setting different styling for custom table cell for each cell in a selection

[martinmolema]

Hello everyone,

I want to change the borders on my table cells. So I use the table, row and cell extensions and created a custom extension for the cells. When applying a new styling using the code below all works well:

 this.editor.commands.updateAttributes('tableCell', {
          borderTopWidth: this.currentTableCellBorderWeight,
          borderTopColor: this.currentTableCellBorderColor,
          borderTopStyle: this.currentTableCellBorderStyle,
        });

The custom cell is defined as below:

import { TableCell } from '@tiptap/extension-table-cell';
import {getStyleValue} from "../helper-classes/image.styles";

export const CustomTableCell = TableCell.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      backgroundColor: {
        default: null,
        parseHTML: element => element.style.backgroundColor || null,
        renderHTML: attributes => {
          if (!attributes.backgroundColor) {
            return {};
          }
          return {
            style: `background-color: ${attributes.backgroundColor}`,
          };
        },
      },
      borderTopWidth:    {default: null, parseHTML: (element: HTMLImageElement) => getStyleValue(element.style.borderTopWidth, 'px'),    renderHTML: (attributes) => {return attributes.borderTopWidth    ? {style: `border-Top-Width: ${attributes.borderTopWidth}px`} : {};}},
      borderRightWidth:  {default: null, parseHTML: (element: HTMLImageElement) => getStyleValue(element.style.borderRightWidth, 'px'),  renderHTML: (attributes) => {return attributes.borderRightWidth  ? {style: `border-Right-Width: ${attributes.borderRightWidth}px`} : {};}},
      borderBottomWidth: {default: null, parseHTML: (element: HTMLImageElement) => getStyleValue(element.style.borderBottomWidth, 'px'), renderHTML: (attributes) => {return attributes.borderBottomWidth ? {style: `border-Bottom-Width: ${attributes.borderBottomWidth}px`} : {};}},
      borderLeftWidth:   {default: null, parseHTML: (element: HTMLImageElement) => getStyleValue(element.style.borderLeftWidth, 'px'),   renderHTML: (attributes) => {return attributes.borderLeftWidth   ? {style: `border-Left-Width: ${attributes.borderLeftWidth}px`} : {};}},

      borderTopColor:    {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderTopColor,    renderHTML: (attributes) => { return attributes.borderTopColor    ? {style: `border-Top-Color: ${attributes.borderTopColor}`} : {};}},
      borderRightColor:  {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderRightColor,  renderHTML: (attributes) => { return attributes.borderRightColor  ? {style: `border-Right-Color: ${attributes.borderRightColor}`} : {};}},
      borderBottomColor: {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderBottomColor, renderHTML: (attributes) => { return attributes.borderBottomColor ? {style: `border-Bottom-Color: ${attributes.borderBottomColor}`} : {};}},
      borderLeftColor:   {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderLeftColor,   renderHTML: (attributes) => { return attributes.borderLeftColor   ? {style: `border-Left-Color: ${attributes.borderLeftColor}`} : {};}},

      borderTopStyle:    {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderTopStyle,    renderHTML: (attributes) => {return attributes.borderTopStyle    ? {style: `border-Top-Style: ${attributes.borderTopStyle}`} : {};}},
      borderRightStyle:  {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderRightStyle,  renderHTML: (attributes) => {return attributes.borderRightStyle  ? {style: `border-Right-Style: ${attributes.borderRightStyle}`} : {};}},
      borderBottomStyle: {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderBottomStyle, renderHTML: (attributes) => {return attributes.borderBottomStyle ? {style: `border-Bottom-Style: ${attributes.borderBottomStyle}`} : {};}},
      borderLeftStyle:   {default: null, parseHTML: (element: HTMLImageElement) => element.style.borderLeftStyle,   renderHTML: (attributes) => {return attributes.borderLeftStyle   ? {style: `border-Left-Style: ${attributes.borderLeftStyle}`} : {};}},
    };
  },
});

SO after a LOT OF tries and learning from 'the net' and the documentation I came to this function below. What I can see in the console-log is e.g.:
Node at depth 0: doc
Node at depth 1: table
Node at depth 2: tableRow
Node at depth 3: tableCell
finding selection dimensions
applying changes 10 steps

However, although the renderHTML() for all cells is being called (I checked using yet more console.logs) the attribute list passed to the renderHTML() attributes only contain the default values (null) and no changes are visible.

Again: when using this.editor.commands.updateAttributes('tableCell', works as expected.

I have tried many variants of the function below. First I thought there was a problem with the tableCell node, the contents or container node not being used and a lot of other things. However, I cannot seem it to propagate the changes.

Is there some pre-condition I am missing here? Is it not possible to manipulate the selection cell-by-cell?

Any help is greatly appreciated. Been trying this for a few days now.....

  testTableSelection(s:string): void {
    const view = this.editor.view;
    const state = this.editor.state;

    if (!(state.selection instanceof CellSelection)) {
      return ;
    }
    const selection = state.selection as Selection;

    const ranges = [...selection.ranges];
    const  $from  = state.selection.$from;

    for (let depth = 0; depth <= $from.depth; depth++) {
      console.log(`Node at depth ${depth}:`, $from.node(depth).type.name);
    }

    const tr = state.tr;
    let startCol = 9999;
    let endCol = -1;
    let startRow = 9999;
    let endRow = -1;
    console.log( `finding selection dimensions`);
    ranges.forEach(nodePos => {
      const $from = nodePos.$from;
      const colIndex = $from.index($from.depth - 1);
      const rowIndex = $from.index($from.depth - 2);

      startCol = Math.min(startCol, colIndex);
      endCol   = Math.max(endCol, colIndex);
      startRow = Math.min(startRow, rowIndex);
      endRow   = Math.max(endRow, rowIndex);
    });

    ranges.forEach(nodePos => {
      const $from = nodePos.$from;
      const node = $from.node();
      const pos = $from.pos;

      const colIndex = $from.index($from.depth - 1);
      const rowIndex = $from.index($from.depth - 2);

      if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
        if (colIndex === startCol) {
          tr.setNodeMarkup(pos, undefined, {
            ...node.attrs,
            borderLeftColor: 'pink',
            borderLeftWidth: 4,
            borderLeftStyle: 'solid'
          });
        }
        else if (colIndex === endCol) {
          tr.setNodeMarkup(pos, undefined, {
            ...node.attrs,
            borderRightColor: 'pink',
            borderRightWidth: 4,
            borderRightStyle: 'solid'
          });
        }
        else if (rowIndex === startRow) {
          tr.setNodeMarkup(pos, undefined, {
            ...node.attrs,
            borderTopColor: 'pink',
            borderTopWidth: 4,
            borderTopStyle: 'solid'
          });
        }
        else if (rowIndex === endRow) {
          tr.setNodeMarkup(pos, undefined, {
            ...node.attrs,
            borderBottomColor: 'pink',
            borderBottomWidth: 4,
            borderBottomStyle: 'solid'
          });
        }
      }
    })
    if (tr.steps.length) {
      console.log(`applying changes ${tr.steps.length} steps`);
      view.dispatch(tr);
    }
  }