@sqlrooms/monaco-editor 0.26.1-rc.1 → 0.26.1-rc.12

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,KAAmC,MAAM,OAAO,CAAC;AAOxD,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;AAUD;;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;AAE5E,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,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;AAUD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuOpD,CAAC"}

package/dist/components/MonacoEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Editor } from '@monaco-editor/react';
 import { Spinner, cn, useTheme } from '@sqlrooms/ui';
-import React, { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { getCssColor, getJsonEditorTheme, getMenuColors, getMonospaceFont, } from '../utils/color-utils';
 const DEFAULT_MONACO_OPTIONS = {
     minimap: { enabled: false },
@@ -15,16 +15,26 @@ const DEFAULT_MONACO_OPTIONS = {
  */
 export const MonacoEditor = ({ className, language = 'javascript', theme: explicitTheme, value = '', readOnly = false, onMount, onChange, options = {}, ...props }) => {
     const { theme: appTheme } = useTheme();
-    const [renderKey, setRenderKey] = React.useState(0);
-    // Determine editor theme based on app theme
-    // Use typeof window check to avoid SSR errors in Next.js when accessing window.matchMedia
-    const theme = explicitTheme ||
-        (appTheme === 'dark' ||
-            (appTheme === 'system' &&
-                typeof window !== 'undefined' &&
-                window.matchMedia('(prefers-color-scheme: dark)').matches)
-            ? 'vs-dark'
-            : 'light');
+    // Track system dark preference without setState-in-effect
+    const systemPrefersDark = useSyncExternalStore((onStoreChange) => {
+        if (appTheme !== 'system' || typeof window === 'undefined') {
+            return () => { };
+        }
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', onStoreChange);
+        return () => mediaQuery.removeEventListener('change', onStoreChange);
+    }, () => {
+        if (appTheme !== 'system' || typeof window === 'undefined')
+            return false;
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }, () => false);
+    const isDark = explicitTheme === 'vs-dark'
+        ? true
+        : explicitTheme === 'light'
+            ? false
+            : appTheme === 'dark' || (appTheme === 'system' && systemPrefersDark);
+    // Determine editor theme name passed to the Editor component
+    const theme = isDark ? 'vs-dark' : 'light';
     const editorRef = useRef(null);
     const monacoRef = useRef(null);
     const handleEditorDidMount = (editor, monaco) => {
@@ -83,15 +93,19 @@ export const MonacoEditor = ({ className, language = 'javascript', theme: explic
         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);
+        const isDarkMount = explicitTheme === 'vs-dark'
+            ? true
+            : explicitTheme === 'light'
+                ? false
+                : 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');
+            monaco.editor.setTheme(isDarkMount ? 'sqlrooms-json-dark' : 'sqlrooms-json-light');
         }
         else {
-            monaco.editor.setTheme(isDark ? 'sqlrooms-dark' : 'sqlrooms-light');
+            monaco.editor.setTheme(isDarkMount ? 'sqlrooms-dark' : 'sqlrooms-light');
         }
         if (onMount) {
             onMount(editor, monaco);
@@ -105,21 +119,21 @@ export const MonacoEditor = ({ className, language = 'javascript', theme: explic
     }, [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);
+        if (editorRef.current && monacoRef.current) {
+            const targetDark = explicitTheme === 'vs-dark'
+                ? true
+                : explicitTheme === 'light'
+                    ? false
+                    : isDark;
             // Use JSON-specific theme for JSON files
             if (language === 'json') {
-                monacoRef.current.editor.setTheme(isDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light');
+                monacoRef.current.editor.setTheme(targetDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light');
             }
             else {
-                monacoRef.current.editor.setTheme(isDark ? 'sqlrooms-dark' : 'sqlrooms-light');
+                monacoRef.current.editor.setTheme(targetDark ? 'sqlrooms-dark' : 'sqlrooms-light');
             }
-            // Force re-render to apply the new theme
-            setRenderKey((key) => key + 1);
         }
-    }, [appTheme, explicitTheme, language]);
+    }, [appTheme, explicitTheme, isDark, language]);
     // Listen for system theme changes if using system theme
     useEffect(() => {
         if (appTheme === 'system' && !explicitTheme && monacoRef.current) {
@@ -133,8 +147,6 @@ export const MonacoEditor = ({ className, language = 'javascript', theme: explic
                     else {
                         monacoRef.current.editor.setTheme(mediaQuery.matches ? 'sqlrooms-dark' : 'sqlrooms-light');
                     }
-                    // Force re-render to apply the new theme
-                    setRenderKey((key) => key + 1);
                 }
             };
             // Add listener for theme changes
@@ -153,7 +165,11 @@ export const MonacoEditor = ({ className, language = 'javascript', theme: explic
         fontFamily,
         ...options,
     }), [options, fontFamily, readOnly]);
-    console.log(combinedOptions);
+    // Force remount when theme or language changes so Monaco applies the scheme.
+    const [renderKey, setRenderKey] = useState(`${theme}-${language}`);
+    useEffect(() => {
+        setRenderKey(`${theme}-${language}`);
+    }, [theme, language]);
     return (_jsx("div", { className: cn('h-[300px] w-full', className), children: _jsx(Editor, { height: "100%", width: "100%", language: language, theme: theme, value: value, options: combinedOptions, onMount: handleEditorDidMount, onChange: onChange, loading: _jsx(Spinner, {}), ...props }, renderKey) }));
 };
 //# sourceMappingURL=MonacoEditor.js.map

package/dist/components/MonacoEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAiC,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AA2C9B,MAAM,sBAAsB,GAC1B;IACE,OAAO,EAAE,EAAC,OAAO,EAAE,KAAK,EAAC;IACzB,oBAAoB,EAAE,KAAK;IAC3B,eAAe,EAAE,IAAI;IACrB,aAAa,EAAE,IAAI;IACnB,oBAAoB,EAAE,IAAI;CAC3B,CAAC;AACJ;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,SAAS,EACT,QAAQ,GAAG,YAAY,EACvB,KAAK,EAAE,aAAa,EACpB,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAC,GAAG,QAAQ,EAAE,CAAC;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,4CAA4C;IAC5C,0FAA0F;IAC1F,MAAM,KAAK,GACT,aAAa;QACb,CAAC,QAAQ,KAAK,MAAM;YACpB,CAAC,QAAQ,KAAK,QAAQ;gBACpB,OAAO,MAAM,KAAK,WAAW;gBAC7B,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC;YAC1D,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,OAAO,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IAEpC,MAAM,oBAAoB,GAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACvD,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3B,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,0CAA0C;QAC1C,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;YACxB,8DAA8D;YAC9D,MAAM,CAAC,SAAS,CAAC,wBAAwB,CAAC,MAAM,EAAE;gBAChD,SAAS,EAAE;oBACT,IAAI,EAAE;wBACJ,8CAA8C;wBAC9C,CAAC,mBAAmB,EAAE,iBAAiB,CAAC;wBAExC,oEAAoE;wBACpE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;wBAE1C,wDAAwD;wBACxD,CAAC,kCAAkC,EAAE,QAAQ,CAAC;wBAE9C,WAAW;wBACX,CAAC,yBAAyB,EAAE,SAAS,CAAC;wBAEtC,6BAA6B;wBAC7B,CAAC,WAAW,EAAE,WAAW,CAAC;qBAC3B;iBACF;aACF,CAAC,CAAC;QACL,CAAC;QAED,mDAAmD;QACnD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,EAAE;YAC1C,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,EAAE;YACT,MAAM,EAAE;gBACN,mBAAmB,EAAE,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC;gBAC3D,mBAAmB,EAAE,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC;gBAC3D,gCAAgC,EAAE,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC;gBACnE,yBAAyB,EAAE,WAAW,CAAC,WAAW,EAAE,SAAS,CAAC;gBAC9D,4BAA4B,EAAE,WAAW,CAAC,UAAU,EAAE,SAAS,CAAC;gBAChE,6BAA6B,EAAE,WAAW,CACxC,oBAAoB,EACpB,SAAS,CACV;gBACD,GAAG,aAAa,CAAC,KAAK,CAAC;aACxB;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,eAAe,EAAE;YACzC,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,EAAE;YACT,MAAM,EAAE;gBACN,mBAAmB,EAAE,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC;gBAC3D,mBAAmB,EAAE,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC;gBAC3D,gCAAgC,EAAE,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC;gBACnE,yBAAyB,EAAE,WAAW,CAAC,WAAW,EAAE,SAAS,CAAC;gBAC9D,4BAA4B,EAAE,WAAW,CAAC,UAAU,EAAE,SAAS,CAAC;gBAChE,6BAA6B,EAAE,WAAW,CACxC,oBAAoB,EACpB,SAAS,CACV;gBACD,GAAG,aAAa,CAAC,IAAI,CAAC;aACvB;SACF,CAAC,CAAC;QAEH,uDAAuD;QACvD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;QAE1E,+CAA+C;QAC/C,MAAM,MAAM,GACV,QAAQ,KAAK,MAAM;YACnB,CAAC,QAAQ,KAAK,QAAQ;gBACpB,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC,CAAC;QAE/D,yCAAyC;QACzC,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;YACxB,MAAM,CAAC,MAAM,CAAC,QAAQ,CACpB,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CACtD,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC,EAAC,QAAQ,EAAC,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC7D,MAAM,MAAM,GACV,QAAQ,KAAK,MAAM;gBACnB,CAAC,QAAQ,KAAK,QAAQ;oBACpB,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC,CAAC;YAE/D,yCAAyC;YACzC,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;gBACxB,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC/B,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CACtD,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC/B,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAC5C,CAAC;YACJ,CAAC;YAED,yCAAyC;YACzC,YAAY,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,KAAK,QAAQ,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACjE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;YACrE,MAAM,YAAY,GAAG,GAAG,EAAE;gBACxB,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;oBACtB,yCAAyC;oBACzC,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;wBACxB,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC/B,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAClE,CAAC;oBACJ,CAAC;yBAAM,CAAC;wBACN,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC/B,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CACxD,CAAC;oBACJ,CAAC;oBACD,yCAAyC;oBACzC,YAAY,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC;YAEF,iCAAiC;YACjC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAEpD,WAAW;YACX,OAAO,GAAG,EAAE;gBACV,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACzD,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,qCAAqC;IACrC,MAAM,UAAU,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,sBAAsB;QACzB,QAAQ;QACR,UAAU;QACV,GAAG,OAAO;KACX,CAAC,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAChC,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAE7B,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,YAC/C,KAAC,MAAM,IACL,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,KAAC,OAAO,KAAG,KAEhB,KAAK,IADJ,SAAS,CAEd,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Editor, EditorProps, OnChange, OnMount} from '@monaco-editor/react';\nimport {Spinner, cn, useTheme} from '@sqlrooms/ui';\nimport React, {useEffect, useMemo, 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\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  };\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  const {theme: appTheme} = useTheme();\n  const [renderKey, setRenderKey] = React.useState(0);\n\n  // Determine editor theme based on app theme\n  // Use typeof window check to avoid SSR errors in Next.js when accessing window.matchMedia\n  const theme =\n    explicitTheme ||\n    (appTheme === 'dark' ||\n    (appTheme === 'system' &&\n      typeof window !== 'undefined' &&\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 combinedOptions = useMemo(\n    () => ({\n      ...DEFAULT_MONACO_OPTIONS,\n      readOnly,\n      fontFamily,\n      ...options,\n    }),\n    [options, fontFamily, readOnly],\n  );\n  console.log(combinedOptions);\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={combinedOptions}\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 {Spinner, cn, useTheme} from '@sqlrooms/ui';\nimport React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} 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\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  };\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  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  // Determine editor theme name passed to the Editor component\n  const theme = isDark ? 'vs-dark' : '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 isDarkMount =\n      explicitTheme === 'vs-dark'\n        ? true\n        : explicitTheme === 'light'\n          ? false\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        isDarkMount ? 'sqlrooms-json-dark' : 'sqlrooms-json-light',\n      );\n    } else {\n      monaco.editor.setTheme(isDarkMount ? '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) {\n      const targetDark =\n        explicitTheme === 'vs-dark'\n          ? true\n          : explicitTheme === 'light'\n            ? false\n            : isDark;\n\n      // Use JSON-specific theme for JSON files\n      if (language === 'json') {\n        monacoRef.current.editor.setTheme(\n          targetDark ? 'sqlrooms-json-dark' : 'sqlrooms-json-light',\n        );\n      } else {\n        monacoRef.current.editor.setTheme(\n          targetDark ? 'sqlrooms-dark' : 'sqlrooms-light',\n        );\n      }\n    }\n  }, [appTheme, explicitTheme, isDark, 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 combinedOptions = useMemo(\n    () => ({\n      ...DEFAULT_MONACO_OPTIONS,\n      readOnly,\n      fontFamily,\n      ...options,\n    }),\n    [options, fontFamily, readOnly],\n  );\n\n  // Force remount when theme or language changes so Monaco applies the scheme.\n  const [renderKey, setRenderKey] = useState(`${theme}-${language}`);\n  useEffect(() => {\n    setRenderKey(`${theme}-${language}`);\n  }, [theme, language]);\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={combinedOptions}\n        onMount={handleEditorDidMount}\n        onChange={onChange}\n        loading={<Spinner />}\n        key={renderKey}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@sqlrooms/monaco-editor",
-  "version": "0.26.1-rc.1",
+  "version": "0.26.1-rc.12",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
   "type": "module",
+  "sideEffects": false,
   "author": "Ilya Boyandin <ilya@boyandin.me>",
   "license": "MIT",
   "repository": {
@@ -19,8 +20,8 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@sqlrooms/ui": "0.26.1-rc.1",
-    "monaco-editor": "^0.52.2"
+    "@sqlrooms/ui": "0.26.1-rc.12",
+    "monaco-editor": "^0.55.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -33,5 +34,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "e41ac3e033289faaaab0c2dbce552f1a7d0aea2b"
+  "gitHead": "2b9d9c03a48aae500c6f725b36bb89d43ef8d2eb"
 }