fix: make MenuService non singleton

sibiraj-s · Feb 5, 2021 · 908c9cb · 908c9cb
1 parent 7ced745
commit 908c9cb
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 37 deletions.
diff --git a/src/lib/modules/menu/color-picker/color-picker.component.ts b/src/lib/modules/menu/color-picker/color-picker.component.ts
@@ -26,9 +26,9 @@ export class ColorPickerComponent implements OnDestroy {
     private menuService: MenuService,
     private ngxeService: NgxEditorService
   ) {
-    this.editorView = this.menuService.view;
+    this.editorView = this.menuService.editor.view;
 
-    this.pluginUpdateSubscription = this.menuService.plugin.update.subscribe((view: EditorView) => {
+    this.updateSubscription = this.menuService.editor.update.subscribe((view: EditorView) => {
       this.update(view);
     });
   }
@@ -53,7 +53,7 @@ export class ColorPickerComponent implements OnDestroy {
     return this.type === 'text_color' ? TextColor : TextBackgroundColor;
   }
 
-  private pluginUpdateSubscription: Subscription;
+  private updateSubscription: Subscription;
   private editorView: EditorView;
   showPopup = false;
   isActive = false;
@@ -137,6 +137,6 @@ export class ColorPickerComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.pluginUpdateSubscription.unsubscribe();
+    this.updateSubscription.unsubscribe();
   }
 }
diff --git a/src/lib/modules/menu/dropdown/dropdown.component.ts b/src/lib/modules/menu/dropdown/dropdown.component.ts
@@ -17,7 +17,7 @@ import { TBHeadingItems } from '../../../types';
 })
 export class DropdownComponent implements OnDestroy {
   private editorView: EditorView;
-  private pluginUpdateSubscription: Subscription;
+  private updateSubscription: Subscription;
 
   @Input() group: string;
   @Input() items: TBHeadingItems[];
@@ -33,9 +33,9 @@ export class DropdownComponent implements OnDestroy {
     private menuService: MenuService,
     private el: ElementRef
   ) {
-    this.editorView = this.menuService.view;
+    this.editorView = this.menuService.editor.view;
 
-    this.pluginUpdateSubscription = this.menuService.plugin.update.subscribe((view: EditorView) => {
+    this.updateSubscription = this.menuService.editor.update.subscribe((view: EditorView) => {
       this.update(view);
     });
   }
@@ -103,6 +103,6 @@ export class DropdownComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.pluginUpdateSubscription.unsubscribe();
+    this.updateSubscription.unsubscribe();
   }
 }
diff --git a/src/lib/modules/menu/image/image.component.ts b/src/lib/modules/menu/image/image.component.ts
@@ -17,7 +17,7 @@ import { Image as ImageCommand } from '../MenuCommands';
 export class ImageComponent implements OnDestroy {
   showPopup = false;
   isActive = false;
-  private pluginUpdateSubscription: Subscription;
+  private updateSubscription: Subscription;
 
   form = new FormGroup({
     src: new FormControl('', [
@@ -35,9 +35,9 @@ export class ImageComponent implements OnDestroy {
     private ngxeService: NgxEditorService,
     private menuService: MenuService
   ) {
-    this.editorView = this.menuService.view;
+    this.editorView = this.menuService.editor.view;
 
-    this.pluginUpdateSubscription = this.menuService.plugin.update.subscribe((view: EditorView) => {
+    this.updateSubscription = this.menuService.editor.update.subscribe((view: EditorView) => {
       this.update(view);
     });
   }
@@ -122,6 +122,6 @@ export class ImageComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.pluginUpdateSubscription.unsubscribe();
+    this.updateSubscription.unsubscribe();
   }
 }
diff --git a/src/lib/modules/menu/link/link.component.ts b/src/lib/modules/menu/link/link.component.ts
@@ -19,7 +19,7 @@ export class LinkComponent implements OnDestroy {
   isActive = false;
   private canExecute = true;
   private editorView: EditorView;
-  private pluginUpdateSubscription: Subscription;
+  private updateSubscription: Subscription;
 
   form = new FormGroup({
     href: new FormControl('', [
@@ -35,9 +35,9 @@ export class LinkComponent implements OnDestroy {
     private ngxeService: NgxEditorService,
     private menuService: MenuService
   ) {
-    this.editorView = this.menuService.view;
+    this.editorView = this.menuService.editor.view;
 
-    this.pluginUpdateSubscription = this.menuService.plugin.update.subscribe((view: EditorView) => {
+    this.updateSubscription = this.menuService.editor.update.subscribe((view: EditorView) => {
       this.update(view);
     });
   }
@@ -141,6 +141,6 @@ export class LinkComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.pluginUpdateSubscription.unsubscribe();
+    this.updateSubscription.unsubscribe();
   }
 }
diff --git a/src/lib/modules/menu/menu.component.ts b/src/lib/modules/menu/menu.component.ts
@@ -43,6 +43,7 @@ const DEFAULT_COLOR_PRESETS = [
   selector: 'ngx-editor-menu',
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.scss'],
+  providers: [MenuService],
   encapsulation: ViewEncapsulation.None
 })
 
@@ -103,11 +104,7 @@ export class MenuComponent implements OnInit, OnDestroy {
       throw new Error('NgxEditor: Required editor instance');
     }
 
-    this.menuService.view = this.editor.view;
-
-    this.updateSubscription = this.editor.update.subscribe(() => {
-      this.menuService.plugin.update.next(this.editor.view);
-    });
+    this.menuService.editor = this.editor;
   }
 
   ngOnDestroy(): void {

diff --git a/src/lib/modules/menu/menu.module.ts b/src/lib/modules/menu/menu.module.ts
@@ -2,8 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { MenuService } from './menu.service';
-
 import { MenuComponent } from './menu.component';
 import { ToggleCommandComponent } from './toggle-command/toggle-command.component';
 import { LinkComponent } from './link/link.component';
@@ -33,7 +31,6 @@ import { FloatingMenuComponent } from './floating-menu/floating-menu.component';
     FloatingMenuComponent,
   ],
   providers: [
-    MenuService,
     SanitizeHtmlPipe
   ],
   exports: [

diff --git a/src/lib/modules/menu/menu.service.ts b/src/lib/modules/menu/menu.service.ts
@@ -2,26 +2,24 @@ import { Injectable, TemplateRef } from '@angular/core';
 import { EditorView } from 'prosemirror-view';
 import { Subject } from 'rxjs';
 
+import Editor from '../../Editor';
+
 @Injectable({
   providedIn: 'root'
 })
 export class MenuService {
-  #view: EditorView;
+  #editor: Editor;
   customMenuRefChange: Subject<TemplateRef<any>> = new Subject<TemplateRef<any>>();
 
-  plugin = {
-    update: new Subject<EditorView>(),
-    destroy: new Subject<void>()
-  };
 
   constructor() { }
 
-  set view(v: EditorView) {
-    this.#view = v;
+  set editor(e: Editor) {
+    this.#editor = e;
   }
 
-  get view(): EditorView {
-    return this.#view;
+  get editor(): Editor {
+    return this.#editor;
   }
 
   setCustomMenuRef(c: TemplateRef<any>): void {

diff --git a/src/lib/modules/menu/toggle-command/toggle-command.component.ts b/src/lib/modules/menu/toggle-command/toggle-command.component.ts
@@ -23,15 +23,15 @@ export class ToggleCommandComponent implements OnInit, OnDestroy {
 
   html: string;
   editorView: EditorView;
-  private pluginUpdateSubscription: Subscription;
+  private updateSubscription: Subscription;
 
   constructor(
     private ngxeService: NgxEditorService,
     private menuService: MenuService
   ) {
-    this.editorView = this.menuService.view;
+    this.editorView = this.menuService.editor.view;
 
-    this.pluginUpdateSubscription = this.menuService.plugin.update.subscribe((view: EditorView) => {
+    this.updateSubscription = this.menuService.editor.update.subscribe((view: EditorView) => {
       this.update(view);
     });
   }
@@ -67,6 +67,6 @@ export class ToggleCommandComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.pluginUpdateSubscription.unsubscribe();
+    this.updateSubscription.unsubscribe();
   }
 }