1

I am trying to implement textAngular into my Angular.js project that is packaged using browserify.

I installed rangy and textAngular via npm. They are included like this:

global.rangy = require('rangy');
require('angular-sanitize');
require('textangular');

When compiling the package with browserify via gulp, no errors are shown. However, as soon as I click on a button in the toolbar of the editor, I get the following error:

TypeError: g.rangy.saveSelection is not a function
    at Scope.m.startAction (http://localhost:3000/js/main.js:38077:9364)
    at Scope.executeAction (http://localhost:3000/js/main.js:38076:5862)
    at fn (eval at <anonymous> (http://localhost:3000/js/main.js:18310:15), <anonymous>:4:230)
    at callback (http://localhost:3000/js/main.js:28558:17)
    at Scope.$eval (http://localhost:3000/js/main.js:20997:28)
    at Scope.$apply (http://localhost:3000/js/main.js:21097:25)
    at HTMLButtonElement.<anonymous> (http://localhost:3000/js/main.js:28563:23)
    at HTMLButtonElement.dispatch (http://localhost:3000/js/main.js:3252:214)
    at HTMLButtonElement.elemData.handle (http://localhost:3000/js/main.js:3209:98)

I also tried to include the saveSelection function like this to no avail:

global.rangy.saveSelection = require('rangy/lib/rangy-selectionsaverestore');

It is the same error as this bug report, but for me it is still not fixed: https://github.com/fraywing/textAngular/issues/853.

Help is appreciated, if more info is needed, please let me know.

rbnvrw
  • 347
  • 3
  • 15

1 Answers1

2

I can only include alex88s answer from Github:

(() => {
  window.taTools = {};
  window.rangy = require('rangy/lib/rangy-core');
})();

require('rangy/lib/rangy-selectionsaverestore');
require('textangular/dist/textAngular-sanitize');
require('textAngular/dist/textAngularSetup');
require('textAngular/dist/textAngular');

https://github.com/fraywing/textAngular/issues/1056

However we are using ES6 imports with Babel, and this is our working version as of 1.5.0 (both angular and textAngular versions are set to this).

import rangy from 'rangy/lib/rangy-core';

(() => {
  window.taTools = {};
  window.rangy = rangy;
})();

import 'rangy/lib/rangy-selectionsaverestore';
import 'textangular/dist/textAngular-sanitize';
import 'textAngular/dist/textAngularSetup';
import 'textAngular/dist/textAngular';
import 'textAngular/dist/textAngular.css';

However we truly think that this should be really simplified to just 2 lines (one is for loading the minified version and the other should be optional for the CSS).

atoth
  • 838
  • 1
  • 9
  • 23