Ace: click event on the keyword

Created on 7 Feb 2012  路  2Comments  路  Source: ajaxorg/ace

i'm trying to assign click event on highlighted keywords like this:

 $('.ace-keyword').live('click', function(){
      alert($(this));
 });

but it's not working. Is it a bug or i just doing this wrong?

Most helpful comment

ace adds only dom nodes only for visible text
and whole dom is reconstructed every time user scrolls or types something
so using code from your example would be wasteful

also to changing parts of the dom have pointer-events: none style applied to not break scrolling on safari

here's an example which highlights clicked token

var Range = require("ace/range").Range, markerId
var handler = function(e){
    var editor = e.editor
    console.log(e)
    var pos = editor.getCursorPosition()
    var token = editor.session.getTokenAt(pos.row, pos.column)
    if (/\bkeyword\b/.test(token.type))
        console.log(token.value, 'is a keyword')

    // add highlight for the clicked token
    var range = new Range(pos.row, token.start,
        pos.row, token.start + token.value.length)
    console.log(range)
    editor.session.removeMarker(markerId)
    markerId = editor.session.addMarker(range, 'ace_bracket red')
}
editor.on("click", handler)

All 2 comments

ace adds only dom nodes only for visible text
and whole dom is reconstructed every time user scrolls or types something
so using code from your example would be wasteful

also to changing parts of the dom have pointer-events: none style applied to not break scrolling on safari

here's an example which highlights clicked token

var Range = require("ace/range").Range, markerId
var handler = function(e){
    var editor = e.editor
    console.log(e)
    var pos = editor.getCursorPosition()
    var token = editor.session.getTokenAt(pos.row, pos.column)
    if (/\bkeyword\b/.test(token.type))
        console.log(token.value, 'is a keyword')

    // add highlight for the clicked token
    var range = new Range(pos.row, token.start,
        pos.row, token.start + token.value.length)
    console.log(range)
    editor.session.removeMarker(markerId)
    markerId = editor.session.addMarker(range, 'ace_bracket red')
}
editor.on("click", handler)

thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mkosieradzki picture mkosieradzki  路  4Comments

mafar picture mafar  路  4Comments

dimroc picture dimroc  路  6Comments

bostondevin picture bostondevin  路  5Comments

xfix picture xfix  路  5Comments