feature: RTL Support

[hamidKMB]

right now the RTL direction looks like a disaster. it'll be very great if your team implements this feature

[neSpecc]

Thanks, @hamidKMB . First, let's update your issue with details. Create a list of bad-looking places

[neSpecc]

@hamidKMB Seems clear now. You can try to resolve these problems.

[KoushyarHB]

Does anyone have any success in resolving these issues? I'm dealing with the same problem

[SMohsenM]

To enable RTL support for this plugin, we need to make some adjustments. First, we should add CSS rules for RTL, ensuring that any positional properties are changed from left to right. like this one:

html[dir=rtl] {
  .tc-table {
    &::after {
      right: calc(-1 * var(--cell-size));
      left: unset;
    }

    &::before {
      right: 0;
      left: unset
    }
  }
}

Next, the more complex part is the getHoveredCell method in the table class, which currently relies on positional properties to find the hovered cell. We can replace this method with an approach like this:

  getHoveredCell(event: MouseEvent) {
    const target = event.target as HTMLElement
    let columnIndex = 0;
    const currentRow = target.parentElement!
    for (columnIndex = 0; columnIndex < currentRow.children.length; columnIndex++) {
      if (target.parentElement!.children[columnIndex] === target) {
        break
      }
    }
    let rowIndex = 0;
    for (rowIndex = 0; rowIndex < this.table!.children.length; rowIndex++) {
      if (this.table!.children[rowIndex] === currentRow) {
        break
      }
    }
    return {
      row: rowIndex + 1,
      column: columnIndex + 1
    }
  }

Finally, we need to modify the updateToolboxesPosition method to handle right-aligned positioning for RTL.

  updateToolboxesPosition(row = this.hoveredRow, column = this.hoveredColumn) {
    if (!this.isColumnMenuShowing) {
      if (column > 0 && column <= this.numberOfColumns) { // not sure this statement is needed. Maybe it should be fixed in getHoveredCell()
        this.toolboxColumn.show(() => {
          return document.querySelector('html[dir=rtl]') === undefined
          ? {
            left: `calc((100% - var(--cell-size)) / (${this.numberOfColumns} * 2) * (1 + (${column} - 1) * 2))`
          }
          : {
            right: `calc((100% - var(--cell-size)) / (${this.numberOfColumns} * 2) * (1 + (${column} - 1) * 2) - var(--cell-size))`
          };
        });
      }
    }
...
}