SQL Editor Component

A powerful, feature-rich SQL editor component for React applications, built with Monaco Editor. Provides intelligent autocomplete, syntax highlighting, SQL formatting, and database structure-aware suggestions.

Features

✨ Smart Autocomplete

• SQL keyword suggestions
• Database schema, table, and column completion
• Context-aware suggestions with dot notation (e.g., schema.table.column)

🎨 Syntax Highlighting

• Full SQL syntax highlighting powered by Monaco Editor
• Customizable themes

⚡ SQL Formatting

• Format SQL queries with keyboard shortcuts (Ctrl+Shift+F)
• Context menu integration
• Format selection or entire document

🔧 Customizable

• Configurable font size
• Custom run button
• Flexible styling options
• Selection tracking

📊 Database Structure Support

• Single or multiple database support
• Schema-aware completions
• Table and column suggestions

Installation

npm install sql-editor-component

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom @types/react @types/react-dom

Quick Start

Basic Usage

import React from 'react';
import SqlEditor from 'sql-editor-component';

function App() {
  const handleQueryRun = (sql: string) => {
    console.log('Running query:', sql);
    // Execute your SQL query here
  };

  return (
    <SqlEditor
      value="SELECT * FROM users"
      onQueryRun={handleQueryRun}
      showRunButton={true}
    />
  );
}

export default App;

With Database Structure

import React from 'react';
import SqlEditor, { Database } from 'sql-editor-component';

function App() {
  const dbStructure: Database = {
    databaseName: 'mydb',
    schemas: [
      {
        name: 'public',
        tables: [
          {
            name: 'users',
            columns: ['id', 'name', 'email', 'created_at']
          },
          {
            name: 'orders',
            columns: ['id', 'user_id', 'total', 'status']
          }
        ]
      }
    ]
  };

  return (
    <SqlEditor
      value="SELECT * FROM "
      dbStructure={dbStructure}
      onQueryRun={(sql) => console.log(sql)}
      fontSize={14}
      legend={true}
    />
  );
}

Custom Styling

<SqlEditor
  value="SELECT * FROM users"
  className="my-sql-editor"
  style={{
    height: '400px',
    border: '1px solid #ccc',
    borderRadius: '4px'
  }}
  fontSize={16}
/>

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | undefined | Initial SQL query value | | className | string | undefined | CSS class name for the container | | style | React.CSSProperties | {} | Inline styles for the container | | fontSize | number | 15 | Editor font size in pixels | | legend | boolean | false | Show keyboard shortcuts legend | | showRunButton | boolean | true | Show/hide the run button | | runButton | ReactElement | Default button | Custom run button component | | dbStructure | Database \| Database[] | [] | Database structure for autocomplete | | onQueryRun | (sql: string) => void | () => {} | Callback when query is executed | | onChange | OnChange | () => {} | Callback when editor content changes | | onSelect | (sql: string) => void | () => {} | Callback when selection changes (debounced 300ms) |

Types

Database

interface Database {
  databaseName: string;
  schemas: Schema[];
}

Schema

interface Schema {
  name: string;
  tables: Table[];
}

Table

interface Table {
  name: string;
  columns: string[];
}

Features in Detail

Autocomplete

The editor provides intelligent autocomplete in multiple contexts:

1. SQL Keywords: Standard SQL keywords (SELECT, FROM, WHERE, etc.)
2. Schema Names: When typing, suggests available schemas
3. Table Names: Suggests tables from all schemas
4. Column Names: After typing table., suggests columns from that table
5. Qualified Names: Supports schema.table.column notation

Trigger autocomplete manually: Press Ctrl+Space

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl + Shift + F | Format SQL | | Ctrl + / | Toggle line comment | | Ctrl + Shift + K | Delete line | | Alt + ↑ / ↓ | Move line up/down | | Ctrl + Space | Trigger autocomplete |

Context Menu

Right-click in the editor to access:

• Run SQL: Execute the selected text or entire query
• Format SQL: Format the selected text or entire query

Selection Behavior

• If text is selected, only the selection is executed/formatted
• If no selection, the entire editor content is used
• Selection changes trigger the onSelect callback (debounced)

Advanced Usage

Custom Run Button

const CustomButton = () => (
  <button className="custom-run-btn">
    <span>▶</span> Execute Query
  </button>
);

<SqlEditor
  value="SELECT * FROM users"
  runButton={<CustomButton />}
  onQueryRun={(sql) => executeQuery(sql)}
/>

Multiple Databases

const databases: Database[] = [
  {
    databaseName: 'production',
    schemas: [/* ... */]
  },
  {
    databaseName: 'staging',
    schemas: [/* ... */]
  }
];

<SqlEditor
  dbStructure={databases}
  onQueryRun={handleQuery}
/>

Tracking Changes

<SqlEditor
  value={initialQuery}
  onChange={(value) => {
    console.log('Editor content:', value);
    // Save to state, localStorage, etc.
  }}
  onSelect={(selectedText) => {
    console.log('Selected:', selectedText);
    // Update UI based on selection
  }}
/>

Development

Local Development

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Build the package:

   npm run build

Testing Locally with npm link

In the package directory:

npm link

In your consuming project:

npm link sql-editor-component

After making changes, rebuild:

npm run build

To unlink:

npm unlink sql-editor-component

Publishing

Update Version

# Patch release (1.0.0 → 1.0.1)
npm version patch

# Minor release (1.0.0 → 1.1.0)
npm version minor

# Major release (1.0.0 → 2.0.0)
npm version major

Publish to npm

npm login
npm publish

For scoped packages:

npm publish --access public

Project Structure

sql-editor-component/
├── src/
│   ├── SqlEditor.tsx          # Main editor component
│   ├── autocomplete3.ts       # Autocomplete logic
│   ├── helper.ts              # SQL formatting utilities
│   └── index.ts               # Package exports
├── dist/                      # Built files (generated)
├── package.json
├── tsconfig.json
├── vite.config.js
└── README.md

Browser Support

This component supports all modern browsers that Monaco Editor supports:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Dependencies

• @monaco-editor/react: Monaco Editor React wrapper
• @questdb/sql-grammar: SQL keyword definitions
• sql-formatter: SQL formatting engine
• monaco-editor: Core Monaco Editor

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

License

[Add your license here]

Changelog

v1.0.17

• Cleaned up codebase
• Improved documentation
• Enhanced autocomplete logic
• Better TypeScript types

Support

For issues, questions, or contributions, please visit the GitHub repository.