react-monaco-editor - npm Package Compare versions

Comparing version 0.53.0 to 0.54.0

lib/diff.d.ts

@@ -1,5 +0,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import { MonacoDiffEditorProps } from "./types";
 import { noop } from "./utils";
-declare function MonacoDiffEditor({ width, height, value, defaultValue, language, theme, options, overrideServices, editorWillMount, editorDidMount, editorWillUnmount, onChange, className, original, }: MonacoDiffEditorProps): JSX.Element;
+declare function MonacoDiffEditor({ width, height, value, defaultValue, language, theme, options, overrideServices, editorWillMount, editorDidMount, editorWillUnmount, onChange, className, original, originalUri, modifiedUri, }: MonacoDiffEditorProps): React.JSX.Element;
 declare namespace MonacoDiffEditor {
@@ -6,0 +6,0 @@ var defaultProps: {

lib/diff.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 function MonacoDiffEditor(_a) {
-    var width = _a.width, height = _a.height, value = _a.value, defaultValue = _a.defaultValue, language = _a.language, theme = _a.theme, options = _a.options, overrideServices = _a.overrideServices, editorWillMount = _a.editorWillMount, editorDidMount = _a.editorDidMount, editorWillUnmount = _a.editorWillUnmount, onChange = _a.onChange, className = _a.className, original = _a.original;
+    var width = _a.width, height = _a.height, value = _a.value, defaultValue = _a.defaultValue, language = _a.language, theme = _a.theme, options = _a.options, overrideServices = _a.overrideServices, editorWillMount = _a.editorWillMount, editorDidMount = _a.editorDidMount, editorWillUnmount = _a.editorWillUnmount, onChange = _a.onChange, className = _a.className, original = _a.original, originalUri = _a.originalUri, modifiedUri = _a.modifiedUri;
     var containerElement = useRef(null);
@@ -47,4 +47,22 @@ var editor = useRef(null);
         var finalValue = value != null ? value : defaultValue;
-        var originalModel = monaco.editor.createModel(original, language);
-        var modifiedModel = monaco.editor.createModel(finalValue, language);
+        var originalModelUri = originalUri === null || originalUri === void 0 ? void 0 : originalUri(monaco);
+        var modifiedModelUri = modifiedUri === null || modifiedUri === void 0 ? void 0 : modifiedUri(monaco);
+        var originalModel = originalModelUri && monaco.editor.getModel(originalModelUri);
+        var modifiedModel = modifiedModelUri && monaco.editor.getModel(modifiedModelUri);
+        // Cannot create two models with the same URI,
+        // if model with the given URI is already created, just update it.
+        if (originalModel) {
+            originalModel.setValue(original);
+            monaco.editor.setModelLanguage(originalModel, language);
+        }
+        else {
+            originalModel = monaco.editor.createModel(finalValue, language, originalModelUri);
+        }
+        if (modifiedModel) {
+            originalModel.setValue(finalValue);
+            monaco.editor.setModelLanguage(modifiedModel, language);
+        }
+        else {
+            modifiedModel = monaco.editor.createModel(finalValue, language, modifiedModelUri);
+        }
         editor.current.setModel({
@@ -51,0 +69,0 @@ original: originalModel,

lib/editor.d.ts

@@ -1,5 +0,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import { MonacoEditorProps } from "./types";
 import { noop } from "./utils";
-declare function MonacoEditor({ width, height, value, defaultValue, language, theme, options, overrideServices, editorWillMount, editorDidMount, editorWillUnmount, onChange, className, }: MonacoEditorProps): JSX.Element;
+declare function MonacoEditor({ width, height, value, defaultValue, language, theme, options, overrideServices, editorWillMount, editorDidMount, editorWillUnmount, onChange, className, uri, }: MonacoEditorProps): React.JSX.Element;
 declare namespace MonacoEditor {
@@ -6,0 +6,0 @@ var defaultProps: {

lib/editor.js

@@ -28,3 +28,3 @@ var __assign = (this && this.__assign) || function () {
 function MonacoEditor(_a) {
-    var width = _a.width, height = _a.height, value = _a.value, defaultValue = _a.defaultValue, language = _a.language, theme = _a.theme, options = _a.options, overrideServices = _a.overrideServices, editorWillMount = _a.editorWillMount, editorDidMount = _a.editorDidMount, editorWillUnmount = _a.editorWillUnmount, onChange = _a.onChange, className = _a.className;
+    var width = _a.width, height = _a.height, value = _a.value, defaultValue = _a.defaultValue, language = _a.language, theme = _a.theme, options = _a.options, overrideServices = _a.overrideServices, editorWillMount = _a.editorWillMount, editorDidMount = _a.editorDidMount, editorWillUnmount = _a.editorWillUnmount, onChange = _a.onChange, className = _a.className, uri = _a.uri;
     var containerElement = useRef(null);
@@ -60,3 +60,14 @@ var editor = useRef(null);
             var finalOptions = __assign(__assign({}, options), handleEditorWillMount());
-            editor.current = monaco.editor.create(containerElement.current, __assign(__assign(__assign({ value: finalValue, language: language }, (className ? { extraEditorClassName: className } : {})), finalOptions), (theme ? { theme: theme } : {})), overrideServices);
+            var modelUri = uri === null || uri === void 0 ? void 0 : uri(monaco);
+            var model = modelUri && monaco.editor.getModel(modelUri);
+            if (model) {
+                // Cannot create two models with the same URI,
+                // if model with the given URI is already created, just update it.
+                model.setValue(finalValue);
+                monaco.editor.setModelLanguage(model, language);
+            }
+            else {
+                model = monaco.editor.createModel(finalValue, language, modelUri);
+            }
+            editor.current = monaco.editor.create(containerElement.current, __assign(__assign(__assign({ model: model }, (className ? { extraEditorClassName: className } : {})), finalOptions), (theme ? { theme: theme } : {})), overrideServices);
             // After initializing monaco editor
@@ -63,0 +74,0 @@ handleEditorDidMount();

lib/types.d.ts

@@ -71,2 +71,6 @@ import * as monacoEditor from "monaco-editor/esm/vs/editor/editor.api";
     onChange?: ChangeHandler;
+    /**
+     * Let the language be inferred from the uri
+     */
+    uri?: (monaco: typeof monacoEditor) => monacoEditor.Uri;
 }
@@ -111,2 +115,10 @@ export type DiffEditorWillMount = (monaco: typeof monacoEditor) => void | monacoEditor.editor.IStandaloneEditorConstructionOptions;
     onChange?: DiffChangeHandler;
+    /**
+     * Let the language be inferred from the uri
+     */
+    originalUri?: (monaco: typeof monacoEditor) => monacoEditor.Uri;
+    /**
+     * Let the language be inferred from the uri
+     */
+    modifiedUri?: (monaco: typeof monacoEditor) => monacoEditor.Uri;
 }

package.json

 {
   "name": "react-monaco-editor",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "description": "Monaco Editor for React",
@@ -45,3 +45,3 @@ "main": "lib/index.js",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "^0.39.0",
     "prettier": "^2.7.1",
@@ -54,3 +54,3 @@ "react": "^18.2.0",
     "@types/react": ">=16 <= 18",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "^0.39.0",
     "react": ">=16 <= 18"
@@ -57,0 +57,0 @@ },

src/types.ts

@@ -102,2 +102,7 @@ import * as monacoEditor from "monaco-editor/esm/vs/editor/editor.api";
   onChange?: ChangeHandler;
+
+  /**
+   * Let the language be inferred from the uri
+   */
+  uri?: (monaco: typeof monacoEditor) => monacoEditor.Uri;
 }
@@ -164,2 +169,12 @@
   onChange?: DiffChangeHandler;
+
+  /**
+   * Let the language be inferred from the uri
+   */
+  originalUri?: (monaco: typeof monacoEditor) => monacoEditor.Uri;
+
+  /**
+   * Let the language be inferred from the uri
+   */
+  modifiedUri?: (monaco: typeof monacoEditor) => monacoEditor.Uri;
 }

No alert changes

Improved metrics

Total package byte prevSize

59163

8.52%

Lines of code

1040

9.59%

No dependency changes