CODEWITHSUNDEEP
javascriptcodemirror
Sap
Sap

Reputation: 5291

CodeMirror batch changes

Is there a way to batch the changes in codemirror API? For example I am using the changes API to capture change event but if a user were to keep one of the letter on keyboard pressed he/she will get multiple entries in the changes array. Is there an event that would buffer these changes and only get called with one object in the array. 

Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+delete" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input" } editor.jsp:71:3
Object { from: Object, to: Object, text: Array[1], removed: Array[1], origin: "+input"

Upvotes: 1

Views: 593

Answers (1)

Pete TNT
Pete TNT

Reputation: 8403

The change event occurs always after user changes the CodeMirror <textarea>. These events, however, are buffered as history-objects which you can reach, modify and reuse to your liking using the doc.getHistory() and doc.setHistory() methods:

var cm = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
        mode: "javascript",
        theme: "default",
        lineNumbers: true,
        pollInterval: 100
});
    
document.getElementById("foo").addEventListener("click", function () {
    console.log(cm.getDoc().getHistory());  
    //check console for done and undone objects
});

HTML:

<button id="foo">See console after clicking me</button>
    
<textarea rows="4" cols="50" name="codesnippet_editable" id="codesnippet_editable">
// Write some code here
</textarea>

Fiddle: http://jsfiddle.net/1kg2y0w5/

You can use pollInterval to change how often your history-objects are generated

pollInterval: number

Indicates how quickly CodeMirror should poll its input textarea for changes (when focused). Most input is captured by events, but some things, like IME input on some browsers, don't generate events that allow CodeMirror to properly detect it. Thus, it polls. Default is 100 milliseconds.

This works in situations where user is holding a key down too: despite holding the key down longer than the polling interval, only one object is created.

Upvotes: 1

Related Questions