@sqlrooms/monaco-editor 0.26.0 → 0.26.1-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Editor } from '@monaco-editor/react';
|
|
3
3
|
import { Spinner, cn, useTheme } from '@sqlrooms/ui';
|
|
4
|
-
import React, { useEffect, useRef } from 'react';
|
|
4
|
+
import React, { useEffect, useMemo, useRef } from 'react';
|
|
5
5
|
import { getCssColor, getJsonEditorTheme, getMenuColors, getMonospaceFont, } from '../utils/color-utils';
|
|
6
|
+
const DEFAULT_MONACO_OPTIONS = {
|
|
7
|
+
minimap: { enabled: false },
|
|
8
|
+
scrollBeyondLastLine: false,
|
|
9
|
+
automaticLayout: true,
|
|
10
|
+
fontLigatures: true,
|
|
11
|
+
fixedOverflowWidgets: true,
|
|
12
|
+
};
|
|
6
13
|
/**
|
|
7
14
|
* A wrapper around the Monaco Editor component
|
|
8
15
|
*/
|
|
@@ -140,15 +147,13 @@ export const MonacoEditor = ({ className, language = 'javascript', theme: explic
|
|
|
140
147
|
}, [appTheme, explicitTheme, language]);
|
|
141
148
|
// Get monospace font for code editor
|
|
142
149
|
const fontFamily = getMonospaceFont();
|
|
143
|
-
const
|
|
144
|
-
|
|
145
|
-
scrollBeyondLastLine: false,
|
|
146
|
-
automaticLayout: true,
|
|
150
|
+
const combinedOptions = useMemo(() => ({
|
|
151
|
+
...DEFAULT_MONACO_OPTIONS,
|
|
147
152
|
readOnly,
|
|
148
153
|
fontFamily,
|
|
149
|
-
fontLigatures: true,
|
|
150
154
|
...options,
|
|
151
|
-
};
|
|
152
|
-
|
|
155
|
+
}), [options, fontFamily, readOnly]);
|
|
156
|
+
console.log(combinedOptions);
|
|
157
|
+
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) }));
|
|
153
158
|
};
|
|
154
159
|
//# sourceMappingURL=MonacoEditor.js.map
|
|
@@ -1 +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, 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 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 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"]}
|
|
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} 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/monaco-editor",
|
|
3
|
-
"version": "0.26.
|
|
3
|
+
"version": "0.26.1-rc.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@monaco-editor/react": "^4.7.0",
|
|
22
|
-
"@sqlrooms/ui": "0.26.
|
|
22
|
+
"@sqlrooms/ui": "0.26.1-rc.1",
|
|
23
23
|
"monaco-editor": "^0.52.2"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"typecheck": "tsc --noEmit",
|
|
34
34
|
"typedoc": "typedoc"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "e41ac3e033289faaaab0c2dbce552f1a7d0aea2b"
|
|
37
37
|
}
|