fix: make input elements editable

sibiraj-s · Jun 11, 2021 · c408d17 · c408d17
1 parent a87fbe1
commit c408d17
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 14 deletions.
diff --git a/projects/ngx-editor/src/lib/modules/menu/floating-menu/floating-menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/floating-menu/floating-menu.component.ts
@@ -52,24 +52,46 @@ export class FloatingMenuComponent implements OnInit, OnDestroy {
   activeItems: TBItems[] = [];
 
   @HostListener('document:mousedown', ['$event']) onMouseDown(e: MouseEvent): void {
-    if (this.el.nativeElement.contains(e.target as Node)) {
+    const target = e.target as Node
+
+    if (this.el.nativeElement.contains(target) && target.nodeName !== 'INPUT') {
       e.preventDefault();
       return;
     }
+
     this.dragging = true;
   }
 
-  @HostListener('document:keydown') onKeyDown(): void {
+  @HostListener('document:keydown', ['$event']) onKeyDown(e: KeyboardEvent): void {
+    const target = e.target as Node
+
+    if (target.nodeName === 'INPUT') {
+      return;
+    }
+
     this.dragging = true;
     this.hide();
   }
 
-  @HostListener('document:mouseup') onMouseUp(): void {
+  @HostListener('document:mouseup', ['$event']) onMouseUp(e: MouseEvent): void {
+    const target = e.target as Node
+
+    if (this.el.nativeElement.contains(target) || target.nodeName === 'INPUT') {
+      e.preventDefault();
+      return
+    }
+
     this.dragging = false;
     this.useUpdate();
   }
 
-  @HostListener('document:keyup') onKeyUp(): void {
+  @HostListener('document:keyup', ['$event']) onKeyUp(e: KeyboardEvent): void {
+    const target = e.target as Node
+
+    if (target.nodeName === 'INPUT') {
+      return;
+    }
+
     this.dragging = false;
     this.useUpdate();
   }

diff --git a/projects/ngx-editor/src/lib/modules/menu/image/image.component.html b/projects/ngx-editor/src/lib/modules/menu/image/image.component.html
@@ -1,4 +1,5 @@
-<div class="NgxEditor__MenuItem--IconContainer" [innerHTML]="icon | sanitizeHtml" (mousedown)="onMouseDown($event)" [title]="getLabel('insertImage')">
+<div class="NgxEditor__MenuItem--IconContainer" [innerHTML]="icon | sanitizeHtml" (mousedown)="onMouseDown($event)"
+  [title]="getLabel('insertImage')">
 </div>
 
 <!-- popup -->

diff --git a/projects/ngx-editor/src/lib/modules/menu/image/image.component.ts b/projects/ngx-editor/src/lib/modules/menu/image/image.component.ts
@@ -37,9 +37,7 @@ export class ImageComponent implements OnInit, OnDestroy {
     private el: ElementRef,
     private ngxeService: NgxEditorService,
     private menuService: MenuService
-  ) {
-
-  }
+  ) { }
 
   @HostBinding('class.NgxEditor__MenuItem--Active') get valid(): boolean {
     return this.isActive || this.showPopup;
@@ -73,8 +71,6 @@ export class ImageComponent implements OnInit, OnDestroy {
   }
 
   onMouseDown(e: MouseEvent): void {
-    e.preventDefault();
-
     if (e.button !== 0) {
       return;
     }

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.html b/projects/ngx-editor/src/lib/modules/menu/link/link.component.html
@@ -1,4 +1,5 @@
-<div class="NgxEditor__MenuItem--IconContainer" [innerHTML]="icon | sanitizeHtml" (mousedown)="onMouseDown($event)" [title]="title">
+<div class="NgxEditor__MenuItem--IconContainer" [innerHTML]="icon | sanitizeHtml" (mousedown)="onMouseDown($event)"
+  [title]="title">
 </div>
 
 <!-- popup -->

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts b/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts
@@ -37,7 +37,7 @@ export class LinkComponent implements OnInit, OnDestroy {
     private el: ElementRef,
     private ngxeService: NgxEditorService,
     private menuService: MenuService
-  ) {  }
+  ) { }
 
   @HostBinding('class.NgxEditor__MenuItem--Active') get valid(): boolean {
     return this.isActive || this.showPopup;
@@ -84,8 +84,6 @@ export class LinkComponent implements OnInit, OnDestroy {
   }
 
   onMouseDown(e: MouseEvent): void {
-    e.preventDefault();
-
     if (e.button !== 0) {
       return;
     }