fix: handle null value input correctly

demo/src/app/app.component.html

@@ -13,8 +13,7 @@
       </div>
     </div>
     <div class="editor">
-      <ngx-editor [ngModel]="editorContent" (ngModelChange)="editorContentChange($event)">
-      </ngx-editor>
+      <ngx-editor [ngModel]="editorContent" (ngModelChange)="editorContentChange($event)"></ngx-editor>
     </div>
   </div>
 </div>

demo/src/app/app.component.scss

@@ -21,6 +21,7 @@
         flex-direction: column;
         align-items: center;
         text-align: center;
+        margin-bottom: 0.5rem;
       }
 
       .badges {

demo/src/app/plugins/menu/codemirror.ts

@@ -3,6 +3,8 @@ import { isNodeActive, toggleBlockType, ToolbarCustomMenuItem } from 'ngx-editor
 
 import schema from '../../schema';
 
+// Ref: https://prosemirror.net/examples/codemirror/
+
 const codeMirror: ToolbarCustomMenuItem = (editorView) => {
   const dom: HTMLElement = document.createElement('div');
   dom.innerHTML = 'CodeMirror';

src/lib/ngx-editor.component.ts

@@ -1,6 +1,6 @@
 import {
   Component, ViewChild, ElementRef,
-  forwardRef, OnDestroy, OnInit, ViewEncapsulation
+  forwardRef, OnDestroy, ViewEncapsulation, AfterViewInit
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
@@ -22,20 +22,22 @@ import { NgxEditorService, NgxEditorServiceConfig } from './ngx-editor.service';
   encapsulation: ViewEncapsulation.None
 })
 
-export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {
+export class NgxEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
   @ViewChild('ngxEditor', { static: true }) ngxEditor: ElementRef;
 
   private view: EditorView;
   private onChange: (value: object) => void;
 
   private config: NgxEditorServiceConfig;
 
+  private editorInitialized = false;
+
   constructor(ngxEditorService: NgxEditorService) {
     this.config = ngxEditorService.config;
   }
 
   writeValue(value: object | null) {
-    if (!value) {
+    if (!this.editorInitialized) {
       return;
     }
 
@@ -49,6 +51,10 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
   registerOnTouched(): void { }
 
   private parseDoc(contentJson: object): ProsemirrorNode {
+    if (!contentJson) {
+      return null;
+    }
+
     const { schema } = this.config;
     return schema.nodeFromJSON(contentJson);
   }
@@ -57,6 +63,12 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     try {
       const doc = this.parseDoc(value);
       const state = this.view.state;
+
+      // don't emit if both content is same
+      if (doc !== null && state.doc.eq(doc)) {
+        return;
+      }
+
       const tr = state.tr;
       tr.replaceWith(0, state.doc.content.size, doc);
       this.view.dispatch(tr);
@@ -82,17 +94,19 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     this.view = new EditorView(this.ngxEditor.nativeElement, {
       state: EditorState.create({
         schema,
-        plugins,
+        plugins
       }),
       nodeViews,
       dispatchTransaction: this.handleTransactions.bind(this),
       attributes: {
         class: 'NgxEditor__Content'
       },
     });
+
+    this.editorInitialized = true;
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.createEditor();
   }