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! 🙂