Merge branch 'minor' into major

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/context-menu/context-menu.component.ts

@@ -24,7 +24,7 @@ type DropdownPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuComponent implements AfterViewInit, OnDestroy {
-    @Input() editorMenuElement: HTMLElement;
+    @Input() editorMenuElement: HTMLElement | null | undefined;
     @ViewChild('contextMenu', { static: true }) private menuTemplate: TemplateRef<any>;
 
     menuConfig: ContextMenuConfig | undefined;
@@ -33,7 +33,7 @@ export class ContextMenuComponent implements AfterViewInit, OnDestroy {
     private menuPortal: TemplatePortal<any>;
     private overlayRef: OverlayRef;
     private contextMenuSub: Subscription;
-    private contentArea: HTMLDivElement;
+    private contentArea: HTMLDivElement | null;
     private hideTriggerHandler: (() => void) | undefined;
 
     constructor(
@@ -49,12 +49,11 @@ export class ContextMenuComponent implements AfterViewInit, OnDestroy {
     };
 
     ngAfterViewInit() {
-        // tslint:disable-next-line:no-non-null-assertion
-        this.contentArea = document.querySelector('.content-area')!;
+        this.contentArea = document.querySelector('.content-area');
         this.menuPortal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
 
         this.hideTrigger$ = this.triggerIsHidden.asObservable().pipe(distinctUntilChanged());
-        this.contentArea.addEventListener('scroll', this.onScroll, { passive: true });
+        this.contentArea?.addEventListener('scroll', this.onScroll, { passive: true });
 
         this.contextMenuSub = this.contextMenuService.contextMenu$.subscribe(contextMenuConfig => {
             this.overlayRef?.dispose();
@@ -73,21 +72,23 @@ export class ContextMenuComponent implements AfterViewInit, OnDestroy {
                 if (triggerButton) {
                     const overlapMarginPx = 5;
                     this.hideTriggerHandler = () => {
-                        if (
-                            triggerButton.getBoundingClientRect().top + overlapMarginPx <
-                            editorMenu.getBoundingClientRect().bottom
-                        ) {
-                            this.triggerIsHidden.next(true);
-                        } else {
-                            this.triggerIsHidden.next(false);
+                        if (editorMenu && triggerButton) {
+                            if (
+                                triggerButton.getBoundingClientRect().top + overlapMarginPx <
+                                editorMenu.getBoundingClientRect().bottom
+                            ) {
+                                this.triggerIsHidden.next(true);
+                            } else {
+                                this.triggerIsHidden.next(false);
+                            }
                         }
                     };
-                    this.contentArea.addEventListener('scroll', this.hideTriggerHandler, { passive: true });
+                    this.contentArea?.addEventListener('scroll', this.hideTriggerHandler, { passive: true });
                     requestAnimationFrame(() => this.hideTriggerHandler?.());
                 }
             } else {
                 if (this.hideTriggerHandler) {
-                    this.contentArea.removeEventListener('scroll', this.hideTriggerHandler);
+                    this.contentArea?.removeEventListener('scroll', this.hideTriggerHandler);
                 }
             }
         });
@@ -100,7 +101,10 @@ export class ContextMenuComponent implements AfterViewInit, OnDestroy {
     ngOnDestroy(): void {
         this.overlayRef?.dispose();
         this.contextMenuSub?.unsubscribe();
-        this.contentArea.removeEventListener('scroll', this.onScroll);
+        this.contentArea?.removeEventListener('scroll', this.onScroll);
+        if (this.hideTriggerHandler) {
+            this.contentArea?.removeEventListener('scroll', this.hideTriggerHandler);
+        }
     }
 
     clickItem(item: ContextMenuItem) {

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/context-menu/context-menu.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable, Subject, of, interval } from 'rxjs';
+import { BehaviorSubject, combineLatest, interval, Observable, of, Subject } from 'rxjs';
 import {
     bufferWhen,
     debounceTime,

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.ts

@@ -41,6 +41,7 @@ import { ProsemirrorService } from './prosemirror/prosemirror.service';
             multi: true,
         },
         ProsemirrorService,
+        ContextMenuService,
     ],
 })
 export class RichTextEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
@@ -65,7 +66,7 @@ export class RichTextEditorComponent implements ControlValueAccessor, AfterViewI
         public contextMenuService: ContextMenuService,
     ) {}
 
-    get menuElement(): HTMLDivElement {
+    get menuElement(): HTMLDivElement | null {
         return this.viewContainerRef.element.nativeElement.querySelector('.ProseMirror-menubar');
     }