ngx-Codemirror cursor is not working correctly-Angular 8

Question

I have implemented ngX-CodeMirror in my angular project. I have added the code editor inside an angular material modal. It works fine I'm not able to move the cursor so that I can click on any text. I am able to click on some text but not where we intend to.

I have added this issue in stackblitz : Code Mirror Cursor Issue

This is s snippet from my component.html file

<ngx-codemirror
 #codeMirror
 [options]="codeMirrorOptions"
 [(ngModel)]="codeObj">
</ngx-codemirror>

And in component.ts,

import { Component, OnInit, ViewChild, ElementRef, Input } from "@angular/core";
import { CodemirrorComponent } from "@ctrl/ngx-codemirror";

export class CodeEditorComponent implements OnInit {
  @Input()
  configs: any;
  testData: any;

  @ViewChild("textArea") textArea: ElementRef; 

  codeMirrorOptions: any = {
    theme: "idea",
    mode: "application/json",
    lineNumbers: true,
    autoRefresh: true
  };

  codeObj: any;
  constructor() {}

  ngOnInit(): void {
    this.codeObj = JSON.stringify(this.configs, undefined, 2);
  }
}

I'm not sure why this happened or if we need to provide any specific options to see mouse cursor. I have seen a related query for this in codeMirrorDiscussionForum but couldn't find a solution yet.

Please do help me solve this issue by referring the stackblitz link.

score 7 · Answer 1 · answered Jul 03 '20 at 16:03

Refresh codeMirror after the modal is open

modal.component.ts

import { CodemirrorComponent } from "@ctrl/ngx-codemirror";

//get a reference to the component
@ViewChild('codeMirror') private codeEditorCmp: CodemirrorComponent;

ngOnInit()
{
  //..conf and code initialisation 
  setTimeout(() => this.codeEditorCmp.codeMirror.refresh(), 1000); //<= add this

Stackblitz demo

Possible Explanation

I don't know codeMirror, but it probably calculates where the caret will go based on where you clicked. I guess this calculation is based on the current component's dimensions, which may be cached.

Since when your modal component is initialised it does not have its full width/height yet (until the modal is fully open), you can force code mirror to refresh once the modal is open.

Thank you. This really helped in solving my issue – Amrutha Jaya Raj Jul 03 '20 at 18:19 — Amrutha Jaya Raj, Jul 03 '20 at 18:19
Your welcome, but yurzui's solution is actually cleaner – David Jul 03 '20 at 19:18 — David, Jul 03 '20 at 19:18

yurzui · Accepted Answer · 2020-07-03T18:24:31.740

5

Yes, I would also wait till the modal is open because the size of code mirror area is being changed over Angular material animation:

dialog.component.ts

export class ExampleModalComponent implements OnInit {
  opened$ = this.dialogRef.afterOpened().pipe(mapTo(true));

dialog.component.html

<ngx-codemirror *ngIf="opened$ | async else loading"
....


<ng-template #loading>Loading...</ng-template>

Forked Stackblitz

Another solution is to disable animation.

edited Jul 03 '20 at 18:24

answered Jul 03 '20 at 17:46

yurzui

205,937
32
433
399

Thanks but I was not able to see the stackblitz link – Amrutha Jaya Raj Jul 03 '20 at 18:18
Which one? With disabled animation? – yurzui Jul 03 '20 at 18:19
https://stackblitz.com/edit/code-mirror-cursor-issue-in-modal-judpby-ebhqby-hj4yhx?file=src%2Fapp%2Fexample-modal%2Fexample-modal.component.ts I cant access this – Amrutha Jaya Raj Jul 03 '20 at 18:21
I update link. Try this one https://stackblitz.com/edit/code-mirror-cursor-issue-in-modal-npf1tf?file=src%2Fapp%2Fexample-modal%2Fexample-modal.component.ts – yurzui Jul 03 '20 at 18:24
same works on angular 14, but can do also in this way on the OnInit function: `this.dialogRef.afterOpened().subscribe(() => (this.code = this.data));` – GiuServ Aug 26 '22 at 12:36

ngx-Codemirror cursor is not working correctly-Angular 8

2 Answers2