ngx-codemirror - Unable to use fold gutter in XML Message

I have an Angular application and I'm using ngx-codemirror to build a codemirror in my respective application. In ngx-codemirror there's an option called foldgutter and I have made it true.

app.component.ts

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

app.component.html

  <ngx-codemirror [(ngModel)]="selectedMessageBody"
                                        [options]="codeMirrorOptions">
                        </ngx-codemirror>

By setting up the respective value, I'm able to use fold gutter if the message is JSON but if it's XML the folder gutter option is not visible.

I'm not sure what I'm missing.

STACKBLITZ DEMO => https://stackblitz.com/edit/ngx-codemirror-dmo9cy

And also is there any other package available to resolve this issue?

Solution

You missed importing the below two

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

and also you need to set the mode:xml under codeMirrorOptions. Usually what people mistake is use application/xml which was the case with my friend as well :)

Happy coding