Mode doesn't work
Slals opened this issue · 2 comments
Hi,
EDIT : I updated the plunker to include javascript
mode, there is no syntax highlight https://plnkr.co/edit/5aiqpxjCtVmVS4VCeKmC?p=preview
ng2-codemirror doesn't seem to consider the mode configuration. Everything work except the mode (I tried different modes such as 'javascript' or 'css'...). I'm using webpack so here is the index.ts
...
import 'codemirror';
import '../node_modules/codemirror/lib/codemirror.css';
import '../node_modules/codemirror/theme/mdn-like.css';
import '../node_modules/codemirror/mode/javascript/javascript.js';
import '../node_modules/codemirror/mode/css/css.js';
..
The module
...
import {CodemirrorModule} from 'ng2-codemirror';
import {CodeCreationComponent} from './code-creation/code-creation.component';
@NgModule({
imports: [
CodemirrorModule
],
declarations: [
CodeCreationComponent
]
})
export class CreationsModule {}
The component
import {Component} from '@angular/core';
import {ICreation} from '../../shared';
@Component({
selector: 'code-creation',
template: require('./code-creation.html')
})
export class CodeCreationComponent {
public crea: ICreation;
private baseConfig = {
lineNumbers: true,
theme: 'mdn-like',
mode: 'javascript'
};
private jsConfig = this.baseConfig;
private cssConfig = this.baseConfig;
constructor() {
this.cssConfig.mode = 'css';
}
}
And the template
<codemirror [(ngModel)]="crea.script" [config]="baseConfig"></codemirror>
<codemirror [(ngModel)]="crea.style" [config]="cssConfig"></codemirror>
I saw in the document that the markup textarea
generated by CodeMirror has no name
field nor id
field, I don't know if I have to worry about that.
Well, i've tested with Javascript mode and it works : https://embed.plnkr.co/9MWaet/
Maybe you can replace :
import '../node_modules/codemirror/mode/javascript/javascript.js';
by
import 'codemirror/mode/javascript/javascript.js';
Changing imports didn't solve the issue, although I found what the problem was :
public crea: ICreation;
private baseConfig = {
lineNumbers: true,
theme: 'mdn-like',
mode: 'javascript'
};
private jsConfig = this.baseConfig;
private cssConfig = this.baseConfig;
constructor() {
this.cssConfig.mode = 'css';
}
I didn't investigate that much, and I'm not an expert of Angular2 but it seems that the constructor is called after the view, thus the this.cssConfig.mode = 'css'
is done after the codemirror editor is built in the view, just a guess, what do you think?
By the way, it's solved now, thanks for your support and for this great ng2 lib!