notebooks: Migrate query inputs from Monaco to CodeMirror

Created by: fkling

This commit migrates the Monaco instances used by Notebooks as query inputs to use CodeMirror instead. It also refactors parts of the existing CodeMirror query input code to make it more reusable.

I'm sorry for the big diff, I'll point out the most important changes:

All instances use <CodeMirrorQueryInput /> which provides the basic logic for syntax highlighting and token information (but not autocompletion or any specific keybindings). Example:

                <CodeMirrorQueryInput
                    value={queryInput}
                    isLightTheme={isLightTheme}
                    onEditorCreated={onEditorCreatedLocal}
                    patternType={SearchPatternType.literal}
                    interpretComments={true}
                    extensions={useMemo(
                        () => [blockKeymap({ runBlock }), changeListener(setQueryInput), singleLine, extension ?? []],
                        [setQueryInput, runBlock, extension]
                    )}
                />

A couple of extensions have been created/exported to make creating query inputs with the desired behavior easier:

• blockKeymap: Notebooks specific extension for defining Mod+Enter and Escape keybindings.
• singleLine exported from the core CodeMirror query input code to easily create single line query inputs.
• editorHeight was created to allow specifying a fixed and/or max editor height
• createDefaultSuggestions was updated to allow specifying which completions should be supported.

Since autocompletion/intelligence logic is shared between CodeMirror instances, the autocompletion logic is initialized in the respective files (NotebookQueryBlock, NotebookFileBlockInputs, NotebookSymbolInputs)

A reference to the editor instance is now directly maintained within the SearchTypeSuggestionsInput (vs it being passed down from the parent).

The example filter buttons used to update to notify the parent component about the value change and then update the text selection after the component re-rendered. Now the order is reversed: The buttons directly update the editor input (including text selection), which automatically triggers notifying the parent component.

I consolidated setQueryInput and debouncedSetQueryInput. It looks like it was only needed to make the example filter buttons apply immediately but they do that now due to inverting the flow.

Preventing CodeMirror from treating the focus Enter keypress as input can be more easily done by prevent the default event behavior.

Test plan

Integration tests and manual inspection.

App preview:

• Web

Check out the client app preview documentation to learn more.