@sqlrooms/monaco-editor 0.28.0 → 0.29.0-rc.0

package/dist/components/MonacoEditor.d.ts

@@ -1,6 +1,6 @@
 import { EditorProps, OnChange, OnMount } from '@monaco-editor/react';
-import React from 'react';
 import type * as Monaco from 'monaco-editor';
+import React from 'react';
 export interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {
     /**
      * Callback when the editor is mounted

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;AAE5E,OAAO,KAAyD,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAkC7C,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;AA0ED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkHpD,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;AAE5E,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAyD,MAAM,OAAO,CAAC;AAwC9E,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;AA0ED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkHpD,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 {Spinner, cn, useTheme} from '@sqlrooms/ui';\nimport React, {useEffect, useMemo, useRef, useSyncExternalStore} from 'react';\nimport {\n  getCssColor,\n  getJsonEditorTheme,\n  getMenuColors,\n  getMonospaceFont,\n} from '../utils/color-utils';\nimport type * as Monaco from 'monaco-editor';\n\n// Rendering issue fix for white rectangle appearing above text in Monaco.\n// Monaco creates a hidden textarea for IME input. If Monaco CSS loads late,\n// this textarea can briefly render as a normal white block and shift content.\n// Force it to never participate in layout / painting.\nlet isImeTextareaStyleInjected = false;\nfunction suppressMonacoTextareaFlash() {\n  if (isImeTextareaStyleInjected) return;\n  if (typeof document === 'undefined') return;\n  isImeTextareaStyleInjected = true;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-sqlrooms-monaco-ime-style', 'true');\n  style.textContent = `\n    .monaco-editor textarea.ime-text-area {\n      position: absolute !important;\n      top: 0 !important;\n      left: 0 !important;\n      width: 1px !important;\n      height: 1px !important;\n      opacity: 0 !important;\n      background: transparent !important;\n      color: transparent !important;\n      border: 0 !important;\n      padding: 0 !important;\n      margin: 0 !important;\n      pointer-events: none !important;\n      z-index: -1 !important;\n    }\n  `;\n  document.head.appendChild(style);\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?: Monaco.editor.IStandaloneEditorConstructionOptions;\n}\n\n// Module-level singleton to track theme state\nlet lastDefinedForDarkMode: boolean | null = null;\n\nfunction defineMonacoThemes(\n  monaco: typeof Monaco,\n  isDark: boolean,\n  currentTheme: string,\n) {\n  suppressMonacoTextareaFlash();\n\n  // Only redefine if the theme mode has changed or themes haven't been defined yet\n  if (lastDefinedForDarkMode === isDark) return;\n  lastDefinedForDarkMode = isDark;\n\n  // Define both light and dark themes with current CSS variable values\n  // Light theme\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-json-light', getJsonEditorTheme(false));\n\n  // Dark theme\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  monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));\n\n  // Apply the correct theme variant (respects JSON-specific themes)\n  monaco.editor.setTheme(currentTheme);\n}\n\nconst DEFAULT_MONACO_OPTIONS: Monaco.editor.IStandaloneEditorConstructionOptions =\n  {\n    minimap: {enabled: false},\n    scrollBeyondLastLine: false,\n    automaticLayout: true,\n    fontLigatures: true,\n    fixedOverflowWidgets: true,\n    // Prevent an initial top \"reserved\" area that can appear briefly while Monaco\n    // computes sticky scroll layout (shows up as a blank/white rectangle above text).\n    stickyScroll: {enabled: false} as any,\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  beforeMount,\n  ...props\n}) => {\n  const {theme: appTheme} = useTheme();\n\n  // Track system dark preference without setState-in-effect\n  const systemPrefersDark = useSyncExternalStore(\n    (onStoreChange) => {\n      if (appTheme !== 'system' || typeof window === 'undefined') {\n        return () => {};\n      }\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      mediaQuery.addEventListener('change', onStoreChange);\n      return () => mediaQuery.removeEventListener('change', onStoreChange);\n    },\n    () => {\n      if (appTheme !== 'system' || typeof window === 'undefined') return false;\n      return window.matchMedia('(prefers-color-scheme: dark)').matches;\n    },\n    () => false,\n  );\n\n  const isDark =\n    explicitTheme === 'vs-dark'\n      ? true\n      : explicitTheme === 'light'\n        ? false\n        : appTheme === 'dark' || (appTheme === 'system' && systemPrefersDark);\n\n  const monacoTheme =\n    language === 'json'\n      ? isDark\n        ? 'sqlrooms-json-dark'\n        : 'sqlrooms-json-light'\n      : isDark\n        ? 'sqlrooms-dark'\n        : 'sqlrooms-light';\n\n  const editorRef = useRef<any>(null);\n  const monacoRef = useRef<typeof Monaco | null>(null);\n\n  const handleBeforeMount: NonNullable<EditorProps['beforeMount']> = (\n    monaco,\n  ) => {\n    monacoRef.current = monaco;\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n    beforeMount?.(monaco);\n  };\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    editorRef.current = editor;\n    monacoRef.current = monaco;\n\n    // Safety: in case beforeMount didn't run for any reason.\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  // Redefine themes globally (once) when theme mode changes, then apply correct variant\n  useEffect(() => {\n    if (monacoRef.current) {\n      defineMonacoThemes(monacoRef.current, isDark, monacoTheme);\n    }\n  }, [isDark, monacoTheme, language]);\n\n  // Apply readOnly option\n  useEffect(() => {\n    if (editorRef.current) {\n      editorRef.current.updateOptions({readOnly});\n    }\n  }, [readOnly]);\n\n  // Get monospace font for code editor\n  const fontFamily = getMonospaceFont();\n\n  const combinedOptions = useMemo(\n    () => ({\n      ...DEFAULT_MONACO_OPTIONS,\n      readOnly,\n      fontFamily,\n      ...options,\n    }),\n    [options, fontFamily, readOnly],\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={monacoTheme}\n        value={value}\n        options={combinedOptions}\n        beforeMount={handleBeforeMount}\n        onMount={handleEditorDidMount}\n        onChange={onChange}\n        loading={<Spinner />}\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 {Spinner, cn, useTheme} from '@sqlrooms/ui';\nimport type * as Monaco from 'monaco-editor';\nimport React, {useEffect, useMemo, useRef, useSyncExternalStore} from 'react';\nimport {\n  getCssColor,\n  getJsonEditorTheme,\n  getMenuColors,\n  getMonospaceFont,\n} from '../utils/color-utils';\n\n// Rendering issue fix for white rectangle appearing above text in Monaco.\n// Monaco creates a hidden textarea for IME input. If Monaco CSS loads late,\n// this textarea can briefly render as a normal white block and shift content.\n// Force it to never participate in layout / painting.\nlet isImeTextareaStyleInjected = false;\nfunction suppressMonacoTextareaFlash() {\n  if (isImeTextareaStyleInjected) return;\n  if (typeof document === 'undefined') return;\n  isImeTextareaStyleInjected = true;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-sqlrooms-monaco-ime-style', 'true');\n  style.textContent = `\n    .monaco-editor textarea.ime-text-area {\n      position: absolute !important;\n      top: 0 !important;\n      left: 0 !important;\n      width: 1px !important;\n      height: 1px !important;\n      opacity: 0 !important;\n      background: transparent !important;\n      color: transparent !important;\n      border: 0 !important;\n      padding: 0 !important;\n      margin: 0 !important;\n      pointer-events: none !important;\n      z-index: -1 !important;\n    }\n  `;\n  document.head.appendChild(style);\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?: Monaco.editor.IStandaloneEditorConstructionOptions;\n}\n\n// Module-level singleton to track theme state\nlet lastDefinedForDarkMode: boolean | null = null;\n\nfunction defineMonacoThemes(\n  monaco: typeof Monaco,\n  isDark: boolean,\n  currentTheme: string,\n) {\n  suppressMonacoTextareaFlash();\n\n  // Only redefine if the theme mode has changed or themes haven't been defined yet\n  if (lastDefinedForDarkMode === isDark) return;\n  lastDefinedForDarkMode = isDark;\n\n  // Define both light and dark themes with current CSS variable values\n  // Light theme\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-json-light', getJsonEditorTheme(false));\n\n  // Dark theme\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  monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));\n\n  // Apply the correct theme variant (respects JSON-specific themes)\n  monaco.editor.setTheme(currentTheme);\n}\n\nconst DEFAULT_MONACO_OPTIONS: Monaco.editor.IStandaloneEditorConstructionOptions =\n  {\n    minimap: {enabled: false},\n    scrollBeyondLastLine: false,\n    automaticLayout: true,\n    fontLigatures: true,\n    fixedOverflowWidgets: true,\n    // Prevent an initial top \"reserved\" area that can appear briefly while Monaco\n    // computes sticky scroll layout (shows up as a blank/white rectangle above text).\n    stickyScroll: {enabled: false} as any,\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  beforeMount,\n  ...props\n}) => {\n  const {theme: appTheme} = useTheme();\n\n  // Track system dark preference without setState-in-effect\n  const systemPrefersDark = useSyncExternalStore(\n    (onStoreChange) => {\n      if (appTheme !== 'system' || typeof window === 'undefined') {\n        return () => {};\n      }\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      mediaQuery.addEventListener('change', onStoreChange);\n      return () => mediaQuery.removeEventListener('change', onStoreChange);\n    },\n    () => {\n      if (appTheme !== 'system' || typeof window === 'undefined') return false;\n      return window.matchMedia('(prefers-color-scheme: dark)').matches;\n    },\n    () => false,\n  );\n\n  const isDark =\n    explicitTheme === 'vs-dark'\n      ? true\n      : explicitTheme === 'light'\n        ? false\n        : appTheme === 'dark' || (appTheme === 'system' && systemPrefersDark);\n\n  const monacoTheme =\n    language === 'json'\n      ? isDark\n        ? 'sqlrooms-json-dark'\n        : 'sqlrooms-json-light'\n      : isDark\n        ? 'sqlrooms-dark'\n        : 'sqlrooms-light';\n\n  const editorRef = useRef<any>(null);\n  const monacoRef = useRef<typeof Monaco | null>(null);\n\n  const handleBeforeMount: NonNullable<EditorProps['beforeMount']> = (\n    monaco,\n  ) => {\n    monacoRef.current = monaco;\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n    beforeMount?.(monaco);\n  };\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    editorRef.current = editor;\n    monacoRef.current = monaco;\n\n    // Safety: in case beforeMount didn't run for any reason.\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  // Redefine themes globally (once) when theme mode changes, then apply correct variant\n  useEffect(() => {\n    if (monacoRef.current) {\n      defineMonacoThemes(monacoRef.current, isDark, monacoTheme);\n    }\n  }, [isDark, monacoTheme, language]);\n\n  // Apply readOnly option\n  useEffect(() => {\n    if (editorRef.current) {\n      editorRef.current.updateOptions({readOnly});\n    }\n  }, [readOnly]);\n\n  // Get monospace font for code editor\n  const fontFamily = getMonospaceFont();\n\n  const combinedOptions = useMemo(\n    () => ({\n      ...DEFAULT_MONACO_OPTIONS,\n      readOnly,\n      fontFamily,\n      ...options,\n    }),\n    [options, fontFamily, readOnly],\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={monacoTheme}\n        value={value}\n        options={combinedOptions}\n        beforeMount={handleBeforeMount}\n        onMount={handleEditorDidMount}\n        onChange={onChange}\n        loading={<Spinner />}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/monaco-editor",
-  "version": "0.28.0",
+  "version": "0.29.0-rc.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@sqlrooms/ui": "0.28.0",
-    "monaco-editor": "^0.55.0"
+    "@sqlrooms/ui": "0.29.0-rc.0",
+    "monaco-editor": "^0.55.1"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -34,5 +34,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "dcac54f8adf77240e293c93d224a0ce9fd8142a9"
+  "gitHead": "afdb949c9601b4cdeaae966157a25a54aea2ae54"
 }