1

Angular 4 and modules: Rangy I followed the instructions above to import rangy. I want to use TextRange's function expand() in Rangy's documentation. However, I get the error Property 'expand' does not exist on type 'RangySelection'.

My code:

    import * as rangy from 'rangy'

    showSelectedText(){
      var selTxt = rangy.getSelection()*.expand()*;
      console.log('selTxt: '+selTxt);
}

On console.log(rangy), I get:

enter image description here

console.log(rangy.getSelection()) gives as output enter image description here

inspired_learner
  • 142
  • 1
  • 11

5 Answers5

1

Something that worked for me in the past is importing one of the modules. And importing the other modules if needed.

    import * as rangy from 'rangy/lib/rangy-classapplier';
    import 'rangy/lib/rangy-highlighter'; //imports another module into rangy
    import 'rangy/lib/rangy-core.js'; //and another
    import 'rangy/lib/rangy-textrange';
    import 'rangy/lib/rangy-serializer';
Nas Dos
  • 99
  • 6
  • It almost worked for me. import * as rangy from 'rangy'; import 'rangy/lib/rangy-core'; import 'rangy/lib/rangy-textrange'; import 'rangy/lib/rangy-serializer'; import 'rangy/lib/rangy-classapplier'; import 'rangy/lib/rangy-highlighter'; Also I created property inside a component: `private rangy = rangy as any` – Nikita Marinosyan Mar 12 '19 at 11:01
1

A Rangy selection only has an expand() method if the TextRange module is loaded. This is because this module is a fairly large bit of code and isn't loaded as part of Rangy's core. You just need to ensure that the module code is loaded, by whatever means you prefer.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
0

It appears that the function is broken as console.log(Rangy.getSelection()) does not show expand() as an option.

inspired_learner
  • 142
  • 1
  • 11
0

As it is mentioned in this thread: https://github.com/timdown/rangy/issues/136

The issue is fixed in new version. yet if you still have issue try using it this way:

let expandWord = rangy.getSelection();
expandWord.expand("word", {
   trim: true
});

Plus: To avoid error message in angular2+. add its types as below. try installing the types for Rangy:

npm install --save @types/rangy

Afterwards edit the index.d.ts file and add expand function to the types. in RangySelection Interface.

interface RangySelection extends Selection {
    nativeSelection: Selection;
    isBackwards(): boolean;
    refresh(checkForChanges?: boolean): any;
    toHtml(): string;
    getAllRanges(): RangyRange[];
    getRangeAt(idx: number): RangyRange;
    getNativeTextRange(): any;
    setSingleRange(range: RangyRange): any;
    setRanges(ranges: RangyRange[]): any;
    getBookmark(containerNode: Node): any;
    moveToBookmark(bookmark: Object): any;
    saveRanges(): Object;
    restoreRanges(saved: Object): any;
    saveCharacterRanges(containerNode: Node, opts?: any): Object;
    restoreCharacterRanges(containerNode: Node, characterRanges: Object, opts?: any): any;
    detach(): any;
    inspect(): string;
    move(units: string, count: number, opts?: any): number;
    //This One
    expand(session, unit?, expandOptions?);
}
molikh
  • 1,274
  • 13
  • 24
-1

When the module is loaded (as you can see in your console.log()), but the methods aren't working, try installing the types for Rangy:

npm install --save @types/rangy

If that still does not work, you can try:

(rangy as any).getSelection().expand();

Also, make sure rangy.getSelection() returns a rangy object (and not undefined), otherwise expand() will not be available.

Jeffrey Roosendaal
  • 6,872
  • 8
  • 37
  • 55
  • I tried both the things but I still get an error TypeError: rangy.getSelection(...).expand is not a function – inspired_learner Jun 18 '18 at 14:29
  • But `console.log(rangy.getSelection())` does work? Maybe it's not a function because `getSelection()` returns `undefined` instead of a rangy object. – Jeffrey Roosendaal Jun 18 '18 at 14:36
  • I put in my question what I get from rangy.getSelection() it does not return undefined – inspired_learner Jun 18 '18 at 14:56
  • I see. But it doesn’t list `expand()` as a method either. Are you sure you can use those two together? Have you tried without Angular? – Jeffrey Roosendaal Jun 18 '18 at 16:12
  • they use them together in their demo https://github.com/timdown/rangy/blob/master/demos/textrange.html. I have concluded that it's just broken. Do you know of a similar module? – inspired_learner Jun 18 '18 at 16:18
  • 1
    Ah, that's a shame. Too be honest, I don't really have an idea what rangy does, but maybe you can [check this thread](https://stackoverflow.com/questions/3454152/cross-browser-selection-range-library): – Jeffrey Roosendaal Jun 19 '18 at 07:13
  • A Rangy selection only has an `expand()` method if the [TextRange module](https://github.com/timdown/rangy/wiki/Text-Range-Module) is loaded. – Tim Down Mar 12 '19 at 10:13