:wip: WIP

package.json

@@ -22,6 +22,7 @@
     "allotment": "1.17.0",
     "js-base64": "3.7.2",
     "monaco-editor": "0.34.1",
+    "pgsql-ast-parser": "^11.0.0",
     "react": "^18.0.0",
     "react-contenteditable": "3.3.6",
     "react-dom": "^18.0.0",

src/components/MonacoWrapper.tsx

@@ -6,6 +6,8 @@ type Props = PropsWithChildren<{
 }>;
 
 export default function MonacoWrapper({ children, jsonParams = "{}" }: Props) {
+
+
   useMonacoConfigSupplier({ jsonParams });
   return <>{children}</>;
 }

src/components/QueryForm.tsx

@@ -11,6 +11,7 @@ import Brand from "./Brand";
 import ContentEditable, { ContentEditableEvent } from "react-contenteditable";
 import { useSetTitle } from "../hooks/useSetTitle";
 import { useTheme } from "../contexts/useTheme";
+import { usePasswordContext } from "../contexts/usePassword";
 
 export type QueryFormProps = {
   onPerformQuery: () => void;
@@ -22,12 +23,10 @@ export type QueryFormProps = {
 export default function QueryForm(props: QueryFormProps) {
   const { paramsEditorRef } = props;
   const runQueryButtonRef = useRef<Button>(null);
-
+  const { password, setPassword } = usePasswordContext();
   const {
     urlState: { query, serverAddress, username, jsonParams, name },
     setUrlState,
-    password,
-    setPassword,
     runQuery,
     openHelpDialog,
     HotKeysHelpDialog,

src/contexts/usePassword.tsx

@@ -0,0 +1,37 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+type PasswordContextType = {
+  password: string | undefined;
+  setPassword: (password: string | undefined) => void;
+};
+
+const PasswordContext = createContext<PasswordContextType>({
+  password: undefined,
+  setPassword: () => {},
+});
+
+export function PasswordProvider({ children }: PropsWithChildren<{}>) {
+  const [password, setPassword] = useState<PasswordContextType["password"]>();
+
+  const contextValue = { password, setPassword };
+
+  return (
+    <PasswordContext.Provider value={contextValue}>
+      {children}
+    </PasswordContext.Provider>
+  );
+}
+
+export function usePasswordContext() {
+  const context = useContext(PasswordContext);
+  if (context === undefined) {
+    throw new Error("usePassword must be used within a PasswordProvider");
+  }
+  return context;
+}

src/hooks/useMonacoConfigSupplier.ts

@@ -4,15 +4,22 @@ import { useEffect, useState } from "react";
 import { getParemeterNameSuggetionProvider } from "../lib/editor-suggestions/parameter-name.suggestion";
 import { paremeterSnippetSuggetionProvider } from "../lib/editor-suggestions/parameter-snippet.suggestion";
 import { paremeterTypeSuggetionProvider } from "../lib/editor-suggestions/parameter-type.suggestion";
+import { useUrlState } from "./useUrlState";
+import { initialState } from "../hooks/useQueryForm";
+import { usePasswordContext } from "../contexts/usePassword";
+import { getTablesSuggetionProvider } from "../lib/editor-suggestions/tables.suggestion";
 
 type Params = {
   jsonParams: string;
 };
 
 export const useMonacoConfigSupplier = ({ jsonParams }: Params) => {
   const monaco = useMonaco();
+  const [urlState] = useUrlState({ initialState });
+  const { password } = usePasswordContext();
   const [paramKeys, setParamKeys] = useState<string[]>([]);
   const [areSameParamKeys, setAreSameParamKeys] = useState(false);
+  const [subs, setSubs] = useState<IDisposable[]>([]);
 
   useEffect(() => {
     let subs: IDisposable[] = [];
@@ -52,27 +59,46 @@ export const useMonacoConfigSupplier = ({ jsonParams }: Params) => {
   useEffect(() => {
     let subs: IDisposable[] = [];
     if (monaco) {
-      const { provider, language } =
-        getParemeterNameSuggetionProvider(paramKeys);
-      subs.push(
-        monaco.languages.registerCompletionItemProvider(
-          language,
-          areSameParamKeys
-            ? {
-                triggerCharacters: provider.triggerCharacters,
-                provideCompletionItems: function () {
-                  return { suggestions: [] };
-                },
-              }
-            : provider
-        )
-      );
+      {
+        const { provider, language } =
+          getParemeterNameSuggetionProvider(paramKeys);
+        subs.push(
+          monaco.languages.registerCompletionItemProvider(
+            language,
+            areSameParamKeys
+              ? {
+                  triggerCharacters: provider.triggerCharacters,
+                  provideCompletionItems: function () {
+                    return { suggestions: [] };
+                  },
+                }
+              : provider
+          )
+        );
+      }
     }
     return () => {
       setAreSameParamKeys(false);
       subs.forEach((sub) => sub.dispose());
     };
   }, [monaco, paramKeys, areSameParamKeys]);
+
+  useEffect(() => {
+    let subs: IDisposable[] = [];
+
+    if (monaco)
+      getTablesSuggetionProvider({
+        password,
+        ...urlState,
+      }).then(({ provider, language }) =>
+        subs.push(
+          monaco.languages.registerCompletionItemProvider(language, provider)
+        )
+      );
+    return () => {
+      subs.forEach((sub) => sub.dispose());
+    };
+  }, [monaco]);
 };
 
 const arraysAreEqual = (array1: string[], array2: string[]): boolean =>