@keboola/design 8.0.0 → 9.0.0

package/dist/editors.js

@@ -1,9 +1,9 @@
-import { createContext, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useSyncExternalStore, useState, use, Children, Fragment as Fragment$1 } from 'react';
-import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
+import { createContext, useRef, useEffect, useLayoutEffect, useMemo, useCallback, useSyncExternalStore, useState, use, Children, Fragment as Fragment$1 } from 'react';
+import { completeFromList, completeAnyWord, autocompletion } from '@codemirror/autocomplete';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
 import { unifiedMergeView } from '@codemirror/merge';
-import { Decoration, gutter, EditorView, ViewPlugin, GutterMarker, keymap, placeholder, gutterLineClass } from '@codemirror/view';
+import { EditorView, Decoration, ViewPlugin, gutter, GutterMarker, keymap, placeholder, tooltips, gutterLineClass } from '@codemirror/view';
 import CodeMirror, { EditorState, EditorView as EditorView$1, keymap as keymap$1 } from '@uiw/react-codemirror';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -21,12 +21,12 @@ import { r } from '@codemirror/legacy-modes/mode/r';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
 import { toml } from '@codemirror/legacy-modes/mode/toml';
 import { githubLightInit } from '@uiw/codemirror-theme-github';
-import { sfsql } from '@keboola/codemirror-lang-sfsql';
+import { modeSpec, sfsql } from '@keboola/codemirror-lang-sfsql';
 import colors from '@keboola/tailwind-config/colors';
 import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';
+import { StateEffect, StateField, RangeSet, Compartment, RangeSetBuilder } from '@codemirror/state';
 import { defaultKeymap } from '@codemirror/commands';
 import { installExtensions } from '@keboola/codemirror-lang-sql';
-import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/state';
 
 // src/components/CodeEditor/CodeEditor.tsx
 
@@ -290,6 +290,21 @@ Tooltip.Trigger = TooltipTrigger;
 
 // src/utils/escapeStringRegexp.ts
 var escapeStringRegexp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+
+// src/utils/isMac.ts
+var getIsMac = () => {
+  if (typeof navigator !== "undefined" && "userAgentData" in navigator) {
+    const platform = navigator.userAgentData.platform;
+    if (typeof platform === "string") {
+      return platform.toLowerCase() === "macos";
+    }
+  }
+  if (typeof navigator !== "undefined" && typeof navigator.platform === "string") {
+    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  }
+  return false;
+};
+var isMac = getIsMac();
 var helpVariants = cva(["tw:m-0", "tw:text-xs"], {
   defaultVariants: {
     state: "default"
@@ -740,8 +755,6 @@ var ButtonToolbar = ({ value, children }) => {
 };
 var COMMANDS = [
   "run-operation",
-  "source freshness",
-  "docs generate",
   "run",
   "test",
   "seed",
@@ -750,9 +763,13 @@ var COMMANDS = [
   "ls",
   "compile",
   "build",
-  "deps"
+  "deps",
+  "docs",
+  "source"
 ];
+var SUBCOMMANDS = { docs: ["generate"], source: ["freshness"] };
 var ARGUMENTS = ["--select", "--exclude", "--selector", "--defer", "--resource-type", "-s"];
+var SELECTORS = ["--select", "--exclude", "-s"];
 var METHODS = [
   "path:",
   "source:",
@@ -779,13 +796,59 @@ var FLAGS = [
   "--profile",
   "--full-refresh"
 ];
-var word = (list) => new RegExp(`^\\s+(?:${list.join("|")})\\b`, "i");
-var prefix = (list) => new RegExp(`^\\s+(?:${list.join("|")})`, "i");
+var COMMAND_PHRASES = COMMANDS.flatMap((command) => {
+  const subcommands = SUBCOMMANDS[command];
+  return subcommands ? subcommands.map((subcommand) => `${command} ${subcommand}`) : [command];
+});
+var alternation = (list) => [...list].sort((a, b) => b.length - a.length).join("|");
+var word = (list) => new RegExp(`^\\s+(?:${alternation(list)})\\b`, "i");
+var prefix = (list) => new RegExp(`^\\s+(?:${alternation(list)})`, "i");
+var WORD = /[\w:-]*$/;
+var asOptions = (list, type) => list.map((label) => ({ label, type }));
+var DBT = [{ label: "dbt", type: "keyword" }];
+var COMMAND_OPTIONS = asOptions(COMMANDS, "keyword");
+var SUBCOMMAND_OPTIONS = Object.fromEntries(
+  Object.entries(SUBCOMMANDS).map(([command, subcommands]) => [
+    command,
+    asOptions(subcommands, "keyword")
+  ])
+);
+var ARGUMENT_OPTIONS = asOptions(ARGUMENTS, "variable");
+var FLAG_OPTIONS = asOptions(FLAGS, "constant");
+var METHOD_OPTIONS = asOptions(METHODS, "property");
+var optionsAfter = (words) => {
+  const [step, command, ...rest] = words;
+  if (step === void 0) return DBT;
+  if (step.toLowerCase() !== "dbt") return [];
+  if (command === void 0) return COMMAND_OPTIONS;
+  const subcommands = SUBCOMMAND_OPTIONS[command.toLowerCase()];
+  if (subcommands && rest.length === 0) return subcommands;
+  const lastArgument = rest.filter((it) => it.startsWith("-")).at(-1);
+  const selecting = lastArgument !== void 0 && SELECTORS.includes(lastArgument.toLowerCase());
+  return selecting ? [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS, ...METHOD_OPTIONS] : [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS];
+};
+var complete = (context) => {
+  const typed = context.matchBefore(WORD);
+  if (!typed?.text && !context.explicit) return null;
+  const from = typed?.from ?? context.pos;
+  const line = context.state.doc.lineAt(from);
+  const options = optionsAfter(
+    line.text.slice(0, from - line.from).split(/\s+/).filter(Boolean)
+  );
+  return options.length > 0 ? { from, options, validFor: WORD } : null;
+};
 var dbt = simpleMode({
+  languageData: {
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: complete
+  },
   start: [
     { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string" },
-    { regex: /dbt/, token: "keyword", sol: true },
-    { regex: word(COMMANDS), token: "keyword" },
+    // Word-bounded, so `dbtX` is not a dbt step whose first word happens to
+    // colour — the same thing the completion source asks of it.
+    { regex: /dbt\b/, token: "keyword", sol: true },
+    { regex: word(COMMAND_PHRASES), token: "keyword" },
     { regex: word(ARGUMENTS), token: "variableName" },
     { regex: prefix(METHODS), token: "propertyName" },
     { regex: prefix(FLAGS), token: "attributeName" },
@@ -833,6 +896,8 @@ var KEYWORDS = {
 };
 var jsonnet = {
   name: "jsonnet",
+  // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+  languageData: { commentTokens: { line: "//", block: { open: "/*", close: "*/" } } },
   startState: () => ({
     cComment: false,
     textBlock: false,
@@ -1049,6 +1114,20 @@ var buildCustomTheme = () => githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
+var sfsqlWithLanguageData = {
+  ...sfsql,
+  languageData: {
+    ...sfsql.languageData,
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: completeFromList(
+      Object.keys(modeSpec.keywords).map((label) => ({
+        label: label.toUpperCase(),
+        type: "keyword"
+      }))
+    )
+  }
+};
 var getLanguageMode = (mode) => {
   switch (mode) {
     case void 0:
@@ -1065,7 +1144,7 @@ var getLanguageMode = (mode) => {
     case "text/x-mssql":
       return sql({ upperCaseKeywords: true, dialect: MSSQL });
     case "text/x-sfsql":
-      return StreamLanguage.define(sfsql);
+      return StreamLanguage.define(sfsqlWithLanguageData);
     case "text/x-plsql":
       return sql({ upperCaseKeywords: true, dialect: PLSQL });
     case "text/x-rsrc":
@@ -1090,6 +1169,112 @@ var getLanguageMode = (mode) => {
   }
 };
 var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
+var setSearchEffect = StateEffect.define();
+function findMatches(doc, query) {
+  if (!query) return [];
+  const text = doc.toString();
+  try {
+    const regex = new RegExp(escapeStringRegexp(query), "gi");
+    return Array.from(text.matchAll(regex)).map((match, index) => {
+      const from = match.index;
+      const to = from + match[0].length;
+      return { from, to, text: match[0], localIndex: index };
+    });
+  } catch (e) {
+    console.warn("Invalid search regex:", e);
+    return [];
+  }
+}
+function createDecorations(matches, selectedLocalIndex) {
+  const decorations = matches.map((match) => {
+    const isSelected = match.localIndex === selectedLocalIndex;
+    const decoration = Decoration.mark({
+      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
+    });
+    return decoration.range(match.from, match.to);
+  });
+  return Decoration.set(decorations, true);
+}
+var searchField = StateField.define({
+  create() {
+    return {
+      query: "",
+      selectedMatchIndex: void 0,
+      matches: [],
+      decorations: Decoration.none
+    };
+  },
+  update(state, tr) {
+    let newState = state;
+    for (const effect of tr.effects) {
+      if (!effect.is(setSearchEffect)) {
+        continue;
+      }
+      const { query, selectedMatchIndex } = effect.value;
+      const matches = findMatches(tr.state.doc, query);
+      const decorations = createDecorations(matches, selectedMatchIndex);
+      newState = {
+        query,
+        selectedMatchIndex,
+        matches,
+        decorations
+      };
+    }
+    if (tr.docChanged && newState.query) {
+      const matches = findMatches(tr.state.doc, newState.query);
+      const decorations = createDecorations(matches, newState.selectedMatchIndex);
+      newState = {
+        ...newState,
+        matches,
+        decorations
+      };
+    }
+    return newState;
+  },
+  provide: (field) => EditorView.decorations.from(field, (state) => state.decorations)
+});
+var searchViewPlugin = ViewPlugin.fromClass(
+  class {
+    lastSelectedIndex;
+    update(update) {
+      const state = update.state.field(searchField);
+      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
+        const match = state.matches[state.selectedMatchIndex];
+        if (match) {
+          requestAnimationFrame(() => {
+            update.view.dispatch({
+              effects: EditorView.scrollIntoView(match.from, { y: "center" })
+            });
+          });
+        }
+        this.lastSelectedIndex = state.selectedMatchIndex;
+      }
+      if (state.selectedMatchIndex === void 0) {
+        this.lastSelectedIndex = void 0;
+      }
+    }
+  }
+);
+var searchTheme = EditorView.baseTheme({
+  ".cm-searchMatch": {
+    backgroundColor: colors.blue[100]
+  },
+  ".cm-searchMatch > span": {
+    color: `${colors.blue[600]} !important`
+  },
+  ".cm-searchMatch-selected": {
+    backgroundColor: colors.blue[600]
+  },
+  ".cm-searchMatch-selected > span": {
+    color: `${colors.white} !important`
+  }
+});
+function searchExtension() {
+  return [searchField, searchViewPlugin, searchTheme];
+}
+function updateSearch(view, query, selectedMatchIndex) {
+  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
+}
 var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, className: cn("tw:text-xs tw:text-muted-foreground", className) });
 var KbdGroup = ({ ref, className, children, separator, ...props }) => {
   return /* @__PURE__ */ jsx(
@@ -1149,11 +1334,78 @@ Kbd.Group = KbdGroup;
 Kbd.Separator = KbdSeparator;
 var ToggleComponentHelp = () => /* @__PURE__ */ jsxs("div", { children: [
   "Use ",
-  /* @__PURE__ */ jsx(Kbd, { children: "Ctrl+/" }),
-  " or ",
-  /* @__PURE__ */ jsx(Kbd, { children: "Command+/" }),
+  /* @__PURE__ */ jsx(Kbd, { children: isMac ? "Command+/" : "Ctrl+/" }),
   " to toggle comments."
 ] });
+var establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
+var crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
+var findTooltipHost = (from) => {
+  let outermostCropper = null;
+  for (let node = from.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (crops(style)) {
+      outermostCropper = node;
+    } else if (establishesFixedContainingBlock(style)) {
+      return outermostCropper?.parentElement ?? node;
+    }
+  }
+  return outermostCropper?.parentElement ?? null;
+};
+var tooltipsExtension = () => {
+  const layer = new Compartment();
+  return [
+    layer.of(tooltips()),
+    ViewPlugin.define((view) => {
+      const scheduled = setTimeout(() => {
+        if (!view.dom.isConnected) return;
+        const parent = findTooltipHost(view.dom);
+        if (parent) view.dispatch({ effects: layer.reconfigure(tooltips({ parent })) });
+      });
+      return { destroy: () => clearTimeout(scheduled) };
+    })
+  ];
+};
+var useTooltipsExtension = () => useMemo(tooltipsExtension, []);
+
+// src/components/CodeEditor/variableCompletion.ts
+var BOOST = 2e3;
+var NAME = String.raw`[\w-]*`;
+var AT_CARET = new RegExp(String.raw`(?:\{{1,2} ?)?${NAME}$`);
+var NAME_AT_END = new RegExp(`${NAME}$`);
+var OPENING = /\{{1,2} ?$/;
+var CLOSING = /^ ?\}{1,2}/;
+var completeVariables = (variables = []) => {
+  if (variables.length === 0) return () => null;
+  const options = variables.map(({ name, value }) => ({
+    // The bare name: `SqlEditor` filters prefix-only while `CodeEditor` filters
+    // fuzzily, and this is the only spelling both accept whether or not the caret
+    // has typed the braces. The braces are `displayLabel`, which is what renders.
+    label: name,
+    displayLabel: `{{${name}}}`,
+    detail: value,
+    type: "variable",
+    boost: BOOST,
+    apply: (view, completion, from, to) => {
+      const { doc } = view.state;
+      const line = doc.lineAt(from);
+      const insert = `{{${completion.label}}}`;
+      const opening = OPENING.exec(doc.sliceString(line.from, from));
+      const closing = CLOSING.exec(doc.sliceString(to, line.to));
+      const start = opening ? from - opening[0].length : from;
+      const end = closing ? to + closing[0].length : to;
+      view.dispatch({
+        changes: { from: start, to: end, insert },
+        selection: { anchor: start + insert.length }
+      });
+    }
+  }));
+  return (context) => {
+    const match = context.matchBefore(AT_CARET);
+    if (!match?.text) return null;
+    const [name = ""] = NAME_AT_END.exec(match.text) ?? [];
+    return { from: match.to - name.length, options };
+  };
+};
 var emptyArray = [];
 var emptyObject = {};
 var CodeEditor = ({
@@ -1163,8 +1415,12 @@ var CodeEditor = ({
   mode = "application/json",
   placeholder: placeholder$1 = "",
   ariaLabel,
+  searchQuery,
+  searchMatchIndex,
   readOnly = false,
   autocompletions = emptyArray,
+  completionSource,
+  variables,
   extraKeys = emptyObject,
   withToggleCommentHint = false,
   withAutofocus = false,
@@ -1179,6 +1435,26 @@ var CodeEditor = ({
   className
 }) => {
   const handleChange = useStableCallback((next) => onChange?.(next));
+  const withSearch = searchQuery !== void 0;
+  const editorRef = useRef(null);
+  useEffect(() => {
+    const view = editorRef.current?.view;
+    if (view && withSearch) updateSearch(view, searchQuery, searchMatchIndex);
+  }, [withSearch, searchQuery, searchMatchIndex]);
+  const handleCreateEditor = useStableCallback((view) => {
+    if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
+  });
+  const extraKeysRef = useRef(extraKeys);
+  useLayoutEffect(() => {
+    extraKeysRef.current = extraKeys;
+  });
+  const boundKeysSignature = Object.keys(extraKeys).join("\n");
+  const boundKeys = useMemo(
+    () => boundKeysSignature.split("\n").filter(Boolean),
+    [boundKeysSignature]
+  );
+  const tooltipLayer = useTooltipsExtension();
+  const variableCompletion = useMemo(() => completeVariables(variables), [variables]);
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const baseTheme = useThemedExtension(
     "code-editor:chrome",
@@ -1190,31 +1466,43 @@ var CodeEditor = ({
       shouldLintJson(mode, readOnly) ? linter(jsonParseLinter()) : [],
       withLineWrapping ? EditorView.lineWrapping : [],
       EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? completeAnyWord : autocompletions }
+        { autocomplete: completionSource ?? (completeAny ? completeAnyWord : autocompletions) }
       ]),
+      EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
       keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
+        boundKeys.map((key) => ({
           key,
           run: () => {
-            if (typeof run === "string") return run;
-            run();
+            extraKeysRef.current[key]?.();
             return true;
           }
         }))
       ),
-      readOnly ? [] : autocompletion({ activateOnTyping: completeAny }),
+      readOnly ? [] : [
+        // CodeMirror's own default. Gating it on the props hid completions the
+        // *language* supplies — dbt's vocabulary, Snowflake's keywords — behind
+        // a shortcut, and macOS leaves no usable one. With nothing to offer, no
+        // popup opens anyway.
+        autocompletion()
+      ],
       ariaLabel ? EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
+      withSearch ? searchExtension() : [],
+      tooltipLayer,
       baseTheme
     ];
   }, [
     autocompletions,
+    completionSource,
+    variableCompletion,
     completeAny,
-    extraKeys,
+    boundKeys,
     mode,
     readOnly,
     withLineWrapping,
     baseTheme,
-    ariaLabel
+    ariaLabel,
+    withSearch,
+    tooltipLayer
   ]);
   const extensions = useMemo(() => {
     return [
@@ -1233,9 +1521,12 @@ var CodeEditor = ({
   const config = useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
-      lineNumbers: withLineNumbers
+      lineNumbers: withLineNumbers,
+      // Mod-f opens CodeMirror's own panel, which would run a second query and a
+      // second match count over the same document beside the caller's input.
+      ...withSearch ? { searchKeymap: false } : null
     };
-  }, [withLineNumbers, readOnly]);
+  }, [withLineNumbers, readOnly, withSearch]);
   const additionalButtons = renderAdditionalButtons?.(value);
   const hasToolbar = withCopyButton && !!value || !!additionalButtons;
   return (
@@ -1258,6 +1549,8 @@ var CodeEditor = ({
           /* @__PURE__ */ jsx(
             CodeMirror,
             {
+              ref: editorRef,
+              onCreateEditor: handleCreateEditor,
               theme: customTheme,
               value,
               onChange: handleChange,
@@ -1580,112 +1873,6 @@ function highlightingExtension(queryParser) {
 function updateHighlighting(view, lines) {
   view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
 }
-var setSearchEffect = StateEffect.define();
-function findMatches(doc, query) {
-  if (!query) return [];
-  const text = doc.toString();
-  try {
-    const regex = new RegExp(escapeStringRegexp(query), "gi");
-    return Array.from(text.matchAll(regex)).map((match, index) => {
-      const from = match.index;
-      const to = from + match[0].length;
-      return { from, to, text: match[0], localIndex: index };
-    });
-  } catch (e) {
-    console.warn("Invalid search regex:", e);
-    return [];
-  }
-}
-function createDecorations(matches, selectedLocalIndex) {
-  const decorations = matches.map((match) => {
-    const isSelected = match.localIndex === selectedLocalIndex;
-    const decoration = Decoration.mark({
-      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
-    });
-    return decoration.range(match.from, match.to);
-  });
-  return Decoration.set(decorations, true);
-}
-var searchField = StateField.define({
-  create() {
-    return {
-      query: "",
-      selectedMatchIndex: void 0,
-      matches: [],
-      decorations: Decoration.none
-    };
-  },
-  update(state, tr) {
-    let newState = state;
-    for (const effect of tr.effects) {
-      if (!effect.is(setSearchEffect)) {
-        continue;
-      }
-      const { query, selectedMatchIndex } = effect.value;
-      const matches = findMatches(tr.state.doc, query);
-      const decorations = createDecorations(matches, selectedMatchIndex);
-      newState = {
-        query,
-        selectedMatchIndex,
-        matches,
-        decorations
-      };
-    }
-    if (tr.docChanged && newState.query) {
-      const matches = findMatches(tr.state.doc, newState.query);
-      const decorations = createDecorations(matches, newState.selectedMatchIndex);
-      newState = {
-        ...newState,
-        matches,
-        decorations
-      };
-    }
-    return newState;
-  },
-  provide: (field) => EditorView.decorations.from(field, (state) => state.decorations)
-});
-var searchViewPlugin = ViewPlugin.fromClass(
-  class {
-    lastSelectedIndex;
-    update(update) {
-      const state = update.state.field(searchField);
-      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
-        const match = state.matches[state.selectedMatchIndex];
-        if (match) {
-          requestAnimationFrame(() => {
-            update.view.dispatch({
-              effects: EditorView.scrollIntoView(match.from, { y: "center" })
-            });
-          });
-        }
-        this.lastSelectedIndex = state.selectedMatchIndex;
-      }
-      if (state.selectedMatchIndex === void 0) {
-        this.lastSelectedIndex = void 0;
-      }
-    }
-  }
-);
-var searchTheme = EditorView.baseTheme({
-  ".cm-searchMatch": {
-    backgroundColor: colors.blue[100]
-  },
-  ".cm-searchMatch > span": {
-    color: `${colors.blue[600]} !important`
-  },
-  ".cm-searchMatch-selected": {
-    backgroundColor: colors.blue[600]
-  },
-  ".cm-searchMatch-selected > span": {
-    color: `${colors.white} !important`
-  }
-});
-function searchExtension() {
-  return [searchField, searchViewPlugin, searchTheme];
-}
-function updateSearch(view, query, selectedMatchIndex) {
-  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
-}
 var OWN_KEYMAPS = {
   defaultKeymap: false,
   completionKeymap: false,
@@ -1751,6 +1938,7 @@ var SqlEditor = ({
   dialect
 }) => {
   const editorRef = useRef(null);
+  const tooltipLayer = useTooltipsExtension();
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const themeExtension = useThemedExtension(
     "sql-editor:chrome",
@@ -1761,9 +1949,16 @@ var SqlEditor = ({
     return [
       EditorView$1.lineWrapping,
       keymap$1.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
-      ...installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
+      ...installExtensions({
+        schema,
+        defaultDatabase,
+        defaultSchema,
+        variableCompletion: completeVariables(variables),
+        dialect
+      }),
       searchExtension(),
       highlightingExtension(queryParser),
+      tooltipLayer,
       themeExtension,
       onBlurEditor ? EditorView$1.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
       onFocusEditor ? EditorView$1.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
@@ -1778,7 +1973,8 @@ var SqlEditor = ({
     dialect,
     onBlurEditor,
     onFocusEditor,
-    themeExtension
+    themeExtension,
+    tooltipLayer
   ]);
   const defaultSetup = useMemo(() => {
     return { ...buildBasicSetup(readOnly), ...OWN_KEYMAPS, lineNumbers };