Merge branch 'enhance-changelog-textarea' of github.com:shresthkapoor7/BookStack...

[bookstack] / resources / js / components / shortcuts.js

diff --git a/resources/js/components/shortcuts.js b/resources/js/components/shortcuts.js
index cec8684c80f5b4ccc297fa2e34e3541326c4b15e..8bf26fbb51c1a680587eaf89f348f90853ea7ea6 100644 (file)
--- a/resources/js/components/shortcuts.js
+++ b/resources/js/components/shortcuts.js
@@ -1,3 +1,5 @@
+import {Component} from './component';
+

 function reverseMap(map) {
     const reversed = {};
     for (const [key, value] of Object.entries(map)) {
 function reverseMap(map) {
     const reversed = {};
     for (const [key, value] of Object.entries(map)) {


@@ -6,10 +8,7 @@ function reverseMap(map) {
     return reversed;
 }
 
     return reversed;
 }
 

-/**
- * @extends {Component}
- */
-class Shortcuts {
+export class Shortcuts extends Component {

 
     setup() {
         this.container = this.$el;
 
     setup() {
         this.container = this.$el;


@@ -19,24 +18,27 @@ class Shortcuts {
         this.hintsShowing = false;
 
         this.hideHints = this.hideHints.bind(this);
         this.hintsShowing = false;
 
         this.hideHints = this.hideHints.bind(this);

+        this.hintAbortController = null;

 
         this.setupListeners();
     }
 
     setupListeners() {
         window.addEventListener('keydown', event => {
 
         this.setupListeners();
     }
 
     setupListeners() {
         window.addEventListener('keydown', event => {

-
-            if (event.target.closest('input, select, textarea')) {
+            if (event.target.closest('input, select, textarea, .cm-editor, .editor-container')) {

                 return;
             }
 
                 return;
             }
 

-            this.handleShortcutPress(event);
-        });
-
-        window.addEventListener('keydown', event => {

             if (event.key === '?') {
             if (event.key === '?') {

-                this.hintsShowing ? this.hideHints() : this.showHints();
+                if (this.hintsShowing) {
+                    this.hideHints();
+                } else {
+                    this.showHints();
+                }
+                return;

             }
             }

+
+            this.handleShortcutPress(event);

         });
     }
 
         });
     }
 


@@ -44,7 +46,6 @@ class Shortcuts {
      * @param {KeyboardEvent} event
      */
     handleShortcutPress(event) {
      * @param {KeyboardEvent} event
      */
     handleShortcutPress(event) {

-

         const keys = [
             event.ctrlKey ? 'Ctrl' : '',
             event.metaKey ? 'Cmd' : '',
         const keys = [
             event.ctrlKey ? 'Ctrl' : '',
             event.metaKey ? 'Cmd' : '',


@@ -70,7 +71,6 @@ class Shortcuts {
      */
     runShortcut(id) {
         const el = this.container.querySelector(`[data-shortcut="${id}"]`);
      */
     runShortcut(id) {
         const el = this.container.querySelector(`[data-shortcut="${id}"]`);

-        console.info('Shortcut run', el);

         if (!el) {
             return false;
         }
         if (!el) {
             return false;
         }


@@ -91,7 +91,7 @@ class Shortcuts {
             return true;
         }
 
             return true;
         }
 

-        console.error(`Shortcut attempted to be ran for element type that does not have handling setup`, el);
+        console.error('Shortcut attempted to be ran for element type that does not have handling setup', el);

 
         return false;
     }
 
         return false;
     }


@@ -114,10 +114,12 @@ class Shortcuts {
             displayedIds.add(id);
         }
 
             displayedIds.add(id);
         }
 

-        window.addEventListener('scroll', this.hideHints);
-        window.addEventListener('focus', this.hideHints);
-        window.addEventListener('blur', this.hideHints);
-        window.addEventListener('click', this.hideHints);
+        this.hintAbortController = new AbortController();
+        const signal = this.hintAbortController.signal;
+        window.addEventListener('scroll', this.hideHints, {signal});
+        window.addEventListener('focus', this.hideHints, {signal});
+        window.addEventListener('blur', this.hideHints, {signal});
+        window.addEventListener('click', this.hideHints, {signal});

 
         this.hintsShowing = true;
     }
 
         this.hintsShowing = true;
     }


@@ -136,10 +138,10 @@ class Shortcuts {
 
         const linkage = document.createElement('div');
         linkage.classList.add('shortcut-linkage');
 
         const linkage = document.createElement('div');
         linkage.classList.add('shortcut-linkage');

-        linkage.style.left = targetBounds.x + 'px';
-        linkage.style.top = targetBounds.y + 'px';
-        linkage.style.width = targetBounds.width + 'px';
-        linkage.style.height = targetBounds.height + 'px';
+        linkage.style.left = `${targetBounds.x}px`;
+        linkage.style.top = `${targetBounds.y}px`;
+        linkage.style.width = `${targetBounds.width}px`;
+        linkage.style.height = `${targetBounds.height}px`;

 
         wrapper.append(label, linkage);
 
 
         wrapper.append(label, linkage);
 


@@ -152,14 +154,8 @@ class Shortcuts {
     hideHints() {
         const wrapper = this.container.querySelector('.shortcut-container');
         wrapper.remove();
     hideHints() {
         const wrapper = this.container.querySelector('.shortcut-container');
         wrapper.remove();

-
-        window.removeEventListener('scroll', this.hideHints);
-        window.removeEventListener('focus', this.hideHints);
-        window.removeEventListener('blur', this.hideHints);
-        window.removeEventListener('click', this.hideHints);
-
+        this.hintAbortController?.abort();

         this.hintsShowing = false;
     }
         this.hintsShowing = false;
     }

-}

 
 

-export default Shortcuts;
\ No newline at end of file
+}