@sqlrooms/monaco-editor 0.24.15 → 0.24.17

package/dist/components/MonacoEditor.d.ts

@@ -1,5 +1,6 @@
 import { EditorProps, OnChange, OnMount } from '@monaco-editor/react';
 import React from 'react';
+import type * as Monaco from 'monaco-editor';
 export interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {
     /**
      * Callback when the editor is mounted
@@ -37,7 +38,7 @@ export interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {
     /**
      * Additional options for the editor
      */
-    options?: Record<string, any>;
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
 }
 /**
  * A wrapper around the Monaco Editor component

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

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAG5E,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/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,CAmNpD,CAAC"}
+{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAG5E,OAAO,KAA0B,MAAM,OAAO,CAAC;AAO/C,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAE7C,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,CAAC,oCAAoC,CAAC;CAC9D;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmNpD,CAAC"}

package/dist/components/MonacoEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Editor, EditorProps, OnChange, OnMount} from '@monaco-editor/react';\nimport {ensureMonacoLoaderConfigured} from '../loader';\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\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  // Ensure the loader is configured before the editor mounts\n  ensureMonacoLoaderConfigured();\n  // Get the app theme from the ThemeProvider\n  const {theme: appTheme} = useTheme();\n  const [renderKey, setRenderKey] = React.useState(0);\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      // Force re-render to apply the new theme\n      setRenderKey((key) => key + 1);\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          // Force re-render to apply the new theme\n          setRenderKey((key) => key + 1);\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('h-[300px] w-full', 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        key={renderKey}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Editor, EditorProps, OnChange, OnMount} from '@monaco-editor/react';\nimport {ensureMonacoLoaderConfigured} from '../loader';\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';\nimport type * as Monaco from 'monaco-editor';\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?: Monaco.editor.IStandaloneEditorConstructionOptions;\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  // Ensure the loader is configured before the editor mounts\n  ensureMonacoLoaderConfigured();\n  // Get the app theme from the ThemeProvider\n  const {theme: appTheme} = useTheme();\n  const [renderKey, setRenderKey] = React.useState(0);\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      // Force re-render to apply the new theme\n      setRenderKey((key) => key + 1);\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          // Force re-render to apply the new theme\n          setRenderKey((key) => key + 1);\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('h-[300px] w-full', 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        key={renderKey}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/monaco-editor",
-  "version": "0.24.15",
+  "version": "0.24.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@sqlrooms/ui": "0.24.15",
+    "@sqlrooms/ui": "0.24.17",
     "monaco-editor": "^0.52.2"
   },
   "peerDependencies": {
@@ -33,5 +33,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "9388ad51033a365069bad9a14df24a0688b6a592"
+  "gitHead": "31b706c4687780cefa92bc9e715f2839dbe4ee49"
 }