feature: RTL Support

[hamidKMB]

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

[hamidKMB]

I'd like to help your team develop this feature, just let me know how I can do this

[neSpecc]

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

[hamidKMB]

hi @neSpecc .
I hope you doing well.

I created an editorjs playground in codesandbox you can check it if you want to test the below items
playground codesandbox https://codesandbox.io/s/editor-js-forked-r6gtt6?file=/src/editor.js:

** better to open it in new window **

before everything I have to mention that plus the bad-looking parts there are some functionality problems that I've mentioned below

Bad-looking Problems
1- the add-column button integrated with the table

2- the column toolbox selects the wrong column

3- both LTR and RTL direction shows the sider-quick-compose-btn element like below

Functionality Problems:

1. the add-column integrated with the table not working at all. even hovering does not apply to it
2. in the column toolbox doesn't matter user clicks on add a column to the left or right, it always adds a column to the left

===============================================================================

the rows toolbox and button integrated with the table work fine and haven't any problem

[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))`
          };
        });
      }
    }
...
}