The live preview of the table cell background should work with multiple-cell selection

[oleq]

📝 Provide detailed reproduction steps (if any)

When the selection is in a cell, it works just fine. But when we display selected cell styles for multi-selection, they override the background.

This is almost impossible to fix unless we drop selected table cells' backgrounds completely in favor of borders.

📃 Other details

Somehow but not directly related #6425.

cc @panr

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[panr]

Yeah, I know. Just wanted to issue it too 🙈

This is almost impossible to fix

Not really, when we move selection color to :after element then we can create a sami-transparent overlay over the cells. This may cause some other issues (related to position: relative on td.ck-editor__editable_selected), but... we can try it ;-)

[Reinmar]

@panr Could you make a quick POC?

[oleq]

I checked and

td.ck-editor__editable.ck-editor__nested-editable {
    position: relative;
}

td.ck-editor__editable.ck-editor__nested-editable::after {
    content: "";
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: .2;
}

gives promising results

[oleq]

Related #6425.

[panr]

Having this fix ckeditor/ckeditor5-theme-lark#282 I think we can also improve :focus state and deal with this #6425, which I rethinked due to the some obstacles in styling multi selection to look more like a native solution. We can leave our blueish layer over the cells then.