yabab-dev / ng2-codemirror

Angular2 CodeMirror component
MIT License
70 stars 30 forks source link

Mode doesn't work #11

Closed Slals closed 7 years ago

Slals commented 7 years ago

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.

yabab-dev commented 7 years ago

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';
Slals commented 7 years ago

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!