fix: prevents the shortcut's callback from being executing on registering of duplicated shortcuts

When registering a duplicated shortcut, the `addShortcut` and
`addSequenceShortcut` methods return `of(null)` which immediately emits on
subscribe. In case of duplicated shortcuts, we instead return EMPTY which
doesn't emit and completes immediately on subscribe.

Author: Ghislain Thau

README.md

@@ -36,7 +36,7 @@ Web apps are getting closer and closer to be desktop-class applications. With th
 ## Compatibility with Angular Versions
 
 | @ngneat/hotkeys | Angular |
-|-----------------|---------|
+| --------------- | ------- |
 | 3.x.x           | >=17.2  |
 | 2.x.x           | >=16    |
 | 1.3.x           | >=14    |
@@ -49,18 +49,20 @@ Web apps are getting closer and closer to be desktop-class applications. With th
 ## Usage
 
 ### Module
+
 Add `HotkeysModule` in your `AppModule`:
 
 ```ts
 import { HotkeysModule } from '@ngneat/hotkeys';
 
 @NgModule({
-  imports: [HotkeysModule]
+  imports: [HotkeysModule],
 })
 export class AppModule {}
 ```
 
 ### Standalone
+
 Add `HotkeysService` in the standalone components :
 
 ```ts
@@ -93,9 +95,9 @@ For example:
 
 <!-- prettier-ignore -->
 ```html
-<input hotkeys="meta.n" 
-      hotkeysGroup="File" 
-      hotkeysDescription="New Document" 
+<input hotkeys="meta.n"
+      hotkeysGroup="File"
+      hotkeysDescription="New Document"
       (hotkey)="handleHotkey($event)"/>
 
 <button hotkeys="shift.f" isGlobal (hotkey)="handleHotkey($event)">Click me</button>
@@ -117,14 +119,14 @@ import { HotkeysService } from '@ngneat/hotkeys';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   constructor(private hotkeys: HotkeysService) {}
 
   ngOnInit() {
-    this.hotkeys.addShortcut({ keys: 'meta.a' }).subscribe(e => console.log('Hotkey', e));
-    this.hotkeys.addSequenceShortcut({ keys: 'g>i' }).subscribe(e => console.log('Hotkey', e));
+    this.hotkeys.addShortcut({ keys: 'meta.a' }).subscribe((e) => console.log('Hotkey', e));
+    this.hotkeys.addSequenceShortcut({ keys: 'g>i' }).subscribe((e) => console.log('Hotkey', e));
   }
 }
 ```
@@ -175,10 +177,13 @@ import { HotkeysHelpComponent, HotkeysService } from '@ngneat/hotkeys';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements AfterViewInit {
-  constructor(private hotkeys: HotkeysService, private dialog: NgbModal) {}
+  constructor(
+    private hotkeys: HotkeysService,
+    private dialog: NgbModal,
+  ) {}
 
   ngAfterViewInit() {
     this.hotkeys.registerHelpModal(() => {
@@ -191,6 +196,7 @@ export class AppComponent implements AfterViewInit {
 ```
 
 It accepts a second input that allows defining the hotkey that should open the dialog. The default shortcut is `Shift + ?`. Here's how `HotkeysHelpComponent` looks like:
+
 ```
 <p align="center">
  <img width="50%" height="50%" src="./help_screenshot.png">
@@ -251,44 +257,28 @@ The pipe accepts and additional parameter the way key combinations are separated
 
 It is also possible to alias keys to custom strings. For example, the macos key for enter is `⌤`. To display it as `Enter`, you can use the following:
 
-```html
+````html
 <div class="help-dialog-shortcut-key">
   <kbd [innerHTML]="hotkey.keys | hotkeysShortcut: '-' : ' then ': {enter: 'Enter'}"></kbd>
 </div>
 
-```html
-
-## Allowing hotkeys in form elements
-
-By default, the library prevents hotkey callbacks from firing when their event originates from an `input`, `select`, or `textarea` element or any elements that are contenteditable. To enable hotkeys in these elements, specify them in the `allowIn` parameter:
-
-```ts
-import { HotkeysService } from '@ngneat/hotkeys';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  constructor(private hotkeys: HotkeysService) {}
-
-  ngOnInit() {
-    this.hotkeys
-      .addShortcut({ keys: 'meta.a', allowIn: ['INPUT', 'SELECT', 'TEXTAREA', 'CONTENTEDITABLE'] })
-      .subscribe(e => console.log('Hotkey', e));
-  }
-}
-```
+```html ## Allowing hotkeys in form elements By default, the library prevents hotkey callbacks from firing when their
+event originates from an `input`, `select`, or `textarea` element or any elements that are contenteditable. To enable
+hotkeys in these elements, specify them in the `allowIn` parameter: ```ts import { HotkeysService } from
+'@ngneat/hotkeys'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls:
+['./app.component.css'] }) export class AppComponent { constructor(private hotkeys: HotkeysService) {} ngOnInit() {
+this.hotkeys .addShortcut({ keys: 'meta.a', allowIn: ['INPUT', 'SELECT', 'TEXTAREA', 'CONTENTEDITABLE'] }) .subscribe(e
+=> console.log('Hotkey', e)); } }
+````
 
 It's possible to enable them in the template as well:
 
 <!-- prettier-ignore -->
 ```html
-<input hotkeys="meta.n" 
-      hotkeysGroup="File" 
-      hotkeysDescription="New Document" 
-      hotkeysOptions="{allowIn: ['INPUT','SELECT', 'TEXTAREA', 'CONTENTEDITABLE']}" 
+<input hotkeys="meta.n"
+      hotkeysGroup="File"
+      hotkeysDescription="New Document"
+      hotkeysOptions="{allowIn: ['INPUT','SELECT', 'TEXTAREA', 'CONTENTEDITABLE']}"
       (hotkey)="handleHotkey($event)"
 ```
 
@@ -300,6 +290,8 @@ That's all for now! Make sure to check out the `playground` inside the `src` [fo
 
 No. It's not possible to define a hotkey multiple times. Each hotkey has a description and a group, so it doesn't make sense assigning a hotkey to different actions.
 
+In case of registering duplicated hotkeys, the `addShortcut` and `addSequenceShortcut` methods return an `EMPTY` observable, allowing to detect duplicated hotkeys registration and execute custom logic.
+
 **Why am I not receiving any event?**
 
 If you've added a hotkey to a particular element of your DOM, make sure it's focusable. Otherwise, hotkeys cannot capture any keyboard event.

projects/ngneat/hotkeys/src/lib/hotkeys.service.ts

@@ -137,7 +137,7 @@ export class HotkeysService {
 
         if (sequenceSummary.hotkeyMap.has(normalizedKeys)) {
           console.error('Duplicated shortcut');
-          return of(null);
+          return EMPTY;
         }
 
         sequenceSummary.hotkeyMap.set(normalizedKeys, hotkeySummary);
@@ -170,7 +170,7 @@ export class HotkeysService {
 
     if (this.hotkeys.has(normalizedKeys)) {
       console.error('Duplicated shortcut');
-      return of(null);
+      return EMPTY;
     }
 
     this.hotkeys.set(normalizedKeys, mergedOptions);

projects/ngneat/hotkeys/src/lib/tests/hotkeys.service.spec.ts

@@ -27,6 +27,16 @@ describe('Service: Hotkeys', () => {
     expect(spectator.service.getHotkeys().length).toBe(0);
   });
 
+  it('should not emit after registering duplicated shortcuts', () => {
+    const spyFcn = createSpy('subscribe', (...args) => {});
+    spectator.service.addShortcut({ keys: 'a' }).subscribe(spyFcn);
+    spectator.service.addShortcut({ keys: 'a' }).subscribe(spyFcn);
+    spectator.service.addSequenceShortcut({ keys: 'g>a' }).subscribe(spyFcn);
+    spectator.service.addSequenceShortcut({ keys: 'g>a' }).subscribe(spyFcn);
+
+    expect(spyFcn).not.toHaveBeenCalled();
+  });
+
   it('should unsubscribe shortcuts when removed', () => {
     const subscription = spectator.service.addShortcut({ keys: 'meta.a' }).subscribe();
     spectator.service.removeShortcuts('meta.a');