Update Search

packages/web-console/package.json

@@ -22,6 +22,8 @@
     "test:prod": "jest --ci --runInBand"
   },
   "dependencies": {
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/react": "^3.5.2",
     "@hookform/resolvers": "2.8.5",
     "@monaco-editor/react": "^4.3.1",
     "@popperjs/core": "2.4.2",
@@ -35,7 +37,6 @@
     "date-fns": "2.14.0",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
-    "docsearch.js": "2.6.3",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",
     "intersection-observer": "^0.12.2",

packages/web-console/src/index.tsx

@@ -32,7 +32,7 @@ import { Provider } from "react-redux"
 import { applyMiddleware, compose, createStore } from "redux"
 import { createEpicMiddleware } from "redux-observable"
 import { ThemeProvider } from "styled-components"
-
+import { GlobalStyle } from "./theme/global-styles"
 import {
   createGlobalFadeTransition,
   ScreenSizeProvider,
@@ -68,6 +68,7 @@ ReactDOM.render(
   <ScreenSizeProvider>
     <Provider store={store}>
       <ThemeProvider theme={theme}>
+        <GlobalStyle />
         {ReactDOM.createPortal(<ToastContainer />, document.body)}
         <LocalStorageProvider>
           <FadeSlow />

packages/web-console/src/scenes/Editor/Menu/index.tsx

@@ -22,7 +22,6 @@
  *
  ******************************************************************************/
 import React from "react"
-import docsearch from "docsearch.js"
 import { useCallback, useEffect, useState, useContext } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { CSSTransition } from "react-transition-group"
@@ -46,13 +45,11 @@ import {
   Input,
   Link,
   PaneMenu,
-  PopperHover,
   PopperToggle,
   SecondaryButton,
   SuccessButton,
   Text,
   toast,
-  Tooltip,
   TransitionDuration,
   TransparentButton,
   useKeyPress,
@@ -67,6 +64,9 @@ import { Shortcuts } from "../Shortcuts"
 import { useLocalStorage } from "../../../providers/LocalStorageProvider"
 import { StoreKey } from "../../../utils/localStorage/types"
 import { QuestContext } from "../../../providers"
+import { DocSearch } from "@docsearch/react"
+
+import "@docsearch/css"
 
 const Wrapper = styled(PaneMenu)<{ _display: string }>`
   z-index: 15;
@@ -81,13 +81,6 @@ const Separator = styled.div`
   flex: 1;
 `
 
-const DocsearchInput = styled(Input)`
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
 const QueryPickerButton = styled(SecondaryButton)<{
   firstTimeVisitor: boolean
 }>`
@@ -204,24 +197,6 @@ const Menu = () => {
     setQueriesPopperActive(false)
   }, [escPress])
 
-  useEffect(() => {
-    docsearch({
-      apiKey: "b2a69b4869a2a85284a82fb57519dcda",
-      indexName: "questdb",
-      inputSelector: "#docsearch-input",
-      handleSelected: (input, event, suggestion, datasetNumber, context) => {
-        if (context.selectionMethod === "click") {
-          input.setVal("")
-          const win = window.open(suggestion.url, "_blank")
-
-          if (win) {
-            win.focus()
-          }
-        }
-      },
-    })
-  }, [])
-
   useEffect(() => {
     if (!sm && opened) {
       dispatch(actions.console.toggleSideMenu())
@@ -264,12 +239,13 @@ const Menu = () => {
       <Separator />
 
       <MenuItems>
-        <DocsearchInput
-          id="docsearch-input"
+        <DocSearch
+          appId="QL9L2YL7AQ"
+          apiKey="2f67aeacbe73ad08a49efb9214ea27f3"
+          indexName="questdb"
           placeholder="Search documentation"
-          title="Search..."
+          translations={{ button: { buttonText: "Search documentation" } }}
         />
-
         <DropdownMenu.Root modal={false}>
           <DropdownMenu.Trigger asChild>
             <Button skin="secondary" prefixIcon={<Question size="18px" />}>

packages/web-console/src/scenes/Editor/Monaco/editor-addons.ts

@@ -25,7 +25,6 @@
 import { editor } from "monaco-editor"
 import type { Monaco } from "@monaco-editor/react"
 import { BusEvent } from "../../../consts"
-import { actions } from "../../../store"
 import { Dispatch } from "redux"
 
 import {
@@ -45,6 +44,7 @@ enum Command {
   FOCUS_GRID = "focus_grid",
   ADD_NEW_TAB = "add_new_tab",
   CLOSE_ACTIVE_TAB = "close_active_tab",
+  SEARCH_DOCS = "search_docs",
 }
 
 export const registerEditorActions = ({
@@ -106,6 +106,19 @@ export const registerEditorActions = ({
       }
     },
   })
+
+  editor.addAction({
+    id: Command.SEARCH_DOCS,
+    label: "Search QuestDB Docs",
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK],
+    run: () => {
+      const docSearchButton =
+        document.querySelector<HTMLButtonElement>(".DocSearch-Button")
+      if (docSearchButton) {
+        docSearchButton.click()
+      }
+    },
+  })
 }
 
 export const registerLanguageAddons = (monaco: Monaco) => {

packages/web-console/src/theme/global-styles.ts

@@ -0,0 +1,89 @@
+import { createGlobalStyle, css } from "styled-components"
+
+const DocSearchStyles = css`
+  :root {
+    --docsearch-primary-color: ${({ theme }) => theme.color.pink};
+    --docsearch-text-color: ${({ theme }) => theme.color.foreground};
+    --docsearch-highlight-color: ${({ theme }) => theme.color.pink};
+    --docsearch-muted-color: #a4a6a8;
+    --docsearch-container-background: rgba(0, 0, 0, 0.5);
+    /* Modal */
+    --docsearch-modal-background: ${({ theme }) => theme.color.background};
+    --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+    /* Search box */
+    --docsearch-searchbox-background: rgba(255, 255, 255, 0.1);
+    --docsearch-searchbox-focus-background: #141725;
+    /* Hit */
+    --docsearch-hit-color: ${({ theme }) => theme.color.foreground};
+    --docsearch-hit-active-color: ${({ theme }) => theme.color.foreground};
+    --docsearch-hit-background: ${({ theme }) => theme.color.backgroundLighter};
+    --docsearch-hit-shadow: none;
+    /* Footer */
+    --docsearch-footer-background: ${({ theme }) => theme.color.background};
+    --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+      0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+    /* Keys */
+    --docsearch-key-gradient: linear-gradient(
+      -26.5deg,
+      #32343e 0%,
+      rgb(38, 40, 51) 100%
+    );
+    --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+      0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  }
+
+  .DocSearch-Button {
+    height: 3rem;
+    border-radius: 0.4rem;
+    background: ${({ theme }) => theme.color.selection};
+    color: ${({ theme }) => theme.color.gray2};
+    border: none;
+  }
+
+  .DocSearch-Button:hover {
+    border: none;
+    background: ${({ theme }) => theme.color.comment};
+    box-shadow: none;
+    color: ${({ theme }) => theme.color.foreground};
+  }
+
+  .DocSearch-Button-Placeholder {
+    font-size: 100%;
+  }
+
+  .DocSearch-Button .DocSearch-Search-Icon {
+    color: ${({ theme }) => theme.color.gray2};
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  .DocSearch-Button:hover .DocSearch-Search-Icon {
+    color: ${({ theme }) => theme.color.foreground};
+  }
+
+  .DocSearch-Button-Key {
+    top: 0;
+    padding: 0 4px;
+    background: ${({ theme }) => theme.color.gray2};
+    border-radius: 2px;
+    box-shadow: none;
+    color: ${({ theme }) => theme.color.black};
+    font-size: 1.2rem;
+    font-style: inherit;
+    font-family: inherit;
+    font-weight: 600;
+  }
+
+  .DocSearch-Hit-title {
+    font-size: 100%;
+  }
+
+  .DocSearch-Logo .cls-1,
+  .DocSearch-Logo .cls-2 {
+    fill: ${({ theme }) => theme.color.foreground} !important;
+  }
+`
+
+export const GlobalStyle = createGlobalStyle`
+  ${DocSearchStyles}
+`