@sqlrooms/monaco-editor 0.19.1 → 0.20.0

package/README.md

@@ -59,6 +59,43 @@ function MyJsonEditor() {
 }
 ```
 
+### Configuring the loader for offline use
+
+By default, the editor loads its sources from a CDN. To use the editor in an
+offline environment, you need to bundle `monaco-editor` with your application.
+You can do this with the `configureMonacoLoader` utility. This function is a
+thin wrapper around the [`loader.config` function](https://github.com/suren-atoyan/monaco-react#loader-config)
+and sets up `self.MonacoEnvironment` automatically when web workers are passed.
+
+Here's an example of how to configure the loader to use bundled workers with
+Vite (note the `?worker` suffix):
+
+```ts
+import {configureMonacoLoader} from '@sqlrooms/monaco-editor';
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+// Use the monaco-editor package instead of a CDN
+configureMonacoLoader({
+  monaco,
+  workers: {
+    default: editorWorker,
+    json: jsonWorker,
+    typescript: tsWorker,
+    javascript: tsWorker,
+  },
+});
+```
+
+You can also use `configureMonacoLoader` to specify a custom path to the
+editor's sources, for example, if you are hosting them on a different CDN:
+
+```ts
+// configureMonacoLoader({paths: {vs: 'https://unpkg.com/monaco-editor/min/vs'}});
+```
+
 ## Props
 
 ### MonacoEditor Props

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,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,CAiNpD,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;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"}

package/dist/components/MonacoEditor.js

@@ -1,18 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Editor, loader, } from '@monaco-editor/react';
+import { Editor } from '@monaco-editor/react';
+import { ensureMonacoLoaderConfigured } from '../loader';
 import { Spinner, cn, useTheme } from '@sqlrooms/ui';
 import React, { 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 }) => {
+    // Ensure the loader is configured before the editor mounts
+    ensureMonacoLoaderConfigured();
     // Get the app theme from the ThemeProvider
     const { theme: appTheme } = useTheme();
     const [renderKey, setRenderKey] = React.useState(0);

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 {\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  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';\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"]}

package/dist/index.d.ts

@@ -4,6 +4,7 @@
  */
 export { MonacoEditor } from './components/MonacoEditor';
 export type { MonacoEditorProps } from './components/MonacoEditor';
+export { configureMonacoLoader, type LoaderConfig, type MonacoLoaderOptions, type LoaderWorkers, DEFAULT_CDN_PATH, ensureMonacoLoaderConfigured, } from './loader';
 export { JsonMonacoEditor } from './components/JsonMonacoEditor';
 export type { JsonMonacoEditorProps } from './components/JsonMonacoEditor';
 export { getCssColor, hslToHex, getMonospaceFont } from './utils/color-utils';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACvD,YAAY,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,+BAA+B,CAAC;AAGzE,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACvD,YAAY,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EACL,qBAAqB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,UAAU,CAAC;AAElB,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,+BAA+B,CAAC;AAGzE,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -3,6 +3,7 @@
  * @packageDocumentation
  */
 export { MonacoEditor } from './components/MonacoEditor';
+export { configureMonacoLoader, DEFAULT_CDN_PATH, ensureMonacoLoaderConfigured, } from './loader';
 export { JsonMonacoEditor } from './components/JsonMonacoEditor';
 // Export utility functions
 export { getCssColor, hslToHex, getMonospaceFont } from './utils/color-utils';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AAGvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAG/D,2BAA2B;AAC3B,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {MonacoEditor} from './components/MonacoEditor';\nexport type {MonacoEditorProps} from './components/MonacoEditor';\n\nexport {JsonMonacoEditor} from './components/JsonMonacoEditor';\nexport type {JsonMonacoEditorProps} from './components/JsonMonacoEditor';\n\n// Export utility functions\nexport {getCssColor, hslToHex, getMonospaceFont} from './utils/color-utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AAGvD,OAAO,EACL,qBAAqB,EAIrB,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,UAAU,CAAC;AAElB,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAG/D,2BAA2B;AAC3B,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {MonacoEditor} from './components/MonacoEditor';\nexport type {MonacoEditorProps} from './components/MonacoEditor';\n\nexport {\n  configureMonacoLoader,\n  type LoaderConfig,\n  type MonacoLoaderOptions,\n  type LoaderWorkers,\n  DEFAULT_CDN_PATH,\n  ensureMonacoLoaderConfigured,\n} from './loader';\n\nexport {JsonMonacoEditor} from './components/JsonMonacoEditor';\nexport type {JsonMonacoEditorProps} from './components/JsonMonacoEditor';\n\n// Export utility functions\nexport {getCssColor, hslToHex, getMonospaceFont} from './utils/color-utils';\n"]}

package/dist/loader.d.ts

@@ -0,0 +1,26 @@
+import { loader } from '@monaco-editor/react';
+export interface LoaderWorkers {
+    /** worker used when label does not match other workers */
+    default?: {
+        new (): Worker;
+    };
+    [label: string]: {
+        new (): Worker;
+    } | undefined;
+}
+export declare const DEFAULT_CDN_PATH = "https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs";
+export type LoaderConfig = Parameters<typeof loader.config>[0];
+export interface MonacoLoaderOptions extends LoaderConfig {
+    /**
+     * Pass the Monaco instance to bundle the editor instead of using a CDN
+     */
+    monaco?: any;
+    /**
+     * Provide worker constructors mapped by label to automatically set
+     * `self.MonacoEnvironment.getWorker`
+     */
+    workers?: LoaderWorkers;
+}
+export declare function configureMonacoLoader(options: MonacoLoaderOptions): void;
+export declare function ensureMonacoLoaderConfigured(): void;
+//# sourceMappingURL=loader.d.ts.map

package/dist/loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE;QAAC,QAAQ,MAAM,CAAA;KAAC,CAAC;IAC3B,CAAC,KAAK,EAAE,MAAM,GAAG;QAAC,QAAQ,MAAM,CAAA;KAAC,GAAG,SAAS,CAAC;CAC/C;AAED,eAAO,MAAM,gBAAgB,6DAC+B,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAID,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,mBAAmB,QAcjE;AAED,wBAAgB,4BAA4B,SAK3C"}

package/dist/loader.js

@@ -0,0 +1,23 @@
+import { loader } from '@monaco-editor/react';
+export const DEFAULT_CDN_PATH = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs';
+let configured = false;
+export function configureMonacoLoader(options) {
+    const { workers, ...config } = options;
+    loader.config(config);
+    if (workers) {
+        self.MonacoEnvironment = {
+            getWorker(_, label) {
+                const WorkerCtor = workers[label] || workers.default || undefined;
+                return WorkerCtor ? new WorkerCtor() : undefined;
+            },
+        };
+    }
+    configured = true;
+}
+export function ensureMonacoLoaderConfigured() {
+    if (!configured) {
+        loader.config({ paths: { vs: DEFAULT_CDN_PATH } });
+        configured = true;
+    }
+}
+//# sourceMappingURL=loader.js.map

package/dist/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAQ5C,MAAM,CAAC,MAAM,gBAAgB,GAC3B,0DAA0D,CAAC;AAgB7D,IAAI,UAAU,GAAG,KAAK,CAAC;AAEvB,MAAM,UAAU,qBAAqB,CAAC,OAA4B;IAChE,MAAM,EAAC,OAAO,EAAE,GAAG,MAAM,EAAC,GAAG,OAAO,CAAC;IACrC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAEtB,IAAI,OAAO,EAAE,CAAC;QACZ,IAAI,CAAC,iBAAiB,GAAG;YACvB,SAAS,CAAC,CAAU,EAAE,KAAa;gBACjC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,OAAO,IAAI,SAAS,CAAC;gBAClE,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,EAAE,CAAC,CAAC,CAAE,SAAiB,CAAC;YAC5D,CAAC;SACK,CAAC;IACX,CAAC;IAED,UAAU,GAAG,IAAI,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,4BAA4B;IAC1C,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,CAAC,MAAM,CAAC,EAAC,KAAK,EAAE,EAAC,EAAE,EAAE,gBAAgB,EAAC,EAAC,CAAC,CAAC;QAC/C,UAAU,GAAG,IAAI,CAAC;IACpB,CAAC;AACH,CAAC","sourcesContent":["import {loader} from '@monaco-editor/react';\n\nexport interface LoaderWorkers {\n  /** worker used when label does not match other workers */\n  default?: {new (): Worker};\n  [label: string]: {new (): Worker} | undefined;\n}\n\nexport const DEFAULT_CDN_PATH =\n  'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs';\n\nexport type LoaderConfig = Parameters<typeof loader.config>[0];\n\nexport interface MonacoLoaderOptions extends LoaderConfig {\n  /**\n   * Pass the Monaco instance to bundle the editor instead of using a CDN\n   */\n  monaco?: any;\n  /**\n   * Provide worker constructors mapped by label to automatically set\n   * `self.MonacoEnvironment.getWorker`\n   */\n  workers?: LoaderWorkers;\n}\n\nlet configured = false;\n\nexport function configureMonacoLoader(options: MonacoLoaderOptions) {\n  const {workers, ...config} = options;\n  loader.config(config);\n\n  if (workers) {\n    self.MonacoEnvironment = {\n      getWorker(_: unknown, label: string) {\n        const WorkerCtor = workers[label] || workers.default || undefined;\n        return WorkerCtor ? new WorkerCtor() : (undefined as any);\n      },\n    } as any;\n  }\n\n  configured = true;\n}\n\nexport function ensureMonacoLoaderConfigured() {\n  if (!configured) {\n    loader.config({paths: {vs: DEFAULT_CDN_PATH}});\n    configured = true;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/monaco-editor",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "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.19.1",
+    "@sqlrooms/ui": "0.20.0",
     "monaco-editor": "^0.52.2"
   },
   "peerDependencies": {
@@ -33,5 +33,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "9cd7bbec3d915fa8b3997af840574a8430f74523"
+  "gitHead": "b66f77cfa5bcf1be658e1f36ff01f5613041c653"
 }