feat: support editable prop

README.md

@@ -57,7 +57,11 @@ export class AppModule {}
 Then in HTML
 
 ```html
-<ngx-editor [ngModel]="jsonDoc"></ngx-editor>
+<ngx-editor
+  [ngModel]="jsonDoc"
+  [editable]="true"
+  [placeholder]="Type here..."
+></ngx-editor>
 ```
 
 ### Working with HTML

docs/README.md

@@ -56,7 +56,11 @@ export class AppModule {}
 Then in HTML
 
 ```html
-<ngx-editor [ngModel]="jsonDoc" placeholder="Type here"></ngx-editor>
+<ngx-editor
+  [ngModel]="jsonDoc"
+  [editable]="true"
+  [placeholder]="Type here..."
+></ngx-editor>
 ```
 
 ### Working with HTML

src/lib/editor.component.ts

@@ -13,6 +13,7 @@ import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { NgxEditorService, NgxEditorServiceConfig } from './editor.service';
 import { SharedService } from './services/shared/shared.service';
 import { Toolbar } from './types';
+import { editable } from 'ngx-editor/plugins';
 
 @Component({
   selector: 'ngx-editor',
@@ -37,6 +38,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
 
   @Input() customMenuRef: TemplateRef<any>;
   @Input() placeholder: string;
+  @Input() editable = true;
   @Output() init = new EventEmitter<EditorView>();
   @Output() focusOut = new EventEmitter<void>();
   @Output() focusIn = new EventEmitter<void>();
@@ -122,6 +124,15 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     return plugin;
   }
 
+  private filterBuiltIns(plugin: Plugin): boolean {
+    const pluginKey: string = (plugin as any).key;
+    if (/^editable\$/.test(pluginKey)) {
+      return false;
+    }
+
+    return true;
+  }
+
   private createEditor(): void {
     const { schema, plugins, nodeViews } = this.config;
 
@@ -130,8 +141,9 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
         doc: null,
         schema,
         plugins: [
-          ...plugins,
-          this.createUpdateWatcherPlugin()
+          ...plugins.filter((plugin) => this.filterBuiltIns(plugin)),
+          this.createUpdateWatcherPlugin(),
+          editable(this.editable)
         ]
       }),
       nodeViews,
@@ -164,6 +176,11 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     dispatch(tr.setMeta('UPDATE_PLACEHOLDER', placeholder));
   }
 
+  private updateEditable(edit: boolean): void {
+    const { dispatch, state: { tr } } = this.view;
+    dispatch(tr.setMeta('UPDATE_EDITABLE', edit));
+  }
+
   ngOnInit(): void {
     this.createEditor();
     this.setPlaceholder();
@@ -173,6 +190,10 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     if (changes?.placeholder && !changes.placeholder.isFirstChange()) {
       this.setPlaceholder(changes.placeholder.currentValue);
     }
+
+    if (changes?.editable && !changes.editable.isFirstChange()) {
+      this.updateEditable(changes.editable.currentValue);
+    }
   }
 
   ngOnDestroy(): void {

src/plugins/editable.ts

@@ -0,0 +1,22 @@
+import { EditorState, Plugin, PluginKey, Transaction } from 'prosemirror-state';
+
+const editablePlugin = (editable = true) => {
+  return new Plugin({
+    key: new PluginKey('editable'),
+    state: {
+      init(): boolean {
+        return editable;
+      },
+      apply(tr: Transaction, previousVal: boolean): string {
+        return tr.getMeta('UPDATE_EDITABLE') ?? previousVal;
+      }
+    },
+    props: {
+      editable(state: EditorState): boolean {
+        return this.getState(state);
+      }
+    }
+  });
+};
+
+export default editablePlugin;

src/plugins/public_api.ts

@@ -1,2 +1,3 @@
 export { default as placeholder } from './placeholder';
+export { default as editable } from './editable';
 export { default as image } from './image';