Single line Ace editor

Question

I'm trying to set up an Ace editor with only one single line of text.

The idea is to mimic the behaviour of an <input type="text"> box, but with syntax colouring:

Currently if the user presses Enter while in the editor, it creates a new line:

So my question is:

How can I set up Ace to allow one single line only, like a standard text input box?

Below is what I've tried so far, and the reasons why it didn't succeed.

• Calling editor.undo() on change if e.lines.length > 1

  The problem is, change gets triggered before the actual change is applied in the deltas, so the undo() doesn't work here (or it concerns the previous delta)

• Cancelling keypress if Event.which = 13

  It kind of works but is very dirty, and it does not handle the case where multiple-lines text is pasted, so we'd need to handle paste event as well - which would make this solution even dirtier. I'm also pretty confident there would be even more edge cases to take into account.

• Trying to "empty" e in on("change", function(e) { ... })

  For instance, saying that e = {} in the callback function, provided that e is just a reference to the actual object. No effect whatsoever.

• Trying to find a built-in parameter in Ace editor to do that

  No success in finding such a parameter yet...

Answer 1

you can use the following code to make editor behave similar to input type="text" (mostly taken from https://github.com/ajaxorg/ace/blob/v1.2.0/demo/kitchen-sink/layout.js#L103)

var el = document.getElementById("textbox")
var editor = ace.edit(el);
editor.setOptions({
    maxLines: 1, // make it 1 line
    autoScrollEditorIntoView: true,
    highlightActiveLine: false,
    printMargin: false,
    showGutter: false,
    mode: "ace/mode/javascript",
    theme: "ace/theme/tomorrow_night_eighties"
});
// remove newlines in pasted text
editor.on("paste", function(e) {
    e.text = e.text.replace(/[\r\n]+/g, " ");
});
// make mouse position clipping nicer
editor.renderer.screenToTextCoordinates = function(x, y) {
    var pos = this.pixelToScreenCoordinates(x, y);
    return this.session.screenToDocumentPosition(
        Math.min(this.session.getScreenLength() - 1, Math.max(pos.row, 0)),
        Math.max(pos.column, 0)
    );
};
// disable Enter Shift-Enter keys
editor.commands.bindKey("Enter|Shift-Enter", "null")

#textbox {
    font-size: 30px;
    border:solid 2px gray;
}
body{
   background: #161619;
   padding: 40px 20px
}

<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>


<div id=textbox>var a = 1</div>