tusk/src/components/editor/SqlEditor.tsx

import CodeMirror from "@uiw/react-codemirror";
import { sql, PostgreSQL } from "@codemirror/lang-sql";
import { keymap } from "@codemirror/view";
import { useCallback, useMemo } from "react";

interface Props {
  value: string;
  onChange: (value: string) => void;
  onExecute: () => void;
}

export function SqlEditor({ value, onChange, onExecute }: Props) {
  const handleChange = useCallback(
    (val: string) => {
      onChange(val);
    },
    [onChange]
  );

  const extensions = useMemo(
    () => [
      sql({ dialect: PostgreSQL }),
      keymap.of([
        {
          key: "Ctrl-Enter",
          run: () => {
            onExecute();
            return true;
          },
        },
        {
          key: "Mod-Enter",
          run: () => {
            onExecute();
            return true;
          },
        },
      ]),
    ],
    [onExecute]
  );

  return (
    <CodeMirror
      value={value}
      onChange={handleChange}
      extensions={extensions}
      theme="dark"
      className="h-full text-sm"
      basicSetup={{
        lineNumbers: true,
        foldGutter: true,
        highlightActiveLine: true,
        autocompletion: true,
      }}
    />
  );
}