@monaco-editor/react - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

CHANGELOG.md

 ### Versions
 
+## 4.0.2
+###### *Jan 18, 2021*
+
+- types: declare and export `useMonaco` type
+
 ## 4.0.1
@@ -4,0 +9,0 @@ ###### *Jan 18, 2021*

lib/cjs/Editor/Editor.js

@@ -8,7 +8,8 @@ 'use strict';
 var PropTypes = require('prop-types');
-var index$3 = require('../MonacoContainer/index.js');
-var index = require('../hooks/useMount/index.js');
-var index$1 = require('../hooks/useUpdate/index.js');
-var index$2 = require('../utils/index.js');
+var index$4 = require('../MonacoContainer/index.js');
+var index$1 = require('../hooks/useMount/index.js');
+var index$2 = require('../hooks/useUpdate/index.js');
+var index$3 = require('../utils/index.js');
 var state = require('state-local');
+var index = require('../hooks/usePrevious/index.js');
 
@@ -25,2 +26,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 });
+const viewStates = new Map();
 
@@ -31,5 +33,6 @@ function Editor({
   language,
+  defaultModelPath,
+  path,
 
   /* === */
-  defaultModelPath,
   theme,
@@ -62,3 +65,4 @@ line,
   const valueRef = React.useRef(value);
-  index['default'](() => {
+  const previousPath = index['default'](path);
+  index$1['default'](() => {
     const cancelable = loader__default['default'].init();
@@ -68,23 +72,36 @@ cancelable.then(monaco => (monacoRef.current = monaco) && setIsMonacoMounting(false)).catch(error => (error === null || error === void 0 ? void 0 : error.type) !== 'cancelation' && console.error('Monaco initialization: error:', error));
   });
-  index$1['default'](() => {
+  index$2['default'](() => {
+    const model = index$3.getOrCreateModel(monacoRef.current, defaultValue || value, language, path);
+
+    if (model !== editorRef.current.getModel()) {
+      viewStates.set(previousPath, editorRef.current.saveViewState());
+      editorRef.current.setModel(model);
+      editorRef.current.restoreViewState(viewStates.get(path));
+    }
+  }, [path], isEditorReady);
+  index$2['default'](() => {
     editorRef.current.updateOptions(options);
   }, [options], isEditorReady);
-  index$1['default'](() => {
-    if (editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)) {
-      editorRef.current.setValue(value);
-    } else {
-      if (value !== editorRef.current.getValue()) {
-        editorRef.current.executeEdits('', [{
-          range: editorRef.current.getModel().getFullModelRange(),
-          text: value,
-          forceMoveMarkers: true
-        }]);
-        editorRef.current.pushUndoStop();
+  index$2['default'](() => {
+    if (path === previousPath) {
+      if (editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)) {
+        editorRef.current.setValue(value);
+      } else {
+        if (value !== editorRef.current.getValue()) {
+          editorRef.current.executeEdits('', [{
+            range: editorRef.current.getModel().getFullModelRange(),
+            text: value,
+            forceMoveMarkers: true
+          }]);
+          editorRef.current.pushUndoStop();
+        }
       }
     }
   }, [value], isEditorReady);
-  index$1['default'](() => {
-    monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
+  index$2['default'](() => {
+    if (path === previousPath) {
+      monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
+    }
   }, [language], isEditorReady);
-  index$1['default'](() => {
+  index$2['default'](() => {
     editorRef.current.setScrollPosition({
@@ -94,3 +111,3 @@ scrollTop: line
   }, [line], isEditorReady);
-  index$1['default'](() => {
+  index$2['default'](() => {
     monacoRef.current.editor.setTheme(theme);
@@ -100,3 +117,3 @@ }, [theme], isEditorReady);
     beforeMountRef.current(monacoRef.current);
-    const defaultModel = index$2.getOrCreateModel(monacoRef.current, defaultValue || value, language, defaultModelPath);
+    const defaultModel = index$3.getOrCreateModel(monacoRef.current, defaultValue || value, language, path || defaultModelPath);
     editorRef.current = monacoRef.current.editor.create(containerRef.current, {
@@ -116,3 +133,3 @@ model: defaultModel,
     setIsEditorReady(true);
-  }, [language, options, overrideServices, theme, value, defaultValue, defaultModelPath]);
+  }, [language, options, overrideServices, theme, value, defaultValue, defaultModelPath, path]);
   React.useEffect(() => {
@@ -166,3 +183,3 @@ if (isEditorReady) {
 
-  return /*#__PURE__*/React__default['default'].createElement(index$3['default'], {
+  return /*#__PURE__*/React__default['default'].createElement(index$4['default'], {
     width: width,
@@ -215,7 +232,7 @@ height: height,
   /* === */
-  beforeMount: index$2.noop,
-  onMount: index$2.noop,
-  onValidate: index$2.noop
+  beforeMount: index$3.noop,
+  onMount: index$3.noop,
+  onValidate: index$3.noop
 };
 
 exports.default = Editor;

lib/es/Editor/Editor.js

@@ -9,2 +9,3 @@ import loader from '@monaco-editor/loader';
 import state from 'state-local';
+import usePrevious from '../hooks/usePrevious/index.js';
 
@@ -14,2 +15,3 @@ const [getModelMarkersSetter, setModelMarkersSetter] = state.create({
 });
+const viewStates = new Map();
 
@@ -20,5 +22,6 @@ function Editor({
   language,
+  defaultModelPath,
+  path,
 
   /* === */
-  defaultModelPath,
   theme,
@@ -51,2 +54,3 @@ line,
   const valueRef = useRef(value);
+  const previousPath = usePrevious(path);
   useMount(() => {
@@ -58,15 +62,26 @@ const cancelable = loader.init();
   useUpdate(() => {
+    const model = getOrCreateModel(monacoRef.current, defaultValue || value, language, path);
+
+    if (model !== editorRef.current.getModel()) {
+      viewStates.set(previousPath, editorRef.current.saveViewState());
+      editorRef.current.setModel(model);
+      editorRef.current.restoreViewState(viewStates.get(path));
+    }
+  }, [path], isEditorReady);
+  useUpdate(() => {
     editorRef.current.updateOptions(options);
   }, [options], isEditorReady);
   useUpdate(() => {
-    if (editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)) {
-      editorRef.current.setValue(value);
-    } else {
-      if (value !== editorRef.current.getValue()) {
-        editorRef.current.executeEdits('', [{
-          range: editorRef.current.getModel().getFullModelRange(),
-          text: value,
-          forceMoveMarkers: true
-        }]);
-        editorRef.current.pushUndoStop();
+    if (path === previousPath) {
+      if (editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)) {
+        editorRef.current.setValue(value);
+      } else {
+        if (value !== editorRef.current.getValue()) {
+          editorRef.current.executeEdits('', [{
+            range: editorRef.current.getModel().getFullModelRange(),
+            text: value,
+            forceMoveMarkers: true
+          }]);
+          editorRef.current.pushUndoStop();
+        }
       }
@@ -76,3 +91,5 @@ }
   useUpdate(() => {
-    monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
+    if (path === previousPath) {
+      monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
+    }
   }, [language], isEditorReady);
@@ -89,3 +106,3 @@ useUpdate(() => {
     beforeMountRef.current(monacoRef.current);
-    const defaultModel = getOrCreateModel(monacoRef.current, defaultValue || value, language, defaultModelPath);
+    const defaultModel = getOrCreateModel(monacoRef.current, defaultValue || value, language, path || defaultModelPath);
     editorRef.current = monacoRef.current.editor.create(containerRef.current, {
@@ -105,3 +122,3 @@ model: defaultModel,
     setIsEditorReady(true);
-  }, [language, options, overrideServices, theme, value, defaultValue, defaultModelPath]);
+  }, [language, options, overrideServices, theme, value, defaultValue, defaultModelPath, path]);
   useEffect(() => {
@@ -108,0 +125,0 @@ if (isEditorReady) {

lib/types.d.ts

@@ -255,2 +255,7 @@ // TODO: the whole content should be improved in the next version.
 
+// useMonaco
+declare const useMonaco: () => Monaco | null;
+
+export { useMonaco };
+
 // loader
@@ -257,0 +262,0 @@ declare namespace loader {

lib/umd/monaco-react.js

@@ -271,5 +271,14 @@ (function (global, factory) {
 
+  function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+      ref.current = value;
+    }, [value]);
+    return ref.current;
+  }
+
   const [getModelMarkersSetter, setModelMarkersSetter] = state__default['default'].create({
     backup: null
   });
+  const viewStates = new Map();
 
@@ -280,5 +289,6 @@ function Editor({
     language,
+    defaultModelPath,
+    path,
 
     /* === */
-    defaultModelPath,
     theme,
@@ -311,2 +321,3 @@ line,
     const valueRef = React.useRef(value);
+    const previousPath = usePrevious(path);
     useMount(() => {
@@ -318,15 +329,26 @@ const cancelable = loader__default['default'].init();
     useUpdate(() => {
+      const model = getOrCreateModel(monacoRef.current, defaultValue || value, language, path);
+
+      if (model !== editorRef.current.getModel()) {
+        viewStates.set(previousPath, editorRef.current.saveViewState());
+        editorRef.current.setModel(model);
+        editorRef.current.restoreViewState(viewStates.get(path));
+      }
+    }, [path], isEditorReady);
+    useUpdate(() => {
       editorRef.current.updateOptions(options);
     }, [options], isEditorReady);
     useUpdate(() => {
-      if (editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)) {
-        editorRef.current.setValue(value);
-      } else {
-        if (value !== editorRef.current.getValue()) {
-          editorRef.current.executeEdits('', [{
-            range: editorRef.current.getModel().getFullModelRange(),
-            text: value,
-            forceMoveMarkers: true
-          }]);
-          editorRef.current.pushUndoStop();
+      if (path === previousPath) {
+        if (editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)) {
+          editorRef.current.setValue(value);
+        } else {
+          if (value !== editorRef.current.getValue()) {
+            editorRef.current.executeEdits('', [{
+              range: editorRef.current.getModel().getFullModelRange(),
+              text: value,
+              forceMoveMarkers: true
+            }]);
+            editorRef.current.pushUndoStop();
+          }
         }
@@ -336,3 +358,5 @@ }
     useUpdate(() => {
-      monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
+      if (path === previousPath) {
+        monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
+      }
     }, [language], isEditorReady);
@@ -349,3 +373,3 @@ useUpdate(() => {
       beforeMountRef.current(monacoRef.current);
-      const defaultModel = getOrCreateModel(monacoRef.current, defaultValue || value, language, defaultModelPath);
+      const defaultModel = getOrCreateModel(monacoRef.current, defaultValue || value, language, path || defaultModelPath);
       editorRef.current = monacoRef.current.editor.create(containerRef.current, {
@@ -365,3 +389,3 @@ model: defaultModel,
       setIsEditorReady(true);
-    }, [language, options, overrideServices, theme, value, defaultValue, defaultModelPath]);
+    }, [language, options, overrideServices, theme, value, defaultValue, defaultModelPath, path]);
     React.useEffect(() => {
@@ -368,0 +392,0 @@ if (isEditorReady) {

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(),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})}));
+!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}),viewStates=new Map;function Editor({defaultValue:defaultValue,value:value,language:language,defaultModelPath:defaultModelPath,path:path,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),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,language,path);model!==editorRef.current.getModel()&&(viewStates.set(previousPath,editorRef.current.saveViewState()),editorRef.current.setModel(model),editorRef.current.restoreViewState(viewStates.get(path)))}),[path],isEditorReady),useUpdate((()=>{editorRef.current.updateOptions(options)}),[options],isEditorReady),useUpdate((()=>{path===previousPath&&(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((()=>{path===previousPath&&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,path||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,path]);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.1",
+  "version": "4.0.2",
   "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/src/App.jsx

@@ -22,80 +22,108 @@ import React, { useState, useRef } from 'react';
 
-function App() {
-  const classes = useStyles();
-  const [file, setFile] = useState(null);
-  const editorRef = useRef();
-  const monaco = useMonaco();
+// function App() {
+//   const classes = useStyles();
+//   const [file, setFile] = useState(null);
+//   const editorRef = useRef();
+//   const monaco = useMonaco();
 
-  function handleEditorDidMount(editor) {
-    editorRef.current = editor;
-    window.editor = editor;
-    editor.focus();
-  }
+//   function handleEditorDidMount(editor) {
+//     editorRef.current = editor;
+//     window.editor = editor;
+//     editor.focus();
+//   }
 
-  function handleFileOpen(_, fileName) {
-    const nextFile = getFile(files.children, fileName);
-    if (nextFile) setFile(nextFile);
-  }
+//   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 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 (
+//     <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}
+//             language={file.language}
+//             value={rTabs(file.value)}
+//             onMount={handleEditorDidMount}
+//             onValidate={handleValidation}
+//           />
+//         )
+//       }
+//     </Fb>
+//   );
+// }
+
+function App() {
+  const [language, setLanguage] = useState('javascript');
+  const [value, setValue] = useState('');
+
+  function toggleLanguage() {
+    setLanguage(language => language === 'javascript' ? 'python' : 'javascript');
   }
 
-  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}
-        />;
-      }
-    });
+  function handleEditorChange(value) {
+    if (value.includes('eval')) {
+      setValue('no no no');
+    } else {
+      setValue(value);
+    }
   }
 
   return (
-    <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>
+    <React.Fragment>
+      <button onClick={toggleLanguage}>language</button>
+      <Editor
+        language={language}
+        value={value}
+        height="100vh"
+        onChange={handleEditorChange}
+      />
+    </React.Fragment>
   );
@@ -102,0 +130,0 @@ }

No alert changes

Worsened metrics

Total package byte prevSize

140389

decreased by-20.97%

Number of package files

53

decreased by-37.65%

Lines of code

2397

decreased by-29.54%

No dependency changes