@guolao/vue-monaco-editor - npm Package Compare versions

Comparing version 1.5.2 to 1.5.4

lib/cjs/index.js

@@ -187,10 +187,9 @@ 'use strict';
         }
-        const currentModel = editorRef.value.getModel();
-        const newModel = getOrCreateModel(
-          monacoRef.value,
-          newValue || props.defaultValue || "",
-          newLanguage || props.defaultLanguage || "",
-          newPath || props.defaultPath || ""
-        );
-        if (currentModel !== newModel) {
+        if (newPath !== oldPath) {
+          const newModel = getOrCreateModel(
+            monacoRef.value,
+            newValue || props.defaultValue || "",
+            newLanguage || props.defaultLanguage || "",
+            newPath || props.defaultPath || ""
+          );
           props.saveViewState && viewStates.set(oldPath, editorRef.value.saveViewState());
@@ -416,10 +415,9 @@ editorRef.value.setModel(newModel);
         const originalEditor = diffEditorRef.value.getOriginalEditor();
-        const currentOriginModel = originalEditor.getModel();
-        const newOriginModel = getOrCreateModel(
-          monacoRef.value,
-          newOriginal || "",
-          newOriginalLanguage || newLanguage || "text",
-          newOriginalModelPath || ""
-        );
-        if (currentOriginModel !== newOriginModel) {
+        if (newOriginalModelPath !== oldOriginalModelPath) {
+          const newOriginModel = getOrCreateModel(
+            monacoRef.value,
+            newOriginal || "",
+            newOriginalLanguage || newLanguage || "text",
+            newOriginalModelPath || ""
+          );
           originalEditor.setModel(newOriginModel);
@@ -446,10 +444,9 @@ return;
         const modifiedEditor = diffEditorRef.value.getModifiedEditor();
-        const currentModifiedModel = modifiedEditor.getModel();
-        const newModifiedModel = getOrCreateModel(
-          monacoRef.value,
-          newModified || "",
-          newModifiedLanguage || newLanguage || "text",
-          newModifiedModelPath || ""
-        );
-        if (currentModifiedModel !== newModifiedModel) {
+        if (oldModifiedModelPath !== newModifiedModelPath) {
+          const newModifiedModel = getOrCreateModel(
+            monacoRef.value,
+            newModified || "",
+            newModifiedLanguage || newLanguage || "text",
+            newModifiedModelPath || ""
+          );
           modifiedEditor.setModel(newModifiedModel);
@@ -456,0 +453,0 @@ return;

lib/es/index.js

@@ -184,10 +184,9 @@ import loader from '@monaco-editor/loader';
         }
-        const currentModel = editorRef.value.getModel();
-        const newModel = getOrCreateModel(
-          monacoRef.value,
-          newValue || props.defaultValue || "",
-          newLanguage || props.defaultLanguage || "",
-          newPath || props.defaultPath || ""
-        );
-        if (currentModel !== newModel) {
+        if (newPath !== oldPath) {
+          const newModel = getOrCreateModel(
+            monacoRef.value,
+            newValue || props.defaultValue || "",
+            newLanguage || props.defaultLanguage || "",
+            newPath || props.defaultPath || ""
+          );
           props.saveViewState && viewStates.set(oldPath, editorRef.value.saveViewState());
@@ -413,10 +412,9 @@ editorRef.value.setModel(newModel);
         const originalEditor = diffEditorRef.value.getOriginalEditor();
-        const currentOriginModel = originalEditor.getModel();
-        const newOriginModel = getOrCreateModel(
-          monacoRef.value,
-          newOriginal || "",
-          newOriginalLanguage || newLanguage || "text",
-          newOriginalModelPath || ""
-        );
-        if (currentOriginModel !== newOriginModel) {
+        if (newOriginalModelPath !== oldOriginalModelPath) {
+          const newOriginModel = getOrCreateModel(
+            monacoRef.value,
+            newOriginal || "",
+            newOriginalLanguage || newLanguage || "text",
+            newOriginalModelPath || ""
+          );
           originalEditor.setModel(newOriginModel);
@@ -443,10 +441,9 @@ return;
         const modifiedEditor = diffEditorRef.value.getModifiedEditor();
-        const currentModifiedModel = modifiedEditor.getModel();
-        const newModifiedModel = getOrCreateModel(
-          monacoRef.value,
-          newModified || "",
-          newModifiedLanguage || newLanguage || "text",
-          newModifiedModelPath || ""
-        );
-        if (currentModifiedModel !== newModifiedModel) {
+        if (oldModifiedModelPath !== newModifiedModelPath) {
+          const newModifiedModel = getOrCreateModel(
+            monacoRef.value,
+            newModified || "",
+            newModifiedLanguage || newLanguage || "text",
+            newModifiedModelPath || ""
+          );
           modifiedEditor.setModel(newModifiedModel);
@@ -453,0 +450,0 @@ return;

lib/umd/monaco-vue.js

@@ -186,10 +186,9 @@ (function (global, factory) {
           }
-          const currentModel = editorRef.value.getModel();
-          const newModel = getOrCreateModel(
-            monacoRef.value,
-            newValue || props.defaultValue || "",
-            newLanguage || props.defaultLanguage || "",
-            newPath || props.defaultPath || ""
-          );
-          if (currentModel !== newModel) {
+          if (newPath !== oldPath) {
+            const newModel = getOrCreateModel(
+              monacoRef.value,
+              newValue || props.defaultValue || "",
+              newLanguage || props.defaultLanguage || "",
+              newPath || props.defaultPath || ""
+            );
             props.saveViewState && viewStates.set(oldPath, editorRef.value.saveViewState());
@@ -415,10 +414,9 @@ editorRef.value.setModel(newModel);
           const originalEditor = diffEditorRef.value.getOriginalEditor();
-          const currentOriginModel = originalEditor.getModel();
-          const newOriginModel = getOrCreateModel(
-            monacoRef.value,
-            newOriginal || "",
-            newOriginalLanguage || newLanguage || "text",
-            newOriginalModelPath || ""
-          );
-          if (currentOriginModel !== newOriginModel) {
+          if (newOriginalModelPath !== oldOriginalModelPath) {
+            const newOriginModel = getOrCreateModel(
+              monacoRef.value,
+              newOriginal || "",
+              newOriginalLanguage || newLanguage || "text",
+              newOriginalModelPath || ""
+            );
             originalEditor.setModel(newOriginModel);
@@ -445,10 +443,9 @@ return;
           const modifiedEditor = diffEditorRef.value.getModifiedEditor();
-          const currentModifiedModel = modifiedEditor.getModel();
-          const newModifiedModel = getOrCreateModel(
-            monacoRef.value,
-            newModified || "",
-            newModifiedLanguage || newLanguage || "text",
-            newModifiedModelPath || ""
-          );
-          if (currentModifiedModel !== newModifiedModel) {
+          if (oldModifiedModelPath !== newModifiedModelPath) {
+            const newModifiedModel = getOrCreateModel(
+              monacoRef.value,
+              newModified || "",
+              newModifiedLanguage || newLanguage || "text",
+              newModifiedModelPath || ""
+            );
             modifiedEditor.setModel(newModifiedModel);
@@ -455,0 +452,0 @@ return;

lib/umd/monaco-vue.min.js

@@ -1,1 +0,1 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@monaco-editor/loader"),require("vue-demi")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","vue-demi"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_vue={},global.monaco_loader,global.VueDemi)}(this,(function(exports,loader,vueDemi){"use strict";var __defProp$2=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols$2=Object.getOwnPropertySymbols,__hasOwnProp$2=Object.prototype.hasOwnProperty,__propIsEnum$2=Object.prototype.propertyIsEnumerable,__defNormalProp$2=(obj,key,value)=>key in obj?__defProp$2(obj,key,{enumerable:!0,configurable:!0,writable:!0,value:value}):obj[key]=value,__spreadValues$2=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp$2.call(b,prop)&&__defNormalProp$2(a,prop,b[prop]);if(__getOwnPropSymbols$2)for(var prop of __getOwnPropSymbols$2(b))__propIsEnum$2.call(b,prop)&&__defNormalProp$2(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));const styles={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}};function useContainer(props,isEditorReady){return{wrapperStyle:vueDemi.computed((()=>{const{width:width,height:height}=props;return __spreadProps(__spreadValues$2({},styles.wrapper),{width:width,height:height})})),containerStyle:vueDemi.computed((()=>__spreadValues$2(__spreadValues$2({},styles.fullWidth),!isEditorReady.value&&styles.hide)))}}function useMonaco(){const monacoRef=vueDemi.shallowRef(loader.__getMonacoInstance()),isLoadFailed=vueDemi.ref(!1);let promise;vueDemi.onMounted((()=>{monacoRef.value||(promise=loader.init(),promise.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&(isLoadFailed.value=!0,console.error("Monaco initialization error:",error))})))}));return{monacoRef:monacoRef,unload:()=>null==promise?void 0:promise.cancel(),isLoadFailed:isLoadFailed}}function slotHelper(slot){return"function"==typeof slot?slot():slot}function isUndefined(v){return void 0===v}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):void 0)}(monaco,value,language,path)}function createModelUri(monaco,path){return monaco.Uri.parse(path)}var __defProp$1=Object.defineProperty,__getOwnPropSymbols$1=Object.getOwnPropertySymbols,__hasOwnProp$1=Object.prototype.hasOwnProperty,__propIsEnum$1=Object.prototype.propertyIsEnumerable,__defNormalProp$1=(obj,key,value)=>key in obj?__defProp$1(obj,key,{enumerable:!0,configurable:!0,writable:!0,value:value}):obj[key]=value,__spreadValues$1=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp$1.call(b,prop)&&__defNormalProp$1(a,prop,b[prop]);if(__getOwnPropSymbols$1)for(var prop of __getOwnPropSymbols$1(b))__propIsEnum$1.call(b,prop)&&__defNormalProp$1(a,prop,b[prop]);return a};const loadingStyle$1={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var VueMonacoEditor=vueDemi.defineComponent({name:"VueMonacoEditor",model:{prop:"value",event:"update:value"},props:{defaultValue:String,defaultPath:String,defaultLanguage:String,value:String,language:String,path:String,theme:{type:String,default:"vs"},line:Number,options:{type:Object,default:()=>({})},overrideServices:{type:Object,default:()=>({})},saveViewState:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},className:String},emits:["update:value","beforeMount","mount","change","validate"],setup(props,ctx){const viewStates=new Map,containerRef=vueDemi.shallowRef(null),{monacoRef:monacoRef,unload:unload,isLoadFailed:isLoadFailed}=useMonaco(),{editorRef:editorRef}=function({emit:emit},props,monacoRef,containerRef){const editorRef=vueDemi.shallowRef(null);function createEditor(){var _a;if(!containerRef.value||!monacoRef.value||editorRef.value)return;emit("beforeMount",monacoRef.value);const autoCreatedModelPath=props.path||props.defaultPath,defaultModel=getOrCreateModel(monacoRef.value,props.value||props.defaultValue||"",props.language||props.defaultLanguage||"",autoCreatedModelPath||"");editorRef.value=monacoRef.value.editor.create(containerRef.value,__spreadValues$1({model:defaultModel,theme:props.theme,automaticLayout:!0,autoIndent:"brackets",formatOnPaste:!0,formatOnType:!0},props.options),props.overrideServices),null==(_a=editorRef.value)||_a.onDidChangeModelContent((event=>{const value=editorRef.value.getValue();value!==props.value&&(emit("update:value",value),emit("change",value,event))})),editorRef.value&&!isUndefined(props.line)&&editorRef.value.revealLine(props.line),emit("mount",editorRef.value,monacoRef.value)}return vueDemi.onMounted((()=>{const stop=vueDemi.watch(monacoRef,(()=>{containerRef.value&&monacoRef.value&&(vueDemi.nextTick((()=>stop())),createEditor())}),{immediate:!0})})),{editorRef:editorRef}}(ctx,props,monacoRef,containerRef),{disposeValidator:disposeValidator}=function({emit:emit},props,monacoRef,editorRef){const disposeValidator=vueDemi.ref(null),stop=vueDemi.watch([monacoRef,editorRef],(()=>{if(monacoRef.value&&editorRef.value){vueDemi.nextTick((()=>stop()));const changeMarkersListener=monacoRef.value.editor.onDidChangeMarkers((uris=>{var _a,_b;const editorUri=null==(_b=null==(_a=editorRef.value)?void 0:_a.getModel())?void 0:_b.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){const markers=monacoRef.value.editor.getModelMarkers({resource:editorUri});emit("validate",markers)}}}));disposeValidator.value=()=>null==changeMarkersListener?void 0:changeMarkersListener.dispose()}}));return{disposeValidator:disposeValidator}}(ctx,0,monacoRef,editorRef),isEditorReady=vueDemi.computed((()=>!!monacoRef.value&&!!editorRef.value)),{wrapperStyle:wrapperStyle,containerStyle:containerStyle}=useContainer(props,isEditorReady);return vueDemi.onUnmounted((()=>{var _a,_b;null==(_a=disposeValidator.value)||_a.call(disposeValidator),editorRef.value?(null==(_b=editorRef.value.getModel())||_b.dispose(),editorRef.value.dispose()):unload()})),vueDemi.watch([()=>props.path,()=>props.value,()=>props.language,()=>props.line],(([newPath,newValue,newLanguage,newLine],[oldPath,oldValue,oldLanguage,oldLine])=>{if(!isEditorReady.value)return;const currentModel=editorRef.value.getModel(),newModel=getOrCreateModel(monacoRef.value,newValue||props.defaultValue||"",newLanguage||props.defaultLanguage||"",newPath||props.defaultPath||"");if(currentModel!==newModel)return props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(newModel),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)),void(isUndefined(newLine)||editorRef.value.revealLine(newLine));editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue),newLanguage!==oldLanguage&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),newLanguage),isUndefined(newLine)||newLine===oldLine||editorRef.value.revealLine(newLine)})),vueDemi.watch((()=>props.options),(options=>editorRef.value&&editorRef.value.updateOptions(options)),{deep:!0}),vueDemi.watch((()=>props.theme),(theme=>monacoRef.value&&monacoRef.value.editor.setTheme(theme))),{containerRef:containerRef,isEditorReady:isEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isEditorReady:isEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isEditorReady&&vueDemi.h("div",{style:loadingStyle$1},isLoadFailed?$slots.failure?slotHelper($slots.failure):"load failed":$slots.default?slotHelper($slots.default):"loading..."),vueDemi.h("div",{ref:"containerRef",key:"monaco_editor_container",style:containerStyle,class:className})])}});var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value:value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};const loadingStyle={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var VueMonacoDiffEditor=vueDemi.defineComponent({name:"VueMonacoDiffEditor",props:{original:String,modified:String,language:String,originalLanguage:String,modifiedLanguage:String,originalModelPath:String,modifiedModelPath:String,theme:{type:String,default:"vs"},options:{type:Object,default:()=>({})},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},className:String},setup(props,ctx){const containerRef=vueDemi.shallowRef(null),{monacoRef:monacoRef,unload:unload,isLoadFailed:isLoadFailed}=useMonaco(),{diffEditorRef:diffEditorRef}=function({emit:emit},props,monacoRef,containerRef){const diffEditorRef=vueDemi.shallowRef(null);function createDiffEditor(){var _a;if(!containerRef.value||!monacoRef.value||diffEditorRef.value)return;emit("beforeMount",monacoRef.value),diffEditorRef.value=monacoRef.value.editor.createDiffEditor(containerRef.value,__spreadValues({automaticLayout:!0,autoIndent:"brackets",theme:props.theme,formatOnPaste:!0,formatOnType:!0},props.options));const originalModel=getOrCreateModel(monacoRef.value,props.original||"",props.originalLanguage||props.language||"text",props.originalModelPath||""),modifiedModel=getOrCreateModel(monacoRef.value,props.modified||"",props.modifiedLanguage||props.language||"text",props.modifiedModelPath||"");null==(_a=diffEditorRef.value)||_a.setModel({original:originalModel,modified:modifiedModel}),emit("mount",diffEditorRef.value,monacoRef.value)}return vueDemi.onMounted((()=>{const stop=vueDemi.watch(monacoRef,(()=>{containerRef.value&&monacoRef.value&&(vueDemi.nextTick((()=>stop())),createDiffEditor())}),{immediate:!0})})),{diffEditorRef:diffEditorRef}}(ctx,props,monacoRef,containerRef),isDiffEditorReady=vueDemi.computed((()=>!!monacoRef.value&&!!diffEditorRef.value)),{wrapperStyle:wrapperStyle,containerStyle:containerStyle}=useContainer(props,isDiffEditorReady);return vueDemi.onUnmounted((()=>{var _a,_b,_c,_d,_e,_f,_g,_h;!monacoRef.value&&unload();const models=null==(_b=null==(_a=diffEditorRef.value)?void 0:_a.getModel)?void 0:_b.call(_a);null==(_d=null==(_c=null==models?void 0:models.original)?void 0:_c.dispose)||_d.call(_c),null==(_f=null==(_e=null==models?void 0:models.modified)?void 0:_e.dispose)||_f.call(_e),null==(_h=null==(_g=diffEditorRef.value)?void 0:_g.dispose)||_h.call(_g)})),vueDemi.watch([()=>props.originalModelPath,()=>props.original,()=>props.originalLanguage,()=>props.language],(([newOriginalModelPath,newOriginal,newOriginalLanguage,newLanguage],[oldOriginalModelPath,oldOriginal,oldOriginalLanguage,oldLanguage])=>{if(!isDiffEditorReady.value)return;const originalEditor=diffEditorRef.value.getOriginalEditor(),currentOriginModel=originalEditor.getModel(),newOriginModel=getOrCreateModel(monacoRef.value,newOriginal||"",newOriginalLanguage||newLanguage||"text",newOriginalModelPath||"");currentOriginModel===newOriginModel?(newOriginal!==originalEditor.getValue()&&originalEditor.setValue(newOriginal||""),newOriginalLanguage===oldOriginalLanguage&&newLanguage===oldLanguage||monacoRef.value.editor.setModelLanguage(diffEditorRef.value.getModel().original,newOriginalLanguage||newLanguage||"text")):originalEditor.setModel(newOriginModel)})),vueDemi.watch([()=>props.modifiedModelPath,()=>props.modified,()=>props.modifiedLanguage,()=>props.language],(([newModifiedModelPath,newModified,newModifiedLanguage,newLanguage],[oldModifiedModelPath,oldModified,oldModifiedLanguage,oldLanguage])=>{if(!isDiffEditorReady.value)return;const modifiedEditor=diffEditorRef.value.getModifiedEditor(),currentModifiedModel=modifiedEditor.getModel(),newModifiedModel=getOrCreateModel(monacoRef.value,newModified||"",newModifiedLanguage||newLanguage||"text",newModifiedModelPath||"");if(currentModifiedModel===newModifiedModel){if(newModified!==modifiedEditor.getValue()){const readOnlyCode=monacoRef.value.editor.EditorOption.readOnly;modifiedEditor.getOption(readOnlyCode)?modifiedEditor.setValue(newModified||""):(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:newModified||"",forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())}newModifiedLanguage===oldModifiedLanguage&&newLanguage===oldLanguage||monacoRef.value.editor.setModelLanguage(diffEditorRef.value.getModel().modified,newModifiedLanguage||newLanguage||"text")}else modifiedEditor.setModel(newModifiedModel)})),vueDemi.watch((()=>props.theme),(()=>{var _a;return null==(_a=monacoRef.value)?void 0:_a.editor.setTheme(props.theme)})),vueDemi.watch((()=>props.options),(()=>{var _a;return null==(_a=diffEditorRef.value)?void 0:_a.updateOptions(props.options)}),{deep:!0}),{containerRef:containerRef,isDiffEditorReady:isDiffEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isDiffEditorReady:isDiffEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isDiffEditorReady&&vueDemi.h("div",{style:loadingStyle},isLoadFailed?$slots.failure?slotHelper($slots.failure):"load failed":$slots.default?slotHelper($slots.default):"loading..."),vueDemi.h("div",{ref:"containerRef",key:"monaco_diff_editor_container",style:containerStyle,class:className})])}});exports.loader=loader,exports.DiffEditor=VueMonacoDiffEditor,exports.Editor=VueMonacoEditor,exports.VueMonacoDiffEditor=VueMonacoDiffEditor,exports.VueMonacoEditor=VueMonacoEditor,exports.default=VueMonacoEditor,exports.install=function(app,options){options&&loader.config(options),app.component(VueMonacoEditor.name,VueMonacoEditor),app.component(VueMonacoDiffEditor.name,VueMonacoDiffEditor)},exports.useMonaco=useMonaco,Object.defineProperty(exports,"__esModule",{value:!0})}));
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@monaco-editor/loader"),require("vue-demi")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","vue-demi"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_vue={},global.monaco_loader,global.VueDemi)}(this,(function(exports,loader,vueDemi){"use strict";var __defProp$2=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols$2=Object.getOwnPropertySymbols,__hasOwnProp$2=Object.prototype.hasOwnProperty,__propIsEnum$2=Object.prototype.propertyIsEnumerable,__defNormalProp$2=(obj,key,value)=>key in obj?__defProp$2(obj,key,{enumerable:!0,configurable:!0,writable:!0,value:value}):obj[key]=value,__spreadValues$2=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp$2.call(b,prop)&&__defNormalProp$2(a,prop,b[prop]);if(__getOwnPropSymbols$2)for(var prop of __getOwnPropSymbols$2(b))__propIsEnum$2.call(b,prop)&&__defNormalProp$2(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));const styles={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}};function useContainer(props,isEditorReady){return{wrapperStyle:vueDemi.computed((()=>{const{width:width,height:height}=props;return __spreadProps(__spreadValues$2({},styles.wrapper),{width:width,height:height})})),containerStyle:vueDemi.computed((()=>__spreadValues$2(__spreadValues$2({},styles.fullWidth),!isEditorReady.value&&styles.hide)))}}function useMonaco(){const monacoRef=vueDemi.shallowRef(loader.__getMonacoInstance()),isLoadFailed=vueDemi.ref(!1);let promise;vueDemi.onMounted((()=>{monacoRef.value||(promise=loader.init(),promise.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&(isLoadFailed.value=!0,console.error("Monaco initialization error:",error))})))}));return{monacoRef:monacoRef,unload:()=>null==promise?void 0:promise.cancel(),isLoadFailed:isLoadFailed}}function slotHelper(slot){return"function"==typeof slot?slot():slot}function isUndefined(v){return void 0===v}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):void 0)}(monaco,value,language,path)}function createModelUri(monaco,path){return monaco.Uri.parse(path)}var __defProp$1=Object.defineProperty,__getOwnPropSymbols$1=Object.getOwnPropertySymbols,__hasOwnProp$1=Object.prototype.hasOwnProperty,__propIsEnum$1=Object.prototype.propertyIsEnumerable,__defNormalProp$1=(obj,key,value)=>key in obj?__defProp$1(obj,key,{enumerable:!0,configurable:!0,writable:!0,value:value}):obj[key]=value,__spreadValues$1=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp$1.call(b,prop)&&__defNormalProp$1(a,prop,b[prop]);if(__getOwnPropSymbols$1)for(var prop of __getOwnPropSymbols$1(b))__propIsEnum$1.call(b,prop)&&__defNormalProp$1(a,prop,b[prop]);return a};const loadingStyle$1={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var VueMonacoEditor=vueDemi.defineComponent({name:"VueMonacoEditor",model:{prop:"value",event:"update:value"},props:{defaultValue:String,defaultPath:String,defaultLanguage:String,value:String,language:String,path:String,theme:{type:String,default:"vs"},line:Number,options:{type:Object,default:()=>({})},overrideServices:{type:Object,default:()=>({})},saveViewState:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},className:String},emits:["update:value","beforeMount","mount","change","validate"],setup(props,ctx){const viewStates=new Map,containerRef=vueDemi.shallowRef(null),{monacoRef:monacoRef,unload:unload,isLoadFailed:isLoadFailed}=useMonaco(),{editorRef:editorRef}=function({emit:emit},props,monacoRef,containerRef){const editorRef=vueDemi.shallowRef(null);function createEditor(){var _a;if(!containerRef.value||!monacoRef.value||editorRef.value)return;emit("beforeMount",monacoRef.value);const autoCreatedModelPath=props.path||props.defaultPath,defaultModel=getOrCreateModel(monacoRef.value,props.value||props.defaultValue||"",props.language||props.defaultLanguage||"",autoCreatedModelPath||"");editorRef.value=monacoRef.value.editor.create(containerRef.value,__spreadValues$1({model:defaultModel,theme:props.theme,automaticLayout:!0,autoIndent:"brackets",formatOnPaste:!0,formatOnType:!0},props.options),props.overrideServices),null==(_a=editorRef.value)||_a.onDidChangeModelContent((event=>{const value=editorRef.value.getValue();value!==props.value&&(emit("update:value",value),emit("change",value,event))})),editorRef.value&&!isUndefined(props.line)&&editorRef.value.revealLine(props.line),emit("mount",editorRef.value,monacoRef.value)}return vueDemi.onMounted((()=>{const stop=vueDemi.watch(monacoRef,(()=>{containerRef.value&&monacoRef.value&&(vueDemi.nextTick((()=>stop())),createEditor())}),{immediate:!0})})),{editorRef:editorRef}}(ctx,props,monacoRef,containerRef),{disposeValidator:disposeValidator}=function({emit:emit},props,monacoRef,editorRef){const disposeValidator=vueDemi.ref(null),stop=vueDemi.watch([monacoRef,editorRef],(()=>{if(monacoRef.value&&editorRef.value){vueDemi.nextTick((()=>stop()));const changeMarkersListener=monacoRef.value.editor.onDidChangeMarkers((uris=>{var _a,_b;const editorUri=null==(_b=null==(_a=editorRef.value)?void 0:_a.getModel())?void 0:_b.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){const markers=monacoRef.value.editor.getModelMarkers({resource:editorUri});emit("validate",markers)}}}));disposeValidator.value=()=>null==changeMarkersListener?void 0:changeMarkersListener.dispose()}}));return{disposeValidator:disposeValidator}}(ctx,0,monacoRef,editorRef),isEditorReady=vueDemi.computed((()=>!!monacoRef.value&&!!editorRef.value)),{wrapperStyle:wrapperStyle,containerStyle:containerStyle}=useContainer(props,isEditorReady);return vueDemi.onUnmounted((()=>{var _a,_b;null==(_a=disposeValidator.value)||_a.call(disposeValidator),editorRef.value?(null==(_b=editorRef.value.getModel())||_b.dispose(),editorRef.value.dispose()):unload()})),vueDemi.watch([()=>props.path,()=>props.value,()=>props.language,()=>props.line],(([newPath,newValue,newLanguage,newLine],[oldPath,oldValue,oldLanguage,oldLine])=>{if(isEditorReady.value){if(newPath!==oldPath){const newModel=getOrCreateModel(monacoRef.value,newValue||props.defaultValue||"",newLanguage||props.defaultLanguage||"",newPath||props.defaultPath||"");return props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(newModel),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)),void(isUndefined(newLine)||editorRef.value.revealLine(newLine))}editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue),newLanguage!==oldLanguage&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),newLanguage),isUndefined(newLine)||newLine===oldLine||editorRef.value.revealLine(newLine)}})),vueDemi.watch((()=>props.options),(options=>editorRef.value&&editorRef.value.updateOptions(options)),{deep:!0}),vueDemi.watch((()=>props.theme),(theme=>monacoRef.value&&monacoRef.value.editor.setTheme(theme))),{containerRef:containerRef,isEditorReady:isEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isEditorReady:isEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isEditorReady&&vueDemi.h("div",{style:loadingStyle$1},isLoadFailed?$slots.failure?slotHelper($slots.failure):"load failed":$slots.default?slotHelper($slots.default):"loading..."),vueDemi.h("div",{ref:"containerRef",key:"monaco_editor_container",style:containerStyle,class:className})])}});var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value:value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};const loadingStyle={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var VueMonacoDiffEditor=vueDemi.defineComponent({name:"VueMonacoDiffEditor",props:{original:String,modified:String,language:String,originalLanguage:String,modifiedLanguage:String,originalModelPath:String,modifiedModelPath:String,theme:{type:String,default:"vs"},options:{type:Object,default:()=>({})},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},className:String},setup(props,ctx){const containerRef=vueDemi.shallowRef(null),{monacoRef:monacoRef,unload:unload,isLoadFailed:isLoadFailed}=useMonaco(),{diffEditorRef:diffEditorRef}=function({emit:emit},props,monacoRef,containerRef){const diffEditorRef=vueDemi.shallowRef(null);function createDiffEditor(){var _a;if(!containerRef.value||!monacoRef.value||diffEditorRef.value)return;emit("beforeMount",monacoRef.value),diffEditorRef.value=monacoRef.value.editor.createDiffEditor(containerRef.value,__spreadValues({automaticLayout:!0,autoIndent:"brackets",theme:props.theme,formatOnPaste:!0,formatOnType:!0},props.options));const originalModel=getOrCreateModel(monacoRef.value,props.original||"",props.originalLanguage||props.language||"text",props.originalModelPath||""),modifiedModel=getOrCreateModel(monacoRef.value,props.modified||"",props.modifiedLanguage||props.language||"text",props.modifiedModelPath||"");null==(_a=diffEditorRef.value)||_a.setModel({original:originalModel,modified:modifiedModel}),emit("mount",diffEditorRef.value,monacoRef.value)}return vueDemi.onMounted((()=>{const stop=vueDemi.watch(monacoRef,(()=>{containerRef.value&&monacoRef.value&&(vueDemi.nextTick((()=>stop())),createDiffEditor())}),{immediate:!0})})),{diffEditorRef:diffEditorRef}}(ctx,props,monacoRef,containerRef),isDiffEditorReady=vueDemi.computed((()=>!!monacoRef.value&&!!diffEditorRef.value)),{wrapperStyle:wrapperStyle,containerStyle:containerStyle}=useContainer(props,isDiffEditorReady);return vueDemi.onUnmounted((()=>{var _a,_b,_c,_d,_e,_f,_g,_h;!monacoRef.value&&unload();const models=null==(_b=null==(_a=diffEditorRef.value)?void 0:_a.getModel)?void 0:_b.call(_a);null==(_d=null==(_c=null==models?void 0:models.original)?void 0:_c.dispose)||_d.call(_c),null==(_f=null==(_e=null==models?void 0:models.modified)?void 0:_e.dispose)||_f.call(_e),null==(_h=null==(_g=diffEditorRef.value)?void 0:_g.dispose)||_h.call(_g)})),vueDemi.watch([()=>props.originalModelPath,()=>props.original,()=>props.originalLanguage,()=>props.language],(([newOriginalModelPath,newOriginal,newOriginalLanguage,newLanguage],[oldOriginalModelPath,oldOriginal,oldOriginalLanguage,oldLanguage])=>{if(!isDiffEditorReady.value)return;const originalEditor=diffEditorRef.value.getOriginalEditor();if(newOriginalModelPath===oldOriginalModelPath)newOriginal!==originalEditor.getValue()&&originalEditor.setValue(newOriginal||""),newOriginalLanguage===oldOriginalLanguage&&newLanguage===oldLanguage||monacoRef.value.editor.setModelLanguage(diffEditorRef.value.getModel().original,newOriginalLanguage||newLanguage||"text");else{const newOriginModel=getOrCreateModel(monacoRef.value,newOriginal||"",newOriginalLanguage||newLanguage||"text",newOriginalModelPath||"");originalEditor.setModel(newOriginModel)}})),vueDemi.watch([()=>props.modifiedModelPath,()=>props.modified,()=>props.modifiedLanguage,()=>props.language],(([newModifiedModelPath,newModified,newModifiedLanguage,newLanguage],[oldModifiedModelPath,oldModified,oldModifiedLanguage,oldLanguage])=>{if(!isDiffEditorReady.value)return;const modifiedEditor=diffEditorRef.value.getModifiedEditor();if(oldModifiedModelPath===newModifiedModelPath){if(newModified!==modifiedEditor.getValue()){const readOnlyCode=monacoRef.value.editor.EditorOption.readOnly;modifiedEditor.getOption(readOnlyCode)?modifiedEditor.setValue(newModified||""):(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:newModified||"",forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())}newModifiedLanguage===oldModifiedLanguage&&newLanguage===oldLanguage||monacoRef.value.editor.setModelLanguage(diffEditorRef.value.getModel().modified,newModifiedLanguage||newLanguage||"text")}else{const newModifiedModel=getOrCreateModel(monacoRef.value,newModified||"",newModifiedLanguage||newLanguage||"text",newModifiedModelPath||"");modifiedEditor.setModel(newModifiedModel)}})),vueDemi.watch((()=>props.theme),(()=>{var _a;return null==(_a=monacoRef.value)?void 0:_a.editor.setTheme(props.theme)})),vueDemi.watch((()=>props.options),(()=>{var _a;return null==(_a=diffEditorRef.value)?void 0:_a.updateOptions(props.options)}),{deep:!0}),{containerRef:containerRef,isDiffEditorReady:isDiffEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isDiffEditorReady:isDiffEditorReady,isLoadFailed:isLoadFailed,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isDiffEditorReady&&vueDemi.h("div",{style:loadingStyle},isLoadFailed?$slots.failure?slotHelper($slots.failure):"load failed":$slots.default?slotHelper($slots.default):"loading..."),vueDemi.h("div",{ref:"containerRef",key:"monaco_diff_editor_container",style:containerStyle,class:className})])}});exports.loader=loader,exports.DiffEditor=VueMonacoDiffEditor,exports.Editor=VueMonacoEditor,exports.VueMonacoDiffEditor=VueMonacoDiffEditor,exports.VueMonacoEditor=VueMonacoEditor,exports.default=VueMonacoEditor,exports.install=function(app,options){options&&loader.config(options),app.component(VueMonacoEditor.name,VueMonacoEditor),app.component(VueMonacoDiffEditor.name,VueMonacoDiffEditor)},exports.useMonaco=useMonaco,Object.defineProperty(exports,"__esModule",{value:!0})}));

package.json

 {
   "name": "@guolao/vue-monaco-editor",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "Monaco Editor for Vue 2&3 - use the monaco-editor in any Vue application without needing to use webpack (or rollup/vite) configuration files / plugins",
@@ -75,3 +75,3 @@ "author": {
   },
-  "gitHead": "93ae553a29354eb6403ab96202b0519ddf1fefd2"
+  "gitHead": "6ee60213197ef95039cf1da1a27b0cc371c14ea5"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

95143

decreased by-0.56%

Lines of code

1989

decreased by-0.45%

No dependency changes