@monaco-editor/react - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

CHANGELOG.md

 ### Versions
 
+## 4.0.6
+###### *Jan 19, 2021*
+
+- DiffEditor: check if `originalModelPath` and `modifiedModelPath` exist in `setModels` function
+- DiffEditor: remove `originalModelPath` and `modifiedModelPath` from `defaultProps`
+
 ## 4.0.5
@@ -4,0 +10,0 @@ ###### *Jan 19, 2021*

lib/cjs/DiffEditor/DiffEditor.js

@@ -77,4 +77,4 @@ 'use strict';
     beforeMountRef.current(monacoRef.current);
-    const originalModel = monacoRef.current.editor.createModel(original, originalLanguage || language, monacoRef.current.Uri.parse(originalModelPath));
-    const modifiedModel = monacoRef.current.editor.createModel(modified, modifiedLanguage || language, monacoRef.current.Uri.parse(modifiedModelPath));
+    const originalModel = monacoRef.current.editor.createModel(original, originalLanguage || language, originalModelPath && monacoRef.current.Uri.parse(originalModelPath));
+    const modifiedModel = monacoRef.current.editor.createModel(modified, modifiedLanguage || language, modifiedModelPath && monacoRef.current.Uri.parse(modifiedModelPath));
     editorRef.current.setModel({
@@ -103,4 +103,11 @@ original: originalModel,
 
-  const disposeEditor = () => editorRef.current.dispose();
+  const disposeEditor = () => {
+    var _models$original, _models$modified;
 
+    const models = editorRef.current.getModel();
+    (_models$original = models.original) === null || _models$original === void 0 ? void 0 : _models$original.dispose();
+    (_models$modified = models.modified) === null || _models$modified === void 0 ? void 0 : _models$modified.dispose();
+    editorRef.current.dispose();
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(index$2['default'], {
@@ -142,4 +149,2 @@ width: width,
 DiffEditor.defaultProps = {
-  originalModelPath: 'inmemory://model/1',
-  modifiedModelPath: 'inmemory://model/2',
   theme: 'light',
@@ -146,0 +151,0 @@ loading: 'Loading...',

lib/es/DiffEditor/DiffEditor.js

@@ -67,4 +67,4 @@ import loader from '@monaco-editor/loader';
     beforeMountRef.current(monacoRef.current);
-    const originalModel = monacoRef.current.editor.createModel(original, originalLanguage || language, monacoRef.current.Uri.parse(originalModelPath));
-    const modifiedModel = monacoRef.current.editor.createModel(modified, modifiedLanguage || language, monacoRef.current.Uri.parse(modifiedModelPath));
+    const originalModel = monacoRef.current.editor.createModel(original, originalLanguage || language, originalModelPath && monacoRef.current.Uri.parse(originalModelPath));
+    const modifiedModel = monacoRef.current.editor.createModel(modified, modifiedLanguage || language, modifiedModelPath && monacoRef.current.Uri.parse(modifiedModelPath));
     editorRef.current.setModel({
@@ -93,4 +93,11 @@ original: originalModel,
 
-  const disposeEditor = () => editorRef.current.dispose();
+  const disposeEditor = () => {
+    var _models$original, _models$modified;
 
+    const models = editorRef.current.getModel();
+    (_models$original = models.original) === null || _models$original === void 0 ? void 0 : _models$original.dispose();
+    (_models$modified = models.modified) === null || _models$modified === void 0 ? void 0 : _models$modified.dispose();
+    editorRef.current.dispose();
+  };
+
   return /*#__PURE__*/React.createElement(MonacoContainer, {
@@ -132,4 +139,2 @@ width: width,
 DiffEditor.defaultProps = {
-  originalModelPath: 'inmemory://model/1',
-  modifiedModelPath: 'inmemory://model/2',
   theme: 'light',
@@ -136,0 +141,0 @@ loading: 'Loading...',

lib/umd/monaco-react.js

@@ -170,4 +170,4 @@ (function (global, factory) {
       beforeMountRef.current(monacoRef.current);
-      const originalModel = monacoRef.current.editor.createModel(original, originalLanguage || language, monacoRef.current.Uri.parse(originalModelPath));
-      const modifiedModel = monacoRef.current.editor.createModel(modified, modifiedLanguage || language, monacoRef.current.Uri.parse(modifiedModelPath));
+      const originalModel = monacoRef.current.editor.createModel(original, originalLanguage || language, originalModelPath && monacoRef.current.Uri.parse(originalModelPath));
+      const modifiedModel = monacoRef.current.editor.createModel(modified, modifiedLanguage || language, modifiedModelPath && monacoRef.current.Uri.parse(modifiedModelPath));
       editorRef.current.setModel({
@@ -196,4 +196,11 @@ original: originalModel,
 
-    const disposeEditor = () => editorRef.current.dispose();
+    const disposeEditor = () => {
+      var _models$original, _models$modified;
 
+      const models = editorRef.current.getModel();
+      (_models$original = models.original) === null || _models$original === void 0 ? void 0 : _models$original.dispose();
+      (_models$modified = models.modified) === null || _models$modified === void 0 ? void 0 : _models$modified.dispose();
+      editorRef.current.dispose();
+    };
+
     return /*#__PURE__*/React__default['default'].createElement(MonacoContainer$1, {
@@ -235,4 +242,2 @@ width: width,
   DiffEditor.defaultProps = {
-    originalModelPath: 'inmemory://model/1',
-    modifiedModelPath: 'inmemory://model/2',
     theme: 'light',
@@ -239,0 +244,0 @@ loading: 'Loading...',

lib/umd/monaco-react.min.js

@@ -1,1 +0,1 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@monaco-editor/loader"),require("react"),require("prop-types"),require("state-local")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","react","prop-types","state-local"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_react={},global.monaco_loader,global.React,global.PropTypes,global.state)}(this,(function(exports,loader,React,PropTypes,state){"use strict";function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var loader__default=_interopDefaultLegacy(loader),React__default=_interopDefaultLegacy(React),PropTypes__default=_interopDefaultLegacy(PropTypes),state__default=_interopDefaultLegacy(state);const loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};function Loading({content:content}){return React__default.default.createElement("div",{style:loadingStyles},content)}const styles_wrapper={display:"flex",position:"relative",textAlign:"initial"},styles_fullWidth={width:"100%"},styles_hide={display:"none"};function MonacoContainer({width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:_ref,className:className,wrapperClassName:wrapperClassName}){return React__default.default.createElement("section",{style:{...styles_wrapper,width:width,height:height},className:wrapperClassName},!isEditorReady&&React__default.default.createElement(Loading,{content:loading}),React__default.default.createElement("div",{ref:_ref,style:{...styles_fullWidth,...!isEditorReady&&styles_hide},className:className}))}MonacoContainer.propTypes={width:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]).isRequired,height:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]).isRequired,loading:PropTypes__default.default.oneOfType([PropTypes__default.default.element,PropTypes__default.default.string]).isRequired,isEditorReady:PropTypes__default.default.bool.isRequired,className:PropTypes__default.default.string,wrapperClassName:PropTypes__default.default.string};var MonacoContainer$1=React.memo(MonacoContainer);function useMount(effect){React.useEffect(effect,[])}function useUpdate(effect,deps,applyChanges=!0){const isInitialMount=React.useRef(!0);React.useEffect(isInitialMount.current||!applyChanges?()=>{isInitialMount.current=!1}:effect,deps)}function noop(){}function getOrCreateModel(monaco,value,language,path){return function(monaco,path){return monaco.editor.getModel(crateModelUri(monaco,path))}(monaco,path)||function(monaco,value,language,path){return monaco.editor.createModel(value,language,path&&crateModelUri(monaco,path))}(monaco,value,language,path)}function crateModelUri(monaco,path){return monaco.Uri.parse(path)}function DiffEditor({original:original,modified:modified,language:language,originalLanguage:originalLanguage,modifiedLanguage:modifiedLanguage,originalModelPath:originalModelPath,modifiedModelPath:modifiedModelPath,theme:theme,loading:loading,options:options,height:height,width:width,className:className,wrapperClassName:wrapperClassName,beforeMount:beforeMount,onMount:onMount}){const[isEditorReady,setIsEditorReady]=React.useState(!1),[isMonacoMounting,setIsMonacoMounting]=React.useState(!0),editorRef=React.useRef(null),monacoRef=React.useRef(null),containerRef=React.useRef(null),onMountRef=React.useRef(onMount),beforeMountRef=React.useRef(beforeMount);useMount((()=>{const cancelable=loader__default.default.init();return cancelable.then((monaco=>(monacoRef.current=monaco)&&setIsMonacoMounting(!1))).catch((error=>"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization: error:",error))),()=>editorRef.current?disposeEditor():cancelable.cancel()})),useUpdate((()=>{editorRef.current.getModel().modified.setValue(modified)}),[modified],isEditorReady),useUpdate((()=>{editorRef.current.getModel().original.setValue(original)}),[original],isEditorReady),useUpdate((()=>{const{original:original,modified:modified}=editorRef.current.getModel();monacoRef.current.editor.setModelLanguage(original,originalLanguage||language),monacoRef.current.editor.setModelLanguage(modified,modifiedLanguage||language)}),[language,originalLanguage,modifiedLanguage],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setTheme(theme)}),[theme],isEditorReady),useUpdate((()=>{editorRef.current.updateOptions(options)}),[options],isEditorReady);const setModels=React.useCallback((()=>{beforeMountRef.current(monacoRef.current);const originalModel=monacoRef.current.editor.createModel(original,originalLanguage||language,monacoRef.current.Uri.parse(originalModelPath)),modifiedModel=monacoRef.current.editor.createModel(modified,modifiedLanguage||language,monacoRef.current.Uri.parse(modifiedModelPath));editorRef.current.setModel({original:originalModel,modified:modifiedModel})}),[language,modified,modifiedLanguage,original,originalLanguage,originalModelPath,modifiedModelPath]),createEditor=React.useCallback((()=>{editorRef.current=monacoRef.current.editor.createDiffEditor(containerRef.current,{automaticLayout:!0,...options}),setModels(),monacoRef.current.editor.setTheme(theme),setIsEditorReady(!0)}),[options,theme,setModels]);React.useEffect((()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)}),[isEditorReady]),React.useEffect((()=>{!isMonacoMounting&&!isEditorReady&&createEditor()}),[isMonacoMounting,isEditorReady,createEditor]);const disposeEditor=()=>editorRef.current.dispose();return React__default.default.createElement(MonacoContainer$1,{width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:containerRef,className:className,wrapperClassName:wrapperClassName})}DiffEditor.propTypes={original:PropTypes__default.default.string,modified:PropTypes__default.default.string,language:PropTypes__default.default.string,originalLanguage:PropTypes__default.default.string,modifiedLanguage:PropTypes__default.default.string,originalModelPath:PropTypes__default.default.string,modifiedModelPath:PropTypes__default.default.string,theme:PropTypes__default.default.string,loading:PropTypes__default.default.oneOfType([PropTypes__default.default.element,PropTypes__default.default.string]),options:PropTypes__default.default.object,width:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),height:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),className:PropTypes__default.default.string,wrapperClassName:PropTypes__default.default.string,beforeMount:PropTypes__default.default.func,onMount:PropTypes__default.default.func},DiffEditor.defaultProps={originalModelPath:"inmemory://model/1",modifiedModelPath:"inmemory://model/2",theme:"light",loading:"Loading...",options:{},width:"100%",height:"100%",beforeMount:noop,onMount:noop};var index=React.memo(DiffEditor);const[getModelMarkersSetter,setModelMarkersSetter]=state__default.default.create({backup:null}),viewStates=new Map;function Editor({defaultValue:defaultValue,defaultLanguage:defaultLanguage,defaultPath:defaultPath,value:value,language:language,path:path,theme:theme,line:line,loading:loading,options:options,overrideServices:overrideServices,saveViewState:saveViewState,width:width,height:height,className:className,wrapperClassName:wrapperClassName,beforeMount:beforeMount,onMount:onMount,onChange:onChange,onValidate:onValidate}){const[isEditorReady,setIsEditorReady]=React.useState(!1),[isMonacoMounting,setIsMonacoMounting]=React.useState(!0),monacoRef=React.useRef(null),editorRef=React.useRef(null),containerRef=React.useRef(null),onMountRef=React.useRef(onMount),beforeMountRef=React.useRef(beforeMount),subscriptionRef=React.useRef(null),valueRef=React.useRef(value),previousPath=function(value){const ref=React.useRef();return React.useEffect((()=>{ref.current=value}),[value]),ref.current}(path);useMount((()=>{const cancelable=loader__default.default.init();return cancelable.then((monaco=>(monacoRef.current=monaco)&&setIsMonacoMounting(!1))).catch((error=>"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization: error:",error))),()=>{return editorRef.current?(null===(_subscriptionRef$curr2=subscriptionRef.current)||void 0===_subscriptionRef$curr2||_subscriptionRef$curr2.dispose(),null===(_editorRef$current$ge=editorRef.current.getModel())||void 0===_editorRef$current$ge||_editorRef$current$ge.dispose(),void editorRef.current.dispose()):cancelable.cancel();var _subscriptionRef$curr2,_editorRef$current$ge}})),useUpdate((()=>{const model=getOrCreateModel(monacoRef.current,defaultValue||value,defaultLanguage||language,path);model!==editorRef.current.getModel()&&(saveViewState&&viewStates.set(previousPath,editorRef.current.saveViewState()),editorRef.current.setModel(model),saveViewState&&editorRef.current.restoreViewState(viewStates.get(path)))}),[path],isEditorReady),useUpdate((()=>{editorRef.current.updateOptions(options)}),[options],isEditorReady),useUpdate((()=>{editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)?editorRef.current.setValue(value):value!==editorRef.current.getValue()&&(editorRef.current.executeEdits("",[{range:editorRef.current.getModel().getFullModelRange(),text:value,forceMoveMarkers:!0}]),editorRef.current.pushUndoStop())}),[value],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(),language)}),[language],isEditorReady),useUpdate((()=>{editorRef.current.setScrollPosition({scrollTop:line})}),[line],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setTheme(theme)}),[theme],isEditorReady);const createEditor=React.useCallback((()=>{beforeMountRef.current(monacoRef.current);const defaultModel=getOrCreateModel(monacoRef.current,value||defaultValue,defaultLanguage||language,path||defaultPath);editorRef.current=monacoRef.current.editor.create(containerRef.current,{model:defaultModel,automaticLayout:!0,...options},overrideServices),monacoRef.current.editor.setTheme(theme),getModelMarkersSetter().backup||setModelMarkersSetter({backup:monacoRef.current.editor.setModelMarkers}),setIsEditorReady(!0)}),[defaultValue,defaultLanguage,defaultPath,value,language,path,options,overrideServices,theme]);return React.useEffect((()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)}),[isEditorReady]),React.useEffect((()=>{!isMonacoMounting&&!isEditorReady&&createEditor()}),[isMonacoMounting,isEditorReady,createEditor]),valueRef.current=value,React.useEffect((()=>{var _subscriptionRef$curr,_editorRef$current;isEditorReady&&onChange&&(null===(_subscriptionRef$curr=subscriptionRef.current)||void 0===_subscriptionRef$curr||_subscriptionRef$curr.dispose(),subscriptionRef.current=null===(_editorRef$current=editorRef.current)||void 0===_editorRef$current?void 0:_editorRef$current.onDidChangeModelContent((event=>{const editorValue=editorRef.current.getValue();valueRef.current!==editorValue&&onChange(editorValue,event)})))}),[isEditorReady,onChange]),React.useEffect((()=>{isEditorReady&&(monacoRef.current.editor.setModelMarkers=function(model,owner,markers){var _getModelMarkersSette;null===(_getModelMarkersSette=getModelMarkersSetter().backup)||void 0===_getModelMarkersSette||_getModelMarkersSette.call(monacoRef.current.editor,model,owner,markers),0!==markers.length&&(null==onValidate||onValidate(markers))})}),[isEditorReady,onValidate]),React__default.default.createElement(MonacoContainer$1,{width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:containerRef,className:className,wrapperClassName:wrapperClassName})}Editor.propTypes={defaultValue:PropTypes__default.default.string,defaultPath:PropTypes__default.default.string,defaultLanguage:PropTypes__default.default.string,value:PropTypes__default.default.string,language:PropTypes__default.default.string,path:PropTypes__default.default.string,theme:PropTypes__default.default.string,line:PropTypes__default.default.number,loading:PropTypes__default.default.oneOfType([PropTypes__default.default.element,PropTypes__default.default.string]),options:PropTypes__default.default.object,overrideServices:PropTypes__default.default.object,saveViewState:PropTypes__default.default.bool,width:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),height:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),className:PropTypes__default.default.string,wrapperClassName:PropTypes__default.default.string,beforeMount:PropTypes__default.default.func,onMount:PropTypes__default.default.func,onChange:PropTypes__default.default.func,onValidate:PropTypes__default.default.func},Editor.defaultProps={theme:"light",loading:"Loading...",options:{},overrideServices:{},saveViewState:!0,width:"100%",height:"100%",beforeMount:noop,onMount:noop,onValidate:noop};var index$1=React.memo(Editor);Object.defineProperty(exports,"loader",{enumerable:!0,get:function(){return loader__default.default}}),exports.DiffEditor=index,exports.default=index$1,exports.useMonaco=function(){const[monaco,setMonaco]=React.useState(loader__default.default.__getMonacoInstance());return useMount((()=>{let cancelable;return monaco||(cancelable=loader__default.default.init(),cancelable.then((monaco=>{setMonaco(monaco)}))),()=>{var _cancelable;return null===(_cancelable=cancelable)||void 0===_cancelable?void 0:_cancelable.cancel()}})),monaco},Object.defineProperty(exports,"__esModule",{value:!0})}));
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@monaco-editor/loader"),require("react"),require("prop-types"),require("state-local")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","react","prop-types","state-local"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_react={},global.monaco_loader,global.React,global.PropTypes,global.state)}(this,(function(exports,loader,React,PropTypes,state){"use strict";function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var loader__default=_interopDefaultLegacy(loader),React__default=_interopDefaultLegacy(React),PropTypes__default=_interopDefaultLegacy(PropTypes),state__default=_interopDefaultLegacy(state);const loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};function Loading({content:content}){return React__default.default.createElement("div",{style:loadingStyles},content)}const styles_wrapper={display:"flex",position:"relative",textAlign:"initial"},styles_fullWidth={width:"100%"},styles_hide={display:"none"};function MonacoContainer({width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:_ref,className:className,wrapperClassName:wrapperClassName}){return React__default.default.createElement("section",{style:{...styles_wrapper,width:width,height:height},className:wrapperClassName},!isEditorReady&&React__default.default.createElement(Loading,{content:loading}),React__default.default.createElement("div",{ref:_ref,style:{...styles_fullWidth,...!isEditorReady&&styles_hide},className:className}))}MonacoContainer.propTypes={width:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]).isRequired,height:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]).isRequired,loading:PropTypes__default.default.oneOfType([PropTypes__default.default.element,PropTypes__default.default.string]).isRequired,isEditorReady:PropTypes__default.default.bool.isRequired,className:PropTypes__default.default.string,wrapperClassName:PropTypes__default.default.string};var MonacoContainer$1=React.memo(MonacoContainer);function useMount(effect){React.useEffect(effect,[])}function useUpdate(effect,deps,applyChanges=!0){const isInitialMount=React.useRef(!0);React.useEffect(isInitialMount.current||!applyChanges?()=>{isInitialMount.current=!1}:effect,deps)}function noop(){}function getOrCreateModel(monaco,value,language,path){return function(monaco,path){return monaco.editor.getModel(crateModelUri(monaco,path))}(monaco,path)||function(monaco,value,language,path){return monaco.editor.createModel(value,language,path&&crateModelUri(monaco,path))}(monaco,value,language,path)}function crateModelUri(monaco,path){return monaco.Uri.parse(path)}function DiffEditor({original:original,modified:modified,language:language,originalLanguage:originalLanguage,modifiedLanguage:modifiedLanguage,originalModelPath:originalModelPath,modifiedModelPath:modifiedModelPath,theme:theme,loading:loading,options:options,height:height,width:width,className:className,wrapperClassName:wrapperClassName,beforeMount:beforeMount,onMount:onMount}){const[isEditorReady,setIsEditorReady]=React.useState(!1),[isMonacoMounting,setIsMonacoMounting]=React.useState(!0),editorRef=React.useRef(null),monacoRef=React.useRef(null),containerRef=React.useRef(null),onMountRef=React.useRef(onMount),beforeMountRef=React.useRef(beforeMount);useMount((()=>{const cancelable=loader__default.default.init();return cancelable.then((monaco=>(monacoRef.current=monaco)&&setIsMonacoMounting(!1))).catch((error=>"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization: error:",error))),()=>editorRef.current?disposeEditor():cancelable.cancel()})),useUpdate((()=>{editorRef.current.getModel().modified.setValue(modified)}),[modified],isEditorReady),useUpdate((()=>{editorRef.current.getModel().original.setValue(original)}),[original],isEditorReady),useUpdate((()=>{const{original:original,modified:modified}=editorRef.current.getModel();monacoRef.current.editor.setModelLanguage(original,originalLanguage||language),monacoRef.current.editor.setModelLanguage(modified,modifiedLanguage||language)}),[language,originalLanguage,modifiedLanguage],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setTheme(theme)}),[theme],isEditorReady),useUpdate((()=>{editorRef.current.updateOptions(options)}),[options],isEditorReady);const setModels=React.useCallback((()=>{beforeMountRef.current(monacoRef.current);const originalModel=monacoRef.current.editor.createModel(original,originalLanguage||language,originalModelPath&&monacoRef.current.Uri.parse(originalModelPath)),modifiedModel=monacoRef.current.editor.createModel(modified,modifiedLanguage||language,modifiedModelPath&&monacoRef.current.Uri.parse(modifiedModelPath));editorRef.current.setModel({original:originalModel,modified:modifiedModel})}),[language,modified,modifiedLanguage,original,originalLanguage,originalModelPath,modifiedModelPath]),createEditor=React.useCallback((()=>{editorRef.current=monacoRef.current.editor.createDiffEditor(containerRef.current,{automaticLayout:!0,...options}),setModels(),monacoRef.current.editor.setTheme(theme),setIsEditorReady(!0)}),[options,theme,setModels]);React.useEffect((()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)}),[isEditorReady]),React.useEffect((()=>{!isMonacoMounting&&!isEditorReady&&createEditor()}),[isMonacoMounting,isEditorReady,createEditor]);const disposeEditor=()=>{var _models$original,_models$modified;const models=editorRef.current.getModel();null===(_models$original=models.original)||void 0===_models$original||_models$original.dispose(),null===(_models$modified=models.modified)||void 0===_models$modified||_models$modified.dispose(),editorRef.current.dispose()};return React__default.default.createElement(MonacoContainer$1,{width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:containerRef,className:className,wrapperClassName:wrapperClassName})}DiffEditor.propTypes={original:PropTypes__default.default.string,modified:PropTypes__default.default.string,language:PropTypes__default.default.string,originalLanguage:PropTypes__default.default.string,modifiedLanguage:PropTypes__default.default.string,originalModelPath:PropTypes__default.default.string,modifiedModelPath:PropTypes__default.default.string,theme:PropTypes__default.default.string,loading:PropTypes__default.default.oneOfType([PropTypes__default.default.element,PropTypes__default.default.string]),options:PropTypes__default.default.object,width:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),height:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),className:PropTypes__default.default.string,wrapperClassName:PropTypes__default.default.string,beforeMount:PropTypes__default.default.func,onMount:PropTypes__default.default.func},DiffEditor.defaultProps={theme:"light",loading:"Loading...",options:{},width:"100%",height:"100%",beforeMount:noop,onMount:noop};var index=React.memo(DiffEditor);const[getModelMarkersSetter,setModelMarkersSetter]=state__default.default.create({backup:null}),viewStates=new Map;function Editor({defaultValue:defaultValue,defaultLanguage:defaultLanguage,defaultPath:defaultPath,value:value,language:language,path:path,theme:theme,line:line,loading:loading,options:options,overrideServices:overrideServices,saveViewState:saveViewState,width:width,height:height,className:className,wrapperClassName:wrapperClassName,beforeMount:beforeMount,onMount:onMount,onChange:onChange,onValidate:onValidate}){const[isEditorReady,setIsEditorReady]=React.useState(!1),[isMonacoMounting,setIsMonacoMounting]=React.useState(!0),monacoRef=React.useRef(null),editorRef=React.useRef(null),containerRef=React.useRef(null),onMountRef=React.useRef(onMount),beforeMountRef=React.useRef(beforeMount),subscriptionRef=React.useRef(null),valueRef=React.useRef(value),previousPath=function(value){const ref=React.useRef();return React.useEffect((()=>{ref.current=value}),[value]),ref.current}(path);useMount((()=>{const cancelable=loader__default.default.init();return cancelable.then((monaco=>(monacoRef.current=monaco)&&setIsMonacoMounting(!1))).catch((error=>"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization: error:",error))),()=>{return editorRef.current?(null===(_subscriptionRef$curr2=subscriptionRef.current)||void 0===_subscriptionRef$curr2||_subscriptionRef$curr2.dispose(),null===(_editorRef$current$ge=editorRef.current.getModel())||void 0===_editorRef$current$ge||_editorRef$current$ge.dispose(),void editorRef.current.dispose()):cancelable.cancel();var _subscriptionRef$curr2,_editorRef$current$ge}})),useUpdate((()=>{const model=getOrCreateModel(monacoRef.current,defaultValue||value,defaultLanguage||language,path);model!==editorRef.current.getModel()&&(saveViewState&&viewStates.set(previousPath,editorRef.current.saveViewState()),editorRef.current.setModel(model),saveViewState&&editorRef.current.restoreViewState(viewStates.get(path)))}),[path],isEditorReady),useUpdate((()=>{editorRef.current.updateOptions(options)}),[options],isEditorReady),useUpdate((()=>{editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)?editorRef.current.setValue(value):value!==editorRef.current.getValue()&&(editorRef.current.executeEdits("",[{range:editorRef.current.getModel().getFullModelRange(),text:value,forceMoveMarkers:!0}]),editorRef.current.pushUndoStop())}),[value],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(),language)}),[language],isEditorReady),useUpdate((()=>{editorRef.current.setScrollPosition({scrollTop:line})}),[line],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setTheme(theme)}),[theme],isEditorReady);const createEditor=React.useCallback((()=>{beforeMountRef.current(monacoRef.current);const defaultModel=getOrCreateModel(monacoRef.current,value||defaultValue,defaultLanguage||language,path||defaultPath);editorRef.current=monacoRef.current.editor.create(containerRef.current,{model:defaultModel,automaticLayout:!0,...options},overrideServices),monacoRef.current.editor.setTheme(theme),getModelMarkersSetter().backup||setModelMarkersSetter({backup:monacoRef.current.editor.setModelMarkers}),setIsEditorReady(!0)}),[defaultValue,defaultLanguage,defaultPath,value,language,path,options,overrideServices,theme]);return React.useEffect((()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)}),[isEditorReady]),React.useEffect((()=>{!isMonacoMounting&&!isEditorReady&&createEditor()}),[isMonacoMounting,isEditorReady,createEditor]),valueRef.current=value,React.useEffect((()=>{var _subscriptionRef$curr,_editorRef$current;isEditorReady&&onChange&&(null===(_subscriptionRef$curr=subscriptionRef.current)||void 0===_subscriptionRef$curr||_subscriptionRef$curr.dispose(),subscriptionRef.current=null===(_editorRef$current=editorRef.current)||void 0===_editorRef$current?void 0:_editorRef$current.onDidChangeModelContent((event=>{const editorValue=editorRef.current.getValue();valueRef.current!==editorValue&&onChange(editorValue,event)})))}),[isEditorReady,onChange]),React.useEffect((()=>{isEditorReady&&(monacoRef.current.editor.setModelMarkers=function(model,owner,markers){var _getModelMarkersSette;null===(_getModelMarkersSette=getModelMarkersSetter().backup)||void 0===_getModelMarkersSette||_getModelMarkersSette.call(monacoRef.current.editor,model,owner,markers),0!==markers.length&&(null==onValidate||onValidate(markers))})}),[isEditorReady,onValidate]),React__default.default.createElement(MonacoContainer$1,{width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:containerRef,className:className,wrapperClassName:wrapperClassName})}Editor.propTypes={defaultValue:PropTypes__default.default.string,defaultPath:PropTypes__default.default.string,defaultLanguage:PropTypes__default.default.string,value:PropTypes__default.default.string,language:PropTypes__default.default.string,path:PropTypes__default.default.string,theme:PropTypes__default.default.string,line:PropTypes__default.default.number,loading:PropTypes__default.default.oneOfType([PropTypes__default.default.element,PropTypes__default.default.string]),options:PropTypes__default.default.object,overrideServices:PropTypes__default.default.object,saveViewState:PropTypes__default.default.bool,width:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),height:PropTypes__default.default.oneOfType([PropTypes__default.default.number,PropTypes__default.default.string]),className:PropTypes__default.default.string,wrapperClassName:PropTypes__default.default.string,beforeMount:PropTypes__default.default.func,onMount:PropTypes__default.default.func,onChange:PropTypes__default.default.func,onValidate:PropTypes__default.default.func},Editor.defaultProps={theme:"light",loading:"Loading...",options:{},overrideServices:{},saveViewState:!0,width:"100%",height:"100%",beforeMount:noop,onMount:noop,onValidate:noop};var index$1=React.memo(Editor);Object.defineProperty(exports,"loader",{enumerable:!0,get:function(){return loader__default.default}}),exports.DiffEditor=index,exports.default=index$1,exports.useMonaco=function(){const[monaco,setMonaco]=React.useState(loader__default.default.__getMonacoInstance());return useMount((()=>{let cancelable;return monaco||(cancelable=loader__default.default.init(),cancelable.then((monaco=>{setMonaco(monaco)}))),()=>{var _cancelable;return null===(_cancelable=cancelable)||void 0===_cancelable?void 0:_cancelable.cancel()}})),monaco},Object.defineProperty(exports,"__esModule",{value:!0})}));

package.json

 {
   "name": "@monaco-editor/react",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins",
@@ -5,0 +5,0 @@ "author": "Suren Atoyan <[e-mail]>",

README.md

@@ -479,4 +479,12 @@ # @monaco-editor/react · [![monthly downloads](https://img.shields.io/npm/dm/@monaco-editor/react)](https://www.npmjs.com/package/@monaco-editor/react) [![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/suren-atoyan/monaco-react/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@monaco-editor/react.svg?style=flat)](https://www.npmjs.com/package/@monaco-editor/react) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/suren-atoyan/monaco-react/pulls)
 
-will give you more flexibility in working with a multi-model editor
+will give you more flexibility in working with a multi-model editor.
 
+**NOTE**
+
+`defaultValue`, `defaultLanguage`, and `defaultPath` are being considered **only** during a new model creation
+<br />
+`value`, `language`, and `path` are being tracked the **whole time**
+<br />
+`saveViewState` is an indicator whether to save the models' view states between model changes or not
+
 [codesandbox](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js)
@@ -483,0 +491,0 @@

No alert changes

Improved metrics

Total package byte prevSize

127486

increased by1.33%

Lines of code

1824

increased by0.72%

Number of lines in readme file

733

increased by1.1%

No dependency changes