IE 11/10 large amount of text - crashes

[carlo-feudo]

Hi, on IE 11/10 when you have angular-summernote initialised with a fair amount of text and then you try to hit enter and write other text it crashes (not responding).

Could it be that the binding is too heavy ? I have tried the plain component summer-note and it doesn't seem to have this problem http://summernote.org/#/

Could you please try to figure out the problem?

Cheers mate, Carlo

[outsideris]

If you provide how many text cause crashes, it is very helpful to reproduce it.

[carlo-feudo]

Hi man, thanks for your reply, the thing is that we actually don't know, we only see that after 3-4 enter (html mode) something gets triggered and the CPU gets to 100% after a minute it responds again. The angular-summer note lives inside a quite heavy Angular app.

Thanks Carlo

[outsideris]

I got it. I will try to test it. Thank you for reporting.

[carlo-feudo]

Cheers, Carlo

[gabrielguerrero]

Hi I did a few test in IE11 it doesn't crash but it hangs for a few seconds so you can't type, i did not test IE10, if I remove the ng-model the problem is gone, after a lot of digging I think the problem is that summernote onChange calls updateNgModel method and this is calling $apply very fast while you type,so I commented it and is working fine in IE11 , the method looks like

var updateNgModel = function() {
        var newValue = element.code();
        if (ngModel && ngModel.$viewValue !== newValue) {
          ngModel.$setViewValue(newValue);
//          if ($scope.$$phase !== '$apply' || $scope.$$phase !== '$digest' ) {
//            scope.$apply();
//          }
        }
      };

Generally my understanding of the apply is that you call it to make angular rerender but because that call is comming from summernote and is already rendered not sure if there is a need , the other way is to call the apply in a $timeout and use the promise it returns to cancel it if is already launch like

var promise = undefined;
      var updateNgModel = function() {
        var newValue = element.code();
        if (ngModel && ngModel.$viewValue !== newValue) {
          ngModel.$setViewValue(newValue);
//          if ($scope.$$phase !== '$apply' || $scope.$$phase !== '$digest' ) {
//            scope.$apply();
//          }
            if (promise) $timeout.cancel(promise);
            promise = $timeout(function(){
                scope.$apply();
            },400);
        }
      }; 

That works as well in IE11

Hope it helps Cheers Gabriel

[carlo-feudo]

Hi man, any news about this ? please

Thanks Carlo

[outsideris]

@carlo-feudo Sorry. I'm pretty busy for my job. I guess I can check this issue next weekend.

[outsideris]

Hi @carlo-feudo I dig this problem, but I couldn't reproduce the crash. @gabrielguerrero 's code is very helpful and give me some hint. In my test(IE11), angular-summernote became pretty slow when there are many texts. I tried @gabrielguerrero 's code, but I feel decreasing performance is similar as before.

Anyway, I found ngModelOptions in Angular 1.3+. And it support debounce options.

<div class="summernote" ng-model="text" ng-model-options="{debounce: 1000}"></div>

debounce is same with @gabrielguerrero 's code but I think it is much better because it is handled in angular.js core.({updatedOn: blur} options is supported in above commit, but not released yet.)

Could you test whether debounce options is helpful your problem or not?

[gabrielguerrero]

Hey @outsideris sorry for the super late response , I agree it should be better with the debounce as you suggest, but we can not tested because sadly our app is using 1.2.x branch which doesnt have ng-model-options, sadly we have to support ie8 so we are stock with 1.2 hopefully next year will drop ie8 support and move forward Kind Regards Gabriel