feat: support validations

README.md

@@ -41,7 +41,7 @@ yarn add ngx-editor
 
 ### Usage
 
-**Note**: By default the editor comes with bare minimal features enabled to reduce the size of the bundle. Refer the [demo](#demo) and [documentation](#documentation) for more details and examples.
+**Note**: By default the editor comes with bare minimal features enabled to reduce the size of the bundle. Refer the [demo](#demo) and [documentation] for more details and examples.
 
 Import `ngx-editor` module
 
@@ -113,4 +113,5 @@ Edit the stackblitz here https://stackblitz.com/edit/ngx-editor
 [npm]: https://www.npmjs.com/
 [yarn]: https://yarnpkg.com/lang/en/
 [github]: https://sibiraj-s.github.io/
+[documentation]: https://sibiraj.dev/ngx-editor/ 
 [wiki]: https://github.com/sibiraj-s/ngx-editor/wiki/ngxEditor

demo/src/app/app.component.html

@@ -13,11 +13,14 @@
       </div>
     </div>
 
-    <div class="editor">
-      <ngx-editor [ngModel]="editorContent" (ngModelChange)="editorContentChange($event)" (init)="init($event)"
-        [customMenuRef]="customMenu">
-      </ngx-editor>
-    </div>
+    <form [formGroup]="form">
+
+      <div class="editor">
+        <ngx-editor formControlName="editorContent" (init)="init($event)" [customMenuRef]="customMenu" (blur)="onBlur($event)">
+        </ngx-editor>
+      </div>
+
+    </form>
 
     <!-- custom menu -->
     <ng-template #customMenu>

demo/src/app/app.component.ts

@@ -1,6 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
 import { EditorView } from 'prosemirror-view';
 import { environment } from '../environments/environment';
+import { Validators } from 'ngx-editor';
 
 import jsonDoc from './doc';
 
@@ -15,10 +17,12 @@ export class AppComponent {
   isProdMode = environment.production;
   editorView: EditorView;
 
-  editorContent: object = jsonDoc;
+  form = new FormGroup({
+    editorContent: new FormControl(jsonDoc, Validators.required())
+  });
 
-  editorContentChange(doc: object): void {
-    this.editorContent = doc;
+  get doc(): AbstractControl {
+    return this.form.get('editorContent');
   }
 
   init(view: EditorView): void {

demo/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { NgxEditorModule } from 'ngx-editor';
@@ -16,6 +16,7 @@ import { CustomMenuComponent } from './components/custom-menu/custom-menu.compon
     CommonModule,
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     NgxEditorModule.forRoot({
       schema,
       plugins,

src/lib/Validators.ts

@@ -0,0 +1,28 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { Schema } from 'prosemirror-model';
+
+import schema from './schema';
+
+export class Validators {
+
+  static required(customSchema?: Schema): ValidatorFn {
+    return (c: AbstractControl) => {
+
+      const userSchema = customSchema || schema;
+
+      if (!c.value) {
+        return null;
+      }
+
+      const node = userSchema.nodeFromJSON(c.value);
+
+      const isEmpty = node.childCount === 1
+        && node?.firstChild?.isTextblock
+        && node.firstChild.content.size === 0;
+
+      return {
+        required: isEmpty
+      };
+    };
+  }
+}

src/lib/editor.component.ts

@@ -1,6 +1,7 @@
 import {
   Component, ViewChild, ElementRef,
-  forwardRef, OnDestroy, ViewEncapsulation, OnInit, Output, EventEmitter, Input, TemplateRef
+  forwardRef, OnDestroy, ViewEncapsulation, OnInit,
+  Output, EventEmitter, Input, TemplateRef
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
@@ -27,6 +28,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
 
   view: EditorView;
   private onChange: (value: object) => void;
+  private onTouched: () => void;
 
   config: NgxEditorServiceConfig;
 
@@ -53,7 +55,9 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     this.onChange = fn;
   }
 
-  registerOnTouched(): void { }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
 
   private parseDoc(contentJson: object): ProsemirrorNode {
     if (!contentJson) {
@@ -130,6 +134,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
           return true;
         },
         blur: () => {
+          this.onTouched();
           this.focusOut.emit();
           return true;
         }

src/lib/schema.ts

@@ -10,3 +10,5 @@ export const schema = new Schema({
   marks,
   nodes
 });
+
+export default schema;

src/public_api.ts

@@ -2,5 +2,6 @@ export * from './lib/editor.component';
 export * from './lib/editor.module';
 
 export * from './lib/schema';
+export * from './lib/Validators';
 
 export * from './lib/types';