@react-fabric/monaco 1.0.0-beta.60 → 1.0.0-beta.62

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 (5) hide show
  1. package/dist/cjs/components/CodeEditor.js +14 -5
  2. package/dist/esm/components/CodeEditor.js +14 -5
  3. package/dist/types/components/CodeEditor.d.ts +7 -1
  4. package/package.json +5 -5
  5. package/src/components/CodeEditor.tsx +23 -9
package/dist/cjs/components/CodeEditor.js CHANGED
@@ -94,6 +94,13 @@ var CodeEditor = function CodeEditor(_ref) {
94
94
  }, [onChange, editorRef], 1000);
95
95
  react.useImperativeHandle(ref, function () {
96
96
  return {
97
+ addAction: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addAction.bind(editorRef),
98
+ addCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addCommand.bind(editorRef),
99
+ executeCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.executeCommand.bind(editorRef),
100
+ setModel: editorRef === null || editorRef === void 0 ? void 0 : editorRef.setModel.bind(editorRef),
101
+ focus: function focus() {
102
+ editorRef === null || editorRef === void 0 || editorRef.focus();
103
+ },
97
104
  getValue: function getValue() {
98
105
  return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
99
106
  },
@@ -108,24 +115,25 @@ var CodeEditor = function CodeEditor(_ref) {
108
115
  }).length) === 0;
109
116
  }
110
117
  try {
118
+ var _val;
111
119
  var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
112
- if (language === "json") val = JSON.parse(val);
120
+ if (language === "json") val = JSON.parse((_val = val) !== null && _val !== void 0 ? _val : "{}");
113
121
  return required ? !utilities.isEmpty(val) : true;
114
122
  } catch (_unused) {
115
123
  return false;
116
124
  }
117
125
  }
118
126
  };
119
- }, [required, language]);
127
+ }, [required, language, editorRef]);
120
128
  var disposeRef = react.useRef(null);
121
129
  var schemaUri = react.useCallback(function (monaco) {
122
130
  if (language === "json" && schema) {
123
- var _monaco$languages;
131
+ var _monaco$json;
124
132
  var _schema = _toArray(schema),
125
133
  main = _schema[0],
126
134
  rest = _schema.slice(1);
127
135
  // configure the JSON language support with schemas and schema associations
128
- (_monaco$languages = monaco.languages) === null || _monaco$languages === void 0 || (_monaco$languages = _monaco$languages.json) === null || _monaco$languages === void 0 || _monaco$languages.jsonDefaults.setDiagnosticsOptions({
136
+ monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
129
137
  validate: true,
130
138
  allowComments: false,
131
139
  schemas: [_objectSpread({
@@ -175,7 +183,8 @@ var CodeEditor = function CodeEditor(_ref) {
175
183
  }
176
184
  }, [schema, language]);
177
185
  var resetSchema = react.useCallback(function (_, monaco) {
178
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
186
+ var _monaco$json2;
187
+ monaco === null || monaco === void 0 || (_monaco$json2 = monaco.json) === null || _monaco$json2 === void 0 || _monaco$json2.jsonDefaults.setDiagnosticsOptions({
179
188
  validate: true,
180
189
  allowComments: false,
181
190
  schemas: []
package/dist/esm/components/CodeEditor.js CHANGED
@@ -94,6 +94,13 @@ var CodeEditor = function CodeEditor(_ref) {
94
94
  }, [onChange, editorRef], 1000);
95
95
  useImperativeHandle(ref, function () {
96
96
  return {
97
+ addAction: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addAction.bind(editorRef),
98
+ addCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.addCommand.bind(editorRef),
99
+ executeCommand: editorRef === null || editorRef === void 0 ? void 0 : editorRef.executeCommand.bind(editorRef),
100
+ setModel: editorRef === null || editorRef === void 0 ? void 0 : editorRef.setModel.bind(editorRef),
101
+ focus: function focus() {
102
+ editorRef === null || editorRef === void 0 || editorRef.focus();
103
+ },
97
104
  getValue: function getValue() {
98
105
  return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
99
106
  },
@@ -108,24 +115,25 @@ var CodeEditor = function CodeEditor(_ref) {
108
115
  }).length) === 0;
109
116
  }
110
117
  try {
118
+ var _val;
111
119
  var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
112
- if (language === "json") val = JSON.parse(val);
120
+ if (language === "json") val = JSON.parse((_val = val) !== null && _val !== void 0 ? _val : "{}");
113
121
  return required ? !isEmpty(val) : true;
114
122
  } catch (_unused) {
115
123
  return false;
116
124
  }
117
125
  }
118
126
  };
119
- }, [required, language]);
127
+ }, [required, language, editorRef]);
120
128
  var disposeRef = useRef(null);
121
129
  var schemaUri = useCallback(function (monaco) {
122
130
  if (language === "json" && schema) {
123
- var _monaco$languages;
131
+ var _monaco$json;
124
132
  var _schema = _toArray(schema),
125
133
  main = _schema[0],
126
134
  rest = _schema.slice(1);
127
135
  // configure the JSON language support with schemas and schema associations
128
- (_monaco$languages = monaco.languages) === null || _monaco$languages === void 0 || (_monaco$languages = _monaco$languages.json) === null || _monaco$languages === void 0 || _monaco$languages.jsonDefaults.setDiagnosticsOptions({
136
+ monaco === null || monaco === void 0 || (_monaco$json = monaco.json) === null || _monaco$json === void 0 || _monaco$json.jsonDefaults.setDiagnosticsOptions({
129
137
  validate: true,
130
138
  allowComments: false,
131
139
  schemas: [_objectSpread({
@@ -175,7 +183,8 @@ var CodeEditor = function CodeEditor(_ref) {
175
183
  }
176
184
  }, [schema, language]);
177
185
  var resetSchema = useCallback(function (_, monaco) {
178
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
186
+ var _monaco$json2;
187
+ monaco === null || monaco === void 0 || (_monaco$json2 = monaco.json) === null || _monaco$json2 === void 0 || _monaco$json2.jsonDefaults.setDiagnosticsOptions({
179
188
  validate: true,
180
189
  allowComments: false,
181
190
  schemas: []
package/dist/types/components/CodeEditor.d.ts CHANGED
@@ -1,7 +1,13 @@
1
1
  import { type RefProp } from "@react-fabric/core/dist/types/types";
2
+ import type 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;
@@ -25,7 +31,7 @@ type EditorProps = BaseEditorProps & ({
25
31
  description?: string;
26
32
  }>;
27
33
  } | {
28
- language?: "css" | "text" | "markdown";
34
+ language?: "css" | "text" | "markdown" | "yaml" | "xml";
29
35
  schema?: any;
30
36
  handlebarSuggestions?: never;
31
37
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/monaco",
3
- "version": "1.0.0-beta.60",
3
+ "version": "1.0.0-beta.62",
4
4
  "description": "RUF: Monaco editor",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -35,10 +35,10 @@
35
35
  "watch": "npm-run-all -p watch:rollup watch:dts"
36
36
  },
37
37
  "dependencies": {
38
- "@react-fabric/core": "^1.0.0-beta.60",
39
- "@react-fabric/utilities": "^1.0.0-beta.60",
38
+ "@react-fabric/core": "^1.0.0-beta.62",
39
+ "@react-fabric/utilities": "^1.0.0-beta.62",
40
40
  "classnames": "~2.5.1",
41
- "monaco-editor": "~0.54.0",
41
+ "monaco-editor": "~0.55.1",
42
42
  "react-monaco-editor": "~0.59.0"
43
43
  },
44
44
  "peerDependencies": {
@@ -51,5 +51,5 @@
51
51
  "node": ">=18.12.0",
52
52
  "npm": ">=8.19.0"
53
53
  },
54
- "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
54
+ "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
55
55
  }
package/src/components/CodeEditor.tsx CHANGED
@@ -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 {
@@ -71,7 +77,7 @@ type EditorProps = BaseEditorProps &
71
77
  handlebarSuggestions?: Array<{ text: string; description?: string }>;
72
78
  }
73
79
  | {
74
- language?: "css" | "text" | "markdown";
80
+ language?: "css" | "text" | "markdown" | "yaml" | "xml";
75
81
  schema?: any;
76
82
  handlebarSuggestions?: never;
77
83
  }
@@ -115,7 +121,8 @@ export const CodeEditor = ({
115
121
  onChange,
116
122
  language = "json",
117
123
  }: EditorProps & RefProp<MonacoEditorRef>) => {
118
- const [editorRef, setEditorRef] = useState<AnyObject>();
124
+ const [editorRef, setEditorRef] =
125
+ useState<monacoEditor.editor.IStandaloneCodeEditor>();
119
126
  const [monacoRef, setMonacoRef] = useState<typeof monacoEditor>();
120
127
  const isDark = useIsDark();
121
128
 
@@ -160,6 +167,13 @@ export const CodeEditor = ({
160
167
  useImperativeHandle(
161
168
  ref,
162
169
  () => ({
170
+ addAction: editorRef?.addAction.bind(editorRef),
171
+ addCommand: editorRef?.addCommand.bind(editorRef),
172
+ executeCommand: editorRef?.executeCommand.bind(editorRef),
173
+ setModel: editorRef?.setModel.bind(editorRef),
174
+ focus() {
175
+ editorRef?.focus();
176
+ },
163
177
  getValue() {
164
178
  return editorRef?.getValue();
165
179
  },
@@ -173,14 +187,14 @@ export const CodeEditor = ({
173
187
  }
174
188
  try {
175
189
  let val = editorRef?.getValue();
176
- if (language === "json") val = JSON.parse(val);
190
+ if (language === "json") val = JSON.parse(val ?? "{}");
177
191
  return required ? !isEmpty(val) : true;
178
192
  } catch {
179
193
  return false;
180
194
  }
181
195
  },
182
196
  }),
183
- [required, language],
197
+ [required, language, editorRef],
184
198
  );
185
199
 
186
200
  const disposeRef = useRef<AnyObject>(null);
@@ -189,7 +203,7 @@ export const CodeEditor = ({
189
203
  if (language === "json" && schema) {
190
204
  const [main, ...rest] = schema;
191
205
  // configure the JSON language support with schemas and schema associations
192
- monaco.languages?.json?.jsonDefaults.setDiagnosticsOptions({
206
+ monaco?.json?.jsonDefaults.setDiagnosticsOptions({
193
207
  validate: true,
194
208
  allowComments: false,
195
209
  schemas: [
@@ -244,7 +258,7 @@ export const CodeEditor = ({
244
258
  );
245
259
 
246
260
  const resetSchema = useCallback((_: unknown, monaco: typeof monacoEditor) => {
247
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
261
+ monaco?.json?.jsonDefaults.setDiagnosticsOptions({
248
262
  validate: true,
249
263
  allowComments: false,
250
264
  schemas: [],
@@ -261,10 +275,10 @@ export const CodeEditor = ({
261
275
  <MonacoEditor
262
276
  editorDidMount={(e, m) => [
263
277
  !!e && setEditorRef(e),
264
- !!m && setMonacoRef(m),
278
+ !!m && setMonacoRef(m as any),
265
279
  ]}
266
- editorWillMount={schemaUri}
267
- editorWillUnmount={resetSchema}
280
+ editorWillMount={schemaUri as any}
281
+ editorWillUnmount={resetSchema as any}
268
282
  value={codeValue}
269
283
  language={language}
270
284
  onChange={handleChange}