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

Comparing version 1.4.0 to 1.4.1

lib/cjs/index.js

@@ -308,2 +308,5 @@ 'use strict';
     });
+    if (editorRef.value && !isUndefined(props.line)) {
+      editorRef.value.revealLine(props.line);
+    }
     emit("mount", editorRef.value, monacoRef.value);
@@ -310,0 +313,0 @@ }

lib/es/index.js

@@ -305,2 +305,5 @@ import loader from '@monaco-editor/loader';
     });
+    if (editorRef.value && !isUndefined(props.line)) {
+      editorRef.value.revealLine(props.line);
+    }
     emit("mount", editorRef.value, monacoRef.value);
@@ -307,0 +310,0 @@ }

lib/umd/monaco-vue.js

@@ -307,2 +307,5 @@ (function (global, factory) {
       });
+      if (editorRef.value && !isUndefined(props.line)) {
+        editorRef.value.revealLine(props.line);
+      }
       emit("mount", editorRef.value, monacoRef.value);
@@ -309,0 +312,0 @@ }

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());let promise;vueDemi.onMounted((()=>{monacoRef.value||(promise=loader.init(),promise.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization error:",error)})))}));return{monacoRef:monacoRef,unload:()=>null==promise?void 0:promise.cancel()}}function defaultSlotHelper(defaultSlots){return"function"==typeof defaultSlots?defaultSlots():defaultSlots}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}=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))})),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),((newPath,oldPath)=>{const model=getOrCreateModel(monacoRef.value,props.value||props.defaultValue||"",props.language||props.defaultLanguage||"",newPath||props.defaultPath||"");model!==editorRef.value.getModel()&&(props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(model),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)))})),vueDemi.watch((()=>props.value),(newValue=>{editorRef.value&&editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue)})),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))),vueDemi.watch((()=>props.language),(language=>isEditorReady.value&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),language))),vueDemi.watch((()=>props.line),(line=>{editorRef.value&&void 0!==line&&editorRef.value.revealLine(line)})),{containerRef:containerRef,isEditorReady:isEditorReady,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isEditorReady:isEditorReady,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isEditorReady&&vueDemi.h("div",{style:loadingStyle$1},$slots.default?defaultSlotHelper($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}=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),(()=>{if(!monacoRef.value||!diffEditorRef.value)return;const originalEditor=diffEditorRef.value.getOriginalEditor(),model=getOrCreateModel(monacoRef.value,props.original||"",props.originalLanguage||props.language||"text",props.originalModelPath||"");model!==originalEditor.getModel()&&originalEditor.setModel(model)})),vueDemi.watch((()=>props.modifiedModelPath),(()=>{if(!monacoRef.value||!diffEditorRef.value)return;const modifiedEditor=diffEditorRef.value.getModifiedEditor(),model=getOrCreateModel(monacoRef.value,props.modified||"",props.modifiedLanguage||props.language||"text",props.modifiedModelPath||"");model!==modifiedEditor.getModel()&&modifiedEditor.setModel(model)})),vueDemi.watch((()=>props.modified),(()=>{if(!isDiffEditorReady.value)return;const modifiedEditor=diffEditorRef.value.getModifiedEditor();modifiedEditor.getOption(monacoRef.value.editor.EditorOption.readOnly)?modifiedEditor.setValue(props.modified||""):props.modified!==modifiedEditor.getValue()&&(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:props.modified||"",forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())})),vueDemi.watch((()=>props.original),(()=>{var _a,_b;null==(_b=null==(_a=diffEditorRef.value)?void 0:_a.getModel())||_b.original.setValue((null==props?void 0:props.original)||"")})),vueDemi.watch((()=>[props.language,props.originalLanguage,props.modifiedLanguage]),(()=>{if(!isDiffEditorReady.value)return;const{original:original,modified:modified}=diffEditorRef.value.getModel();monacoRef.value.editor.setModelLanguage(original,props.originalLanguage||props.language||"text"),monacoRef.value.editor.setModelLanguage(modified,props.originalLanguage||props.language||"text")})),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,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isDiffEditorReady:isDiffEditorReady,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isDiffEditorReady&&vueDemi.h("div",{style:loadingStyle},$slots.default?defaultSlotHelper($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());let promise;vueDemi.onMounted((()=>{monacoRef.value||(promise=loader.init(),promise.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization error:",error)})))}));return{monacoRef:monacoRef,unload:()=>null==promise?void 0:promise.cancel()}}function defaultSlotHelper(defaultSlots){return"function"==typeof defaultSlots?defaultSlots():defaultSlots}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}=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),((newPath,oldPath)=>{const model=getOrCreateModel(monacoRef.value,props.value||props.defaultValue||"",props.language||props.defaultLanguage||"",newPath||props.defaultPath||"");model!==editorRef.value.getModel()&&(props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(model),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)))})),vueDemi.watch((()=>props.value),(newValue=>{editorRef.value&&editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue)})),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))),vueDemi.watch((()=>props.language),(language=>isEditorReady.value&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),language))),vueDemi.watch((()=>props.line),(line=>{editorRef.value&&!isUndefined(line)&&editorRef.value.revealLine(line)})),{containerRef:containerRef,isEditorReady:isEditorReady,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isEditorReady:isEditorReady,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isEditorReady&&vueDemi.h("div",{style:loadingStyle$1},$slots.default?defaultSlotHelper($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}=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),(()=>{if(!monacoRef.value||!diffEditorRef.value)return;const originalEditor=diffEditorRef.value.getOriginalEditor(),model=getOrCreateModel(monacoRef.value,props.original||"",props.originalLanguage||props.language||"text",props.originalModelPath||"");model!==originalEditor.getModel()&&originalEditor.setModel(model)})),vueDemi.watch((()=>props.modifiedModelPath),(()=>{if(!monacoRef.value||!diffEditorRef.value)return;const modifiedEditor=diffEditorRef.value.getModifiedEditor(),model=getOrCreateModel(monacoRef.value,props.modified||"",props.modifiedLanguage||props.language||"text",props.modifiedModelPath||"");model!==modifiedEditor.getModel()&&modifiedEditor.setModel(model)})),vueDemi.watch((()=>props.modified),(()=>{if(!isDiffEditorReady.value)return;const modifiedEditor=diffEditorRef.value.getModifiedEditor();modifiedEditor.getOption(monacoRef.value.editor.EditorOption.readOnly)?modifiedEditor.setValue(props.modified||""):props.modified!==modifiedEditor.getValue()&&(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:props.modified||"",forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())})),vueDemi.watch((()=>props.original),(()=>{var _a,_b;null==(_b=null==(_a=diffEditorRef.value)?void 0:_a.getModel())||_b.original.setValue((null==props?void 0:props.original)||"")})),vueDemi.watch((()=>[props.language,props.originalLanguage,props.modifiedLanguage]),(()=>{if(!isDiffEditorReady.value)return;const{original:original,modified:modified}=diffEditorRef.value.getModel();monacoRef.value.editor.setModelLanguage(original,props.originalLanguage||props.language||"text"),monacoRef.value.editor.setModelLanguage(modified,props.originalLanguage||props.language||"text")})),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,wrapperStyle:wrapperStyle,containerStyle:containerStyle}},render(){const{$slots:$slots,isDiffEditorReady:isDiffEditorReady,wrapperStyle:wrapperStyle,containerStyle:containerStyle,className:className}=this;return vueDemi.h("div",{style:wrapperStyle},[!isDiffEditorReady&&vueDemi.h("div",{style:loadingStyle},$slots.default?defaultSlotHelper($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.4.0",
+  "version": "1.4.1",
   "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": "afe8c9969f5b5dec7dd8a0be121280c62fc34e9a"
+  "gitHead": "37aca64a5cce3480960cfd0b8b7fe75e03c9f47a"
 }

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

Improved metrics

Total package byte prevSize

91733

increased by0.5%

Lines of code

2004

increased by0.45%

No dependency changes