foldGutter Addon not working

[PhilippRoessner]

I try to use the foldgutter addon but I can't see any gutters

I have added the addonscripts and styles to my angular.json - scripts and styles section:

styles": [
 "src/styles.css",
 "src/css/styles.css",              
 "node_modules/codemirror/lib/codemirror.css",
 "node_modules/codemirror/theme/oceanic-next.css",
 "node_modules/codemirror/addon/fold/foldgutter.css"
],
"scripts": [
 "node_modules/codemirror/addon/fold/brace-fold.js",
 "node_modules/codemirror/addon/fold/comment-fold.js",
 "node_modules/codemirror/addon/fold/foldcode.js",
 "node_modules/codemirror/addon/fold/foldgutter.js",
 "node_modules/codemirror/addon/fold/indent-fold.js",
 "node_modules/codemirror/addon/fold/markdown-fold.js",
 "node_modules/codemirror/addon/fold/xml-fold.js"
]

I also added the gutter settings in my options-property in my component:

options: any = {
        lineNumbers: true,
        theme: 'oceanic-next',
        mode: 'application/xml',
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    };

unfortunetly I can't see the gutter:

[johaven]

related to #145

@scttcper did you study my proposal (#145 (comment)) ?

[scttcper]

@johaven if you make a pr i'll consider it. It is a pretty decent sized breaking change.

[scttcper]

or we could ship two versions of the component that load differently? Could pull the require statement into a loadCodemirror() and then extend the class and overwrite just that part of the class.

[johaven]

i made some tests, the simplest way to avoid a breaking change is to check if CodeMirror is loaded globally (via the scripts tag) and apply a simple condition like this:

codemirror component

...
declare var CodeMirror: any
...
codeMirror: EditorFromTextArea
_codeMirror: any // variable where we store the global lib
...
constructor(private _differs: KeyValueDiffers, private _ngZone: NgZone) {
    this._codeMirror = CodeMirror ? CodeMirror : require('codemirror')
}
...
ngAfterViewInit() {
this.codeMirror = this._codeMirror.fromTextArea(this.ref.nativeElement, this._options)
...

It gives the possibility to access the library (global or not) directly by importing the child's view.

To make it cleaner I would prefer to store the instance in the this.codeMirror attribute, and create a this.textArea attribute but that would cause a breaking change. We need in some cases to access the textArea element.

A component example, watch especially the ngAfterViewInit part :

@Component({
    template: `
    <ngx-codemirror #CodeMirror [(ngModel)]="content" [options]=options></ngx-codemirror>
    `
})
export class FilesViewerTextComponent implements OnInit, AfterViewInit {
    @ViewChild('CodeMirror') ref: any
    .....
    private readonly modeUrl = '/static/assets/codemirror/mode/%N/%N.js'
    public content: string
    public options: any = {lineNumbers: true, readOnly: true, theme: 'material', mode: 'null'}
    private mode: string = null

    ngOnInit() {
         this.ref._codeMirror.modeURL = this.modeUrl
        const detectedMode = this.ref._codeMirror.findModeByFileName(this.file.name)
        if (detectedMode) {
            this.mode = detectedMode.mode
            this.http.get(this.fileUrl, {responseType: 'text'}).subscribe((data: string) => this.content = data)
       }
    }

    ngAfterViewInit() {
        if (this.mode) {
            this.ref._codeMirror.autoLoadMode(this.ref.codeMirror, this.mode)
            this.ref.codeMirror.setOption('mode', this.mode)
        }
    }
}

There is just to document the case where we use addons not related to the textArea part and the fact that we have to put the library in the script part of Angular.json if we want to use them.

[johaven]

@scttcper is this solution right for you?

[scttcper]

v2.0.0 should handle this use case, however i also wrapped in the update to angular 8 with the breaking change.

this.ref.codeMirrorGlobal.modeURL should be how it is accessed.

[SuhasParameshwara]

I'm able to use fold gutter in json but unable to use it when it comes to XML.

Any thoughts on this?

[baseline-labs]

I'm able to use fold gutter in json but unable to use it when it comes to XML.

Any thoughts on this?

Can you provide your example where you got fold gutter working on JSON?

[gigiosilva]

I'm having the same problem as @PhilippRoessner, addons that affects the textArea doesn't work, the only way to make loadMode works was following @johaven setup, adding imports to angular.json.

For example foldGutter does not show.

Do you guys know how to make it work?

//angular.json
"scripts": [ "node_modules/codemirror/lib/codemirror.js", "node_modules/codemirror/mode/meta.js", "node_modules/codemirror/addon/mode/loadmode.js", "node_modules/codemirror/addon/fold/foldcode.js", "node_modules/codemirror/addon/fold/brace-fold.js", "node_modules/codemirror/addon/edit/matchbrackets.js", "node_modules/codemirror/addon/edit/closetag.js", "node_modules/codemirror/addon/selection/active-line.js" ]

[scttcper]

closing in favor of #145