Syntax highlighting alignment

[GoogleCodeExporter]

I have a 114 line page not using ckedit.  The page contains a mixture of HTML, 
Javascript and velocity.  By the end of the text box, the cursor is out of 
position with the text, and it's almost imposible to tell where to put the 
cursor to edit a line.

What steps will reproduce the problem?
1.Create a standard simple page
2.introduce a mixture of javascript and velocity tags for a 100+ size page

The text used is pasted below:
<script type="text/javascript">

function sortByDates(parentID){
    var search = '#'+parentID+'> .comment-content';
    var nodeList = new Array();
    $(search).each(function(){
        nodeList.push(this);
        //console.log("found node:"+$(this).html());
    }).detach();
    var sortedNodeList = sortArrayByDates(nodeList);

    var myTextField = document.getElementById(parentID);

    for (var i=0; i < sortedNodeList.length; i++){
        $(myTextField).append(sortedNodeList[i]);
    }
}

function sortArrayByDates(nodeList){    
    // add the dates
    for (var i=0; i < nodeList.length; i++){
        var thisNode = nodeList[i];       
        var dateString = $(".comment-date", thisNode).html();        
        var newDate = createDate(dateString);
        // store the new dates against the nodes
        thisNode.newDate = newDate;
        //console.log(newDate);        
    }   

    //sort by the date
    nodeList.sort(function(a,b){
        return a.newDate - b.newDate;
        });

    return nodeList;
}

function createDate(stringDate){
    stringDate =  stringDate.replace("(","");
    stringDate =  stringDate.replace(")","");
    dateStringSplit=stringDate.split(" ");
    dayPart=dateStringSplit[0];
    hourPart=dateStringSplit[1]; 
    daySplit=dayPart.split(".");
    hourSplit=hourPart.split(":");
    //new Date(year, month, day, hours, minutes, seconds, milliseconds)
    //console.log(daySplit[2],daySplit[1],daySplit[0],hourSplit[0],hourSplit[1],hourSplit[2],0);
    newDate = new Date(daySplit[2],daySplit[1]-1,daySplit[0],hourSplit[0],hourSplit[1],hourSplit[2],0); 
    //console.log("new date:",newDate);
    return newDate;       
}

function validate(name, comment) {
    if (name == '') {
        return 'Name is empty';
    }
    if (comment == '') {
        return 'Comment is empty';
    }
}

function onAddComment(pageUrl, pageTitle) {
    var name = $("#comment-form-"+pageTitle+" input[name=name]").val();
    var comment = $("#comment-form-"+pageTitle+" textarea[name=comment]").val();

    var error = validate(name, comment);
    if (error) {
        commentError(error);
        return;        
    }
    Vosao.jsonrpc.commentFrontService.addComment(function (data, e) {
        if (Vosao.serviceFailed(e)) return;
        if (data.result == 'success') {
            $("#messages").html('');
            $("#comment-form-"+pageTitle+" textarea[name=comment]").val('');
            loadComments(pageUrl, pageTitle);             
        }
        else {
            var msg = data.message;
            if (msg == "incorrect-captcha-sol") {
                msg = "incorrect captcha solution";
            }
            commentError(msg);
        }
    }, name, comment, pageUrl ,
#if($config.enableRecaptcha)
    Recaptcha.get_challenge(), Recaptcha.get_response());
    Recaptcha.reload();
#else
    '', '');
#end   
}

function commentError(msg) {
    $("#messages").html('<ul><li class="errorMessage">Error. ' + msg 
            + '</li></ul>');
}

function loadComments(pageUrl, pageTitle) {
    Vosao.jsonrpc.commentFrontService.getByPage(function(r, e) {
        if (Vosao.serviceFailed(e)) return;
        var s = "";
        if (r.list.length > 0) {                      
            for (var i = 0; i < r.list.length; i++) {
                var comment = r.list[i];
                s += 
                    '<div class="comment-content">'
                        +'<span class="comment-author">' + comment.name + '</span> '                         
                        + '<span class="comment-date">(' + comment.publishDateTime + ')</span> ' 
                        + '<div class="comment-details">' + comment.content + '</div>'
                    +'</div>';
                //console.log(comment);
            } 
        }
        $("#comments-list-"+pageTitle).html(s);
        $("#comments-num-"+pageTitle).html(r.list.length+"  Comments");
        //console.log("ajax comments list:#comments-list-"+pageTitle); 
        sortByDates("comments-list-"+pageTitle);       
  }, pageUrl );
}

</script>

<div id="blog_wrap">
  <h1 class="blog_heading1"><img src="/file/page/blog/PandPimage.jpg" alt="paul and paul"></h1>

  ## Posts number on page
  #set ($count = 5)

  #set ($pageNum = 0)
  #set ($pageParam = $request.getParameter("page"))
  #if ($pageParam)
    #set($pageNum = $math.toInteger($pageParam))
  #end
  #set ($start = $pageNum * $count)
  #set ($pages = ${service.findPageChildren("/blogg", $start, $count)})
  #set ($nextPage = $pageNum + 1)
  #set ($prevPage = $pageNum - 1)

  #foreach ($p in $sorter.sort($pages, "sortIndex"))
    <article class="blog_article_wrap">
      ${service.renderStructureContent($p.friendlyURL, "picasa-blog")}
    </article>
  #end

<div class="navigation clear">
#if ($pages.size() == $count)
  <div><a href="/blogg?page=${nextPage}">« Previous Entries</a></div>
#end
#if ($start > 0) 
  <div><a href="/blogg?page=${prevPage}">Newer Entries » </a></div>
#end
</div>

</div>

Original issue reported on code.google.com by iain.ked...@gmail.com on 18 Jan 2012 at 1:10

[GoogleCodeExporter]

I forgot to add I'm using vosao 0.9.12

Original comment by iain.ked...@gmail.com on 18 Jan 2012 at 1:11

[GoogleCodeExporter]

Same here when I edit style.css. At first it doesn't load all the text, when I 
scroll down it loads the rest of the text but cursor is not in it's real 
line/position. I think it's an issue with the new text editor.

Original comment by aaronbu...@gmail.com on 18 Jan 2012 at 3:00

[GoogleCodeExporter]

Tried on Chrome 16 and FF 9.0.1. All works fine.
What is your browser?

Original comment by kinyelo@gmail.com on 21 Jan 2012 at 10:52

[GoogleCodeExporter]

Hi, Sorry for the slow reply.  I tried it with chrome 16 and ff 9.01, with the 
text above.  Using vosao 0.9.12 and 0.9.13.

I created a new page and pasted the above text into it, the result was the same 
in both versions of vosao and both browsers.

Did you use the text I pasted above?  In 0.9.12 it looked better than 13 but 
when typing the text ended up nowhere near the cursor.

Original comment by iain.ked...@gmail.com on 1 Feb 2012 at 9:41

[GoogleCodeExporter]

Still can't reproduce Chrome 16
I've create a page with your content please check.
http://vosaocms.appspot.com/cms/#page/content/3804029

Original comment by kinyelo@gmail.com on 4 Feb 2012 at 4:08

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I've logged in to see that page and the problem is still there.  There appear 
to be three more lines than the numbers cater for (after scrolling to the 
bottom), but it's not that straight forward.

I'm using chrome "16.0.912.77 m"

Original comment by iain.ked...@gmail.com on 6 Feb 2012 at 9:45

[GoogleCodeExporter]

I use same Chrome but don't see any issues.
Please see attached screenshot.

Original comment by kinyelo@gmail.com on 6 Feb 2012 at 10:11

Attachments:

• Screenshot.png

[GoogleCodeExporter]

Could it be an operating system thing? Doubtful! I'm running Windows 7 
Enterprise. I have attached a screenshot of the link you sent.

Original comment by iain.ked...@gmail.com on 6 Feb 2012 at 11:25

Attachments:

• Capture.GIF

[GoogleCodeExporter]

I tried upgrading to 0.9.14 but I am still having problems with syntax 
highlighting.  I have a relatively small template 90 lines and the issue is 
prominent enough to be very confusing.  Any further thoughts?

Original comment by iain.ked...@gmail.com on 19 Mar 2012 at 1:04