@react-fabric/monaco 1.0.0-beta.61 → 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 *******************/
|
|
@@ -94,6 +136,13 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
94
136
|
}, [onChange, editorRef], 1000);
|
|
95
137
|
react.useImperativeHandle(ref, function () {
|
|
96
138
|
return {
|
|
139
|
+
addAction: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addAction.bind(editorRef),
|
|
140
|
+
addCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addCommand.bind(editorRef),
|
|
141
|
+
executeCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.executeCommand.bind(editorRef),
|
|
142
|
+
setModel: editorRef === null || editorRef === void 0 ? void 0 : editorRef.setModel.bind(editorRef),
|
|
143
|
+
focus: function focus() {
|
|
144
|
+
editorRef === null || editorRef === void 0 || editorRef.focus();
|
|
145
|
+
},
|
|
97
146
|
getValue: function getValue() {
|
|
98
147
|
return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
|
|
99
148
|
},
|
|
@@ -109,23 +158,23 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
109
158
|
}
|
|
110
159
|
try {
|
|
111
160
|
var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
|
|
112
|
-
if (language === "json") val = JSON.parse(val);
|
|
161
|
+
if (language === "json") val = JSON.parse(val !== null && val !== void 0 ? val : "{}");
|
|
113
162
|
return required ? !utilities.isEmpty(val) : true;
|
|
114
163
|
} catch (_unused) {
|
|
115
164
|
return false;
|
|
116
165
|
}
|
|
117
166
|
}
|
|
118
167
|
};
|
|
119
|
-
}, [required, language]);
|
|
168
|
+
}, [required, language, editorRef]);
|
|
120
169
|
var disposeRef = react.useRef(null);
|
|
121
170
|
var schemaUri = react.useCallback(function (monaco) {
|
|
122
171
|
if (language === "json" && schema) {
|
|
123
|
-
var _monaco$
|
|
172
|
+
var _monaco$json;
|
|
124
173
|
var _schema = _toArray(schema),
|
|
125
174
|
main = _schema[0],
|
|
126
|
-
rest = _schema.slice(1);
|
|
175
|
+
rest = _arrayLikeToArray(_schema).slice(1);
|
|
127
176
|
// configure the JSON language support with schemas and schema associations
|
|
128
|
-
|
|
177
|
+
monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
|
|
129
178
|
validate: true,
|
|
130
179
|
allowComments: false,
|
|
131
180
|
schemas: [_objectSpread({
|
|
@@ -175,7 +224,8 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
175
224
|
}
|
|
176
225
|
}, [schema, language]);
|
|
177
226
|
var resetSchema = react.useCallback(function (_, monaco) {
|
|
178
|
-
|
|
227
|
+
var _monaco$json2;
|
|
228
|
+
monaco === null || monaco === void 0 || (_monaco$json2 = monaco.json) === null || _monaco$json2 === void 0 || _monaco$json2.jsonDefaults.setDiagnosticsOptions({
|
|
179
229
|
validate: true,
|
|
180
230
|
allowComments: false,
|
|
181
231
|
schemas: []
|
|
@@ -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 *******************/
|
|
@@ -94,6 +117,13 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
94
117
|
}, [onChange, editorRef], 1000);
|
|
95
118
|
useImperativeHandle(ref, function () {
|
|
96
119
|
return {
|
|
120
|
+
addAction: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addAction.bind(editorRef),
|
|
121
|
+
addCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addCommand.bind(editorRef),
|
|
122
|
+
executeCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.executeCommand.bind(editorRef),
|
|
123
|
+
setModel: editorRef === null || editorRef === void 0 ? void 0 : editorRef.setModel.bind(editorRef),
|
|
124
|
+
focus: function focus() {
|
|
125
|
+
editorRef === null || editorRef === void 0 || editorRef.focus();
|
|
126
|
+
},
|
|
97
127
|
getValue: function getValue() {
|
|
98
128
|
return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
|
|
99
129
|
},
|
|
@@ -109,23 +139,23 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
109
139
|
}
|
|
110
140
|
try {
|
|
111
141
|
var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
|
|
112
|
-
if (language === "json") val = JSON.parse(val);
|
|
142
|
+
if (language === "json") val = JSON.parse(val !== null && val !== void 0 ? val : "{}");
|
|
113
143
|
return required ? !isEmpty(val) : true;
|
|
114
144
|
} catch (_unused) {
|
|
115
145
|
return false;
|
|
116
146
|
}
|
|
117
147
|
}
|
|
118
148
|
};
|
|
119
|
-
}, [required, language]);
|
|
149
|
+
}, [required, language, editorRef]);
|
|
120
150
|
var disposeRef = useRef(null);
|
|
121
151
|
var schemaUri = useCallback(function (monaco) {
|
|
122
152
|
if (language === "json" && schema) {
|
|
123
|
-
var _monaco$
|
|
153
|
+
var _monaco$json;
|
|
124
154
|
var _schema = _toArray(schema),
|
|
125
155
|
main = _schema[0],
|
|
126
|
-
rest = _schema.slice(1);
|
|
156
|
+
rest = _arrayLikeToArray(_schema).slice(1);
|
|
127
157
|
// configure the JSON language support with schemas and schema associations
|
|
128
|
-
|
|
158
|
+
monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
|
|
129
159
|
validate: true,
|
|
130
160
|
allowComments: false,
|
|
131
161
|
schemas: [_objectSpread({
|
|
@@ -175,7 +205,8 @@ var CodeEditor = function CodeEditor(_ref) {
|
|
|
175
205
|
}
|
|
176
206
|
}, [schema, language]);
|
|
177
207
|
var resetSchema = useCallback(function (_, monaco) {
|
|
178
|
-
|
|
208
|
+
var _monaco$json2;
|
|
209
|
+
monaco === null || monaco === void 0 || (_monaco$json2 = monaco.json) === null || _monaco$json2 === void 0 || _monaco$json2.jsonDefaults.setDiagnosticsOptions({
|
|
179
210
|
validate: true,
|
|
180
211
|
allowComments: false,
|
|
181
212
|
schemas: []
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { type RefProp } from "@react-fabric/core/dist/types/types";
|
|
2
|
+
import * as monacoEditor from "monaco-editor";
|
|
2
3
|
export interface MonacoEditorRef {
|
|
4
|
+
focus: () => void;
|
|
3
5
|
validate: () => boolean;
|
|
4
6
|
getValue: () => string | undefined;
|
|
7
|
+
addAction?: monacoEditor.editor.IStandaloneCodeEditor["addAction"];
|
|
8
|
+
addCommand?: monacoEditor.editor.IStandaloneCodeEditor["addCommand"];
|
|
9
|
+
executeCommand?: monacoEditor.editor.IStandaloneCodeEditor["executeCommand"];
|
|
10
|
+
setModel?: monacoEditor.editor.IStandaloneCodeEditor["setModel"];
|
|
5
11
|
}
|
|
6
12
|
export interface BaseEditorProps {
|
|
7
13
|
value?: string | AnyObject;
|
|
@@ -37,7 +43,7 @@ type EditorProps = BaseEditorProps & ({
|
|
|
37
43
|
*
|
|
38
44
|
* @param {EditorProps} props - The properties for the CodeEditor component.
|
|
39
45
|
* @param {RefProp<MonacoEditorRef>} ref - The ref to access the editor methods.
|
|
40
|
-
* @return {
|
|
46
|
+
* @return {React.ReactElement} The rendered CodeEditor component.
|
|
41
47
|
*
|
|
42
48
|
* @example
|
|
43
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
|
-
"monaco-editor": "~0.
|
|
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,
|
|
@@ -43,8 +43,14 @@ import {
|
|
|
43
43
|
import MonacoEditor from "react-monaco-editor";
|
|
44
44
|
|
|
45
45
|
export interface MonacoEditorRef {
|
|
46
|
+
focus: () => void;
|
|
46
47
|
validate: () => boolean;
|
|
47
48
|
getValue: () => string | undefined;
|
|
49
|
+
|
|
50
|
+
addAction?: monacoEditor.editor.IStandaloneCodeEditor["addAction"];
|
|
51
|
+
addCommand?: monacoEditor.editor.IStandaloneCodeEditor["addCommand"];
|
|
52
|
+
executeCommand?: monacoEditor.editor.IStandaloneCodeEditor["executeCommand"];
|
|
53
|
+
setModel?: monacoEditor.editor.IStandaloneCodeEditor["setModel"];
|
|
48
54
|
}
|
|
49
55
|
|
|
50
56
|
export interface BaseEditorProps {
|
|
@@ -77,6 +83,23 @@ type EditorProps = BaseEditorProps &
|
|
|
77
83
|
}
|
|
78
84
|
);
|
|
79
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
|
+
|
|
80
103
|
/**
|
|
81
104
|
* CodeEditor component to render a code editor using Monaco Editor.
|
|
82
105
|
* It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
|
|
@@ -85,7 +108,7 @@ type EditorProps = BaseEditorProps &
|
|
|
85
108
|
*
|
|
86
109
|
* @param {EditorProps} props - The properties for the CodeEditor component.
|
|
87
110
|
* @param {RefProp<MonacoEditorRef>} ref - The ref to access the editor methods.
|
|
88
|
-
* @return {
|
|
111
|
+
* @return {React.ReactElement} The rendered CodeEditor component.
|
|
89
112
|
*
|
|
90
113
|
* @example
|
|
91
114
|
* ```jsx
|
|
@@ -115,14 +138,15 @@ export const CodeEditor = ({
|
|
|
115
138
|
onChange,
|
|
116
139
|
language = "json",
|
|
117
140
|
}: EditorProps & RefProp<MonacoEditorRef>) => {
|
|
118
|
-
const [editorRef, setEditorRef] =
|
|
141
|
+
const [editorRef, setEditorRef] =
|
|
142
|
+
useState<monacoEditor.editor.IStandaloneCodeEditor>();
|
|
119
143
|
const [monacoRef, setMonacoRef] = useState<typeof monacoEditor>();
|
|
120
144
|
const isDark = useIsDark();
|
|
121
145
|
|
|
122
146
|
/** ***************** watch theme change *******************/
|
|
123
147
|
const [theme, setTheme] = useState("");
|
|
124
148
|
useLayoutEffect(() => {
|
|
125
|
-
editorRef && setTheme(isDark ? "
|
|
149
|
+
editorRef && setTheme(isDark ? "my-dark" : "my-light");
|
|
126
150
|
}, [isDark, editorRef]);
|
|
127
151
|
|
|
128
152
|
/** ***************** watch editor container resize *******************/
|
|
@@ -160,6 +184,13 @@ export const CodeEditor = ({
|
|
|
160
184
|
useImperativeHandle(
|
|
161
185
|
ref,
|
|
162
186
|
() => ({
|
|
187
|
+
addAction: editorRef?.addAction.bind(editorRef),
|
|
188
|
+
addCommand: editorRef?.addCommand.bind(editorRef),
|
|
189
|
+
executeCommand: editorRef?.executeCommand.bind(editorRef),
|
|
190
|
+
setModel: editorRef?.setModel.bind(editorRef),
|
|
191
|
+
focus() {
|
|
192
|
+
editorRef?.focus();
|
|
193
|
+
},
|
|
163
194
|
getValue() {
|
|
164
195
|
return editorRef?.getValue();
|
|
165
196
|
},
|
|
@@ -173,14 +204,14 @@ export const CodeEditor = ({
|
|
|
173
204
|
}
|
|
174
205
|
try {
|
|
175
206
|
let val = editorRef?.getValue();
|
|
176
|
-
if (language === "json") val = JSON.parse(val);
|
|
207
|
+
if (language === "json") val = JSON.parse(val ?? "{}");
|
|
177
208
|
return required ? !isEmpty(val) : true;
|
|
178
209
|
} catch {
|
|
179
210
|
return false;
|
|
180
211
|
}
|
|
181
212
|
},
|
|
182
213
|
}),
|
|
183
|
-
[required, language],
|
|
214
|
+
[required, language, editorRef],
|
|
184
215
|
);
|
|
185
216
|
|
|
186
217
|
const disposeRef = useRef<AnyObject>(null);
|
|
@@ -189,7 +220,7 @@ export const CodeEditor = ({
|
|
|
189
220
|
if (language === "json" && schema) {
|
|
190
221
|
const [main, ...rest] = schema;
|
|
191
222
|
// configure the JSON language support with schemas and schema associations
|
|
192
|
-
monaco
|
|
223
|
+
monaco?.json?.jsonDefaults.setDiagnosticsOptions({
|
|
193
224
|
validate: true,
|
|
194
225
|
allowComments: false,
|
|
195
226
|
schemas: [
|
|
@@ -244,7 +275,7 @@ export const CodeEditor = ({
|
|
|
244
275
|
);
|
|
245
276
|
|
|
246
277
|
const resetSchema = useCallback((_: unknown, monaco: typeof monacoEditor) => {
|
|
247
|
-
monaco
|
|
278
|
+
monaco?.json?.jsonDefaults.setDiagnosticsOptions({
|
|
248
279
|
validate: true,
|
|
249
280
|
allowComments: false,
|
|
250
281
|
schemas: [],
|
|
@@ -261,10 +292,10 @@ export const CodeEditor = ({
|
|
|
261
292
|
<MonacoEditor
|
|
262
293
|
editorDidMount={(e, m) => [
|
|
263
294
|
!!e && setEditorRef(e),
|
|
264
|
-
!!m && setMonacoRef(m),
|
|
295
|
+
!!m && setMonacoRef(m as any),
|
|
265
296
|
]}
|
|
266
|
-
editorWillMount={schemaUri}
|
|
267
|
-
editorWillUnmount={resetSchema}
|
|
297
|
+
editorWillMount={schemaUri as any}
|
|
298
|
+
editorWillUnmount={resetSchema as any}
|
|
268
299
|
value={codeValue}
|
|
269
300
|
language={language}
|
|
270
301
|
onChange={handleChange}
|