fix: disable menu when content is not editable

src/lib/editor.component.html

@@ -3,6 +3,7 @@
     [toolbar]="toolbar" 
     [editorView]="view"
     *ngIf="toolbar"
+    [disabled]="!editable"
   >
   </ngx-menu>
   <ngx-bubble></ngx-bubble>

src/lib/editor.component.scss

@@ -41,6 +41,11 @@ $light-gray: #f1f1f1;
   }
 }
 
+.NgxEditor__Content--Disabled {
+  user-select: none;
+  pointer-events: none;
+}
+
 .NgxEditor__ImageWrapper {
   position: relative;
   display: inline-block;

src/lib/modules/menu/menu.component.html

@@ -1,4 +1,4 @@
-<div class="NgxEditor__MenuBar">
+<div class="NgxEditor__MenuBar" [ngClass]="{'NgxEditor--Disabled': disabled}">
 
   <ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last">
     <ng-container *ngFor="let item of toolbarItem; let lastItem = last">

src/lib/modules/menu/menu.component.ts

@@ -16,6 +16,7 @@ import { SharedService } from '../../services/shared/shared.service';
 export class MenuComponent implements OnDestroy {
   @Input() toolbar: any;
   @Input() editorView: EditorView;
+  @Input() disabled = false;
 
   customMenuRef: TemplateRef<any> = null;
   customMenuRefSubscription: Subscription;

src/plugins/editable.ts

@@ -14,6 +14,17 @@ const editablePlugin = (editable = true) => {
     props: {
       editable(state: EditorState): boolean {
         return this.getState(state);
+      },
+      attributes(state: EditorState): Record<string, string> | null {
+        const isEnabled = this.getState(state);
+
+        if (isEnabled) {
+          return null;
+        }
+
+        return {
+          class: 'NgxEditor__Content--Disabled'
+        };
       }
     }
   });