@react-fabric/monaco 1.0.0-beta.8 → 1.0.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.
Files changed (14) hide show
  1. package/css/_codeEditor.css +85 -0
  2. package/css/styles.css +24 -0
  3. package/dist/cjs/components/CodeEditor.js +116 -42
  4. package/dist/cjs/index.js +28 -0
  5. package/dist/esm/components/CodeEditor.js +100 -45
  6. package/dist/esm/index.js +30 -0
  7. package/dist/types/components/CodeEditor.d.ts +32 -12
  8. package/dist/types/index.d.ts +26 -0
  9. package/package.json +16 -16
  10. package/src/components/CodeEditor.tsx +123 -117
  11. package/src/index.ts +22 -17
  12. package/dist/cjs/components/CodeEditor.module.css +0 -1
  13. package/dist/esm/components/CodeEditor.module.css +0 -1
  14. package/src/components/CodeEditor.module.css +0 -98
package/css/_codeEditor.css ADDED
@@ -0,0 +1,85 @@
1
+ /*
2
+ * React Fabric
3
+ * @version: 1.0.0
4
+ *
5
+ *
6
+ * The MIT License (MIT)
7
+ * Copyright (c) 2024 Adarsh Pastakia
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
10
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
11
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
12
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
13
+ * subject to the following conditions:
14
+ *
15
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
16
+ * portions of the Software.
17
+ *
18
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
19
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
20
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
+ */
23
+
24
+ /* stylelint-disable custom-property-pattern */
25
+
26
+ @layer utilities {
27
+ .fabric-codeEditor {
28
+ direction: ltr;
29
+ overflow: hidden;
30
+ border: 1px solid transparent;
31
+ border-bottom-width: 2px;
32
+
33
+ &:has(.monaco-editor.focused) {
34
+ border-color: var(--color-primary-500);
35
+ }
36
+
37
+ .fabric-editor .monaco-editor {
38
+ /* --vscode-menu-background: var(--color-tint-50) !important;
39
+ --vscode-menu-border: var(--border-color-default) !important;
40
+ --vscode-focusBorder: transparent !important;
41
+ --vscode-menu-selectionBackground: color(from var(--color-primary) srgb r g b / 80%) !important;
42
+ --vscode-editor-background: var(--fabric-bg) !important;
43
+ --vscode-editor-foreground: var(--fabric-text) !important;
44
+ --vscode-breadcrumb-background: var(--fabric-bg) !important;
45
+ --vscode-editorGutter-background: color(from var(--color-tint-50) srgb r g b / 50%) !important;
46
+ --vscode-minimap-background: var(--bg-color-dimmed) !important;
47
+ --vscode-minimapSlider-background: color(from var(--color-tint) srgb r g b / 20%) !important;
48
+ --vscode-minimapSlider-hoverBackground: color(from var(--color-tint) srgb r g b / 25%) !important;
49
+ --vscode-minimapSlider-activeBackground: color(from var(--color-tint) srgb r g b / 30%) !important;
50
+ --vscode-input-border: var(--color-primary) !important;
51
+ --vscode-editorStickyScroll-background: var(--fabric-bg) !important;
52
+ --vscode-editorMarkerNavigation-background: var(--fabric-bg) !important;
53
+ --vscode-editor-wordHighlightTextBackground: color(from var(--color-accent-700) srgb r g b / 20%) !important; */
54
+
55
+ & .minimap {
56
+ z-index: 1 !important;
57
+ }
58
+
59
+ & .sticky-widget {
60
+ z-index: 0 !important;
61
+ }
62
+
63
+ & .folded-background {
64
+ opacity: 0.5;
65
+ }
66
+
67
+ & .monaco-findInput textarea {
68
+ resize: initial;
69
+ min-height: unset;
70
+ }
71
+
72
+ & .editor-widget.suggest-widget .message {
73
+ font-size: 0.75rem;
74
+ }
75
+
76
+ & span {
77
+ padding: 0;
78
+ }
79
+ }
80
+ }
81
+
82
+ .fabric-editorTools {
83
+ background-color: var(--bg-color-default);
84
+ }
85
+ }
package/css/styles.css ADDED
@@ -0,0 +1,24 @@
1
+ /*
2
+ * React Fabric
3
+ * @version: 1.0.0
4
+ *
5
+ *
6
+ * The MIT License (MIT)
7
+ * Copyright (c) 2025 Adarsh Pastakia
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
10
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
11
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
12
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
13
+ * subject to the following conditions:
14
+ *
15
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
16
+ * portions of the Software.
17
+ *
18
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
19
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
20
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
+ */
23
+
24
+ @import "./_codeEditor.css";
package/dist/cjs/components/CodeEditor.js CHANGED
@@ -4,17 +4,79 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
5
5
  var _toArray = require('@babel/runtime/helpers/toArray');
6
6
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
+ var MonacoEditor = require('@monaco-editor/react');
7
8
  var core = require('@react-fabric/core');
8
9
  var utilities = require('@react-fabric/utilities');
9
- var classNames = require('classnames');
10
+ var monacoEditor = require('monaco-editor');
10
11
  var react = require('react');
11
- var MonacoEditor = require('react-monaco-editor');
12
- var CodeEditor_module = require('./CodeEditor.module.css');
13
12
  var jsxRuntime = require('react/jsx-runtime');
14
13
 
14
+ function _interopNamespaceDefault(e) {
15
+ var n = Object.create(null);
16
+ if (e) {
17
+ Object.keys(e).forEach(function (k) {
18
+ if (k !== 'default') {
19
+ var d = Object.getOwnPropertyDescriptor(e, k);
20
+ Object.defineProperty(n, k, d.get ? d : {
21
+ enumerable: true,
22
+ get: function () { return e[k]; }
23
+ });
24
+ }
25
+ });
26
+ }
27
+ n.default = e;
28
+ return Object.freeze(n);
29
+ }
30
+
31
+ var monacoEditor__namespace = /*#__PURE__*/_interopNamespaceDefault(monacoEditor);
32
+
15
33
  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; }
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
- var CodeEditor = function CodeEditor(_ref) {
34
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
35
+ 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; }
36
+ monacoEditor__namespace.editor.defineTheme("my-light", {
37
+ base: "vs",
38
+ // can also be 'vs' or 'hc-black'
39
+ inherit: true,
40
+ // set to false to completely replace the builtin rules
41
+ rules: [],
42
+ colors: {
43
+ "minimap.background": "#8881"
44
+ }
45
+ });
46
+ monacoEditor__namespace.editor.defineTheme("my-dark", {
47
+ base: "vs-dark",
48
+ // can also be 'vs' or 'hc-black'
49
+ inherit: true,
50
+ // set to false to completely replace the builtin rules
51
+ rules: [],
52
+ colors: {
53
+ "minimap.background": "#8881"
54
+ }
55
+ });
56
+
57
+ /**
58
+ * CodeEditor component to render a code editor using Monaco Editor.
59
+ * It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
60
+ * The editor can be configured to be read-only, minimal, and can handle changes in the code.
61
+ * It provides a ref to access the editor's value and validation methods.
62
+ *
63
+ * @example
64
+ * ```jsx
65
+ * <CodeEditor
66
+ * value={initialValue}
67
+ * schema={[{ uri: "http://example.com/schema.json", schema: {} }]}
68
+ * handlebarSuggestions={[{ text: "example", description: "An example suggestion" }]}
69
+ * required={true}
70
+ * readOnly={false}
71
+ * minimal={false}
72
+ * onChange={(value) => console.log("Code changed:", value)}
73
+ * language="json"
74
+ * />
75
+ * ```
76
+ *
77
+ * @see {@link https://microsoft.github.io/monaco-editor/}
78
+ */
79
+ function CodeEditor(_ref) {
18
80
  var ref = _ref.ref,
19
81
  value = _ref.value,
20
82
  schema = _ref.schema,
@@ -29,20 +91,19 @@ var CodeEditor = function CodeEditor(_ref) {
29
91
  _useState2 = _slicedToArray(_useState, 2),
30
92
  editorRef = _useState2[0],
31
93
  setEditorRef = _useState2[1];
32
- var _useState3 = react.useState(),
33
- _useState4 = _slicedToArray(_useState3, 2),
34
- monacoRef = _useState4[0],
35
- setMonacoRef = _useState4[1];
36
- var isDark = core.useIsDark();
94
+ var monacoRef = react.useRef(null);
95
+ var _useApplicationContex = core.useApplicationContext(),
96
+ isDark = _useApplicationContex.isDark;
37
97
 
38
98
  /** ***************** watch theme change *******************/
39
- var _useState5 = react.useState(""),
40
- _useState6 = _slicedToArray(_useState5, 2),
41
- theme = _useState6[0],
42
- setTheme = _useState6[1];
99
+ var _useState3 = react.useState(""),
100
+ _useState4 = _slicedToArray(_useState3, 2),
101
+ theme = _useState4[0],
102
+ setTheme = _useState4[1];
43
103
  react.useLayoutEffect(function () {
44
- editorRef && setTheme(isDark ? "vs-dark" : "light");
45
- }, [isDark, editorRef]);
104
+ // eslint-disable-next-line @eslint-react/set-state-in-effect
105
+ setTheme(isDark ? "my-dark" : "my-light");
106
+ }, [isDark]);
46
107
 
47
108
  /** ***************** watch editor container resize *******************/
48
109
  var resizeHandler = react.useCallback(function (size) {
@@ -58,47 +119,58 @@ var CodeEditor = function CodeEditor(_ref) {
58
119
  var handleChange = core.useDebounce(function (value) {
59
120
  var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
60
121
  if (model) {
61
- var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
122
+ var _monacoRef$current;
123
+ var markers = (_monacoRef$current = monacoRef.current) === null || _monacoRef$current === void 0 ? void 0 : _monacoRef$current.editor.getModelMarkers({
62
124
  owner: model.getLanguageId()
63
125
  });
64
- (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
65
- return m.severity > 7;
66
- }).length) === 0 && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
126
+ if ((markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
127
+ return m.severity === monacoEditor__namespace.MarkerSeverity.Error;
128
+ }).length) === 0) onChange === null || onChange === void 0 || onChange(value);
67
129
  }
68
130
  }, [onChange, editorRef], 1000);
69
131
  react.useImperativeHandle(ref, function () {
70
132
  return {
133
+ addAction: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addAction.bind(editorRef),
134
+ addCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addCommand.bind(editorRef),
135
+ executeCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.executeCommand.bind(editorRef),
136
+ setModel: editorRef === null || editorRef === void 0 ? void 0 : editorRef.setModel.bind(editorRef),
137
+ focus: function focus() {
138
+ editorRef === null || editorRef === void 0 || editorRef.focus();
139
+ },
71
140
  getValue: function getValue() {
72
141
  return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
73
142
  },
74
143
  validate: function validate() {
75
144
  var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
76
145
  if (model) {
77
- var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
146
+ var _monacoRef$current2;
147
+ var markers = (_monacoRef$current2 = monacoRef.current) === null || _monacoRef$current2 === void 0 ? void 0 : _monacoRef$current2.editor.getModelMarkers({
78
148
  owner: model.getLanguageId()
79
149
  });
80
150
  return (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
81
- return m.severity > 8;
151
+ return m.severity === monacoEditor__namespace.MarkerSeverity.Error;
82
152
  }).length) === 0;
83
153
  }
84
154
  try {
85
155
  var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
86
- if (language === "json") val = JSON.parse(val);
156
+ if (language === "json") val = JSON.parse(val !== null && val !== void 0 ? val : "{}");
87
157
  return required ? !utilities.isEmpty(val) : true;
88
158
  } catch (_unused) {
89
159
  return false;
90
160
  }
91
161
  }
92
162
  };
93
- }, [required, language]);
94
- var disposeRef = react.useRef();
163
+ }, [editorRef, language, required]);
164
+ var disposeRef = react.useRef(null);
95
165
  var schemaUri = react.useCallback(function (monaco) {
96
166
  if (language === "json" && schema) {
97
- var _schema = _toArray(schema),
98
- main = _schema[0],
99
- rest = _schema.slice(1);
167
+ var _monaco$json;
168
+ var _ref2 = schema,
169
+ _ref3 = _toArray(_ref2),
170
+ main = _ref3[0],
171
+ rest = _arrayLikeToArray(_ref3).slice(1);
100
172
  // configure the JSON language support with schemas and schema associations
101
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
173
+ monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
102
174
  validate: true,
103
175
  allowComments: false,
104
176
  schemas: [_objectSpread({
@@ -146,31 +218,33 @@ var CodeEditor = function CodeEditor(_ref) {
146
218
  }
147
219
  });
148
220
  }
149
- }, [schema, language]);
150
- var resetSchema = react.useCallback(function (_, monaco) {
151
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
221
+ }, [language, schema, handlebarSuggestions]);
222
+ react.useEffect(function () {
223
+ var _monacoRef$current3;
224
+ (_monacoRef$current3 = monacoRef.current) === null || _monacoRef$current3 === void 0 || (_monacoRef$current3 = _monacoRef$current3.json) === null || _monacoRef$current3 === void 0 || _monacoRef$current3.jsonDefaults.setDiagnosticsOptions({
152
225
  validate: true,
153
226
  allowComments: false,
154
227
  schemas: []
155
228
  });
156
229
  }, []);
157
- return /*#__PURE__*/jsxRuntime.jsx(core.Section, {
230
+ return /*#__PURE__*/jsxRuntime.jsx(core.Layout, {
231
+ className: "relative",
158
232
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
159
233
  ref: containerRef,
160
- "data-testid": "code-editor",
161
- className: classNames(CodeEditor_module.codeEditor, "area-content"),
234
+ "data-ref": "codeEditor",
235
+ className: utilities.cn("fabric-codeEditor", "absolute inset-0"),
162
236
  children: /*#__PURE__*/jsxRuntime.jsx(MonacoEditor, {
163
- editorDidMount: function editorDidMount(e, m) {
164
- return [!!e && setEditorRef(e), !!m && setMonacoRef(m)];
237
+ onMount: function onMount(e, m) {
238
+ return [!!e && setEditorRef(e), !!m && (monacoRef.current = m)];
165
239
  },
166
- editorWillMount: schemaUri,
167
- editorWillUnmount: resetSchema,
240
+ beforeMount: schemaUri,
241
+ theme: theme,
168
242
  value: codeValue,
169
243
  language: language,
170
244
  onChange: handleChange,
171
- theme: theme,
172
- className: CodeEditor_module.editor,
245
+ className: "fabric-editor",
173
246
  options: {
247
+ theme: theme,
174
248
  readOnly: readOnly,
175
249
  minimap: {
176
250
  enabled: !minimal
@@ -184,6 +258,6 @@ var CodeEditor = function CodeEditor(_ref) {
184
258
  })
185
259
  })
186
260
  });
187
- };
261
+ }
188
262
 
189
263
  exports.CodeEditor = CodeEditor;
package/dist/cjs/index.js CHANGED
@@ -2,6 +2,34 @@
2
2
 
3
3
  var CodeEditor = require('./components/CodeEditor.js');
4
4
 
5
+ /**
6
+ * React Fabric
7
+ * @version 1.0.0
8
+ * @license MIT
9
+ * @copyright 2024 Adarsh Pastakia
10
+ *
11
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ * of this software and associated documentation files (the "Software"), to deal
13
+ * in the Software without restriction, including without limitation the rights
14
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ * copies of the Software, and to permit persons to whom the Software is
16
+ * furnished to do so, subject to the following conditions:
17
+ *
18
+ * The above copyright notice and this permission notice shall be included in all
19
+ * copies or substantial portions of the Software.
20
+ *
21
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ * SOFTWARE.
28
+ */
5
29
 
30
+ var MONACO_PACKAGE = "@react-fabric/monaco";
31
+ var MONACO_VERSION = "1.0.0";
6
32
 
7
33
  exports.CodeEditor = CodeEditor.CodeEditor;
34
+ exports.MONACO_PACKAGE = MONACO_PACKAGE;
35
+ exports.MONACO_VERSION = MONACO_VERSION;
package/dist/esm/components/CodeEditor.js CHANGED
@@ -4,17 +4,60 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
4
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
5
5
  import _toArray from '@babel/runtime/helpers/toArray';
6
6
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
7
- import { useIsDark, useResizeObserver, useDebounce, Section } from '@react-fabric/core';
8
- import { isString, isEmpty } from '@react-fabric/utilities';
9
- import classNames from 'classnames';
10
- import { useState, useLayoutEffect, useCallback, useDeferredValue, useMemo, useImperativeHandle, useRef } from 'react';
11
- import MonacoEditor from 'react-monaco-editor';
12
- import classes from './CodeEditor.module.css';
7
+ import MonacoEditor from '@monaco-editor/react';
8
+ import { useApplicationContext, useResizeObserver, useDebounce, Layout } from '@react-fabric/core';
9
+ import { isString, isEmpty, cn } from '@react-fabric/utilities';
10
+ import * as monacoEditor from 'monaco-editor';
11
+ import { useState, useRef, useLayoutEffect, useCallback, useDeferredValue, useMemo, useImperativeHandle, useEffect } from 'react';
13
12
  import { jsx } from 'react/jsx-runtime';
14
13
 
15
14
  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; }
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
- var CodeEditor = function CodeEditor(_ref) {
15
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
16
+ 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; }
17
+ monacoEditor.editor.defineTheme("my-light", {
18
+ base: "vs",
19
+ // can also be 'vs' or 'hc-black'
20
+ inherit: true,
21
+ // set to false to completely replace the builtin rules
22
+ rules: [],
23
+ colors: {
24
+ "minimap.background": "#8881"
25
+ }
26
+ });
27
+ monacoEditor.editor.defineTheme("my-dark", {
28
+ base: "vs-dark",
29
+ // can also be 'vs' or 'hc-black'
30
+ inherit: true,
31
+ // set to false to completely replace the builtin rules
32
+ rules: [],
33
+ colors: {
34
+ "minimap.background": "#8881"
35
+ }
36
+ });
37
+
38
+ /**
39
+ * CodeEditor component to render a code editor using Monaco Editor.
40
+ * It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
41
+ * The editor can be configured to be read-only, minimal, and can handle changes in the code.
42
+ * It provides a ref to access the editor's value and validation methods.
43
+ *
44
+ * @example
45
+ * ```jsx
46
+ * <CodeEditor
47
+ * value={initialValue}
48
+ * schema={[{ uri: "http://example.com/schema.json", schema: {} }]}
49
+ * handlebarSuggestions={[{ text: "example", description: "An example suggestion" }]}
50
+ * required={true}
51
+ * readOnly={false}
52
+ * minimal={false}
53
+ * onChange={(value) => console.log("Code changed:", value)}
54
+ * language="json"
55
+ * />
56
+ * ```
57
+ *
58
+ * @see {@link https://microsoft.github.io/monaco-editor/}
59
+ */
60
+ function CodeEditor(_ref) {
18
61
  var ref = _ref.ref,
19
62
  value = _ref.value,
20
63
  schema = _ref.schema,
@@ -29,20 +72,19 @@ var CodeEditor = function CodeEditor(_ref) {
29
72
  _useState2 = _slicedToArray(_useState, 2),
30
73
  editorRef = _useState2[0],
31
74
  setEditorRef = _useState2[1];
32
- var _useState3 = useState(),
33
- _useState4 = _slicedToArray(_useState3, 2),
34
- monacoRef = _useState4[0],
35
- setMonacoRef = _useState4[1];
36
- var isDark = useIsDark();
75
+ var monacoRef = useRef(null);
76
+ var _useApplicationContex = useApplicationContext(),
77
+ isDark = _useApplicationContex.isDark;
37
78
 
38
79
  /** ***************** watch theme change *******************/
39
- var _useState5 = useState(""),
40
- _useState6 = _slicedToArray(_useState5, 2),
41
- theme = _useState6[0],
42
- setTheme = _useState6[1];
80
+ var _useState3 = useState(""),
81
+ _useState4 = _slicedToArray(_useState3, 2),
82
+ theme = _useState4[0],
83
+ setTheme = _useState4[1];
43
84
  useLayoutEffect(function () {
44
- editorRef && setTheme(isDark ? "vs-dark" : "light");
45
- }, [isDark, editorRef]);
85
+ // eslint-disable-next-line @eslint-react/set-state-in-effect
86
+ setTheme(isDark ? "my-dark" : "my-light");
87
+ }, [isDark]);
46
88
 
47
89
  /** ***************** watch editor container resize *******************/
48
90
  var resizeHandler = useCallback(function (size) {
@@ -58,47 +100,58 @@ var CodeEditor = function CodeEditor(_ref) {
58
100
  var handleChange = useDebounce(function (value) {
59
101
  var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
60
102
  if (model) {
61
- var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
103
+ var _monacoRef$current;
104
+ var markers = (_monacoRef$current = monacoRef.current) === null || _monacoRef$current === void 0 ? void 0 : _monacoRef$current.editor.getModelMarkers({
62
105
  owner: model.getLanguageId()
63
106
  });
64
- (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
65
- return m.severity > 7;
66
- }).length) === 0 && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
107
+ if ((markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
108
+ return m.severity === monacoEditor.MarkerSeverity.Error;
109
+ }).length) === 0) onChange === null || onChange === void 0 || onChange(value);
67
110
  }
68
111
  }, [onChange, editorRef], 1000);
69
112
  useImperativeHandle(ref, function () {
70
113
  return {
114
+ addAction: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addAction.bind(editorRef),
115
+ addCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addCommand.bind(editorRef),
116
+ executeCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.executeCommand.bind(editorRef),
117
+ setModel: editorRef === null || editorRef === void 0 ? void 0 : editorRef.setModel.bind(editorRef),
118
+ focus: function focus() {
119
+ editorRef === null || editorRef === void 0 || editorRef.focus();
120
+ },
71
121
  getValue: function getValue() {
72
122
  return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
73
123
  },
74
124
  validate: function validate() {
75
125
  var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
76
126
  if (model) {
77
- var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
127
+ var _monacoRef$current2;
128
+ var markers = (_monacoRef$current2 = monacoRef.current) === null || _monacoRef$current2 === void 0 ? void 0 : _monacoRef$current2.editor.getModelMarkers({
78
129
  owner: model.getLanguageId()
79
130
  });
80
131
  return (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
81
- return m.severity > 8;
132
+ return m.severity === monacoEditor.MarkerSeverity.Error;
82
133
  }).length) === 0;
83
134
  }
84
135
  try {
85
136
  var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
86
- if (language === "json") val = JSON.parse(val);
137
+ if (language === "json") val = JSON.parse(val !== null && val !== void 0 ? val : "{}");
87
138
  return required ? !isEmpty(val) : true;
88
139
  } catch (_unused) {
89
140
  return false;
90
141
  }
91
142
  }
92
143
  };
93
- }, [required, language]);
94
- var disposeRef = useRef();
144
+ }, [editorRef, language, required]);
145
+ var disposeRef = useRef(null);
95
146
  var schemaUri = useCallback(function (monaco) {
96
147
  if (language === "json" && schema) {
97
- var _schema = _toArray(schema),
98
- main = _schema[0],
99
- rest = _schema.slice(1);
148
+ var _monaco$json;
149
+ var _ref2 = schema,
150
+ _ref3 = _toArray(_ref2),
151
+ main = _ref3[0],
152
+ rest = _arrayLikeToArray(_ref3).slice(1);
100
153
  // configure the JSON language support with schemas and schema associations
101
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
154
+ monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
102
155
  validate: true,
103
156
  allowComments: false,
104
157
  schemas: [_objectSpread({
@@ -146,31 +199,33 @@ var CodeEditor = function CodeEditor(_ref) {
146
199
  }
147
200
  });
148
201
  }
149
- }, [schema, language]);
150
- var resetSchema = useCallback(function (_, monaco) {
151
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
202
+ }, [language, schema, handlebarSuggestions]);
203
+ useEffect(function () {
204
+ var _monacoRef$current3;
205
+ (_monacoRef$current3 = monacoRef.current) === null || _monacoRef$current3 === void 0 || (_monacoRef$current3 = _monacoRef$current3.json) === null || _monacoRef$current3 === void 0 || _monacoRef$current3.jsonDefaults.setDiagnosticsOptions({
152
206
  validate: true,
153
207
  allowComments: false,
154
208
  schemas: []
155
209
  });
156
210
  }, []);
157
- return /*#__PURE__*/jsx(Section, {
211
+ return /*#__PURE__*/jsx(Layout, {
212
+ className: "relative",
158
213
  children: /*#__PURE__*/jsx("div", {
159
214
  ref: containerRef,
160
- "data-testid": "code-editor",
161
- className: classNames(classes.codeEditor, "area-content"),
215
+ "data-ref": "codeEditor",
216
+ className: cn("fabric-codeEditor", "absolute inset-0"),
162
217
  children: /*#__PURE__*/jsx(MonacoEditor, {
163
- editorDidMount: function editorDidMount(e, m) {
164
- return [!!e && setEditorRef(e), !!m && setMonacoRef(m)];
218
+ onMount: function onMount(e, m) {
219
+ return [!!e && setEditorRef(e), !!m && (monacoRef.current = m)];
165
220
  },
166
- editorWillMount: schemaUri,
167
- editorWillUnmount: resetSchema,
221
+ beforeMount: schemaUri,
222
+ theme: theme,
168
223
  value: codeValue,
169
224
  language: language,
170
225
  onChange: handleChange,
171
- theme: theme,
172
- className: classes.editor,
226
+ className: "fabric-editor",
173
227
  options: {
228
+ theme: theme,
174
229
  readOnly: readOnly,
175
230
  minimap: {
176
231
  enabled: !minimal
@@ -184,6 +239,6 @@ var CodeEditor = function CodeEditor(_ref) {
184
239
  })
185
240
  })
186
241
  });
187
- };
242
+ }
188
243
 
189
244
  export { CodeEditor };
package/dist/esm/index.js CHANGED
@@ -1,3 +1,33 @@
1
1
  'use client';
2
2
 
3
3
  export { CodeEditor } from './components/CodeEditor.js';
4
+
5
+ /**
6
+ * React Fabric
7
+ * @version 1.0.0
8
+ * @license MIT
9
+ * @copyright 2024 Adarsh Pastakia
10
+ *
11
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ * of this software and associated documentation files (the "Software"), to deal
13
+ * in the Software without restriction, including without limitation the rights
14
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ * copies of the Software, and to permit persons to whom the Software is
16
+ * furnished to do so, subject to the following conditions:
17
+ *
18
+ * The above copyright notice and this permission notice shall be included in all
19
+ * copies or substantial portions of the Software.
20
+ *
21
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ * SOFTWARE.
28
+ */
29
+
30
+ var MONACO_PACKAGE = "@react-fabric/monaco";
31
+ var MONACO_VERSION = "1.0.0";
32
+
33
+ export { MONACO_PACKAGE, MONACO_VERSION };