Error initializing Rangy.js in Internet Explorer

Question

I'm working on an angular app that uses textAngular, which depends on rangy-core and rangy-selectionsaverestore. I'm having the following errors with the latest IE:

Module 'WrappedSelection' failed to load: Unspecified error.
Error: Unspecified error.
    at Anonymous function (js/plugins/textAngular/rangy-core.js:2970:29)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:2923:14)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
    at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
    at init (js/plugins/textAngular/rangy-core.js:294:17)
    at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)

Module 'SaveRestore' failed to load: Unable to get property 'isDirectionBackward' of undefined or null reference
TypeError: Unable to get property 'isDirectionBackward' of undefined or null reference
    at Anonymous function (js/plugins/textAngular/rangy-selectionsaverestore.js:30:9)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
    at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
    at init (js/plugins/textAngular/rangy-core.js:294:17)
    at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)

This error seems to happen during rangy initialization.

What is odd about this is that the TextAngular demo works fine on Internet Explorer. One different between the demo and my application is that I'm using the unminified rangy library. Finally, these errors do not happen on Chrome or Firefox.

Although the app loads (I think the errors above are just warnings in the console), when I click into the textAngular field, I see the following error:

Object doesn't support property or method 'getSelection' File: textAngular.js, Line: 693, Column: 4

I can't find anything in the textAngular or rangy github that addresses these problems. Has anybody encountered these issues before?

If it helps, I can post the link to our application.

Thanks!

Answer 1

i was facing the same issue while loading the third party tool into modal popup where i have dependency of textangular-rangy.min.js

I have replaced textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies, Modified the core code to handle the exception,

File: rangy-core.js, line number:2967-2972

 var r2;
                        try {
                            // code generating above exception 
                            r2 = r1.cloneRange()
                            r1.setStart(textNode, 0);
                            r2.setEnd(textNode, 3);
                            r2.setStart(textNode, 2);
                            sel.addRange(r1);
                            sel.addRange(r2);
                            selectionSupportsMultipleRanges = (sel.rangeCount == 2);
                        } catch (e) {
                            selectionSupportsMultipleRanges = false;
                        }

it works in IE11 and chrome :)

Answer 2

Looks like textAngular is initializing rangy select too early. I fixed this issue by updating textAngular/dist/textAngular.js ln 2036 to wait for onload before checking for rangy library

    window.onload = function() {
        // Ensure that rangy and rangy.saveSelection exists on the window (global scope).
        // TODO: Refactor so that the global scope is no longer used.
        if(!window.rangy){
            throw("rangy-core.js and rangy-selectionsaverestore.js are required for textAngular to work correctly, rangy-core is not yet loaded.");
        }else{
            window.rangy.init();
            if(!window.rangy.saveSelection){
                throw("rangy-selectionsaverestore.js is required for textAngular to work correctly.");
            }
        }
    };

Answer 3

I was having this same issue. I tried the window.onload fix suggested but it just got me to another error about textAngularSetup not being loaded. I took the window.onload fix out and included the textAngularSetup.js file. It now is working fine in Chrome and IE. I am confused because I didn't see that file included in the demo.

Answer 4

sharing my solution, I also got the same issue in IE 11(edge mode), tried with above solution(window.onload), but issue was still persisted in the app.

I have done following changes,

1. Added window.onload as in above solution, textangular.js - run() function

2. Replaced textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies,

Modified the core code to handle the exception,

File: rangy-core.js, line number:2967-2972

                        var r2;
                        try {
                            // code generating above exception 
                            r2 = r1.cloneRange()
                            r1.setStart(textNode, 0);
                            r2.setEnd(textNode, 3);
                            r2.setStart(textNode, 2);
                            sel.addRange(r1);
                            sel.addRange(r2);
                            selectionSupportsMultipleRanges = (sel.rangeCount == 2);
                        } catch (e) {
                            selectionSupportsMultipleRanges = false;
                        }

It might help, tested in IE11 and chrome