knockout.js - Knockout custom binding reseting cursor in WYSIWYG -

i have situation involving knockoutjs , jwysiwyg plugin (https://github.com/jwysiwyg/jwysiwyg ). i'm using custom binding seen below. however, whenever user updates text onto second line, updating content via binding causes cursor reset beginning of editor. whenever user pauses typing more 1 second after update, they're forced click before continue.

    ko.bindinghandlers.wysiwyg = {         init: function (element, valueaccessor, allbindingsaccessor) {         var options = allbindingsaccessor().wysiwygoptions || {};         var value = ko.utils.unwrapobservable(valueaccessor());         var $e = $(element);         $.extend(true, {             initialcontent : value         }, options);          $e.wysiwyg(options);          //handle field changing         function detectfn() {             var observable = valueaccessor();             var newvalue = $e.wysiwyg("getcontent");             observable(newvalue);         }          var current = $e.wysiwyg('document');         var timer;         current.bind({                 keyup: function(){                 cleartimeout(timer);                 timer = settimeout(detectfn, 1000);             }         });          //handle disposal (if ko removes template binding)         ko.utils.domnodedisposal.adddisposecallback(element, function() {             $e.wysiwyg('destroy');         });     },     update: function (element, valueaccessor) {         var value = ko.utils.unwrapobservable(valueaccessor());         $(element).wysiwyg("setcontent", value);         ko.bindinghandlers.value.update(element, valueaccessor);     } }; 

(the binding used this)

<textarea data-bind="wysiwyg: yourviewmodelvalue"></textarea> 

how can caret position restore cursor once update complete? or other solutions there force cursor not move when updating?

edit: jsfiddle demonstrate issue. http://jsfiddle.net/797zl/ notice happens when type on second line or beyond, pause second, causing cursor reset.

here seeing:

1. the user types text wysiwyg editor
2. the user stops typing , timeout hits after 1 second, triggering detectfn
3. detectfn grabs new value wysiwyg editor , updates observable
4. your observable, being updated, triggers update method on custom binder
5. the update method on custom binder gets value observable, , sets on wysiwyg editor
6. the wysiwyg editor, having new value set it, moves cursor top line

you can fix stopping things in middle of step 5, , updating value in wysiwyg editor if different value in observable - is, if observable updated somewhere outside of wysiwyg editor.

change update method this:

update: function (element, valueaccessor) {     var newvalue = ko.utils.unwrapobservable(valueaccessor());     var oldvalue = $(element).wysiwyg("getcontent");     if (newvalue !== oldvalue) {         $(element).wysiwyg("setcontent", newvalue);     }     // ko.bindinghandlers.value.update(element, valueaccessor); } 

i commented out last line of method... seems extraneous , i'm not sure why it's there.

also, these lines of code don't seem doing either:

$.extend(true, {     initialcontent : value }, options); 

i think trying add initialcontent property options object. can done in way:

$.extend(options, {initialcontent: value}); 

however, not needed, because update method called after init method, , value observable loaded wysiwyg editor @ time.

here fiddle updated code: http://jsfiddle.net/tlarson/797zl/2/