@sqlrooms/monaco-editor 0.7.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 Ilya Boyandin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# @sqlrooms/monaco-editor
+
+Monaco Editor components for SQLRooms, including specialized editors for JSON.
+
+## Installation
+
+```bash
+npm install @sqlrooms/monaco-editor
+```
+
+## Components
+
+### MonacoEditor
+
+A base Monaco Editor component with common functionality.
+
+```tsx
+import {MonacoEditor} from '@sqlrooms/monaco-editor';
+
+function MyComponent() {
+  return (
+    <MonacoEditor
+      className="h-[400px]"
+      language="javascript"
+      value="// Your code here"
+      onChange={(value) => console.log(value)}
+    />
+  );
+}
+```
+
+### JsonMonacoEditor
+
+A specialized Monaco Editor for editing JSON with schema validation.
+
+```tsx
+import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';
+
+function MyJsonEditor() {
+  const schema = {
+    type: 'object',
+    properties: {
+      name: {type: 'string'},
+      age: {type: 'number'},
+    },
+    required: ['name'],
+  };
+
+  return (
+    <JsonMonacoEditor
+      className="h-[400px]"
+      value={{name: 'John', age: 30}}
+      schema={schema}
+      onChange={(value) => console.log(value)}
+    />
+  );
+}
+```
+
+## Props
+
+### MonacoEditor Props
+
+| Prop      | Type                 | Default      | Description                              |
+| --------- | -------------------- | ------------ | ---------------------------------------- |
+| className | string               | ''           | CSS class name for the editor container  |
+| language  | string               | 'javascript' | The language of the editor               |
+| theme     | 'vs-dark' \| 'light' | 'vs-dark'    | The theme of the editor                  |
+| value     | string               | ''           | The value of the editor                  |
+| readOnly  | boolean              | false        | Whether the editor is read-only          |
+| options   | object               | {}           | Additional options for the editor        |
+| onMount   | function             | -            | Callback when the editor is mounted      |
+| onChange  | function             | -            | Callback when the editor content changes |
+
+### JsonMonacoEditor Props
+
+Extends `MonacoEditorProps` with:
+
+| Prop   | Type             | Default | Description                         |
+| ------ | ---------------- | ------- | ----------------------------------- |
+| schema | object           | -       | The JSON schema to validate against |
+| value  | string \| object | ''      | The JSON value to edit              |
+
+## License
+
+MIT

package/dist/components/JsonMonacoEditor.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MonacoEditorProps } from './MonacoEditor';
+export interface JsonMonacoEditorProps extends Omit<MonacoEditorProps, 'language' | 'value'> {
+    /**
+     * The JSON schema to validate against
+     */
+    schema?: object;
+    /**
+     * The JSON value to edit
+     */
+    value?: string | object;
+}
+/**
+ * A Monaco editor for editing JSON with schema validation
+ */
+export declare const JsonMonacoEditor: React.FC<JsonMonacoEditorProps>;
+//# sourceMappingURL=JsonMonacoEditor.d.ts.map

package/dist/components/JsonMonacoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonMonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/JsonMonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAG/D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACrD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmD5D,CAAC"}

package/dist/components/JsonMonacoEditor.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonacoEditor } from './MonacoEditor';
+/**
+ * A Monaco editor for editing JSON with schema validation
+ */
+export const JsonMonacoEditor = ({ schema, value = '', onMount, className, ...props }) => {
+    // Convert object value to string if needed
+    const stringValue = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
+    // Handle editor mounting to configure JSON schema
+    const handleEditorDidMount = (editor, monaco) => {
+        if (schema) {
+            // Configure JSON schema validation
+            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                validate: true,
+                schemas: [
+                    {
+                        uri: 'http://myserver/schema.json',
+                        fileMatch: ['*'],
+                        schema: schema,
+                    },
+                ],
+            });
+        }
+        // Format the document on initial load
+        setTimeout(() => {
+            editor.getAction('editor.action.formatDocument')?.run();
+        }, 100);
+        // Call the original onMount if provided
+        if (onMount) {
+            onMount(editor, monaco);
+        }
+    };
+    return (_jsx(MonacoEditor, { language: "json", value: stringValue, onMount: handleEditorDidMount, className: className, options: {
+            formatOnPaste: true,
+            formatOnType: true,
+        }, ...props }));
+};
+//# sourceMappingURL=JsonMonacoEditor.js.map

package/dist/components/JsonMonacoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonMonacoEditor.js","sourceRoot":"","sources":["../../src/components/JsonMonacoEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAe/D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,MAAM,EACN,KAAK,GAAG,EAAE,EACV,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,2CAA2C;IAC3C,MAAM,WAAW,GACf,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErE,kDAAkD;IAClD,MAAM,oBAAoB,GAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACvD,IAAI,MAAM,EAAE,CAAC;YACX,mCAAmC;YACnC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC;gBACvD,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE;oBACP;wBACE,GAAG,EAAE,6BAA6B;wBAClC,SAAS,EAAE,CAAC,GAAG,CAAC;wBAChB,MAAM,EAAE,MAAa;qBACtB;iBACF;aACF,CAAC,CAAC;QACL,CAAC;QAED,sCAAsC;QACtC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,CAAC,SAAS,CAAC,8BAA8B,CAAC,EAAE,GAAG,EAAE,CAAC;QAC1D,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,wCAAwC;QACxC,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAC,MAAM,EACf,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE;YACP,aAAa,EAAE,IAAI;YACnB,YAAY,EAAE,IAAI;SACnB,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport {MonacoEditor, MonacoEditorProps} from './MonacoEditor';\nimport {OnMount} from '@monaco-editor/react';\n\nexport interface JsonMonacoEditorProps\n  extends Omit<MonacoEditorProps, 'language' | 'value'> {\n  /**\n   * The JSON schema to validate against\n   */\n  schema?: object;\n  /**\n   * The JSON value to edit\n   */\n  value?: string | object;\n}\n\n/**\n * A Monaco editor for editing JSON with schema validation\n */\nexport const JsonMonacoEditor: React.FC<JsonMonacoEditorProps> = ({\n  schema,\n  value = '',\n  onMount,\n  className,\n  ...props\n}) => {\n  // Convert object value to string if needed\n  const stringValue =\n    typeof value === 'object' ? JSON.stringify(value, null, 2) : value;\n\n  // Handle editor mounting to configure JSON schema\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    if (schema) {\n      // Configure JSON schema validation\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        validate: true,\n        schemas: [\n          {\n            uri: 'http://myserver/schema.json',\n            fileMatch: ['*'],\n            schema: schema as any,\n          },\n        ],\n      });\n    }\n\n    // Format the document on initial load\n    setTimeout(() => {\n      editor.getAction('editor.action.formatDocument')?.run();\n    }, 100);\n\n    // Call the original onMount if provided\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  return (\n    <MonacoEditor\n      language=\"json\"\n      value={stringValue}\n      onMount={handleEditorDidMount}\n      className={className}\n      options={{\n        formatOnPaste: true,\n        formatOnType: true,\n      }}\n      {...props}\n    />\n  );\n};\n"]}

package/dist/components/MonacoEditor.d.ts

@@ -0,0 +1,46 @@
+import { EditorProps, OnChange, OnMount } from '@monaco-editor/react';
+import React from 'react';
+export interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {
+    /**
+     * Callback when the editor is mounted
+     */
+    onMount?: OnMount;
+    /**
+     * Callback when the editor content changes
+     */
+    onChange?: OnChange;
+    /**
+     * CSS class name for the editor container
+     * @default ''
+     */
+    className?: string;
+    /**
+     * The language of the editor
+     * @default 'javascript'
+     */
+    language?: string;
+    /**
+     * The theme of the editor
+     * Can be explicitly set or will automatically use the app theme if not provided
+     * @default 'vs-dark'
+     */
+    theme?: 'vs-dark' | 'light';
+    /**
+     * The value of the editor
+     */
+    value?: string;
+    /**
+     * Whether the editor is read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Additional options for the editor
+     */
+    options?: Record<string, any>;
+}
+/**
+ * A wrapper around the Monaco Editor component
+ */
+export declare const MonacoEditor: React.FC<MonacoEditorProps>;
+//# sourceMappingURL=MonacoEditor.d.ts.map

package/dist/components/MonacoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,QAAQ,EACR,OAAO,EAER,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAe/C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACrE;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0MpD,CAAC"}

package/dist/components/MonacoEditor.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Editor, loader, } from '@monaco-editor/react';
+import { Spinner, cn, useTheme } from '@sqlrooms/ui';
+import { useEffect, useRef } from 'react';
+import { getCssColor, getJsonEditorTheme, getMenuColors, getMonospaceFont, } from '../utils/color-utils';
+// Configure the Monaco loader
+loader.config({
+    paths: {
+        vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs',
+    },
+});
+/**
+ * A wrapper around the Monaco Editor component
+ */
+export const MonacoEditor = ({ className, language = 'javascript', theme: explicitTheme, value = '', readOnly = false, onMount, onChange, options = {}, ...props }) => {
+    // Get the app theme from the ThemeProvider
+    const { theme: appTheme } = useTheme();
+    // If a theme is explicitly provided, use it. Otherwise, determine from the app theme
+    const theme = explicitTheme ||
+        (appTheme === 'dark' ||
+            (appTheme === 'system' &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches)
+            ? 'vs-dark'
+            : 'light');
+    const editorRef = useRef(null);
+    const monacoRef = useRef(null);
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        monacoRef.current = monaco;
+        // Special language configuration for JSON
+        if (language === 'json') {
+            // Define a more robust tokenizer for JSON with improved rules
+            monaco.languages.setMonarchTokensProvider('json', {
+                tokenizer: {
+                    root: [
+                        // Property keys (strings followed by a colon)
+                        [/"([^"]*)"(?=\s*:)/, 'string.key.json'],
+                        // Regular string values (any quoted string not followed by a colon)
+                        [/"([^"]*)"(?!\s*:)/, 'string.value.json'],
+                        // Numbers (integers, decimals, and scientific notation)
+                        [/-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/, 'number'],
+                        // Keywords
+                        [/\b(?:true|false|null)\b/, 'keyword'],
+                        // Punctuation and delimiters
+                        [/[{}[\],:]/, 'delimiter'],
+                    ],
+                },
+            });
+        }
+        // Define editor themes with Tailwind CSS variables
+        monaco.editor.defineTheme('sqlrooms-light', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': getCssColor('--background', '#ffffff'),
+                'editor.foreground': getCssColor('--foreground', '#000000'),
+                'editor.lineHighlightBackground': getCssColor('--muted', '#f5f5f5'),
+                'editorCursor.foreground': getCssColor('--primary', '#000000'),
+                'editor.selectionBackground': getCssColor('--accent', '#e3e3e3'),
+                'editorLineNumber.foreground': getCssColor('--muted-foreground', '#888888'),
+                ...getMenuColors(false),
+            },
+        });
+        monaco.editor.defineTheme('sqlrooms-dark', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': getCssColor('--background', '#1e1e1e'),
+                'editor.foreground': getCssColor('--foreground', '#d4d4d4'),
+                'editor.lineHighlightBackground': getCssColor('--muted', '#2a2a2a'),
+                'editorCursor.foreground': getCssColor('--primary', '#ffffff'),
+                'editor.selectionBackground': getCssColor('--accent', '#264f78'),
+                'editorLineNumber.foreground': getCssColor('--muted-foreground', '#858585'),
+                ...getMenuColors(true),
+            },
+        });
+        // Define JSON-specific themes with rich token coloring
+        monaco.editor.defineTheme('sqlrooms-json-light', getJsonEditorTheme(false));
+        monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));
+        // Apply the custom theme based on content type
+        const isDark = appTheme === 'dark' ||
+            (appTheme === 'system' &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches);
+        // Use JSON-specific theme for JSON files
+        if (language === 'json') {
+            monaco.editor.setTheme(isDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light');
+        }
+        else {
+            monaco.editor.setTheme(isDark ? 'sqlrooms-dark' : 'sqlrooms-light');
+        }
+        if (onMount) {
+            onMount(editor, monaco);
+        }
+    };
+    // Apply readOnly option
+    useEffect(() => {
+        if (editorRef.current) {
+            editorRef.current.updateOptions({ readOnly });
+        }
+    }, [readOnly]);
+    // Update the editor theme when app theme changes
+    useEffect(() => {
+        if (editorRef.current && monacoRef.current && !explicitTheme) {
+            const isDark = appTheme === 'dark' ||
+                (appTheme === 'system' &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches);
+            // Use JSON-specific theme for JSON files
+            if (language === 'json') {
+                monacoRef.current.editor.setTheme(isDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light');
+            }
+            else {
+                monacoRef.current.editor.setTheme(isDark ? 'sqlrooms-dark' : 'sqlrooms-light');
+            }
+        }
+    }, [appTheme, explicitTheme, language]);
+    // Listen for system theme changes if using system theme
+    useEffect(() => {
+        if (appTheme === 'system' && !explicitTheme && monacoRef.current) {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const handleChange = () => {
+                if (monacoRef.current) {
+                    // Use JSON-specific theme for JSON files
+                    if (language === 'json') {
+                        monacoRef.current.editor.setTheme(mediaQuery.matches ? 'sqlrooms-json-dark' : 'sqlrooms-json-light');
+                    }
+                    else {
+                        monacoRef.current.editor.setTheme(mediaQuery.matches ? 'sqlrooms-dark' : 'sqlrooms-light');
+                    }
+                }
+            };
+            // Add listener for theme changes
+            mediaQuery.addEventListener('change', handleChange);
+            // Clean up
+            return () => {
+                mediaQuery.removeEventListener('change', handleChange);
+            };
+        }
+    }, [appTheme, explicitTheme, language]);
+    // Get monospace font for code editor
+    const fontFamily = getMonospaceFont();
+    const defaultOptions = {
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        readOnly,
+        fontFamily,
+        fontLigatures: true,
+        ...options,
+    };
+    return (_jsx("div", { className: cn('w-full h-[300px]', className), children: _jsx(Editor, { height: "100%", width: "100%", language: language, theme: theme, value: value, options: defaultOptions, onMount: handleEditorDidMount, onChange: onChange, loading: _jsx(Spinner, {}), ...props }) }));
+};
+//# sourceMappingURL=MonacoEditor.js.map

package/dist/components/MonacoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Editor,\n  EditorProps,\n  OnChange,\n  OnMount,\n  loader,\n} from '@monaco-editor/react';\nimport {Spinner, cn, useTheme} from '@sqlrooms/ui';\nimport React, {useEffect, useRef} from 'react';\nimport {\n  getCssColor,\n  getJsonEditorTheme,\n  getMenuColors,\n  getMonospaceFont,\n} from '../utils/color-utils';\n\n// Configure the Monaco loader\nloader.config({\n  paths: {\n    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs',\n  },\n});\n\nexport interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {\n  /**\n   * Callback when the editor is mounted\n   */\n  onMount?: OnMount;\n  /**\n   * Callback when the editor content changes\n   */\n  onChange?: OnChange;\n  /**\n   * CSS class name for the editor container\n   * @default ''\n   */\n  className?: string;\n  /**\n   * The language of the editor\n   * @default 'javascript'\n   */\n  language?: string;\n  /**\n   * The theme of the editor\n   * Can be explicitly set or will automatically use the app theme if not provided\n   * @default 'vs-dark'\n   */\n  theme?: 'vs-dark' | 'light';\n  /**\n   * The value of the editor\n   */\n  value?: string;\n  /**\n   * Whether the editor is read-only\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Additional options for the editor\n   */\n  options?: Record<string, any>;\n}\n\n/**\n * A wrapper around the Monaco Editor component\n */\nexport const MonacoEditor: React.FC<MonacoEditorProps> = ({\n  className,\n  language = 'javascript',\n  theme: explicitTheme,\n  value = '',\n  readOnly = false,\n  onMount,\n  onChange,\n  options = {},\n  ...props\n}) => {\n  // Get the app theme from the ThemeProvider\n  const {theme: appTheme} = useTheme();\n\n  // If a theme is explicitly provided, use it. Otherwise, determine from the app theme\n  const theme =\n    explicitTheme ||\n    (appTheme === 'dark' ||\n    (appTheme === 'system' &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches)\n      ? 'vs-dark'\n      : 'light');\n\n  const editorRef = useRef<any>(null);\n  const monacoRef = useRef<any>(null);\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    editorRef.current = editor;\n    monacoRef.current = monaco;\n\n    // Special language configuration for JSON\n    if (language === 'json') {\n      // Define a more robust tokenizer for JSON with improved rules\n      monaco.languages.setMonarchTokensProvider('json', {\n        tokenizer: {\n          root: [\n            // Property keys (strings followed by a colon)\n            [/\"([^\"]*)\"(?=\\s*:)/, 'string.key.json'],\n\n            // Regular string values (any quoted string not followed by a colon)\n            [/\"([^\"]*)\"(?!\\s*:)/, 'string.value.json'],\n\n            // Numbers (integers, decimals, and scientific notation)\n            [/-?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?/, 'number'],\n\n            // Keywords\n            [/\\b(?:true|false|null)\\b/, 'keyword'],\n\n            // Punctuation and delimiters\n            [/[{}[\\],:]/, 'delimiter'],\n          ],\n        },\n      });\n    }\n\n    // Define editor themes with Tailwind CSS variables\n    monaco.editor.defineTheme('sqlrooms-light', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': getCssColor('--background', '#ffffff'),\n        'editor.foreground': getCssColor('--foreground', '#000000'),\n        'editor.lineHighlightBackground': getCssColor('--muted', '#f5f5f5'),\n        'editorCursor.foreground': getCssColor('--primary', '#000000'),\n        'editor.selectionBackground': getCssColor('--accent', '#e3e3e3'),\n        'editorLineNumber.foreground': getCssColor(\n          '--muted-foreground',\n          '#888888',\n        ),\n        ...getMenuColors(false),\n      },\n    });\n\n    monaco.editor.defineTheme('sqlrooms-dark', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': getCssColor('--background', '#1e1e1e'),\n        'editor.foreground': getCssColor('--foreground', '#d4d4d4'),\n        'editor.lineHighlightBackground': getCssColor('--muted', '#2a2a2a'),\n        'editorCursor.foreground': getCssColor('--primary', '#ffffff'),\n        'editor.selectionBackground': getCssColor('--accent', '#264f78'),\n        'editorLineNumber.foreground': getCssColor(\n          '--muted-foreground',\n          '#858585',\n        ),\n        ...getMenuColors(true),\n      },\n    });\n\n    // Define JSON-specific themes with rich token coloring\n    monaco.editor.defineTheme('sqlrooms-json-light', getJsonEditorTheme(false));\n    monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));\n\n    // Apply the custom theme based on content type\n    const isDark =\n      appTheme === 'dark' ||\n      (appTheme === 'system' &&\n        window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n    // Use JSON-specific theme for JSON files\n    if (language === 'json') {\n      monaco.editor.setTheme(\n        isDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light',\n      );\n    } else {\n      monaco.editor.setTheme(isDark ? 'sqlrooms-dark' : 'sqlrooms-light');\n    }\n\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  // Apply readOnly option\n  useEffect(() => {\n    if (editorRef.current) {\n      editorRef.current.updateOptions({readOnly});\n    }\n  }, [readOnly]);\n\n  // Update the editor theme when app theme changes\n  useEffect(() => {\n    if (editorRef.current && monacoRef.current && !explicitTheme) {\n      const isDark =\n        appTheme === 'dark' ||\n        (appTheme === 'system' &&\n          window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n      // Use JSON-specific theme for JSON files\n      if (language === 'json') {\n        monacoRef.current.editor.setTheme(\n          isDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light',\n        );\n      } else {\n        monacoRef.current.editor.setTheme(\n          isDark ? 'sqlrooms-dark' : 'sqlrooms-light',\n        );\n      }\n    }\n  }, [appTheme, explicitTheme, language]);\n\n  // Listen for system theme changes if using system theme\n  useEffect(() => {\n    if (appTheme === 'system' && !explicitTheme && monacoRef.current) {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      const handleChange = () => {\n        if (monacoRef.current) {\n          // Use JSON-specific theme for JSON files\n          if (language === 'json') {\n            monacoRef.current.editor.setTheme(\n              mediaQuery.matches ? 'sqlrooms-json-dark' : 'sqlrooms-json-light',\n            );\n          } else {\n            monacoRef.current.editor.setTheme(\n              mediaQuery.matches ? 'sqlrooms-dark' : 'sqlrooms-light',\n            );\n          }\n        }\n      };\n\n      // Add listener for theme changes\n      mediaQuery.addEventListener('change', handleChange);\n\n      // Clean up\n      return () => {\n        mediaQuery.removeEventListener('change', handleChange);\n      };\n    }\n  }, [appTheme, explicitTheme, language]);\n\n  // Get monospace font for code editor\n  const fontFamily = getMonospaceFont();\n\n  const defaultOptions = {\n    minimap: {enabled: false},\n    scrollBeyondLastLine: false,\n    automaticLayout: true,\n    readOnly,\n    fontFamily,\n    fontLigatures: true,\n    ...options,\n  };\n\n  return (\n    <div className={cn('w-full h-[300px]', className)}>\n      <Editor\n        height=\"100%\"\n        width=\"100%\"\n        language={language}\n        theme={theme}\n        value={value}\n        options={defaultOptions}\n        onMount={handleEditorDidMount}\n        onChange={onChange}\n        loading={<Spinner />}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}

package/dist/components/SqlMonacoEditor.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MonacoEditorProps } from './MonacoEditor';
+export interface SqlMonacoEditorProps extends Omit<MonacoEditorProps, 'language'> {
+    /**
+     * Custom SQL keywords to add to the completion provider
+     */
+    customKeywords?: string[];
+    /**
+     * Custom SQL functions to add to the completion provider
+     */
+    customFunctions?: string[];
+    /**
+     * Table schemas for autocompletion
+     * Format: { tableName: { columnName: columnType, ... }, ... }
+     */
+    tableSchemas?: Record<string, Record<string, string>>;
+    /**
+     * Sample data for tables to enhance autocompletion
+     * Format: { tableName: [sampleDescription1, sampleDescription2, ...], ... }
+     */
+    tableSamples?: Record<string, string[]>;
+}
+/**
+ * A Monaco editor for editing SQL with DuckDB syntax highlighting and autocompletion
+ */
+export declare const SqlMonacoEditor: React.FC<SqlMonacoEditorProps>;
+//# sourceMappingURL=SqlMonacoEditor.d.ts.map

package/dist/components/SqlMonacoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlMonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/SqlMonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAS/D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IAC3C;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2M1D,CAAC"}

package/dist/components/SqlMonacoEditor.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonacoEditor } from './MonacoEditor';
+import { DUCKDB_KEYWORDS, DUCKDB_FUNCTIONS, SQL_LANGUAGE_CONFIGURATION, } from '../constants/duckdb';
+/**
+ * A Monaco editor for editing SQL with DuckDB syntax highlighting and autocompletion
+ */
+export const SqlMonacoEditor = ({ customKeywords = [], customFunctions = [], tableSchemas = {}, tableSamples = {}, onMount, className, ...props }) => {
+    // Handle editor mounting to configure SQL language features
+    const handleEditorDidMount = (editor, monaco) => {
+        // Register SQL language if not already registered
+        if (!monaco.languages.getLanguages().some((lang) => lang.id === 'sql')) {
+            monaco.languages.register({ id: 'sql' });
+        }
+        // Combine keywords and functions with custom ones
+        const keywords = [...DUCKDB_KEYWORDS, ...customKeywords];
+        const functions = [...DUCKDB_FUNCTIONS, ...customFunctions];
+        // Set the language configuration
+        monaco.languages.setMonarchTokensProvider('sql', {
+            ...SQL_LANGUAGE_CONFIGURATION,
+            keywords,
+            builtinFunctions: functions,
+        }); // Using 'as any' to bypass the type checking issue
+        // Dispose any existing completion providers for SQL
+        // Using a safer approach that doesn't rely on internal properties
+        try {
+            // We'll register our provider and let Monaco handle the disposal of previous ones
+        }
+        catch (error) {
+            console.error('Error disposing completion providers:', error);
+        }
+        // Register SQL completion provider
+        const disposable = monaco.languages.registerCompletionItemProvider('sql', {
+            triggerCharacters: [' ', '.', ',', '(', '='],
+            provideCompletionItems: (model, position) => {
+                try {
+                    const suggestions = [];
+                    const word = model.getWordUntilPosition(position);
+                    const range = {
+                        startLineNumber: position.lineNumber,
+                        endLineNumber: position.lineNumber,
+                        startColumn: word.startColumn,
+                        endColumn: word.endColumn,
+                    };
+                    // Get the text before the cursor to determine context
+                    const lineContent = model.getLineContent(position.lineNumber);
+                    const textBeforeCursor = lineContent
+                        .substring(0, position.column - 1)
+                        .trim()
+                        .toLowerCase();
+                    // Check if we're after a FROM, JOIN, or similar clause to prioritize table suggestions
+                    const isTableContext = /\b(from|join|into|update|table)\s+\w*$/.test(textBeforeCursor);
+                    // Check if we're after a table name and period to prioritize column suggestions
+                    const isColumnContext = /\b(\w+)\.\w*$/.test(textBeforeCursor);
+                    // Add keyword suggestions (if not in a specific context)
+                    if (!isColumnContext) {
+                        keywords.forEach((keyword) => {
+                            suggestions.push({
+                                label: keyword,
+                                kind: monaco.languages.CompletionItemKind.Keyword,
+                                insertText: keyword,
+                                range: range,
+                                detail: 'Keyword',
+                                sortText: isTableContext ? 'z' + keyword : 'a' + keyword, // Lower priority in table context
+                            });
+                        });
+                    }
+                    // Add function suggestions (if not in a specific context)
+                    if (!isColumnContext) {
+                        functions.forEach((func) => {
+                            suggestions.push({
+                                label: func,
+                                kind: monaco.languages.CompletionItemKind.Function,
+                                insertText: func,
+                                range: range,
+                                detail: 'Function',
+                                sortText: isTableContext ? 'z' + func : 'b' + func, // Lower priority in table context
+                            });
+                        });
+                    }
+                    // Add table and column suggestions from schemas
+                    Object.entries(tableSchemas).forEach(([tableName, columns]) => {
+                        // Get sample data for this table if available
+                        const samples = tableSamples[tableName] || [];
+                        const sampleText = samples.length > 0 ? `\nSample data:\n${samples.join('\n')}` : '';
+                        // Add table suggestion
+                        suggestions.push({
+                            label: tableName,
+                            kind: monaco.languages.CompletionItemKind.Class,
+                            insertText: tableName,
+                            range: range,
+                            detail: 'Table',
+                            documentation: {
+                                value: `Table: ${tableName}${sampleText}`,
+                                isTrusted: true,
+                            },
+                            sortText: isTableContext ? 'a' + tableName : 'c' + tableName, // Higher priority in table context
+                        });
+                        // Extract table name from context if we're in a column context
+                        let contextTableName = '';
+                        if (isColumnContext) {
+                            const match = textBeforeCursor.match(/\b(\w+)\.\w*$/);
+                            if (match && match[1]) {
+                                contextTableName = match[1];
+                            }
+                        }
+                        // Only add columns for the current table if we're in a column context
+                        if (!isColumnContext || contextTableName === tableName) {
+                            // Add column suggestions
+                            Object.entries(columns).forEach(([columnName, columnType]) => {
+                                // Find sample values for this column if available
+                                const columnSample = samples.find((s) => s.startsWith(`${columnName}:`));
+                                const sampleInfo = columnSample
+                                    ? `\nSample: ${columnSample.split(':')[1]?.trim() || ''}`
+                                    : '';
+                                suggestions.push({
+                                    label: columnName,
+                                    kind: monaco.languages.CompletionItemKind.Field,
+                                    insertText: columnName,
+                                    range: range,
+                                    detail: `Column (${columnType})`,
+                                    documentation: {
+                                        value: `Column from table ${tableName}${sampleInfo}`,
+                                        isTrusted: true,
+                                    },
+                                    sortText: isColumnContext && contextTableName === tableName
+                                        ? 'a' + columnName
+                                        : 'd' + columnName,
+                                });
+                                // Only add table.column suggestions if not in a column context
+                                if (!isColumnContext) {
+                                    suggestions.push({
+                                        label: `${tableName}.${columnName}`,
+                                        kind: monaco.languages.CompletionItemKind.Field,
+                                        insertText: `${tableName}.${columnName}`,
+                                        range: range,
+                                        detail: `Column (${columnType})`,
+                                        documentation: {
+                                            value: `Column from table ${tableName}${sampleInfo}`,
+                                            isTrusted: true,
+                                        },
+                                        sortText: 'e' + tableName + columnName,
+                                    });
+                                }
+                            });
+                        }
+                    });
+                    return {
+                        suggestions,
+                    };
+                }
+                catch (error) {
+                    console.error('Error in SQL completion provider:', error);
+                    return { suggestions: [] };
+                }
+            },
+        });
+        // Store the disposable to clean up later if needed
+        editor.onDidDispose(() => {
+            disposable.dispose();
+        });
+        // Call the original onMount if provided
+        if (onMount) {
+            onMount(editor, monaco);
+        }
+    };
+    return (_jsx(MonacoEditor, { language: "sql", onMount: handleEditorDidMount, className: className, options: {
+            formatOnPaste: true,
+            formatOnType: true,
+            wordWrap: 'on',
+        }, ...props }));
+};
+//# sourceMappingURL=SqlMonacoEditor.js.map

package/dist/components/SqlMonacoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlMonacoEditor.js","sourceRoot":"","sources":["../../src/components/SqlMonacoEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport {MonacoEditor, MonacoEditorProps} from './MonacoEditor';\nimport {OnMount} from '@monaco-editor/react';\nimport type * as Monaco from 'monaco-editor';\nimport {\n  DUCKDB_KEYWORDS,\n  DUCKDB_FUNCTIONS,\n  SQL_LANGUAGE_CONFIGURATION,\n} from '../constants/duckdb';\n\nexport interface SqlMonacoEditorProps\n  extends Omit<MonacoEditorProps, 'language'> {\n  /**\n   * Custom SQL keywords to add to the completion provider\n   */\n  customKeywords?: string[];\n  /**\n   * Custom SQL functions to add to the completion provider\n   */\n  customFunctions?: string[];\n  /**\n   * Table schemas for autocompletion\n   * Format: { tableName: { columnName: columnType, ... }, ... }\n   */\n  tableSchemas?: Record<string, Record<string, string>>;\n  /**\n   * Sample data for tables to enhance autocompletion\n   * Format: { tableName: [sampleDescription1, sampleDescription2, ...], ... }\n   */\n  tableSamples?: Record<string, string[]>;\n}\n\n/**\n * A Monaco editor for editing SQL with DuckDB syntax highlighting and autocompletion\n */\nexport const SqlMonacoEditor: React.FC<SqlMonacoEditorProps> = ({\n  customKeywords = [],\n  customFunctions = [],\n  tableSchemas = {},\n  tableSamples = {},\n  onMount,\n  className,\n  ...props\n}) => {\n  // Handle editor mounting to configure SQL language features\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    // Register SQL language if not already registered\n    if (!monaco.languages.getLanguages().some((lang) => lang.id === 'sql')) {\n      monaco.languages.register({id: 'sql'});\n    }\n\n    // Combine keywords and functions with custom ones\n    const keywords = [...DUCKDB_KEYWORDS, ...customKeywords];\n    const functions = [...DUCKDB_FUNCTIONS, ...customFunctions];\n\n    // Set the language configuration\n    monaco.languages.setMonarchTokensProvider('sql', {\n      ...SQL_LANGUAGE_CONFIGURATION,\n      keywords,\n      builtinFunctions: functions,\n    } as any); // Using 'as any' to bypass the type checking issue\n\n    // Dispose any existing completion providers for SQL\n    // Using a safer approach that doesn't rely on internal properties\n    try {\n      // We'll register our provider and let Monaco handle the disposal of previous ones\n    } catch (error) {\n      console.error('Error disposing completion providers:', error);\n    }\n\n    // Register SQL completion provider\n    const disposable = monaco.languages.registerCompletionItemProvider('sql', {\n      triggerCharacters: [' ', '.', ',', '(', '='],\n      provideCompletionItems: (model, position) => {\n        try {\n          const suggestions: Monaco.languages.CompletionItem[] = [];\n          const word = model.getWordUntilPosition(position);\n          const range = {\n            startLineNumber: position.lineNumber,\n            endLineNumber: position.lineNumber,\n            startColumn: word.startColumn,\n            endColumn: word.endColumn,\n          };\n\n          // Get the text before the cursor to determine context\n          const lineContent = model.getLineContent(position.lineNumber);\n          const textBeforeCursor = lineContent\n            .substring(0, position.column - 1)\n            .trim()\n            .toLowerCase();\n\n          // Check if we're after a FROM, JOIN, or similar clause to prioritize table suggestions\n          const isTableContext = /\\b(from|join|into|update|table)\\s+\\w*$/.test(\n            textBeforeCursor,\n          );\n\n          // Check if we're after a table name and period to prioritize column suggestions\n          const isColumnContext = /\\b(\\w+)\\.\\w*$/.test(textBeforeCursor);\n\n          // Add keyword suggestions (if not in a specific context)\n          if (!isColumnContext) {\n            keywords.forEach((keyword) => {\n              suggestions.push({\n                label: keyword,\n                kind: monaco.languages.CompletionItemKind.Keyword,\n                insertText: keyword,\n                range: range,\n                detail: 'Keyword',\n                sortText: isTableContext ? 'z' + keyword : 'a' + keyword, // Lower priority in table context\n              });\n            });\n          }\n\n          // Add function suggestions (if not in a specific context)\n          if (!isColumnContext) {\n            functions.forEach((func) => {\n              suggestions.push({\n                label: func,\n                kind: monaco.languages.CompletionItemKind.Function,\n                insertText: func,\n                range: range,\n                detail: 'Function',\n                sortText: isTableContext ? 'z' + func : 'b' + func, // Lower priority in table context\n              });\n            });\n          }\n\n          // Add table and column suggestions from schemas\n          Object.entries(tableSchemas).forEach(([tableName, columns]) => {\n            // Get sample data for this table if available\n            const samples = tableSamples[tableName] || [];\n            const sampleText =\n              samples.length > 0 ? `\\nSample data:\\n${samples.join('\\n')}` : '';\n\n            // Add table suggestion\n            suggestions.push({\n              label: tableName,\n              kind: monaco.languages.CompletionItemKind.Class,\n              insertText: tableName,\n              range: range,\n              detail: 'Table',\n              documentation: {\n                value: `Table: ${tableName}${sampleText}`,\n                isTrusted: true,\n              },\n              sortText: isTableContext ? 'a' + tableName : 'c' + tableName, // Higher priority in table context\n            });\n\n            // Extract table name from context if we're in a column context\n            let contextTableName = '';\n            if (isColumnContext) {\n              const match = textBeforeCursor.match(/\\b(\\w+)\\.\\w*$/);\n              if (match && match[1]) {\n                contextTableName = match[1];\n              }\n            }\n\n            // Only add columns for the current table if we're in a column context\n            if (!isColumnContext || contextTableName === tableName) {\n              // Add column suggestions\n              Object.entries(columns).forEach(([columnName, columnType]) => {\n                // Find sample values for this column if available\n                const columnSample = samples.find((s) =>\n                  s.startsWith(`${columnName}:`),\n                );\n                const sampleInfo = columnSample\n                  ? `\\nSample: ${columnSample.split(':')[1]?.trim() || ''}`\n                  : '';\n\n                suggestions.push({\n                  label: columnName,\n                  kind: monaco.languages.CompletionItemKind.Field,\n                  insertText: columnName,\n                  range: range,\n                  detail: `Column (${columnType})`,\n                  documentation: {\n                    value: `Column from table ${tableName}${sampleInfo}`,\n                    isTrusted: true,\n                  },\n                  sortText:\n                    isColumnContext && contextTableName === tableName\n                      ? 'a' + columnName\n                      : 'd' + columnName,\n                });\n\n                // Only add table.column suggestions if not in a column context\n                if (!isColumnContext) {\n                  suggestions.push({\n                    label: `${tableName}.${columnName}`,\n                    kind: monaco.languages.CompletionItemKind.Field,\n                    insertText: `${tableName}.${columnName}`,\n                    range: range,\n                    detail: `Column (${columnType})`,\n                    documentation: {\n                      value: `Column from table ${tableName}${sampleInfo}`,\n                      isTrusted: true,\n                    },\n                    sortText: 'e' + tableName + columnName,\n                  });\n                }\n              });\n            }\n          });\n\n          return {\n            suggestions,\n          };\n        } catch (error) {\n          console.error('Error in SQL completion provider:', error);\n          return {suggestions: []};\n        }\n      },\n    });\n\n    // Store the disposable to clean up later if needed\n    editor.onDidDispose(() => {\n      disposable.dispose();\n    });\n\n    // Call the original onMount if provided\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  return (\n    <MonacoEditor\n      language=\"sql\"\n      onMount={handleEditorDidMount}\n      className={className}\n      options={{\n        formatOnPaste: true,\n        formatOnType: true,\n        wordWrap: 'on',\n      }}\n      {...props}\n    />\n  );\n};\n"]}