CODEWITHSUNDEEP
javascriptjqueryace-editor
RyanY
RyanY

Reputation: 665

JQuery and ACE-Editor not playing well together

I am building some modules to teach intro coding concepts to some of my students http://jsbin.com/pacaxoza/3/edit

When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).

In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.

The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.

Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?

Thanks

Upvotes: 1

Views: 512

Answers (1)

a user
a user

Reputation: 24104

Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example

Upvotes: 0

Related Questions