Ckeditor5: The nested editable selection indicator is broken

[jodator]

When there are colspans/rowspans in cells the border-based selection is messed up:

I've found that the box-shadow: inset plays well:

I've used this:

.ck-widget.table {
    & td,
    & th {
        &.ck-editor__nested-editable.ck-editor__nested-editable_focused {
            border-style: none;
            box-shadow: var(--ck-inner-shadow), 0 0, inset 0px 0px 0 1px var(--ck-color-focus-border);
        }
    }
}

[Reinmar]

Let's try to fix it if @jodator's patch is ok. If not, we don't have to prioritise it.

[dtwist]

To reiterate an earlier comment on this:

Use outline instead of border:
https://codepen.io/david-twist/pen/NMQOwO?editors=1000

.highlight {
  outline: 1px solid var(--ck-color-focus-border);
  outline-offset: -1px; /* progressive enhancement - no IE support */
  box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, .1);
  background-color: rgba(71, 164, 245, .2) !important;
}

[edited example style to align with the design intent of current approach— I added a background color and subtle inner shadow, as I think it helps with comprehension]

[jodator]

Below is a comparison of a highlighting solutions on different browsers:

1. Current:

Chrome | Firefox | Edge
-----------|-----------|-------
| |

1. Using box-shadow:

Chrome | Firefox | Edge
-----------|-----------|-------
| |

1. Using outline:

Chrome | Firefox | Edge
-----------|-----------|-------
| |

---

From the above:

1. The current solution is broken on Chrome - no go.
2. The box-shadow solution is slightly worse (on Edge) from others and doesn't look so nice (also the upper shadow sometimes get lost on Edge).
3. Looks nice everywhere IMHO.

I'd go with @dtwist solution:

.ck-widget.table {
    & td,
    & th {
        &.ck-editor__nested-editable.ck-editor__nested-editable_focused {
            border-style: none;
            outline: 1px solid var(--ck-color-focus-border);
            outline-offset: -1px; /* progressive enhancement - no IE support */
        }
    }
}

@oleq & @dkonopka Let me know if you wish to change the background as well.

[oleq]

The solution is not perfect because there's often a border next to the outline but it definitely looks better than it used to.