@monaco-editor/react - npm Package Compare versions

Comparing version 4.2.2 to 4.3.0

CHANGELOG.md

 ### Versions
 
+## 4.3.0
+###### *Oct 3, 2021*
+
+- Editor/DiffEditor: add `wrapperProps` property
+- DiffEditor: allow `DiffEditor` to use existing models
+- package.json: update `@monaco-editor/loader` version to `v1.2.0` (monaco version 0.28.1)
+
 ## 4.2.2
@@ -4,0 +11,0 @@ ###### *Aug 9, 2021*

lib/cjs/DiffEditor/DiffEditor.js

@@ -8,6 +8,6 @@ 'use strict';
 var PropTypes = require('prop-types');
-var index$2 = require('../MonacoContainer/index.js');
+var index$3 = require('../MonacoContainer/index.js');
 var index = require('../hooks/useMount/index.js');
 var index$1 = require('../hooks/useUpdate/index.js');
-var index$3 = require('../utils/index.js');
+var index$2 = require('../utils/index.js');
 
@@ -40,3 +40,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   className,
-  wrapperClassName,
+  wrapperProps,
 
@@ -94,4 +94,4 @@ /* === */
     beforeMountRef.current(monacoRef.current);
-    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));
+    const originalModel = index$2.getOrCreateModel(monacoRef.current, original, originalLanguage || language, originalModelPath);
+    const modifiedModel = index$2.getOrCreateModel(monacoRef.current, modified, modifiedLanguage || language, modifiedModelPath);
     editorRef.current.setModel({
@@ -138,3 +138,3 @@ original: originalModel,
 
-  return /*#__PURE__*/React__default['default'].createElement(index$2['default'], {
+  return /*#__PURE__*/React__default['default'].createElement(index$3['default'], {
     width: width,
@@ -146,3 +146,3 @@ height: height,
     className: className,
-    wrapperClassName: wrapperClassName
+    wrapperProps: wrapperProps
   });
@@ -171,3 +171,3 @@ }
   className: PropTypes__default['default'].string,
-  wrapperClassName: PropTypes__default['default'].string,
+  wrapperProps: PropTypes__default['default'].object,
 
@@ -188,8 +188,9 @@ /* === */
   height: '100%',
+  wrapperProps: {},
 
   /* === */
-  beforeMount: index$3.noop,
-  onMount: index$3.noop
+  beforeMount: index$2.noop,
+  onMount: index$2.noop
 };
 
 exports.default = DiffEditor;

lib/cjs/Editor/Editor.js

@@ -43,3 +43,3 @@ 'use strict';
   className,
-  wrapperClassName,
+  wrapperProps,
 
@@ -191,3 +191,3 @@ /* === */
     className: className,
-    wrapperClassName: wrapperClassName
+    wrapperProps: wrapperProps
   });
@@ -217,3 +217,3 @@ }
   className: PropTypes__default['default'].string,
-  wrapperClassName: PropTypes__default['default'].string,
+  wrapperProps: PropTypes__default['default'].object,
 
@@ -237,2 +237,3 @@ /* === */
   height: '100%',
+  wrapperProps: {},
 
@@ -239,0 +240,0 @@ /* === */

lib/cjs/MonacoContainer/MonacoContainer.js

@@ -7,2 +7,3 @@ 'use strict';
 var PropTypes = require('prop-types');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var Loading = require('../Loading/Loading.js');
@@ -25,11 +26,10 @@ var styles = require('./styles.js');
   className,
-  wrapperClassName
+  wrapperProps
 }) {
-  return /*#__PURE__*/React__default['default'].createElement("section", {
+  return /*#__PURE__*/React__default['default'].createElement("section", _rollupPluginBabelHelpers['extends']({
     style: { ...styles['default'].wrapper,
       width,
       height
-    },
-    className: wrapperClassName
-  }, !isEditorReady && /*#__PURE__*/React__default['default'].createElement(Loading['default'], {
+    }
+  }, wrapperProps), !isEditorReady && /*#__PURE__*/React__default['default'].createElement(Loading['default'], {
     content: loading
@@ -51,5 +51,5 @@ }), /*#__PURE__*/React__default['default'].createElement("div", {
   className: PropTypes__default['default'].string,
-  wrapperClassName: PropTypes__default['default'].string
+  wrapperProps: PropTypes__default['default'].object
 };
 
 exports.default = MonacoContainer;

lib/cjs/utils/index.js

@@ -12,10 +12,10 @@ 'use strict';
 function getModel(monaco, path) {
-  return monaco.editor.getModel(crateModelUri(monaco, path));
+  return monaco.editor.getModel(createModelUri(monaco, path));
 }
 
 function createModel(monaco, value, language, path) {
-  return monaco.editor.createModel(value, language, path && crateModelUri(monaco, path));
+  return monaco.editor.createModel(value, language, path && createModelUri(monaco, path));
 }
 
-function crateModelUri(monaco, path) {
+function createModelUri(monaco, path) {
   return monaco.Uri.parse(path);
@@ -22,0 +22,0 @@ }

lib/es/DiffEditor/DiffEditor.js

@@ -7,3 +7,3 @@ import loader from '@monaco-editor/loader';
 import useUpdate from '../hooks/useUpdate/index.js';
-import { noop } from '../utils/index.js';
+import { getOrCreateModel, noop } from '../utils/index.js';
 
@@ -30,3 +30,3 @@ function DiffEditor({
   className,
-  wrapperClassName,
+  wrapperProps,
 
@@ -84,4 +84,4 @@ /* === */
     beforeMountRef.current(monacoRef.current);
-    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));
+    const originalModel = getOrCreateModel(monacoRef.current, original, originalLanguage || language, originalModelPath);
+    const modifiedModel = getOrCreateModel(monacoRef.current, modified, modifiedLanguage || language, modifiedModelPath);
     editorRef.current.setModel({
@@ -135,3 +135,3 @@ original: originalModel,
     className: className,
-    wrapperClassName: wrapperClassName
+    wrapperProps: wrapperProps
   });
@@ -160,3 +160,3 @@ }
   className: PropTypes.string,
-  wrapperClassName: PropTypes.string,
+  wrapperProps: PropTypes.object,
 
@@ -177,2 +177,3 @@ /* === */
   height: '100%',
+  wrapperProps: {},
 
@@ -179,0 +180,0 @@ /* === */

lib/es/Editor/Editor.js

@@ -33,3 +33,3 @@ import loader from '@monaco-editor/loader';
   className,
-  wrapperClassName,
+  wrapperProps,
 
@@ -181,3 +181,3 @@ /* === */
     className: className,
-    wrapperClassName: wrapperClassName
+    wrapperProps: wrapperProps
   });
@@ -207,3 +207,3 @@ }
   className: PropTypes.string,
-  wrapperClassName: PropTypes.string,
+  wrapperProps: PropTypes.object,
 
@@ -227,2 +227,3 @@ /* === */
   height: '100%',
+  wrapperProps: {},
 
@@ -229,0 +230,0 @@ /* === */

lib/es/MonacoContainer/MonacoContainer.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import Loading from '../Loading/Loading.js';
@@ -15,11 +16,10 @@ import styles from './styles.js';
   className,
-  wrapperClassName
+  wrapperProps
 }) {
-  return /*#__PURE__*/React.createElement("section", {
+  return /*#__PURE__*/React.createElement("section", _extends({
     style: { ...styles.wrapper,
       width,
       height
-    },
-    className: wrapperClassName
-  }, !isEditorReady && /*#__PURE__*/React.createElement(Loading, {
+    }
+  }, wrapperProps), !isEditorReady && /*#__PURE__*/React.createElement(Loading, {
     content: loading
@@ -41,5 +41,5 @@ }), /*#__PURE__*/React.createElement("div", {
   className: PropTypes.string,
-  wrapperClassName: PropTypes.string
+  wrapperProps: PropTypes.object
 };
 
 export default MonacoContainer;

lib/es/utils/index.js

@@ -8,10 +8,10 @@ function noop() {}
 function getModel(monaco, path) {
-  return monaco.editor.getModel(crateModelUri(monaco, path));
+  return monaco.editor.getModel(createModelUri(monaco, path));
 }
 
 function createModel(monaco, value, language, path) {
-  return monaco.editor.createModel(value, language, path && crateModelUri(monaco, path));
+  return monaco.editor.createModel(value, language, path && createModelUri(monaco, path));
 }
 
-function crateModelUri(monaco, path) {
+function createModelUri(monaco, path) {
   return monaco.Uri.parse(path);
@@ -18,0 +18,0 @@ }

lib/umd/monaco-react.js

@@ -13,2 +13,20 @@ (function (global, factory) {
 
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
   const loadingStyles = {
@@ -53,11 +71,10 @@ display: 'flex',
     className,
-    wrapperClassName
+    wrapperProps
   }) {
-    return /*#__PURE__*/React__default['default'].createElement("section", {
+    return /*#__PURE__*/React__default['default'].createElement("section", _extends({
       style: { ...styles.wrapper,
         width,
         height
-      },
-      className: wrapperClassName
-    }, !isEditorReady && /*#__PURE__*/React__default['default'].createElement(Loading, {
+      }
+    }, wrapperProps), !isEditorReady && /*#__PURE__*/React__default['default'].createElement(Loading, {
       content: loading
@@ -79,3 +96,3 @@ }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: PropTypes__default['default'].string,
-    wrapperClassName: PropTypes__default['default'].string
+    wrapperProps: PropTypes__default['default'].object
   };
@@ -103,10 +120,10 @@
   function getModel(monaco, path) {
-    return monaco.editor.getModel(crateModelUri(monaco, path));
+    return monaco.editor.getModel(createModelUri(monaco, path));
   }
 
   function createModel(monaco, value, language, path) {
-    return monaco.editor.createModel(value, language, path && crateModelUri(monaco, path));
+    return monaco.editor.createModel(value, language, path && createModelUri(monaco, path));
   }
 
-  function crateModelUri(monaco, path) {
+  function createModelUri(monaco, path) {
     return monaco.Uri.parse(path);
@@ -139,3 +156,3 @@ }
     className,
-    wrapperClassName,
+    wrapperProps,
 
@@ -193,4 +210,4 @@ /* === */
       beforeMountRef.current(monacoRef.current);
-      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));
+      const originalModel = getOrCreateModel(monacoRef.current, original, originalLanguage || language, originalModelPath);
+      const modifiedModel = getOrCreateModel(monacoRef.current, modified, modifiedLanguage || language, modifiedModelPath);
       editorRef.current.setModel({
@@ -244,3 +261,3 @@ original: originalModel,
       className: className,
-      wrapperClassName: wrapperClassName
+      wrapperProps: wrapperProps
     });
@@ -269,3 +286,3 @@ }
     className: PropTypes__default['default'].string,
-    wrapperClassName: PropTypes__default['default'].string,
+    wrapperProps: PropTypes__default['default'].object,
 
@@ -286,2 +303,3 @@ /* === */
     height: '100%',
+    wrapperProps: {},
 
@@ -347,3 +365,3 @@ /* === */
     className,
-    wrapperClassName,
+    wrapperProps,
 
@@ -495,3 +513,3 @@ /* === */
       className: className,
-      wrapperClassName: wrapperClassName
+      wrapperProps: wrapperProps
     });
@@ -521,3 +539,3 @@ }
     className: PropTypes__default['default'].string,
-    wrapperClassName: PropTypes__default['default'].string,
+    wrapperProps: PropTypes__default['default'].object,
 
@@ -541,2 +559,3 @@ /* === */
     height: '100%',
+    wrapperProps: {},
 
@@ -543,0 +562,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")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","react","prop-types"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_react={},global.monaco_loader,global.React,global.PropTypes)}(this,(function(exports,loader,React,PropTypes){"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);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,keepCurrentOriginalModel:keepCurrentOriginalModel,keepCurrentModifiedModel:keepCurrentModifiedModel,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?function(){const models=editorRef.current.getModel();var _models$original,_models$modified;keepCurrentOriginalModel||null===(_models$original=models.original)||void 0===_models$original||_models$original.dispose();keepCurrentModifiedModel||null===(_models$modified=models.modified)||void 0===_models$modified||_models$modified.dispose();editorRef.current.dispose()}():cancelable.cancel()})),useUpdate((()=>{const modifiedEditor=editorRef.current.getModifiedEditor();modifiedEditor.getOption(monacoRef.current.editor.EditorOption.readOnly)?modifiedEditor.setValue(modified):modified!==modifiedEditor.getValue()&&(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:modified,forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())}),[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]);return React.useEffect((()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)}),[isEditorReady]),React.useEffect((()=>{!isMonacoMounting&&!isEditorReady&&createEditor()}),[isMonacoMounting,isEditorReady,createEditor]),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,keepCurrentOriginalModel:PropTypes__default.default.bool,keepCurrentModifiedModel:PropTypes__default.default.bool,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:{},keepCurrentOriginalModel:!1,keepCurrentModifiedModel:!1,width:"100%",height:"100%",beforeMount:noop,onMount:noop};var index=React.memo(DiffEditor);const 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,keepCurrentModel:keepCurrentModel,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))),()=>editorRef.current?function(){var _subscriptionRef$curr2,_editorRef$current$ge2;null===(_subscriptionRef$curr2=subscriptionRef.current)||void 0===_subscriptionRef$curr2||_subscriptionRef$curr2.dispose(),keepCurrentModel?saveViewState&&viewStates.set(path,editorRef.current.saveViewState()):null===(_editorRef$current$ge2=editorRef.current.getModel())||void 0===_editorRef$current$ge2||_editorRef$current$ge2.dispose();editorRef.current.dispose()}():cancelable.cancel()})),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((()=>{void 0!==line&&editorRef.current.revealLine(line)}),[line],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setTheme(theme)}),[theme],isEditorReady);const createEditor=React.useCallback((()=>{beforeMountRef.current(monacoRef.current);const autoCreatedModelPath=path||defaultPath,defaultModel=getOrCreateModel(monacoRef.current,value||defaultValue,defaultLanguage||language,autoCreatedModelPath);editorRef.current=monacoRef.current.editor.create(containerRef.current,{model:defaultModel,automaticLayout:!0,...options},overrideServices),saveViewState&&editorRef.current.restoreViewState(viewStates.get(autoCreatedModelPath)),monacoRef.current.editor.setTheme(theme),setIsEditorReady(!0)}),[defaultValue,defaultLanguage,defaultPath,value,language,path,options,overrideServices,saveViewState,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((()=>{if(isEditorReady){const changeMarkersListener=monacoRef.current.editor.onDidChangeMarkers((uris=>{var _editorRef$current$ge;const editorUri=null===(_editorRef$current$ge=editorRef.current.getModel())||void 0===_editorRef$current$ge?void 0:_editorRef$current$ge.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){const markers=monacoRef.current.editor.getModelMarkers({resource:editorUri});null==onValidate||onValidate(markers)}}}));return()=>{null==changeMarkersListener||changeMarkersListener.dispose()}}}),[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,keepCurrentModel: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,keepCurrentModel:!1,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")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","react","prop-types"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_react={},global.monaco_loader,global.React,global.PropTypes)}(this,(function(exports,loader,React,PropTypes){"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);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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,wrapperProps:wrapperProps}){return React__default.default.createElement("section",_extends({style:{...styles_wrapper,width:width,height:height}},wrapperProps),!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,wrapperProps:PropTypes__default.default.object};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(createModelUri(monaco,path))}(monaco,path)||function(monaco,value,language,path){return monaco.editor.createModel(value,language,path&&createModelUri(monaco,path))}(monaco,value,language,path)}function createModelUri(monaco,path){return monaco.Uri.parse(path)}function DiffEditor({original:original,modified:modified,language:language,originalLanguage:originalLanguage,modifiedLanguage:modifiedLanguage,originalModelPath:originalModelPath,modifiedModelPath:modifiedModelPath,keepCurrentOriginalModel:keepCurrentOriginalModel,keepCurrentModifiedModel:keepCurrentModifiedModel,theme:theme,loading:loading,options:options,height:height,width:width,className:className,wrapperProps:wrapperProps,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?function(){const models=editorRef.current.getModel();var _models$original,_models$modified;keepCurrentOriginalModel||null===(_models$original=models.original)||void 0===_models$original||_models$original.dispose();keepCurrentModifiedModel||null===(_models$modified=models.modified)||void 0===_models$modified||_models$modified.dispose();editorRef.current.dispose()}():cancelable.cancel()})),useUpdate((()=>{const modifiedEditor=editorRef.current.getModifiedEditor();modifiedEditor.getOption(monacoRef.current.editor.EditorOption.readOnly)?modifiedEditor.setValue(modified):modified!==modifiedEditor.getValue()&&(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:modified,forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())}),[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=getOrCreateModel(monacoRef.current,original,originalLanguage||language,originalModelPath),modifiedModel=getOrCreateModel(monacoRef.current,modified,modifiedLanguage||language,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]);return React.useEffect((()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)}),[isEditorReady]),React.useEffect((()=>{!isMonacoMounting&&!isEditorReady&&createEditor()}),[isMonacoMounting,isEditorReady,createEditor]),React__default.default.createElement(MonacoContainer$1,{width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:containerRef,className:className,wrapperProps:wrapperProps})}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,keepCurrentOriginalModel:PropTypes__default.default.bool,keepCurrentModifiedModel:PropTypes__default.default.bool,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,wrapperProps:PropTypes__default.default.object,beforeMount:PropTypes__default.default.func,onMount:PropTypes__default.default.func},DiffEditor.defaultProps={theme:"light",loading:"Loading...",options:{},keepCurrentOriginalModel:!1,keepCurrentModifiedModel:!1,width:"100%",height:"100%",wrapperProps:{},beforeMount:noop,onMount:noop};var index=React.memo(DiffEditor);const 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,keepCurrentModel:keepCurrentModel,width:width,height:height,className:className,wrapperProps:wrapperProps,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))),()=>editorRef.current?function(){var _subscriptionRef$curr2,_editorRef$current$ge2;null===(_subscriptionRef$curr2=subscriptionRef.current)||void 0===_subscriptionRef$curr2||_subscriptionRef$curr2.dispose(),keepCurrentModel?saveViewState&&viewStates.set(path,editorRef.current.saveViewState()):null===(_editorRef$current$ge2=editorRef.current.getModel())||void 0===_editorRef$current$ge2||_editorRef$current$ge2.dispose();editorRef.current.dispose()}():cancelable.cancel()})),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((()=>{void 0!==line&&editorRef.current.revealLine(line)}),[line],isEditorReady),useUpdate((()=>{monacoRef.current.editor.setTheme(theme)}),[theme],isEditorReady);const createEditor=React.useCallback((()=>{beforeMountRef.current(monacoRef.current);const autoCreatedModelPath=path||defaultPath,defaultModel=getOrCreateModel(monacoRef.current,value||defaultValue,defaultLanguage||language,autoCreatedModelPath);editorRef.current=monacoRef.current.editor.create(containerRef.current,{model:defaultModel,automaticLayout:!0,...options},overrideServices),saveViewState&&editorRef.current.restoreViewState(viewStates.get(autoCreatedModelPath)),monacoRef.current.editor.setTheme(theme),setIsEditorReady(!0)}),[defaultValue,defaultLanguage,defaultPath,value,language,path,options,overrideServices,saveViewState,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((()=>{if(isEditorReady){const changeMarkersListener=monacoRef.current.editor.onDidChangeMarkers((uris=>{var _editorRef$current$ge;const editorUri=null===(_editorRef$current$ge=editorRef.current.getModel())||void 0===_editorRef$current$ge?void 0:_editorRef$current$ge.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){const markers=monacoRef.current.editor.getModelMarkers({resource:editorUri});null==onValidate||onValidate(markers)}}}));return()=>{null==changeMarkersListener||changeMarkersListener.dispose()}}}),[isEditorReady,onValidate]),React__default.default.createElement(MonacoContainer$1,{width:width,height:height,isEditorReady:isEditorReady,loading:loading,_ref:containerRef,className:className,wrapperProps:wrapperProps})}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,keepCurrentModel: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,wrapperProps:PropTypes__default.default.object,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,keepCurrentModel:!1,width:"100%",height:"100%",wrapperProps:{},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.2.2",
+  "version": "4.3.0",
   "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",
@@ -88,5 +88,5 @@ "author": "Suren Atoyan <[e-mail]>",
   "dependencies": {
-    "@monaco-editor/loader": "^1.1.1",
+    "@monaco-editor/loader": "^1.2.0",
     "prop-types": "^15.7.2"
   }
 }

README.md

@@ -749,3 +749,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)
 | className | string || Class name for the editor container |
-| wrapperClassName | string || Class name for the editor container wrapper |
+| wrapperProps | object | {} | Props applied to the wrapper element |
 | beforeMount | func | noop | **Signature: function(monaco: Monaco) => void** <br/> An event is emitted before the editor is mounted. It gets the `monaco` instance as a first argument|
@@ -776,3 +776,3 @@ | onMount | func | noop | **Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void** <br/> An event is emitted when the editor is mounted. It gets the `editor` instance as a first argument and the `monaco` instance as a second|
 | className | string || Class name for the editor container |
-| wrapperClassName | string || Class name for the editor container wrapper |
+| wrapperProps | object | {} | Props applied to the wrapper element |
 | beforeMount | func | noop | **Signature: function(monaco: Monaco) => void** <br/> An event is emitted before the editor mounted. It gets the `monaco` instance as a first argument|
@@ -779,0 +779,0 @@ | onMount | func | noop | **Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void** <br/> An event is emitted when the editor is mounted. It gets the `editor` instance as a first argument and the `monaco` instance as a second|

No alert changes

Improved metrics

Total package byte prevSize

138300

increased by1.16%

Number of package files

45

increased by4.65%

Lines of code

2003

increased by2.61%

Dependency changes

• Updated@monaco-editor/loader@^1.2.0