diff --git a/src/lib/modules/menu/bubble/bubble.component.ts b/src/lib/modules/menu/bubble/bubble.component.ts index f21ff7b3..fbdfb69a 100644 --- a/src/lib/modules/menu/bubble/bubble.component.ts +++ b/src/lib/modules/menu/bubble/bubble.component.ts @@ -1,6 +1,6 @@ import { - Component, ElementRef, - Input, OnDestroy, OnInit + Component, Input, OnDestroy, + OnInit } from '@angular/core'; import { SafeHtml } from '@angular/platform-browser'; import { EditorView } from 'prosemirror-view'; @@ -18,7 +18,7 @@ import { ToggleCommands } from '../MenuCommands'; styleUrls: ['./bubble.component.scss'] }) export class BubbleComponent implements OnInit, OnDestroy { - constructor(private el: ElementRef, private sanitizeHTML: SanitizeHtmlPipe) { } + constructor(private sanitizeHTML: SanitizeHtmlPipe) { } private get view(): EditorView { return this.editor.view; @@ -49,6 +49,8 @@ export class BubbleComponent implements OnInit, OnDestroy { onClick(e: MouseEvent, commandName: TBItems): void { e.preventDefault(); + e.stopPropagation(); + if (e.button !== 0) { return; } diff --git a/src/lib/modules/menu/floating-menu/floating-menu.component.scss b/src/lib/modules/menu/floating-menu/floating-menu.component.scss index d3208195..bf0eb274 100644 --- a/src/lib/modules/menu/floating-menu/floating-menu.component.scss +++ b/src/lib/modules/menu/floating-menu/floating-menu.component.scss @@ -9,5 +9,5 @@ z-index: 20; margin-bottom: 0.35rem; visibility: hidden; + opacity: 0; } - diff --git a/src/lib/modules/menu/floating-menu/floating-menu.component.ts b/src/lib/modules/menu/floating-menu/floating-menu.component.ts index 7fc35b45..89f21d90 100644 --- a/src/lib/modules/menu/floating-menu/floating-menu.component.ts +++ b/src/lib/modules/menu/floating-menu/floating-menu.component.ts @@ -1,6 +1,6 @@ import { - Component, ContentChild, ContentChildren, ElementRef, HostBinding, - HostListener, Input, OnDestroy, OnInit, ViewChild + Component, ElementRef, HostBinding, + HostListener, Input, OnDestroy, OnInit } from '@angular/core'; import { SafeHtml } from '@angular/platform-browser'; import { NodeSelection } from 'prosemirror-state'; @@ -12,7 +12,6 @@ import Editor from '../../../Editor'; import Icon from '../../../icons'; import { TBItems } from '../../../types'; import { SanitizeHtmlPipe } from '../../../pipes/sanitize/sanitize-html.pipe'; -import { ToggleCommands } from '../MenuCommands'; interface BubblePosition { top: number; @@ -29,14 +28,9 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { constructor(public el: ElementRef, private sanitizeHTML: SanitizeHtmlPipe) { } @HostBinding('style') get display(): Partial { - if (!this.showMenu) { - return { - visibility: 'hidden' - }; - } - return { - visibility: 'visible', + visibility: this.showMenu ? 'visible' : 'hidden', + opacity: this.showMenu ? '1' : '0', top: this.posTop + 'px', left: this.posLeft + 'px', }; @@ -53,29 +47,17 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { private showMenu = false; private updateSubscription: Subscription; private dragging = false; - private clicked = false; private resizeSubscription: Subscription; execulableItems: TBItems[] = []; activeItems: TBItems[] = []; - toolbar: TBItems[][] = [ - ['bold', 'italic', 'underline', 'strike'], - ['ordered_list', 'bullet_list', 'blockquote', 'code'], - ['align_left', 'align_center', 'align_right', 'align_justify'] - ]; - - toggleCommands: TBItems[] = [ - 'bold', 'italic', 'underline', 'strike', - 'ordered_list', 'bullet_list', 'blockquote', 'code', - 'align_left', 'align_center', 'align_right', 'align_justify' - ]; - @HostListener('document:mousedown') onMouseDown(): void { this.dragging = true; } @HostListener('document:keydown') onKeyDown(): void { this.dragging = true; + this.hide(); } @HostListener('document:mouseup') onMouseUp(): void { @@ -92,6 +74,7 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { if (!this.view) { return; } + this.update(this.view); } @@ -101,7 +84,6 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { } private hide(): void { - this.clicked = false; this.showMenu = false; } @@ -133,7 +115,6 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { left = box.width - bubble.width; } - // if if (left < 0) { left = 0; } @@ -171,51 +152,13 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { this.posLeft = left; this.posTop = top; - if (!this.clicked) { - this.show(); - } - } - - onClick(e: MouseEvent, commandName: TBItems): void { - e.preventDefault(); - if (e.button !== 0) { - return; - } - - const { state, dispatch } = this.view; - - const command = ToggleCommands[commandName]; - command.toggle()(state, dispatch); - this.clicked = true; + this.show(); } - private findActiveAndDisabledItems(view: EditorView): void { - this.activeItems = []; - this.execulableItems = []; - const { state } = view; - - this.toggleCommands.forEach(toolbarItem => { - const command = ToggleCommands[toolbarItem]; - - const isActive = command.isActive(state); - if (isActive) { - this.activeItems.push(toolbarItem); - } - - const canExecute = command.canExecute(state); - - if (canExecute) { - this.execulableItems.push(toolbarItem); - } - }); - } - - ngOnInit(): void { this.updateSubscription = this.editor.update .subscribe((view) => { this.update(view); - this.findActiveAndDisabledItems(view); }); this.resizeSubscription = fromEvent(window, 'resize').pipe( @@ -225,7 +168,6 @@ export class FloatingMenuComponent implements OnInit, OnDestroy { }); } - ngOnDestroy(): void { this.updateSubscription.unsubscribe(); this.resizeSubscription.unsubscribe();