diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 89766a05..d7867885 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -13,8 +13,7 @@
-
-
+
diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
index 8098d37f..b80ba334 100644
--- a/demo/src/app/app.component.scss
+++ b/demo/src/app/app.component.scss
@@ -21,6 +21,7 @@
flex-direction: column;
align-items: center;
text-align: center;
+ margin-bottom: 0.5rem;
}
.badges {
diff --git a/demo/src/app/plugins/menu/codemirror.ts b/demo/src/app/plugins/menu/codemirror.ts
index a4d8ab25..acf8439a 100644
--- a/demo/src/app/plugins/menu/codemirror.ts
+++ b/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';
diff --git a/src/lib/ngx-editor.component.ts b/src/lib/ngx-editor.component.ts
index a0533ba5..bec26064 100644
--- a/src/lib/ngx-editor.component.ts
+++ b/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,7 +22,7 @@ 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;
@@ -30,12 +30,14 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
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,7 +94,7 @@ 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),
@@ -90,9 +102,11 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
class: 'NgxEditor__Content'
},
});
+
+ this.editorInitialized = true;
}
- ngOnInit() {
+ ngAfterViewInit() {
this.createEditor();
}