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(); }