react-monaco-editor - npm Package Compare versions

Comparing version 0.58.0 to 0.59.0

lib/diff.d.ts

 import * as React from "react";
-import { MonacoDiffEditorProps } from "./types";
-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 {
-    var displayName: string;
-}
-export default MonacoDiffEditor;
+import { MonacoDiffEditorHandle, MonacoDiffEditorProps } from "./types";
+declare const MonacoDiffEditorForwarded: React.ForwardRefExoticComponent<MonacoDiffEditorProps & React.RefAttributes<MonacoDiffEditorHandle>>;
+export default MonacoDiffEditorForwarded;

lib/diff.js

@@ -16,3 +16,3 @@ var __assign = (this && this.__assign) || function () {
 import { noop, processSize } from "./utils";
-function MonacoDiffEditor(_a) {
+function MonacoDiffEditor(_a, ref) {
     var _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.value, value = _d === void 0 ? null : _d, _e = _a.defaultValue, defaultValue = _e === void 0 ? "" : _e, _f = _a.language, language = _f === void 0 ? "javascript" : _f, _g = _a.theme, theme = _g === void 0 ? null : _g, _h = _a.options, options = _h === void 0 ? {} : _h, _j = _a.overrideServices, overrideServices = _j === void 0 ? {} : _j, _k = _a.editorWillMount, editorWillMount = _k === void 0 ? noop : _k, _l = _a.editorDidMount, editorDidMount = _l === void 0 ? noop : _l, _m = _a.editorWillUnmount, editorWillUnmount = _m === void 0 ? noop : _m, _o = _a.onChange, onChange = _o === void 0 ? noop : _o, _p = _a.className, className = _p === void 0 ? null : _p, _q = _a.original, original = _q === void 0 ? null : _q, originalUri = _a.originalUri, modifiedUri = _a.modifiedUri;
@@ -29,2 +29,7 @@ var containerElement = useRef(null);
     }); }, [fixedWidth, fixedHeight]);
+    React.useImperativeHandle(ref, function () { return ({
+        get editor() {
+            return editor.current;
+        },
+    }); });
     var handleEditorWillMount = function () {
@@ -152,4 +157,5 @@ var finalOptions = editorWillMount(monaco);
 }
-MonacoDiffEditor.displayName = "MonacoDiffEditor";
-export default MonacoDiffEditor;
+var MonacoDiffEditorForwarded = React.forwardRef(MonacoDiffEditor);
+MonacoDiffEditorForwarded.displayName = "MonacoDiffEditor";
+export default MonacoDiffEditorForwarded;
 //# sourceMappingURL=diff.js.map

lib/editor.d.ts

 import * as React from "react";
-import { MonacoEditorProps } from "./types";
-declare function MonacoEditor({ width, height, value, defaultValue, language, theme, options, overrideServices, editorWillMount, editorDidMount, editorWillUnmount, onChange, className, uri, }: MonacoEditorProps): React.JSX.Element;
-declare namespace MonacoEditor {
-    var displayName: string;
-}
-export default MonacoEditor;
+import { MonacoEditorHandle, MonacoEditorProps } from "./types";
+declare const MonacoEditorForwarded: React.ForwardRefExoticComponent<MonacoEditorProps & React.RefAttributes<MonacoEditorHandle>>;
+export default MonacoEditorForwarded;

lib/editor.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
 import { noop, processSize } from "./utils";
-function MonacoEditor(_a) {
+function MonacoEditor(_a, ref) {
     var _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.value, value = _d === void 0 ? null : _d, _e = _a.defaultValue, defaultValue = _e === void 0 ? "" : _e, _f = _a.language, language = _f === void 0 ? "javascript" : _f, _g = _a.theme, theme = _g === void 0 ? null : _g, _h = _a.options, options = _h === void 0 ? {} : _h, _j = _a.overrideServices, overrideServices = _j === void 0 ? {} : _j, _k = _a.editorWillMount, editorWillMount = _k === void 0 ? noop : _k, _l = _a.editorDidMount, editorDidMount = _l === void 0 ? noop : _l, _m = _a.editorWillUnmount, editorWillUnmount = _m === void 0 ? noop : _m, _o = _a.onChange, onChange = _o === void 0 ? noop : _o, _p = _a.className, className = _p === void 0 ? null : _p, uri = _a.uri;
@@ -38,2 +38,7 @@ var containerElement = useRef(null);
     onChangeRef.current = onChange;
+    React.useImperativeHandle(ref, function () { return ({
+        get editor() {
+            return editor.current;
+        },
+    }); });
     var style = useMemo(function () { return ({
@@ -83,3 +88,4 @@ width: fixedWidth,
     useEffect(function () {
-        if (editor.current) {
+        // If value is null, we don't want to update the editor content because it is controlled by defaultValue.
+        if (editor.current && value !== null) {
             if (value === editor.current.getValue()) {
@@ -137,4 +143,5 @@ return;
 }
-MonacoEditor.displayName = "MonacoEditor";
-export default MonacoEditor;
+var MonacoEditorForwarded = React.forwardRef(MonacoEditor);
+MonacoEditorForwarded.displayName = "MonacoEditor";
+export default MonacoEditorForwarded;
 //# sourceMappingURL=editor.js.map

lib/types.d.ts

@@ -124,1 +124,7 @@ import * as monacoEditor from "monaco-editor/esm/vs/editor/editor.api";
 export type Theme = "vs" | "vs-dark" | "hc-black";
+export interface MonacoEditorHandle {
+    editor: monacoEditor.editor.IStandaloneCodeEditor;
+}
+export interface MonacoDiffEditorHandle {
+    editor: monacoEditor.editor.IStandaloneDiffEditor;
+}

package.json

 {
   "name": "react-monaco-editor",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "Monaco Editor for React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -160,5 +160,11 @@ <p align="center"><img src="https://user-images.githubusercontent.com/2723376/55211710-2f76e000-5228-11e9-887b-67faca78c4b9.png" width="150" height="150" /></p>
 
-Using the first parameter of `editorDidMount`, or using a `ref` (e.g. `<MonacoEditor ref="monaco">`) after `editorDidMount` event has fired.
+Using the first parameter of `editorDidMount`, or using a `ref` (e.g. `<MonacoEditor ref={monacoEditorRef}>`).
 
-Then you can invoke instance methods via `this.refs.monaco.editor`, e.g. `this.refs.monaco.editor.focus()` to focuses the MonacoEditor instance.
+```js
+const monacoEditorRef = useRef(null);
+return (<>
+  <button onClick={() => monacoEditorRef.current.editor.focus()}>Focus</button>
+  <MonacoEditor ref={monacoEditorRef} />
+</>)
+```
 
@@ -165,0 +171,0 @@ ### How to get value of editor

src/types.ts

@@ -182,1 +182,9 @@ import * as monacoEditor from "monaco-editor/esm/vs/editor/editor.api";
 export type Theme = "vs" | "vs-dark" | "hc-black";
+
+export interface MonacoEditorHandle {
+  editor: monacoEditor.editor.IStandaloneCodeEditor;
+}
+
+export interface MonacoDiffEditorHandle {
+  editor: monacoEditor.editor.IStandaloneDiffEditor;
+}

No alert changes

Improved metrics

Total package byte prevSize

60396

3.2%

Lines of code

985

4.01%

Number of lines in readme file

268

2.29%

No dependency changes