fix ctrl + k hotkey not working for browser with some extensions (#2481)

diff --git a/index.html b/index.html
index 9196cf3dcd0150134d55a9aa2bff7a2743db2e56..2eefeee2cddeb8382c230978d42dc9c70a35f29c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -90,6 +90,7 @@
       window.global ||= window;
     </script>
     <div id="root"></div>
+    <div id="portalContainer"></div>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

diff --git a/package-lock.json b/package-lock.json
index 34a390f7bba029e7fc5e07145df8c321509781d2..4aacff72d0c42dce249dc8b81072cc561be4a57d 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
         "focus-trap-react": "10.0.2",
-        "folds": "2.2.0",
+        "folds": "2.3.0",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -7163,9 +7163,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.2.0.tgz",
-      "integrity": "sha512-uOfck5eWEIK11rhOAEdSoPIvMXwv+D1Go03pxSAKezWVb+uRoBdmE6LEqiLOF+ac4DGmZRMPvpdDsXCg7EVNIg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.3.0.tgz",
+      "integrity": "sha512-1KoM21jrg5daxvKrmSY0V04wa946KlNT0z6h017Rsnw2fdtNC6J0f34Ce5GF46Tzi00gZ/7SvCDXMzW/7e5s0w==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",

diff --git a/package.json b/package.json
index 0c06993e22b918aa49bb07b45d7043f65f952bed..5a2356f494672a989d2c38611b97a3e419d3e1b7 100644 (file)
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.2.0",
+    "folds": "2.3.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 2a4c710e44e0aa4485ea262c928321678c043392..0f8375943caf6245331aaad07d33d1a2fe237171 100644 (file)
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -79,9 +79,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     useCallback(
       (evt) => {
         if (editableActiveElement()) return;
-        // means some menu or modal window is open
-        const lastNode = document.body.lastElementChild;
-        if (lastNode && !lastNode.hasAttribute('data-last-node')) {
+        const portalContainer = document.getElementById('portalContainer');
+        if (portalContainer && portalContainer.children.length > 0) {
           return;
         }
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {

diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index aaf51a17102d21834220d38886822b436d833009..fcd6233a2820804a6275fdbb6d4cf99c0ba5a925 100644 (file)
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -434,9 +434,8 @@ export function SearchModalRenderer() {
             return;
           }
 
-          // means some menu or modal window is open
-          const lastNode = document.body.lastElementChild;
-          if (lastNode && !lastNode.hasAttribute('data-last-node')) {
+          const portalContainer = document.getElementById('portalContainer');
+          if (portalContainer && portalContainer.children.length > 0) {
             return;
           }
           setOpen(true);

diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx
index 935790aca8943711cf8634d5eea6546f169f11b8..0a919b577544ed983d1c5254652d1d53777426a4 100644 (file)
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Provider as JotaiProvider } from 'jotai';
+import { OverlayContainerProvider, PopOutContainerProvider, TooltipContainerProvider } from 'folds';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -13,41 +14,39 @@ import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
 
 const queryClient = new QueryClient();
 
-const useLastNodeToDetectReactPortalEntry = () => {
-  useEffect(() => {
-    const lastDiv = document.createElement('div');
-    lastDiv.setAttribute('data-last-node', 'true');
-    document.body.appendChild(lastDiv);
-  }, []);
-};
-
 function App() {
   const screenSize = useScreenSize();
 
-  useLastNodeToDetectReactPortalEntry();
+  const portalContainer = document.getElementById('portalContainer') ?? undefined;
 
   return (
-    <ScreenSizeProvider value={screenSize}>
-      <FeatureCheck>
-        <ClientConfigLoader
-          fallback={() => <ConfigConfigLoading />}
-          error={(err, retry, ignore) => (
-            <ConfigConfigError error={err} retry={retry} ignore={ignore} />
-          )}
-        >
-          {(clientConfig) => (
-            <ClientConfigProvider value={clientConfig}>
-              <QueryClientProvider client={queryClient}>
-                <JotaiProvider>
-                  <RouterProvider router={createRouter(clientConfig, screenSize)} />
-                </JotaiProvider>
-                <ReactQueryDevtools initialIsOpen={false} />
-              </QueryClientProvider>
-            </ClientConfigProvider>
-          )}
-        </ClientConfigLoader>
-      </FeatureCheck>
-    </ScreenSizeProvider>
+    <TooltipContainerProvider value={portalContainer}>
+      <PopOutContainerProvider value={portalContainer}>
+        <OverlayContainerProvider value={portalContainer}>
+          <ScreenSizeProvider value={screenSize}>
+            <FeatureCheck>
+              <ClientConfigLoader
+                fallback={() => <ConfigConfigLoading />}
+                error={(err, retry, ignore) => (
+                  <ConfigConfigError error={err} retry={retry} ignore={ignore} />
+                )}
+              >
+                {(clientConfig) => (
+                  <ClientConfigProvider value={clientConfig}>
+                    <QueryClientProvider client={queryClient}>
+                      <JotaiProvider>
+                        <RouterProvider router={createRouter(clientConfig, screenSize)} />
+                      </JotaiProvider>
+                      <ReactQueryDevtools initialIsOpen={false} />
+                    </QueryClientProvider>
+                  </ClientConfigProvider>
+                )}
+              </ClientConfigLoader>
+            </FeatureCheck>
+          </ScreenSizeProvider>
+        </OverlayContainerProvider>
+      </PopOutContainerProvider>
+    </TooltipContainerProvider>
   );
 }