From 70fd1e27dc188d325f69b2f3c641fb11ae6c3606 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 21 Feb 2024 11:57:22 +0530
Subject: [PATCH] chore: add @chatwoot/ninja-keys

---
 .../routes/dashboard/commands/commandbar.vue  | 55 ++-----------------
 package.json                                  |  2 +-
 yarn.lock                                     | 18 +++---
 3 files changed, 14 insertions(+), 61 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 440a254e1..658517e66 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -6,11 +6,12 @@
     hideBreadcrumbs
     :placeholder="placeholder"
     @selected="onSelected"
+    @closed="onClosed"
   />
 </template>
 
 <script>
-import 'ninja-keys';
+import '@chatwoot/ninja-keys';
 import conversationHotKeysMixin from './conversationHotKeys';
 import inboxHotKeysMixin from './inboxHotKeys';
 import goToCommandHotKeys from './goToCommandHotKeys';
@@ -67,14 +68,6 @@ export default {
   },
   mounted() {
     this.setCommandbarData();
-    if (this.$route.name === 'inbox_view') {
-      this.$nextTick(() => {
-        this.setModalObserver();
-      });
-    }
-  },
-  beforeDestroy() {
-    this.disposeModalObserver();
   },
   methods: {
     setCommandbarData() {
@@ -89,48 +82,8 @@ export default {
       });
       this.setCommandbarData();
     },
-    setModalObserver() {
-      this.disposeModalObserver();
-
-      const ninjaKeysElement = document.querySelector('ninja-keys');
-      if (ninjaKeysElement && ninjaKeysElement.shadowRoot) {
-        const modalElement =
-          ninjaKeysElement.shadowRoot.querySelector('.modal');
-        if (modalElement instanceof HTMLElement) {
-          this.createModalObserver(modalElement);
-        }
-      }
-    },
-    createModalObserver(modalElement) {
-      // Initialize an observer to detect when the command bar modal is closed and opened
-      // The ninja-keys component does not emit a close event https://github.com/ssleptsov/ninja-keys?tab=readme-ov-file#events.
-      // So by MutationObserver we can detect the modal visibility state by observing DOM changes.
-      // By observing changes to the 'class' attribute of the modal element,
-      // we can determine the modal's visibility state.
-
-      this.modalObserver = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
-          if (mutation.attributeName === 'class') {
-            const classList = mutation.target.classList;
-            if (!classList.contains('visible')) {
-              // Hide snooze notification items from cmd bar
-              // The this.showSnoozeNotificationItems is from inboxHotKeysMixin
-              this.showSnoozeNotificationItems = false;
-            }
-          }
-        });
-      });
-      this.modalObserver.observe(modalElement, {
-        attributes: true,
-        attributeOldValue: true,
-        attributeFilter: ['class'],
-      });
-    },
-    disposeModalObserver() {
-      if (this.modalObserver) {
-        this.modalObserver.disconnect();
-        this.modalObserver = null;
-      }
+    onClosed() {
+      this.showSnoozeNotificationItems = false;
     },
   },
 };
diff --git a/package.json b/package.json
index f7a2f86f7..e8356104b 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "markdown-it": "^13.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
-    "ninja-keys": "^1.2.2",
+    "@chatwoot/ninja-keys": "1.2.3",
     "opus-recorder": "^8.0.5",
     "postcss": "^8.4.31",
     "postcss-loader": "^4.2.0",
diff --git a/yarn.lock b/yarn.lock
index cc9a6f34c..934923855 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3156,6 +3156,15 @@
     "@braid/vue-formulate-i18n" "^1.16.0"
     is-plain-object "^3.0.1"
 
+"@chatwoot/ninja-keys@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@chatwoot/ninja-keys/-/ninja-keys-1.2.3.tgz#3c3f2b505f091ef4707fd1da39bb2ec6d12e7824"
+  integrity sha512-xM8d9P5ikDMZm2WbaCTk/TW5HFauylrU3cJ75fq5je6ixKwyhl/0kZbVN/vbbZN4+AUX/OaSIn6IJbtCgIF67g==
+  dependencies:
+    "@material/mwc-icon" "0.25.3"
+    hotkeys-js "3.8.7"
+    lit "2.2.6"
+
 "@chatwoot/prosemirror-schema@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.5.tgz#d6053692beae59d466ac0b04128fa157f59eb176"
@@ -15077,15 +15086,6 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-ninja-keys@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/ninja-keys/-/ninja-keys-1.2.2.tgz#c1e1ec1a98aee3a977ee77157ac4aa865348be88"
-  integrity sha512-ylo8jzKowi3XBHkgHRjBJaKQkl32WRLr7kRiA0ajiku11vHRDJ2xANtTScR5C7XlDwKEOYvUPesCKacUeeLAYw==
-  dependencies:
-    "@material/mwc-icon" "0.25.3"
-    hotkeys-js "3.8.7"
-    lit "2.2.6"
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"