replaceSelections is not available

[zreptil]

This project is really great :) But there is one thing missing from the api. The method

replaceSelections(replacements: Array, collapse?: string): void

is missing from the interface. When i add it to @types\codemirror\index.d.ts, it works as expected. It would be good, if this could be included in this distribution.

There is a workaround for this. When trying to call:

this.cm.replaceSelections(replacements);

and it doesn't compile, just use:

(this.cm as any).replaceSelections(replacements);

This works, but it is not very good. It would be better to add replaceSelections to the type interface.

[scttcper]

@types\codemirror types are coming from definitely typed https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/codemirror/index.d.ts

[pierresh]

@types\codemirror types are coming from definitely typed https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/codemirror/index.d.ts

Thanks, that is interesting, I am trying to use the function getSelection(), but I could not make it work, although the function getSelection() is suggested my IDE. My code is as follow:

<ngx-codemirror [(ngModel)]="item.query"
        [options]="config"
        #ref
        name='query'>
</ngx-codemirror>

import { Editor, Doc } from 'codemirror';
...
@ViewChild('ref') ref: Doc;
...
console.log(this.ref.getSelection());

The following result is shown in the console:

- core.js:5882 ERROR TypeError: this.ref.getSelection is not a function

Could you please tell me what is wrong with my code?

[zreptil]

Could you please tell me what is wrong with my code?

Not really ^^ The code looks ok, but I think it depends where the code is placed. The elements referenced by ViewChild are not available before AfterViewInit.

[pierresh]

Could you please tell me what is wrong with my code?

Not really ^^ The code looks ok, but I think it depends where the code is placed. The elements referenced by ViewChild are not available before AfterViewInit.

Thanks for your answer, but the function console shown above is executed a long time after the initialization of the page, this is triggered by clicking on a button.

[zreptil]

Then I think that ref is not really a Doc-instance. I also stumbled over something similar and changed my code so that there is no ngx-codemirror element, but a div with a given id. In AfterViewInit the variable cm is initialized and available in the component. The code looks like this:

@ViewChild('codeMirror') cmdiv: ElementRef; ... ngAfterViewInit(): void { this.cm = CodeMirror(this.cmdiv.nativeElement, { lineWrapping: true, lineNumbers: true, theme: 'elegant', mode: 'mark down' }); this.cm.setValue(this.text); this.cm.on('change', (cm, changeObj) => { this.text = cm.getValue(); } ); }

The element in the page is simply this:

<div #codeMirror id="codeMirror"></div>

the setValue... and on('change'... are there to have a databinding in the component similar to [(ngModel)] in the component.

Sorry for the bad formatting, but I don't know how to make codeblocks work here.

[scttcper]

<ngx-codemirror [(ngModel)]="item.query"
        [options]="config"
        #ref
        name='query'>
</ngx-codemirror>

ref will be an instance of ngx-codemirror....

so it would be ref.codeMirror.whatever

[pierresh]

<ngx-codemirror [(ngModel)]="item.query"
      [options]="config"
      #ref
      name='query'>
</ngx-codemirror>

ref will be an instance of ngx-codemirror....

so it would be ref.codeMirror.whatever

Thanks a lot, indeed this works when my app is re-compiled partially (already running, just modified one file and save), although my IDE underlines codeMirror with the mention Property CodeMirror does exist on type Doc.

But when I start my app for the first time (with ng serve --open), my app could not be built and the following error is shown in the console:

- 24 - error TS2339: Property 'codeMirror' does not exist on type 'Doc'.
- 166   console.log(this.ref.codeMirror.getSelection());

[scttcper]

It's ngx-codemirror component type not doc

[pierresh]

It's ngx-codemirror component type not doc

Ah yes, it works fine now, thanks!

For those that might be interested, my code is finally as follow:

<ngx-codemirror [(ngModel)]="item.query"
        [options]="config"
        #ref
        name='query'>
</ngx-codemirror>

import { CodemirrorComponent } from '@ctrl/ngx-codemirror';
...
@ViewChild('ref') ref: CodemirrorComponent;
...
console.log(this.ref.codeMirror.getSelection());