react-monaco-editor-db2

A fork of react-monaco-editor with built-in DB2 SQL language support for IBM i (AS400) systems.

Features

• Full DB2 SQL syntax highlighting
• Schema-aware autocomplete for tables and columns
• Real-time validation with error/warning diagnostics
• Hover information showing column metadata
• CTE (Common Table Expression) support with proper column tracking
• Support for IBM i special characters in identifiers (#, @, $)
• Alias resolution for table references

Installation

From npm (Recommended)

npm install react-monaco-editor-db2

From GitHub

npm install github:cheiser/react-monaco-editor-db2

From Local Path

# Clone the repository
git clone https://github.com/cheiser/react-monaco-editor-db2.git

# Build it
cd react-monaco-editor-db2
npm install
npm run build

# Install in your project
cd /path/to/your-project
npm install /path/to/react-monaco-editor-db2

Using npm link (for development)

# In the react-monaco-editor-db2 directory
npm install
npm run build
npm link

# In your project directory
npm link react-monaco-editor-db2

Usage

Basic Usage (No Schema)

import React from 'react';
import MonacoEditor, { registerDB2SQL } from 'react-monaco-editor-db2';

function DB2Editor() {
  const editorWillMount = (monaco) => {
    registerDB2SQL(monaco);
  };

  return (
    <MonacoEditor
      width="800"
      height="600"
      language="db2sql"
      theme="vs-dark"
      editorWillMount={editorWillMount}
      value="SELECT * FROM MYTABLE;"
    />
  );
}

With Schema Configuration (Recommended)

For full autocomplete and validation support, provide your database schema:

import React from 'react';
import MonacoEditor, { registerDB2SQL, createDB2SQLValidator, createDB2SQLHoverProvider } from 'react-monaco-editor-db2';

const schemaConfig = {
  tables: [
    {
      name: 'EMPLOYEES',
      schema: 'MYLIB',
      description: 'Employee master file',
      type: 'TABLE',
      columns: [
        { name: 'EMPID', dataType: 'INTEGER', description: 'Employee ID', isPrimaryKey: true, nullable: false },
        { name: 'EMPNAME', dataType: 'VARCHAR(50)', description: 'Employee Name' },
        { name: 'DEPT#', dataType: 'CHAR(3)', description: 'Department Code' },
        { name: 'HIREDT', dataType: 'DATE', description: 'Hire Date' },
      ],
    },
    {
      name: 'DEPARTMENTS',
      schema: 'MYLIB',
      columns: [
        { name: 'DEPT#', dataType: 'CHAR(3)', isPrimaryKey: true },
        { name: 'DEPTNAME', dataType: 'VARCHAR(30)' },
      ],
    },
  ],
};

function DB2Editor() {
  const editorRef = React.useRef(null);

  const editorWillMount = (monaco) => {
    registerDB2SQL(monaco, { schema: schemaConfig });
  };

  const editorDidMount = (editor, monaco) => {
    editorRef.current = editor;

    // Set up real-time validation
    const model = editor.getModel();
    const validate = () => {
      const diagnostics = createDB2SQLValidator(monaco, schemaConfig)(model.getValue());
      monaco.editor.setModelMarkers(model, 'db2sql', diagnostics.map(d => ({
        ...d,
        severity: d.severity === 'error' ? monaco.MarkerSeverity.Error : monaco.MarkerSeverity.Warning,
      })));
    };

    model.onDidChangeContent(validate);
    validate();

    // Register hover provider
    monaco.languages.registerHoverProvider('db2sql', createDB2SQLHoverProvider(monaco, schemaConfig));
  };

  return (
    <MonacoEditor
      width="100%"
      height="600"
      language="db2sql"
      theme="vs-dark"
      editorWillMount={editorWillMount}
      editorDidMount={editorDidMount}
      options={{
        minimap: { enabled: false },
        fontSize: 14,
        suggestOnTriggerCharacters: true,
        quickSuggestions: true,
      }}
      value={`SELECT
    E.EMPID,
    E.EMPNAME,
    D.DEPTNAME
FROM MYLIB.EMPLOYEES E
JOIN MYLIB.DEPARTMENTS D ON E.DEPT# = D.DEPT#
WHERE E.HIREDT > '2020-01-01'`}
    />
  );
}

Schema Configuration Types

interface DB2Column {
  name: string;
  dataType?: string;        // e.g., 'VARCHAR(50)', 'INTEGER', 'DECIMAL(10,2)'
  description?: string;
  nullable?: boolean;
  isPrimaryKey?: boolean;
}

interface DB2Table {
  name: string;
  schema?: string;          // Library name for qualified references
  description?: string;
  columns?: DB2Column[];
  type?: 'TABLE' | 'VIEW' | 'ALIAS' | 'PHYSICAL' | 'LOGICAL';
}

interface DB2SchemaConfig {
  schemas?: DB2Schema[];    // For organized multi-schema setups
  tables?: DB2Table[];      // Flat list of tables
  defaultSchema?: string;
  showSchemaPrefix?: boolean;
}

interface DB2SQLOptions {
  schema?: DB2SchemaConfig;
}

Webpack Configuration

Add the Monaco Webpack plugin to your webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['sql'],  // Base SQL support
      features: ['suggest', 'hover', 'bracketMatching', 'find', 'folding'],
    }),
  ],
};

For Create React App

Use react-app-rewired:

1. npm install -D react-app-rewired monaco-editor-webpack-plugin
2. Create config-overrides.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config) {
  config.plugins.push(new MonacoWebpackPlugin({
    languages: ['sql'],
  }));
  return config;
};

3. Update package.json scripts to use react-app-rewired instead of react-scripts.

Exports

import MonacoEditor, {
  registerDB2SQL,           // Register DB2 SQL language with Monaco
  createDB2SQLValidator,    // Create validator function
  createDB2SQLHoverProvider,// Create hover provider
  validateDB2SQL,           // Direct validation function
  DB2SQL_LANGUAGE_ID,       // Language ID constant ('db2sql')
  MonacoDiffEditor,         // Diff editor component
  monaco,                   // Monaco editor instance
} from 'react-monaco-editor-db2';

License

MIT