ngx-CodeMirror – Fold gutter issue

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 into my application. But I faced some issue regarding fold gutter and I didn’t find any proper documentation to resolve that issue. So why not create one?

What’s the issue?

I’m able to use fold gutter for the JSON message body but I was unable to reproduce the same functionality for XML message. I was searching through the documentation of code mirror but there wasn’t any useful section which refers to this issue.

The next step I tried to reproduce the issue in Stackblitz. And it was reproducible. The final thing I did was, raised a question in StackOverflow.

The Solution

There were two answers by Hariharan and Sajeetharan. These two guys saved my day. The solutions was very simple.

We need to import the below two lines in main.ts file.

import 'codemirror/mode/xml/xml';
import 'codemirror/addon/fold/xml-fold';

And then in the codeMirrorOptions you have to mention the mode as application/xml or just xml.

 public codeMirrorOptions: any = {
    theme: 'material',
    mode: 'application/xml',
    lineNumbers: true,
    lineWrapping: true,
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
    autoCloseBrackets: true,
    matchBrackets: true
  };

And that’s it! The fold gutter got working in xml message also.

Conclusion

At first I tried to solve this issue by changing the mode to xml and application/xml but it was not working because I missed the import statements. Lastly it was just two lines of code which solved my issue.

Again thanks to the two people who helped me to resolve this issue.

Happy Coding!

Cheers! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: