@monaco-editor/react - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

CHANGELOG.md

 ### Versions
 
+## 4.0.1
+###### *Jan 18, 2021*
+
+- Editor: dispose the current model if the Editor component is unmounted
+
 ## 4.0.0
@@ -4,0 +9,0 @@ ###### *Jan 16, 2021*

lib/cjs/Editor/Editor.js

@@ -151,5 +151,6 @@ 'use strict';
   function disposeEditor() {
-    var _subscriptionRef$curr2;
+    var _subscriptionRef$curr2, _editorRef$current$ge;
 
     (_subscriptionRef$curr2 = subscriptionRef.current) === null || _subscriptionRef$curr2 === void 0 ? void 0 : _subscriptionRef$curr2.dispose();
+    (_editorRef$current$ge = editorRef.current.getModel()) === null || _editorRef$current$ge === void 0 ? void 0 : _editorRef$current$ge.dispose();
     editorRef.current.dispose();
@@ -156,0 +157,0 @@ }

lib/es/Editor/Editor.js

@@ -140,5 +140,6 @@ import loader from '@monaco-editor/loader';
   function disposeEditor() {
-    var _subscriptionRef$curr2;
+    var _subscriptionRef$curr2, _editorRef$current$ge;
 
     (_subscriptionRef$curr2 = subscriptionRef.current) === null || _subscriptionRef$curr2 === void 0 ? void 0 : _subscriptionRef$curr2.dispose();
+    (_editorRef$current$ge = editorRef.current.getModel()) === null || _editorRef$current$ge === void 0 ? void 0 : _editorRef$current$ge.dispose();
     editorRef.current.dispose();
@@ -145,0 +146,0 @@ }

lib/umd/monaco-react.js

@@ -401,5 +401,6 @@ (function (global, factory) {
     function disposeEditor() {
-      var _subscriptionRef$curr2;
+      var _subscriptionRef$curr2, _editorRef$current$ge;
 
       (_subscriptionRef$curr2 = subscriptionRef.current) === null || _subscriptionRef$curr2 === void 0 ? void 0 : _subscriptionRef$curr2.dispose();
+      (_editorRef$current$ge = editorRef.current.getModel()) === null || _editorRef$current$ge === void 0 ? void 0 : _editorRef$current$ge.dispose();
       editorRef.current.dispose();
@@ -406,0 +407,0 @@ }

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,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});function Editor({defaultValue:defaultValue,value:value,language:language,defaultModelPath:defaultModelPath,theme:theme,line:line,loading:loading,options:options,overrideServices:overrideServices,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);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(),void editorRef.current.dispose()):cancelable.cancel();var _subscriptionRef$curr2}})),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,defaultValue||value,language,defaultModelPath);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)}),[language,options,overrideServices,theme,value,defaultValue,defaultModelPath]);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,value:PropTypes__default.default.string,language:PropTypes__default.default.string,defaultModelPath: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,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={defaultModelPath:"inmemory://model/1",theme:"light",loading:"Loading...",options:{},overrideServices:{},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,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});function Editor({defaultValue:defaultValue,value:value,language:language,defaultModelPath:defaultModelPath,theme:theme,line:line,loading:loading,options:options,overrideServices:overrideServices,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);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((()=>{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,defaultValue||value,language,defaultModelPath);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)}),[language,options,overrideServices,theme,value,defaultValue,defaultModelPath]);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,value:PropTypes__default.default.string,language:PropTypes__default.default.string,defaultModelPath: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,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={defaultModelPath:"inmemory://model/1",theme:"light",loading:"Loading...",options:{},overrideServices:{},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.0",
+  "version": "4.0.1",
   "description": "Monaco editor wrapper for easy/one-line integration with React applications (e.g. powered by create-react-app) without need of webpack configuration files",
@@ -5,0 +5,0 @@ "author": "Suren Atoyan <[e-mail]>",

playground/package.json

@@ -10,7 +10,10 @@ {
   "dependencies": {
-    "@monaco-editor/loader": "^1.0.0",
-    "@monaco-editor/react": "^3.8.3",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@monaco-editor/react": "3.6.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react-dom": "^17.0.0",
+    "state-local": "^1.0.7"
   },
@@ -17,0 +20,0 @@ "devDependencies": {

playground/src/App.jsx

@@ -1,32 +0,139 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
+import { TreeView, TreeItem } from '@material-ui/lab';
+import { makeStyles } from '@material-ui/core/styles';
 
-import Editor from '../../lib/es';
+import Fb from './Fb';
+import files from './files';
+import Editor, { useMonaco } from '../../lib/es';
+// import Editor from '@monaco-editor/react';
 
+const useStyles = makeStyles({
+  root: {
+    height: 240,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+  fullSize: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
 function App() {
-  const [flag, setFlag] = useState(true);
+  const classes = useStyles();
+  const [file, setFile] = useState(null);
+  const editorRef = useRef();
+  const monaco = useMonaco();
 
-  function handleEditorValidation1(markers) {
-    // model markers
-    markers.forEach(marker => console.log('onValidate 1:', marker.message));
+  function handleEditorDidMount(editor) {
+    editorRef.current = editor;
+    window.editor = editor;
+    editor.focus();
   }
 
-  function handleEditorValidation2(markers) {
-    // model markers
-    markers.forEach(marker => console.log('onValidate 2:', marker.message));
+  function handleFileOpen(_, fileName) {
+    const nextFile = getFile(files.children, fileName);
+    if (nextFile) setFile(nextFile);
   }
 
+  function handleValidation(markers) {
+    markers.forEach(marker => console.log('on validate', marker.message));
+  }
+
+  function getTree(children) {
+    return children.map(item => {
+      if (item.children) {
+        return <TreeItem
+          key={item.name}
+          nodeId={item.name}
+          label={item.name}
+         >
+          {getTree(item.children)}
+        </TreeItem>
+      } else {
+        return <TreeItem
+          key={item.name}
+          nodeId={item.name}
+          label={item.name}
+        />;
+      }
+    });
+  }
+
   return (
-    <>
-      <button onClick={() => setFlag(flag => !flag)}>test</button>
-      <Editor
-        key={Number(flag)}
-        height="90vh"
-        language="javascript"
-        defaultValue="// some comment"
-        onValidate={flag ? handleEditorValidation1 : handleEditorValidation2}
-      />
-    </>
+    <Fb className={classes.fullSize} mt={10} ml={10}>
+      <TreeView
+        className={classes.root}
+        defaultCollapseIcon={"🕛"}
+        defaultExpandIcon={"🕡"}
+        onNodeSelect={handleFileOpen}
+      >
+        {
+          files.children && getTree(files.children)
+        }
+      </TreeView>
+      {
+        file && (
+          // <Editor
+          //   height="100vh"
+          //   width="50%"
+          //   theme="vs-dark"
+          //   path={file.name}
+          //   language={file.language}
+          //   value={rTabs(file.value)}
+          //   editorDidMount={handleEditorDidMount}
+          // />
+          <Editor
+            height="100vh"
+            width="50%"
+            theme="vs-dark"
+            path={file.name}
+            key={file.name}
+            language={file.language}
+            value={rTabs(file.value)}
+            onMount={handleEditorDidMount}
+            onValidate={handleValidation}
+          />
+        )
+      }
+    </Fb>
   );
 }
 
+function getFile(files, fileName) {
+  let file;
+
+  function _getFile(files, fileName) {
+    files?.forEach(item => {
+      if (item.children) {
+        return _getFile(item.children, fileName);
+      } else {
+        if (item.name === fileName) {
+          file = item;
+        };
+      }
+    });
+  }
+
+  _getFile(files, fileName);
+
+  return file;
+}
+
+const rTabs = (str) => {
+  if (!str) return '';
+  const firstLine = str.split('\n')[1];
+  let tabsSize = 0;
+
+  if (firstLine) {
+    const lengthBefore = firstLine.length;
+    const trimedFirstLine = firstLine.trimLeft();
+    const lengthAfter = trimedFirstLine.length;
+
+    tabsSize = lengthBefore - lengthAfter;
+  }
+
+  return str.trim().replace(new RegExp(`^ {${tabsSize}}`, 'gm'), '');
+}
+
 export default App;

playground/src/main.jsx

@@ -8,6 +8,4 @@ import React from 'react';
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
   document.getElementById('root'),
 );

playground/vite.config.js

@@ -1,1 +0,5 @@
-export default {}
+export default {
+  optimizeDeps: {
+    include: ["@material-ui/core/styles", "@material-ui/icons/ExpandMoreIcon", "@material-ui/icons/ChevronRightIcon"]
+  }
+}

README.md

@@ -16,3 +16,3 @@ # @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)
 
-`Monaco` editor wrapper for easy/one-line integration with any `React` application without needing to use `webpack` (or any other module bundler) configuration files / plugins. It can be used with apps generated by `create-react-app`, `create-snowpack-app`, `vite`, `Next.js` or any other app gererators - **you don't need to eject or rewire them**. [You can use it even from CDN without budlers](https://codesandbox.io/s/cdn-example-hrzv2)
+`Monaco` editor wrapper for easy/one-line integration with any `React` application without needing to use `webpack` (or any other module bundler) configuration files / plugins. It can be used with apps generated by `create-react-app`, `create-snowpack-app`, `vite`, `Next.js` or any other app gererators - **you don't need to eject or rewire them**. [You can use it even from CDN without budlers](https://codesandbox.io/s/cdn-example-fnhfr?file=/index.html)
 
@@ -60,3 +60,3 @@ ## Motivation
 
-or you can use `CDN`. [Here is an example]((https://codesandbox.io/s/cdn-example-hrzv2))
+or you can use `CDN`. [Here is an example](https://codesandbox.io/s/cdn-example-fnhfr?file=/index.html)
 
@@ -412,3 +412,3 @@ **NOTE**: For `TypeScript` type definitions, this package uses the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package as a peer dependency. So, if you need types and don't already have the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package installed, you will need to do so
 
-Like usual `input` element, `monaco` editor also maintains its state. But, unlike usual `input` element, it's uncommon to circulate the whole state of the editor in your component. Usually you don't need it. If you specify the `value` property, the component behaves in `controlled` mode, otherwise - in `uncontrolled` mode. Usually `uncontrolled` mode is used to keep the nature of the `monaco` editor as much as it is possible. And based on our experience we can say that in most cases it will cover your needs. And we highly recommend using that one.
+Like usual `input` element, `monaco` editor also maintains its state. But, unlike `input` element, it's uncommon to circulate the whole state of the editor in your component. Usually you don't need it. If you specify the `value` property, the component behaves in `controlled` mode, otherwise - in `uncontrolled` mode. Generally `uncontrolled` mode is used to keep the nature of the `monaco` editor as much as it is possible. And based on our experience we can say that in most cases it will cover your needs. And we highly recommend using that one.
 
@@ -548,3 +548,3 @@ So, if you want to get the current value, you always can use the `editor` instance to do so - `editor.getValue()` or use `onChange` prop to get it. [Here](#get-value) are the examples. But in any case `controlled` mode is also available
     value: "function hello() {\n\talert('Hello world!');\n}",
-  language:  "javascript",
+    language:  "javascript",
   }
@@ -551,0 +551,0 @@

v4.changes.md

@@ -46,2 +46,3 @@ ## v4 changes
 old - `function(ev: any, value: string | undefined) => string | undefined`
+<br />
 new - `function(value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => void`

No alert changes

Improved metrics

Total package byte prevSize

177645

increased by48.87%

Number of package files

85

increased by80.85%

Lines of code

3402

increased by93.52%

No dependency changes