feat: cte completion, hover tooltip for keywords and tables

Author: mscolnick

README.md

@@ -4,10 +4,10 @@ A CodeMirror extension for SQL linting and visual gutter indicators.
 
 ## Features
 
-### SQL Linting
-
-- **Syntax Validation**: Real-time syntax validation with detailed error messages
-- **Statement Recognition**: Supports SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, ALTER, USE, and other SQL statements
+- ⚡ **Real-time validation** - SQL syntax checking as you type with detailed error messages
+- 🎨 **Visual gutter** - Color-coded statement indicators and error highlighting
+- 💡 **Hover tooltips** - Schema info, keywords, and column details on hover
+- 🔮 **CTE autocomplete** - Auto-complete support for CTEs
 
 ## Installation
 
@@ -19,22 +19,48 @@ pnpm add @marimo-team/codemirror-sql
 
 ## Usage
 
-### Basic SQL Extension
+### Basic Setup
 
 ```ts
-import { sqlExtension } from '@marimo-team/codemirror-sql';
-import { EditorView } from '@codemirror/view';
+import { sql, StandardSQL } from '@codemirror/lang-sql';
+import { basicSetup, EditorView } from 'codemirror';
+import { sqlExtension, cteCompletionSource } from '@marimo-team/codemirror-sql';
+
+const schema = {
+  users: ["id", "name", "email", "active"],
+  posts: ["id", "title", "content", "user_id"]
+};
 
-const view = new EditorView({
+const editor = new EditorView({
+  doc: "SELECT * FROM users WHERE active = true",
   extensions: [
-    sqlExtension({
-      delay: 250, // Delay before running validation
-      enableStructureAnalysis: true, // Enable gutter markers for SQL expressions
-      enableGutterMarkers: true, // Show vertical bars in gutter
-      backgroundColor: "#3b82f6", // Blue for current statement
-      errorBackgroundColor: "#ef4444", // Red for invalid statements
-      hideWhenNotFocused: true, // Hide gutter when editor loses focus
+    basicSetup,
+    sql({
+      dialect: StandardSQL,
+      schema: schema,
+      upperCaseKeywords: true
     }),
+    StandardSQL.language.data.of({
+      autocomplete: cteCompletionSource,
+    }),
+    sqlExtension({
+      linterConfig: {
+        delay: 250 // Validation delay in ms
+      },
+      gutterConfig: {
+        backgroundColor: "#3b82f6", // Current statement color
+        errorBackgroundColor: "#ef4444", // Error highlight color
+        hideWhenNotFocused: true
+      },
+      enableHover: true,
+      hoverConfig: {
+        schema: schema,
+        hoverTime: 300,
+        enableKeywords: true,
+        enableTables: true,
+        enableColumns: true
+      }
+    })
   ],
   parent: document.querySelector('#editor')
 });

demo/index.html

@@ -22,12 +22,13 @@ <h1 class="text-4xl font-bold mb-4">
         A CodeMirror extension for SQL with real-time syntax validation and error diagnostics using
         <a href="https://www.npmjs.com/package/node-sql-parser" class="text-blue-600 hover:text-blue-800">node-sql-parser</a>.
       </p>
-      
+
       <div class="grid gap-8">
         <section>
           <h2 class="text-2xl font-bold mb-4">SQL Editor with Diagnostics</h2>
           <p class="mb-4 text-gray-600">
             Try typing invalid SQL syntax to see real-time error highlighting and messages.
+            Valid tables are: <span class="font-bold">users, posts, orders, customers, categories</span>
           </p>
           <div class="border rounded-lg bg-white shadow-sm">
             <div id="sql-editor" class="min-h-[400px] overflow-y-auto"></div>

demo/index.ts

@@ -1,11 +1,17 @@
-import { sql } from "@codemirror/lang-sql";
+import { SQLDialect, StandardSQL, sql } from "@codemirror/lang-sql";
 import { basicSetup, EditorView } from "codemirror";
+import { cteCompletionSource } from "../src/sql/cte-completion-source.js";
 import { sqlExtension } from "../src/sql/extension.js";
+import type { SqlKeywordInfo } from "../src/sql/hover.js";
 
 // Default SQL content for the demo
 const defaultSqlDoc = `-- Welcome to the SQL Editor Demo!
 -- Try editing the queries below to see real-time validation
 
+WITH cte_name AS (
+  SELECT * FROM users
+)
+
 -- Valid queries (no errors):
 SELECT id, name, email
 FROM users
@@ -46,23 +52,91 @@ WHERE order_date >= '2024-01-01'
 ORDER BY total_amount DESC;
 `;
 
+const schema = {
+  // Users table
+  users: ["id", "name", "email", "active", "status", "created_at", "updated_at", "profile_id"],
+  // Posts table
+  posts: [
+    "id",
+    "title",
+    "content",
+    "user_id",
+    "published",
+    "created_at",
+    "updated_at",
+    "category_id",
+  ],
+  // Orders table
+  orders: [
+    "id",
+    "customer_id",
+    "order_date",
+    "total_amount",
+    "status",
+    "shipping_address",
+    "created_at",
+  ],
+  // Customers table (additional example)
+  customers: ["id", "first_name", "last_name", "email", "phone", "address", "city", "country"],
+  // Categories table
+  categories: ["id", "name", "description", "parent_id"],
+};
+
 let editor: EditorView;
 
+const completionKindStyles = {
+  borderRadius: "4px",
+  padding: "2px 4px",
+  marginRight: "4px",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "12px",
+  height: "12px",
+};
+
+const dialect = StandardSQL;
+
 // Initialize the SQL editor
 function initializeEditor() {
   const extensions = [
     basicSetup,
     EditorView.lineWrapping,
-    sql(), // SQL language support
+    sql({
+      dialect: dialect,
+      // Example schema for autocomplete
+      schema: schema,
+      // Enable uppercase keywords for more traditional SQL style
+      upperCaseKeywords: true,
+    }),
     sqlExtension({
-      // Our custom SQL extension with diagnostics and structure analysis
-      delay: 250, // Delay before running validation
-      enableStructureAnalysis: true, // Enable gutter markers for SQL expressions
-      enableGutterMarkers: true, // Show vertical bars in gutter
-      backgroundColor: "#3b82f6", // Blue for current statement
-      errorBackgroundColor: "#ef4444", // Red for invalid statements
-      hideWhenNotFocused: true, // Hide gutter when editor loses focus
-      // unfocusedOpacity: 0.1, // Alternative: set low opacity instead of hiding
+      // Linter extension configuration
+      linterConfig: {
+        delay: 250, // Delay before running validation
+      },
+
+      // Gutter extension configuration
+      gutterConfig: {
+        backgroundColor: "#3b82f6", // Blue for current statement
+        errorBackgroundColor: "#ef4444", // Red for invalid statements
+        hideWhenNotFocused: true, // Hide gutter when editor loses focus
+      },
+      // Hover extension configuration
+      enableHover: true, // Enable hover tooltips
+      hoverConfig: {
+        schema: schema, // Use the same schema as autocomplete
+        hoverTime: 300, // 300ms hover delay
+        enableKeywords: true, // Show keyword information
+        enableTables: true, // Show table information
+        enableColumns: true, // Show column information
+        keywords: async () => {
+          const keywords = await import("../src/data/common-keywords.json");
+          return keywords.default.keywords;
+        },
+      },
+    }),
+    dialect.language.data.of({
+      autocomplete: cteCompletionSource,
     }),
     // Custom theme for better SQL editing
     EditorView.theme({
@@ -94,6 +168,39 @@ function initializeEditor() {
         color: "#dc2626",
         fontSize: "13px",
       },
+      // Completion kind backgrounds
+      ".cm-completionIcon-keyword": {
+        backgroundColor: "#e0e7ff", // indigo-100
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-variable": {
+        backgroundColor: "#fef9c3", // yellow-100
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-property": {
+        backgroundColor: "#bbf7d0", // green-100
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-function": {
+        backgroundColor: "#bae6fd", // sky-100
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-class": {
+        backgroundColor: "#fbcfe8", // pink-100
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-constant": {
+        backgroundColor: "#fde68a", // amber-200
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-type": {
+        backgroundColor: "#ddd6fe", // violet-200
+        ...completionKindStyles,
+      },
+      ".cm-completionIcon-text": {
+        backgroundColor: "#f3f4f6", // gray-100
+        ...completionKindStyles,
+      },
     }),
   ];
 

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@marimo-team/codemirror-sql",
-  "version": "0.2.2",
+  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -46,7 +46,8 @@
     "vitest": "^3.0.5"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/data"
   ],
   "exports": {
     "./package.json": "./package.json",
@@ -55,7 +56,8 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
-    }
+    },
+    "./data/common-keywords.json": "./src/data/common-keywords.json"
   },
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -72,6 +74,7 @@
   },
   "dependencies": {
     "@codemirror/lint": "^6.0.0",
+    "@codemirror/autocomplete": "^6.0.0",
     "node-sql-parser": "^5.3.10"
   }
 }

pnpm-lock.yaml

@@ -8,7 +8,10 @@ describe("index.ts exports", () => {
       [
         "SqlParser",
         "SqlStructureAnalyzer",
+        "cteCompletionSource",
         "sqlExtension",
+        "sqlHover",
+        "sqlHoverTheme",
         "sqlLinter",
         "sqlStructureGutter",
       ]