How does the cursor work in Ace

Question

I am pretty intrigued by how Ace works.

I am curious how the cursor is able to move between each character in the divs/spans either by click or by pressing the arrow keys.

I am also intrigued by how the highlight on text works when you select it(kind of turns greyish in the demo)

Would appreciate it if anybody can shed some light on these matters.

Thanks in advance.

Answer 1

In Ace I basically treat the DOM as a drawing API. Everything you see is "drawn" using absolutely positioned DIV and SPAN elements. Text is drawn using SPANs, lines (e.g. the cursor or selections) are DIVs, etc.

To position everything correctly I first mesure the height and width of a character. That's aslo the reason Ace only works with mono spaced fonts.

When you click inside of Ace I calculate the relative position of the mouse inside of the editor using getBoundingClientRect and then translate this into character positions using the measured character size. Navigating with the keyboard is similar.

Answer 2

When I inspect the demo page and move the cursor by hitting the arrow keys the style.left attribute of the cursor div moves by 7px in the appropiate direction. For up and down it's 15px, the exact size of the spans used to display the text.

For the selection they are using a div with the class name ace_selection which then gets placed with an absolute position.

I suggest inspecting the demo with chrome or firefox to get a closer look at it. You can see how they create new divs and modify the div's attributes with every action you take.