Monaco single-line mode
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.
Solution 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/