From 908c9cbfc330d4ae9c106ef260c134419d4c6355 Mon Sep 17 00:00:00 2001 From: sibiraj-s Date: Fri, 5 Feb 2021 16:36:31 +0530 Subject: [PATCH] fix: make MenuService non singleton --- .../menu/color-picker/color-picker.component.ts | 8 ++++---- .../modules/menu/dropdown/dropdown.component.ts | 8 ++++---- src/lib/modules/menu/image/image.component.ts | 8 ++++---- src/lib/modules/menu/link/link.component.ts | 8 ++++---- src/lib/modules/menu/menu.component.ts | 7 ++----- src/lib/modules/menu/menu.module.ts | 3 --- src/lib/modules/menu/menu.service.ts | 16 +++++++--------- .../toggle-command/toggle-command.component.ts | 8 ++++---- 8 files changed, 29 insertions(+), 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 index f0ba72d2..a8fc7585 100644 --- 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 index 9efb6fc3..c2b750fb 100644 --- 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 index da06ed4d..5306b203 100644 --- 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 index 7c167c53..5bdb9963 100644 --- 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 index 4684c5ba..3967f6f0 100644 --- 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 index 46ee0ea4..06135f54 100644 --- 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 index 8091556f..fa7e551e 100644 --- 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> = new Subject>(); - plugin = { - update: new Subject(), - destroy: new Subject() - }; 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): 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 index 50145e05..e62f9be8 100644 --- 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(); } }