ACE Editor: Display content progressively

Question

I'm trying to display a string progressively in ACE, but I'm facing an issue.

In the Api documentation, I can find a function "setValue" but it replaces the already added content. What I want to do is display my string gradually like someone wrote thus to add content through a method "addContent".

The following code snippets shows how I implements ace editor:

The HTML:

    <pre id="editor"></pre>

The Javascript:

    $(document).ready(function() {
        var editor = ace.edit("editor");

        // Disable warn message in console. Advised by Ace developers.
        editor.$blockScrolling = Infinity;

        var options = {
            animatedScroll: true,
            autoScrollEditorIntoView: true,
            fontSize: 16,
            mode: "ace/mode/php",
            scrollSpeed: 1,
            showFoldWidgets: false,
            showPrintMargin: false,
            theme: "ace/theme/dreamweaver"
        };

        editor.setOptions(options);

        getFileRaw(editor);
        setInterval(function() { getFileRaw(editor); }, 60000)
    });

The function "getFileRaw" allows me to retrieve content from an URL. There it is:

    var getFileRaw = function(editor) {
        var routes = [
            {url: 'https://api.github.com/repos/IDCI-Consulting/GenealogyBundle/contents/Controller/ImageController.php',             language: 'php'},
            {url: 'https://api.github.com/repos/IDCI-Consulting/GenealogyBundle/contents/Repository/ElementRepository.php',           language: 'php'},
            {url: 'https://api.github.com/repos/IDCI-Consulting/ExtraFormBundle/contents/Controller/ApiController.php',               language: 'php'},
            {url: 'https://api.github.com/repos/IDCI-Consulting/SimpleMetadataBundle/contents/Resources/views/Form/fields.html.twig', language: 'twig'},
            {url: 'https://api.github.com/repos/IDCI-Consulting/BrowserCapabilities/contents/js/codebarReader.js',                    language: 'javascript'}
        ];

        // get a random file object
        var file = routes[Math.floor(Math.random() * routes.length)];

        $.ajax({
            url: file.url,
            method: "GET",
            success: function(fileRaw) {
                // Github api provides the fileraw's content encoded in base64 format. We need to use atob() function to decode it.
                var content = atob(fileRaw.content);

                editor.getSession().setMode("ace/mode/"+file.language);

                // Here I will call a function 'showText' that display the string letter by letter.
                // I need to use a method that add content instead of replace it

                editor.getSession().setValue(content);
            }
        });
    };

Finally, here is my function that display progressively my string:

var showText = function (editor, message, index) {   
    if (index < message.length) {
        editor.addValue(message[index++]); // the desired function
        setTimeout(function () { showText(target, message, index); }, 500);
    }
 };

If someone could enlighten me because I'm really stuck.

Hope I was clear in my remarks

Answer 1

you can use editor.session.insert, here's complete showText with dynamic delay between keypresses

var showText = function (editor, message, index, delay) {
    if (index < message.length) {
        // insert at cursor
        editor.session.insert(editor.getCursorPosition(), message[index++]);
        // clear selection just in case there was something selected
        editor.selection.clearSelection();
        // make sure cursor is visible
        editor.renderer.scrollCursorIntoView();

        // adjust delay after typing a space
        if (/\s/.test(message[index - 1])) delay = 0
        setTimeout(function () {
            showText(editor, message, index, (delay + 1) || 0);
        }, 90 - 15 * Math.min(delay||0, 5));
    }
};
showText(editor, "\nmessage\nmy message", 0)