Monaco single-line mode

Question

I'm trying to use Monaco as single-line editor for autocompletion and syntax highlighting, somewhat similiar to the excel formula editor:

What I've got so far:

  let element = document.getElementById("searchbar");
                element.innerHTML = "";
                let searchEditor = monaco.editor.create(element, {
                    value: "Patient?",
                    language: "url",
                    minimap: {enabled: false},
                    lineNumbers: 'off',
                    glyphMargin: false,
                    folding: false,
                    scrollbar: {
                        vertical: "hidden",
                        horizontal: "auto"
                    },
                    fontSize: 16,
                    theme: "myCoolTheme",
                    scrollBeyondLastLine: false,
                    overviewRulerLanes: 0,
                    overviewRulerBorder: false,
                    hideCursorInOverviewRuler: true
                });
                (<any>window).searchEditor = searchEditor;
                window.addEventListener("resize", function () {
                    (<any>window).searchEditor.layout();
                });
                // let myBinding = searchEditor.addCommand(monaco.KeyCode.Enter,
                // );
                searchEditor.onKeyDown(function (e: IKeyboardEvent) {
                    if (e.keyCode === KeyCode.Enter) {
                        //TODO: Maybe there is a public API for this?
                        if ((<any>searchEditor)._contentWidgets["editor.widget.suggestWidget"].widget.state !== 3) {
                            that.$emit('startRequest', searchEditor.getValue());
                            e.stopPropagation();
                            e.preventDefault();
                        } else {

                        }
                    }

                });

I'm pretty happy with this so far. However, does anybody have an idea how to center the line in the editor? The height of the field is calculated by CSS, so I do not know it in advance.

Answer 1

A vue componet vue-monaco-singleline: https://github.com/vikyd/vue-monaco-singleline

• single line options
• placeholder support

Demo: https://vikyd.github.io/vue-monaco-singleline-custom-language/

Answer 2

Another possibility would be following this approach. Look for Monaco on a single line.