Search code examples
javascriptace-editor

How Optimize ace editor replace function?


I have an electron app, where I'm using ace editor. As I said in a previous post, in my app I read files, check the content and i mark lines that can be translated. Everything works fine. When the users translate the texts, i save it in a database so, if the user open some file that was previously translated, I check the "translated" texts and replace these lines for the actual translation text. Everything works good. But, some files take too long to load.

This is the replacing segment code:

    insertTranslateLines:function(trasnlate,linea,idMarker,inline,item){

        // console.log($this.__time($this.start),"ak",linea);
        var currentLine = $this.obtLinea(linea);
        trasnlateStr = trasnlate.trasnlate;
        if(inline || $this.lineaEnComillas(currentLine)){
            trasnlateStr = trasnlate.trasnlate.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 

            if(!inline){
                var endReemplazo= currentLine.lastIndexOf("\"");
                var startLine   = currentLine.indexOf("\"")+1;
                var partEnd     = startLine + trasnlateStr.length;
            }
            else{
                var texto       = currentLine.match($this.expresiones.cadenaTraducir2);
                var startLine   = currentLine.indexOf(texto[item])+1;//se suma uno para eliminar la comilla
                var partEnd     = startLine + trasnlateStr.length;
                var endReemplazo= startLine + texto[item].length-2;//se restan las comillas
                // texto = currentLine.split($this.expresiones.cadenaTraducirSplit);

            }               

            highLightRange  = $this.setRange(linea,startLine,linea,partEnd);
            replaceRange    = $this.setRange(linea,startLine,linea,endReemplazo);
            // $this.editorActual.session.replace(replaceRange,trasnlateStr);
        }else{
             replaceRange = $this.setRange(linea,0,linea,currentLine.length);
             highLightRange = $this.setRange(linea,0,linea,trasnlateStr.length);    
        }
        token = $this.editorActual.session.bgTokenizer.getTokens(linea,0);

        // $this.editorActual.session.replace(replaceRange,trasnlateStr);
        if(typeof highLightRange!='undefined'){
            $this
                .registerTrasnlate(idMarker,highLightRange);
            if(token[0].type!='comment')
            {
                $this.setMarker(idMarker,highLightRange);
            }


            return highLightRange;
        }else return false;



}

the code below, is a method from my javascript object. $this is an alias for (this (object scope)). This method gets the line where there is a text that has been translated and replaced from the orignal text. As I said before, so far everything works fine but there process takes a lot of time. Testing it, **I have detected the next line is the problem: **

$this.editorActual.session.replace(replaceRange,trasnlateStr);

As you see, this line was at the first segment of code but "commented". If i comment this line, the file loads in 391 milliseconds. but if i discomment the line, the file loads between 45000 and 60000 milliseconds (can be more, the time varies by the file size). The files have between 1000 and 1800 lines.

"$this.editorActual" is my ace editor instance. I only found the "session.replace" as method for replacing texts, and logically without this line, my app does not work. So, i would like to know if There is another fastest way to replace the lines ?wan to know. There is another fastest way to replace the lines ?


Solution

  • replace is slow because it has to keep history in undo manager and create events. You can replace translations on the string before calling setValue or craeting the session