@react-fabric/monaco 1.0.0-beta.62 → 1.0.0-beta.63
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.
package/css/_codeEditor.css
CHANGED
|
@@ -34,41 +34,42 @@
|
|
|
34
34
|
border-color: var(--color-primary-500);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.fabric-editor {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
--
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
--
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
37
|
+
.fabric-editor.monaco-editor {
|
|
38
|
+
--vscode-menu-background: var(--color-tint-50) !important;
|
|
39
|
+
--vscode-menu-border: var(--border-color-base) !important;
|
|
40
|
+
--vscode-focusBorder: transparent !important;
|
|
41
|
+
--vscode-menu-selectionBackground: color(
|
|
42
|
+
from var(--color-primary) srgb r g b / 80%
|
|
43
|
+
) !important;
|
|
44
|
+
--vscode-editor-background: var(--fabric-bg) !important;
|
|
45
|
+
--vscode-editor-foreground: var(--fabric-text) !important;
|
|
46
|
+
--vscode-breadcrumb-background: var(--fabric-bg) !important;
|
|
47
|
+
--vscode-editorGutter-background: color(
|
|
48
|
+
from var(--color-tint-50) srgb r g b / 50%
|
|
49
|
+
) !important;
|
|
50
|
+
--vscode-minimap-background: var(--bg-color-dimmed) !important;
|
|
51
|
+
--vscode-minimapSlider-background: color(
|
|
52
|
+
from var(--color-tint) srgb r g b / 20%
|
|
53
|
+
) !important;
|
|
54
|
+
--vscode-minimapSlider-hoverBackground: color(
|
|
55
|
+
from var(--color-tint) srgb r g b / 25%
|
|
56
|
+
) !important;
|
|
57
|
+
--vscode-minimapSlider-activeBackground: color(
|
|
58
|
+
from var(--color-tint) srgb r g b / 30%
|
|
59
|
+
) !important;
|
|
60
|
+
--vscode-input-border: var(--color-primary) !important;
|
|
61
|
+
--vscode-editorStickyScroll-background: var(--fabric-bg) !important;
|
|
62
|
+
--vscode-editorMarkerNavigation-background: var(--fabric-bg) !important;
|
|
63
|
+
--vscode-editor-wordHighlightTextBackground: color(
|
|
64
|
+
from var(--color-accent-700) srgb r g b / 20%
|
|
65
|
+
) !important;
|
|
66
|
+
|
|
67
|
+
& .minimap {
|
|
68
|
+
z-index: 1 !important;
|
|
66
69
|
}
|
|
67
70
|
|
|
68
|
-
& .
|
|
69
|
-
|
|
70
|
-
from var(--color-tint-50) srgb r g g / 50%
|
|
71
|
-
) !important;
|
|
71
|
+
& .sticky-widget {
|
|
72
|
+
z-index: 0 !important;
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
& .folded-background {
|
|
@@ -7,12 +7,54 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
|
7
7
|
var core = require('@react-fabric/core');
|
|
8
8
|
var utilities = require('@react-fabric/utilities');
|
|
9
9
|
var classNames = require('classnames');
|
|
10
|
+
var monacoEditor = require('monaco-editor');
|
|
10
11
|
var react = require('react');
|
|
11
12
|
var MonacoEditor = require('react-monaco-editor');
|
|
12
13
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
14
|
|
|
15
|
+
function _interopNamespaceDefault(e) {
|
|
16
|
+
var n = Object.create(null);
|
|
17
|
+
if (e) {
|
|
18
|
+
Object.keys(e).forEach(function (k) {
|
|
19
|
+
if (k !== 'default') {
|
|
20
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return e[k]; }
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
n.default = e;
|
|
29
|
+
return Object.freeze(n);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
var monacoEditor__namespace = /*#__PURE__*/_interopNamespaceDefault(monacoEditor);
|
|
33
|
+
|
|
14
34
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
35
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
36
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
37
|
+
monacoEditor__namespace.editor.defineTheme("my-light", {
|
|
38
|
+
base: "vs",
|
|
39
|
+
// can also be 'vs' or 'hc-black'
|
|
40
|
+
inherit: true,
|
|
41
|
+
// set to false to completely replace the builtin rules
|
|
42
|
+
rules: [],
|
|
43
|
+
colors: {
|
|
44
|
+
"minimap.background": "#8881"
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
monacoEditor__namespace.editor.defineTheme("my-dark", {
|
|
48
|
+
base: "vs-dark",
|
|
49
|
+
// can also be 'vs' or 'hc-black'
|
|
50
|
+
inherit: true,
|
|
51
|
+
// set to false to completely replace the builtin rules
|
|
52
|
+
rules: [],
|
|
53
|
+
colors: {
|
|
54
|
+
"minimap.background": "#8881"
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
16
58
|
/**
|
|
17
59
|
* CodeEditor component to render a code editor using Monaco Editor.
|
|
18
60
|
* It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
|
|
@@ -21,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
21
63
|
*
|
|
22
64
|
* @param {EditorProps} props - The properties for the CodeEditor component.
|
|
23
65
|
* @param {RefProp<MonacoEditorRef>} ref - The ref to access the editor methods.
|
|
24
|
-
* @return {
|
|
66
|
+
* @return {React.ReactElement} The rendered CodeEditor component.
|
|
25
67
|
*
|
|
26
68
|
* @example
|
|
27
69
|
* ```jsx
|
|
@@ -67,7 +109,7 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
67
109
|
theme = _useState6[0],
|
|
68
110
|
setTheme = _useState6[1];
|
|
69
111
|
react.useLayoutEffect(function () {
|
|
70
|
-
editorRef && setTheme(isDark ? "
|
|
112
|
+
editorRef && setTheme(isDark ? "my-dark" : "my-light");
|
|
71
113
|
}, [isDark, editorRef]);
|
|
72
114
|
|
|
73
115
|
/** ***************** watch editor container resize *******************/
|
|
@@ -115,9 +157,8 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
115
157
|
}).length) === 0;
|
|
116
158
|
}
|
|
117
159
|
try {
|
|
118
|
-
var _val;
|
|
119
160
|
var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
|
|
120
|
-
if (language === "json") val = JSON.parse(
|
|
161
|
+
if (language === "json") val = JSON.parse(val !== null && val !== void 0 ? val : "{}");
|
|
121
162
|
return required ? !utilities.isEmpty(val) : true;
|
|
122
163
|
} catch (_unused) {
|
|
123
164
|
return false;
|
|
@@ -131,7 +172,7 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
131
172
|
var _monaco$json;
|
|
132
173
|
var _schema = _toArray(schema),
|
|
133
174
|
main = _schema[0],
|
|
134
|
-
rest = _schema.slice(1);
|
|
175
|
+
rest = _arrayLikeToArray(_schema).slice(1);
|
|
135
176
|
// configure the JSON language support with schemas and schema associations
|
|
136
177
|
monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
|
|
137
178
|
validate: true,
|
|
@@ -7,12 +7,35 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
7
7
|
import { useIsDark, useResizeObserver, useDebounce, Section } from '@react-fabric/core';
|
|
8
8
|
import { isString, isEmpty } from '@react-fabric/utilities';
|
|
9
9
|
import classNames from 'classnames';
|
|
10
|
+
import * as monacoEditor from 'monaco-editor';
|
|
10
11
|
import { useState, useLayoutEffect, useCallback, useDeferredValue, useMemo, useImperativeHandle, useRef } from 'react';
|
|
11
12
|
import MonacoEditor from 'react-monaco-editor';
|
|
12
13
|
import { jsx } from 'react/jsx-runtime';
|
|
13
14
|
|
|
14
15
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
16
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
18
|
+
monacoEditor.editor.defineTheme("my-light", {
|
|
19
|
+
base: "vs",
|
|
20
|
+
// can also be 'vs' or 'hc-black'
|
|
21
|
+
inherit: true,
|
|
22
|
+
// set to false to completely replace the builtin rules
|
|
23
|
+
rules: [],
|
|
24
|
+
colors: {
|
|
25
|
+
"minimap.background": "#8881"
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
monacoEditor.editor.defineTheme("my-dark", {
|
|
29
|
+
base: "vs-dark",
|
|
30
|
+
// can also be 'vs' or 'hc-black'
|
|
31
|
+
inherit: true,
|
|
32
|
+
// set to false to completely replace the builtin rules
|
|
33
|
+
rules: [],
|
|
34
|
+
colors: {
|
|
35
|
+
"minimap.background": "#8881"
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
16
39
|
/**
|
|
17
40
|
* CodeEditor component to render a code editor using Monaco Editor.
|
|
18
41
|
* It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
|
|
@@ -21,7 +44,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
21
44
|
*
|
|
22
45
|
* @param {EditorProps} props - The properties for the CodeEditor component.
|
|
23
46
|
* @param {RefProp<MonacoEditorRef>} ref - The ref to access the editor methods.
|
|
24
|
-
* @return {
|
|
47
|
+
* @return {React.ReactElement} The rendered CodeEditor component.
|
|
25
48
|
*
|
|
26
49
|
* @example
|
|
27
50
|
* ```jsx
|
|
@@ -67,7 +90,7 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
67
90
|
theme = _useState6[0],
|
|
68
91
|
setTheme = _useState6[1];
|
|
69
92
|
useLayoutEffect(function () {
|
|
70
|
-
editorRef && setTheme(isDark ? "
|
|
93
|
+
editorRef && setTheme(isDark ? "my-dark" : "my-light");
|
|
71
94
|
}, [isDark, editorRef]);
|
|
72
95
|
|
|
73
96
|
/** ***************** watch editor container resize *******************/
|
|
@@ -115,9 +138,8 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
115
138
|
}).length) === 0;
|
|
116
139
|
}
|
|
117
140
|
try {
|
|
118
|
-
var _val;
|
|
119
141
|
var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
|
|
120
|
-
if (language === "json") val = JSON.parse(
|
|
142
|
+
if (language === "json") val = JSON.parse(val !== null && val !== void 0 ? val : "{}");
|
|
121
143
|
return required ? !isEmpty(val) : true;
|
|
122
144
|
} catch (_unused) {
|
|
123
145
|
return false;
|
|
@@ -131,7 +153,7 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
131
153
|
var _monaco$json;
|
|
132
154
|
var _schema = _toArray(schema),
|
|
133
155
|
main = _schema[0],
|
|
134
|
-
rest = _schema.slice(1);
|
|
156
|
+
rest = _arrayLikeToArray(_schema).slice(1);
|
|
135
157
|
// configure the JSON language support with schemas and schema associations
|
|
136
158
|
monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
|
|
137
159
|
validate: true,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type RefProp } from "@react-fabric/core/dist/types/types";
|
|
2
|
-
import
|
|
2
|
+
import * as monacoEditor from "monaco-editor";
|
|
3
3
|
export interface MonacoEditorRef {
|
|
4
4
|
focus: () => void;
|
|
5
5
|
validate: () => boolean;
|
|
@@ -43,7 +43,7 @@ type EditorProps = BaseEditorProps & ({
|
|
|
43
43
|
*
|
|
44
44
|
* @param {EditorProps} props - The properties for the CodeEditor component.
|
|
45
45
|
* @param {RefProp<MonacoEditorRef>} ref - The ref to access the editor methods.
|
|
46
|
-
* @return {
|
|
46
|
+
* @return {React.ReactElement} The rendered CodeEditor component.
|
|
47
47
|
*
|
|
48
48
|
* @example
|
|
49
49
|
* ```jsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/monaco",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.63",
|
|
4
4
|
"description": "RUF: Monaco editor",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
"watch": "npm-run-all -p watch:rollup watch:dts"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@react-fabric/core": "^1.0.0-beta.
|
|
39
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
38
|
+
"@react-fabric/core": "^1.0.0-beta.63",
|
|
39
|
+
"@react-fabric/utilities": "^1.0.0-beta.63",
|
|
40
40
|
"classnames": "~2.5.1",
|
|
41
41
|
"monaco-editor": "~0.55.1",
|
|
42
42
|
"react-monaco-editor": "~0.59.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"i18next": "~25.
|
|
46
|
-
"react": "~19.2.
|
|
47
|
-
"react-dom": "~19.2.
|
|
48
|
-
"react-i18next": "~16.
|
|
45
|
+
"i18next": "~25.8.18",
|
|
46
|
+
"react": "~19.2.4",
|
|
47
|
+
"react-dom": "~19.2.4",
|
|
48
|
+
"react-i18next": "~16.5.8"
|
|
49
49
|
},
|
|
50
50
|
"engines": {
|
|
51
|
-
"node": ">=18.
|
|
52
|
-
"npm": ">=8.
|
|
51
|
+
"node": ">=22.18.0",
|
|
52
|
+
"npm": ">=10.8.0"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
|
|
55
55
|
}
|
|
@@ -30,7 +30,7 @@ import {
|
|
|
30
30
|
import { type RefProp } from "@react-fabric/core/dist/types/types";
|
|
31
31
|
import { isEmpty, isString } from "@react-fabric/utilities";
|
|
32
32
|
import classNames from "classnames";
|
|
33
|
-
import
|
|
33
|
+
import * as monacoEditor from "monaco-editor";
|
|
34
34
|
import {
|
|
35
35
|
useCallback,
|
|
36
36
|
useDeferredValue,
|
|
@@ -83,6 +83,23 @@ type EditorProps = BaseEditorProps &
|
|
|
83
83
|
}
|
|
84
84
|
);
|
|
85
85
|
|
|
86
|
+
monacoEditor.editor.defineTheme("my-light", {
|
|
87
|
+
base: "vs", // can also be 'vs' or 'hc-black'
|
|
88
|
+
inherit: true, // set to false to completely replace the builtin rules
|
|
89
|
+
rules: [],
|
|
90
|
+
colors: {
|
|
91
|
+
"minimap.background": "#8881",
|
|
92
|
+
},
|
|
93
|
+
});
|
|
94
|
+
monacoEditor.editor.defineTheme("my-dark", {
|
|
95
|
+
base: "vs-dark", // can also be 'vs' or 'hc-black'
|
|
96
|
+
inherit: true, // set to false to completely replace the builtin rules
|
|
97
|
+
rules: [],
|
|
98
|
+
colors: {
|
|
99
|
+
"minimap.background": "#8881",
|
|
100
|
+
},
|
|
101
|
+
});
|
|
102
|
+
|
|
86
103
|
/**
|
|
87
104
|
* CodeEditor component to render a code editor using Monaco Editor.
|
|
88
105
|
* It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
|
|
@@ -91,7 +108,7 @@ type EditorProps = BaseEditorProps &
|
|
|
91
108
|
*
|
|
92
109
|
* @param {EditorProps} props - The properties for the CodeEditor component.
|
|
93
110
|
* @param {RefProp<MonacoEditorRef>} ref - The ref to access the editor methods.
|
|
94
|
-
* @return {
|
|
111
|
+
* @return {React.ReactElement} The rendered CodeEditor component.
|
|
95
112
|
*
|
|
96
113
|
* @example
|
|
97
114
|
* ```jsx
|
|
@@ -129,7 +146,7 @@ export const CodeEditor = ({
|
|
|
129
146
|
/** ***************** watch theme change *******************/
|
|
130
147
|
const [theme, setTheme] = useState("");
|
|
131
148
|
useLayoutEffect(() => {
|
|
132
|
-
editorRef && setTheme(isDark ? "
|
|
149
|
+
editorRef && setTheme(isDark ? "my-dark" : "my-light");
|
|
133
150
|
}, [isDark, editorRef]);
|
|
134
151
|
|
|
135
152
|
/** ***************** watch editor container resize *******************/
|