Change Height and Width of TextArea in codemirror

CodeMirror is a JavaScript text editor package which you can integrate with your applications. I was trying to integrate the respective Angular package of CodeMirror which is called as @ctrl/ngx-codemirror into my application. When I started to integrate codemirror, I was facing fold gutter issue which I have explained in this blog.

Recently, there was a requirement to set Code Mirror height based upon the content as well as increase/decrease height based upon the window height. I was searching through various blogs/ stackoverflow answers and it took me more time to solve it because there are less articles/answers regarding codemirror. So I thought I’ll mention the solution as a blog so that it will be helpful for other users as well as for me in the future.

How to setup Codemirror in your Angular Application

Install Codemirror package using the below command

npm install @ctrl/ngx-codemirror

Based upon the requirement, add your respective language modes in main.ts file

import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';

And then setup your codemirror theme in styles.css file

@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';

And then you are good to use codemirror in your application

<ngx-codemirror
  [(ngModel)]="content"
  [options]="{
    lineNumbers: true,
    theme: 'material',
    mode: 'markdown'
  }"
>
</ngx-codemirror>

There are various inputs and outputs to this component, you can explore them in their official documentation. Now we will explore couple of requirement and we’ll see how we can approach and solve this.

The Requirement

There are two requirements we are going to address in this blog

• Set codemirror height based upon the content in the codemirror
• Set codemirror height based upon button click/window resize

Set Codemirror height based upon the content

The first requirement was to set codemirror height based upon the content. It can be achieved with simple CSS.

In your component.css file, set CodeMirror height equal auto

.CodeMirror{
   height: auto;
}

Add encapsulation as none, to override the global style in your respective component

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  encapsulation: ViewEncapsulation.None
})

Once this is done, your codemirror hright will be adjusted based upon the content inside it.

From the above GIF, you can check that the height is being adjusted dynamically based upon the content. You can also checkout this Stackblitz, if you need further clarification.

Set Codemirror height based upon button click/window resize

The second requirement was to set codemirror height based upon button click/window resize. This can be achieved with the help of setSize function which is present in Codemirror Component.

app.component.html

<button type="button" (click)="increaseHeight()">Increase Height</button>

<button type="button" (click)="decreaseHeight()">Decrease Height</button>

<ngx-codemirror 
    [options]="codeMirrorOptions"
    [(ngModel)]="obj" 
    (ngModelChange)="setEditorContent($event)">
</ngx-codemirror>

app.component.ts

initialHeight = 300; // this is the initial height of codemirror
@ViewChild(CodemirrorComponent) codemirrorComponent: CodemirrorComponent;

increaseHeight() {
  this.initialHeight += 20; // this will increase the height by 20 px
  // First param - width, Second param - height
  this.codemirrorComponent.codeMirror.setSize(null, this.initialHeight);
}

decreaseHeight() {
  this.initialHeight -= 20; // thsi will decrease the height by 20 px
  // First param - width, Second param - height
  this.codemirrorComponent.codeMirror.setSize(null, this.initialHeight); 
}

Based on the above code snippets, we have two buttons to increase and decrease height. To get the current instance of codemirror component we make use of ViewChild and we try to exectue the setSize Function

setSize funtion accepts two paramters, width and height. In this example, we have adjusted the height, if you want you can also adjust width based upon your requirements.

For further clarification, you visit this Stackblitz link.

Conclusion

Let me know if the above solution works for you incase if you come across this scenario. If there are any issues regarding codemirror and if you solved it, just mention it in the comments.

Happy Coding!

Cheers! 🙂