Keybinding UI editor should support context key suggestions

[jrieken]

Follow up from #9303 (comment)

I have added a completion item provider for context keys. For the keybindings UI this isn't working yet and what's needed is

1. use the simple editor widget as the input when authoring when-clauses
2. build a similar completion item provider (using internal API) that uses the same data source (RawContextKey#all)

[sandy081]

Started using SuggestEnabledInput (Code Editor) for when input and I am seeing following issues with the code editor

1. Suggest widget is showing far away from the editor.

2. I listen on Enter key and accept the when text. This is causing problem when I am accepting an option from suggest list using Enter. Is there a way to prevent this to happen?

@jrieken / @alexdima Your expertise would be very helpful here.

You can find changes here - #170291

[jrieken]

I listen on Enter key and accept the when text

Pretty sure that you need to use the keybindings service instead, e.g don't listen to keydown/up event directly

Suggest widget is showing far away from the editor.

ops... that seems very wrong, both widgets are normal content/overlay widgets

[sandy081]

Pretty sure that you need to use the keybindings service instead, e.g don't listen to keydown/up event directly

Right. I am using keybindings to accept/reject when expression changes. And it fixed the second issue. Thanks.

Issue with suggest widget is only pending.

[sandy081]

Investigated the issue with overflow content widget misplacement and here is what I found:

This seems to be a bug with editor overflowing content widget position value set to fixed. According to the docs, when position value is set to fixed then the position of the element will be relative to its containing block, which is https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

In keybindings editor, the table widget (extending list widget) has the ancestor rows element with transform and contain css property set. Hence overflowing content widgets are drawn relative to the table rows element. This can be confirmed by disabling the transformOptimization on the table widget that does not set above css properties.

This means, embedding a code editor widget inside any node that has these css properties set will break the position of the overflowing content widgets

CC @alexdima / @hediet for editor related.
CC @joaomoreno for table/list related.

Can you please let me know what is the right way to proceed here. Does it makes sense to disable transformation for keybindings table? Or this shall has to be fixed in editor?

[sandy081]

It seems the trick is to use overflowWidgetsDomNode option in the code editor. But it seems to work only for content widgets but not for overlay widgets - like suggest element details. Using the same overflowWidgetsDomNode for overlay widgets fixes it.

[sandy081]

For now disabled table transformations and created a separate PR to fix it in the editor - #170632.

[sandy081]

Verify that while editing when column in keyboard shortcuts editor shows the list of context key suggestions.

[jrieken]

I see this is implemented but it's also mostly broken because it doesn't work with prefixes #172385