atularen / ngx-monaco-editor

Monaco Editor component for Angular 2 and Above
https://www.npmjs.com/package/ngx-monaco-editor
MIT License
428 stars 155 forks source link

Cannot use json schema and ngModel double binding #124

Open riderx opened 5 years ago

riderx commented 5 years ago

on my html

<div (keydown)="onKeyDown($event)"> 
        <ngx-monaco-editor class="my-code-editor" [model]="dataModel" [(ngModel]="datastring" [options]="editorOptions"
         (onInit)="monacoInited($event)">
</div>

on my ts

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { NgxEditorModel } from 'ngx-monaco-editor';

@Component({
  selector: 'ngx-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.scss'],
})
export class EditorComponent implements OnInit {
  dataString: string;
  dataModel: NgxEditorModel;
  editorOptions = {
    theme: 'vs-dark',
    language: 'json',
  };
  @Input() file: string;
  @Input() fileModel: string;
  @Output() save = new EventEmitter<boolean>();
  @Output() close = new EventEmitter<boolean>();

  constructor(
    private toast: NbToastrService,
  ) {
  }

  ngOnInit() {
    this.dataString = JSON.stringify(this.file, null, 2);
  }

  monacoInited(editor) {
    if (!this.dataModel) {
      console.log('this.fileModel', this.fileModel);
      try {
        this.dataModel = {
          value: JSON.stringify(this.file, null, 2),
          language: 'json',
          uri: monaco.Uri.parse(this.fileModel),
        };
        console.log('this.dataModel', this.dataModel);
      } catch (err) {
        console.error(err);
      }
    }
  }

  closeEditor() {
    this.close.emit();
  }

  checkJson() {
    try {
      // tslint:disable-next-line: no-console
      console.log('this.dataString', this.dataString);
      console.log('this.dataModel.value', this.dataModel);
      const newJson = JSON.parse(this.dataString);
      this.save.emit(newJson);
    } catch (err) {
      this.toast.show('Danger', 'JSON wrong format');
    }
  }

  onKeyDown($event): void {
    // Detect platform
    if (navigator.platform.match('Mac')) {
      this.handleMacKeyEvents($event);
    } else {
      this.handleWindowsKeyEvents($event);
    }
  }

  handleMacKeyEvents($event) {
    // MetaKey documentation
    // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
    const charCode = String.fromCharCode($event.which).toLowerCase();
    if ($event.metaKey && charCode === 's') {
      // Action on Cmd + S
      this.checkJson();
      $event.preventDefault();
    }
  }

  handleWindowsKeyEvents($event) {
    const charCode = String.fromCharCode($event.which).toLowerCase();
    if ($event.ctrlKey && charCode === 's') {
      // Action on Ctrl + S
      this.checkJson();
      $event.preventDefault();
    }
  }
}

when i do a ctrl + s both ngModel and datamodel don't reflect change done in file

ilcorvo commented 1 year ago

Quite the same issue: if I bind with NgxEditorModel I miss the changes in the code, but if I bind with both I have errors in console.