feat: disable via form API

sibiraj-s · May 1, 2021 · 042eeea · 042eeea
1 parent 6d6ab9d
commit 042eeea
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 24 deletions.
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit, OnDestroy {
   ];
 
   form = new FormGroup({
-    editorContent: new FormControl(jsonDoc, Validators.required(schema))
+    editorContent: new FormControl({ value: jsonDoc, disabled: true }, Validators.required(schema))
   });
 
   get doc(): AbstractControl {

diff --git a/projects/ngx-editor/src/lib/editor.component.ts b/projects/ngx-editor/src/lib/editor.component.ts
@@ -26,16 +26,16 @@ import Editor from './Editor';
 
 export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
   constructor(
-    private renderer: Renderer2,
-    private injector: Injector
+    private _renderer: Renderer2,
+    private _injector: Injector,
+    private _elementRef: ElementRef<HTMLElement>
   ) { }
 
   @ViewChild('ngxEditor', { static: true }) private ngxEditor: ElementRef;
 
   @Input() editor: Editor;
   @Input() outputFormat: 'doc' | 'html';
   @Input() placeholder = 'Type Here...';
-  @Input() enabled = true;
 
   @Output() focusOut = new EventEmitter<void>();
   @Output() focusIn = new EventEmitter<void>();
@@ -60,6 +60,11 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
     this.onTouched = fn;
   }
 
+  setDisabledState(isDisabled: boolean): void {
+    this.setMeta('UPDATE_EDITABLE', !isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+
   private handleChange(jsonDoc: Record<string, any>): void {
     if (this.outputFormat === 'html') {
       const html = toHTML(jsonDoc, this.editor.schema);
@@ -75,20 +80,12 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
     dispatch(tr.setMeta(key, value));
   }
 
-  private enable(): void {
-    this.setMeta('UPDATE_EDITABLE', true);
-  }
-
-  private disable(): void {
-    this.setMeta('UPDATE_EDITABLE', false);
-  }
-
   private setPlaceholder(placeholder: string): void {
     this.setMeta('UPDATE_PLACEHOLDER', placeholder);
   }
 
   private registerPlugins(): void {
-    this.editor.registerPlugin(plugins.editable(this.enabled));
+    this.editor.registerPlugin(plugins.editable());
     this.editor.registerPlugin(plugins.placeholder(this.placeholder));
 
     this.editor.registerPlugin(plugins.attributes({
@@ -108,7 +105,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
       this.onTouched();
     }));
 
-    this.editor.registerPlugin(plugins.image(this.injector));
+    this.editor.registerPlugin(plugins.image(this._injector));
     this.editor.registerPlugin(plugins.link());
   }
 
@@ -117,10 +114,9 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
       throw new Error('NgxEditor: Required editor instance');
     }
 
-    // this.registerCustomElements();
     this.registerPlugins();
 
-    this.renderer.appendChild(this.ngxEditor.nativeElement, this.editor.view.dom);
+    this._renderer.appendChild(this.ngxEditor.nativeElement, this.editor.view.dom);
 
     const contentChangeSubscription = this.editor.valueChanges.subscribe(jsonDoc => {
       this.handleChange(jsonDoc);
@@ -133,14 +129,6 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
     if (changes?.placeholder && !changes.placeholder.isFirstChange()) {
       this.setPlaceholder(changes.placeholder.currentValue);
     }
-
-    if (changes?.enabled && !changes.enabled.isFirstChange()) {
-      if (!changes.enabled.currentValue) {
-        this.disable();
-      } else {
-        this.enable();
-      }
-    }
   }
 
   ngOnDestroy(): void {