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

Comparing version 0.0.1-alpha.2 to 0.0.1

lib/cjs/components/editor/Editor.js

@@ -107,3 +107,3 @@ 'use strict';
 
-    (_props$onBeforeMount = props.onBeforeMount) === null || _props$onBeforeMount === void 0 ? void 0 : _props$onBeforeMount.call(props);
+    (_props$onBeforeMount = props.onBeforeMount) === null || _props$onBeforeMount === void 0 ? void 0 : _props$onBeforeMount.call(props, monacoRef.value);
     const autoCreatedModelPath = props.path || props.defaultPath;
@@ -110,0 +110,0 @@ const defaultModel = index.getOrCreateModel(monacoRef.value, props.value || props.defaultValue, props.language || props.defaultLanguage, autoCreatedModelPath);

lib/es/components/editor/Editor.js

@@ -103,3 +103,3 @@ import { defineComponent, shallowRef, computed, onUnmounted, watch, createVNode, onMounted, watchEffect, nextTick, ref } from 'vue';
 
-    (_props$onBeforeMount = props.onBeforeMount) === null || _props$onBeforeMount === void 0 ? void 0 : _props$onBeforeMount.call(props);
+    (_props$onBeforeMount = props.onBeforeMount) === null || _props$onBeforeMount === void 0 ? void 0 : _props$onBeforeMount.call(props, monacoRef.value);
     const autoCreatedModelPath = props.path || props.defaultPath;
@@ -106,0 +106,0 @@ const defaultModel = getOrCreateModel(monacoRef.value, props.value || props.defaultValue, props.language || props.defaultLanguage, autoCreatedModelPath);

lib/index.d.ts

@@ -43,6 +43,6 @@ export { default as loader } from '@monaco-editor/loader';
     className: StringConstructor;
-    'onUpdate:value': PropType<(value: string) => void>;
-    onBeforeMount: PropType<() => void>;
+    'onUpdate:value': PropType<(value: string | undefined) => void>;
+    onBeforeMount: PropType<(monaco: MonacoEditor) => void>;
     onMount: PropType<(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: MonacoEditor) => void>;
-    onChange: PropType<(value: string, event: monacoEditor.editor.IModelContentChangedEvent) => void>;
+    onChange: PropType<(value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent) => void>;
     onValidate: PropType<(markers: monacoEditor.editor.IMarker[]) => void>;
@@ -85,6 +85,6 @@ };
     className: StringConstructor;
-    'onUpdate:value': vue.PropType<(value: string) => void>;
-    onBeforeMount: vue.PropType<() => void>;
+    'onUpdate:value': vue.PropType<(value: string | undefined) => void>;
+    onBeforeMount: vue.PropType<(monaco: typeof monacoEditor) => void>;
     onMount: vue.PropType<(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor) => void>;
-    onChange: vue.PropType<(value: string, event: monacoEditor.editor.IModelContentChangedEvent) => void>;
+    onChange: vue.PropType<(value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent) => void>;
     onValidate: vue.PropType<(markers: monacoEditor.editor.IMarker[]) => void>;
@@ -124,6 +124,6 @@ }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     className: StringConstructor;
-    'onUpdate:value': vue.PropType<(value: string) => void>;
-    onBeforeMount: vue.PropType<() => void>;
+    'onUpdate:value': vue.PropType<(value: string | undefined) => void>;
+    onBeforeMount: vue.PropType<(monaco: typeof monacoEditor) => void>;
     onMount: vue.PropType<(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor) => void>;
-    onChange: vue.PropType<(value: string, event: monacoEditor.editor.IModelContentChangedEvent) => void>;
+    onChange: vue.PropType<(value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent) => void>;
     onValidate: vue.PropType<(markers: monacoEditor.editor.IMarker[]) => void>;
@@ -130,0 +130,0 @@ }>>, {

lib/umd/monaco-vue.js

@@ -284,3 +284,3 @@ (function (global, factory) {
 
-      (_props$onBeforeMount = props.onBeforeMount) === null || _props$onBeforeMount === void 0 ? void 0 : _props$onBeforeMount.call(props);
+      (_props$onBeforeMount = props.onBeforeMount) === null || _props$onBeforeMount === void 0 ? void 0 : _props$onBeforeMount.call(props, monacoRef.value);
       const autoCreatedModelPath = props.path || props.defaultPath;
@@ -287,0 +287,0 @@ const defaultModel = getOrCreateModel(monacoRef.value, props.value || props.defaultValue, props.language || props.defaultLanguage, autoCreatedModelPath);

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")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","vue"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_vue={},global.monaco_loader,global.Vue)}(this,(function(exports,loader,vue){"use strict";function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var loader__default=_interopDefaultLegacy(loader);function useMonaco(){const monacoRef=vue.shallowRef(null),monacoLoader=loader__default.default.init();return monacoLoader.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization error:",error)})),{monacoRef:monacoRef,unload:()=>monacoLoader.cancel()}}const editorProps={defaultValue:String,defaultPath:String,defaultLanguage:String,value:String,language:String,path:String,theme:{type:String,default:"light"},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,"onUpdate:value":Function,onBeforeMount:Function,onMount:Function,onChange:Function,onValidate:Function};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)}const monacoContainerProps={width:{type:[Number,String],required:!0},height:{type:[Number,String],required:!0},isEditorReady:{type:Boolean,required:!0},className:String,setContainerRef:Function},styles_wrapper={display:"flex",position:"relative",textAlign:"initial"},styles_fullWidth={width:"100%"},styles_hide={display:"none"},loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var Loading=vue.defineComponent(((props,_ref)=>{let{slots:slots}=_ref;return()=>{var _slots$default;return vue.createVNode("div",{style:vue.normalizeStyle(loadingStyles)},[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)])}})),MonacoContainer=vue.defineComponent({props:monacoContainerProps,setup(props,_ref){let{slots:slots}=_ref;const wrapperStyle=vue.computed((()=>{const{width:width,height:height}=props;return vue.normalizeStyle({...styles_wrapper,width:width,height:height})})),containerStyle=vue.computed((()=>vue.normalizeStyle({...styles_fullWidth,...!props.isEditorReady&&styles_hide})));return()=>{var _slots$default;return vue.createVNode("div",{style:wrapperStyle.value},[!props.isEditorReady&&vue.createVNode(Loading,null,{default:()=>[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)]}),vue.createVNode("div",{ref:props.setContainerRef,style:containerStyle.value,class:props.className},null)])}}}),Editor=vue.defineComponent({props:editorProps,setup(props,_ref){let{slots:slots}=_ref;const viewStates=new Map,containerRef=vue.shallowRef(null),setContainerRef=el=>containerRef.value=el,{monacoRef:monacoRef,unload:unload}=useMonaco(),{editorRef:editorRef}=function(props,monacoRef,containerRef){const editorRef=vue.shallowRef(null);function createEditor(){var _props$onBeforeMount,_editorRef$value2,_props$onMount;if(!containerRef.value||!monacoRef.value)return;null===(_props$onBeforeMount=props.onBeforeMount)||void 0===_props$onBeforeMount||_props$onBeforeMount.call(props);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,{model:defaultModel,theme:props.theme,automaticLayout:!0,autoIndent:"brackets",formatOnPaste:!0,formatOnType:!0,...props.options},props.overrideServices),null===(_editorRef$value2=editorRef.value)||void 0===_editorRef$value2||_editorRef$value2.onDidChangeModelContent((event=>{const value=editorRef.value.getValue();var _props$onUpdateValue,_props$onChange;value!==props.value&&(null===(_props$onUpdateValue=props["onUpdate:value"])||void 0===_props$onUpdateValue||_props$onUpdateValue.call(props,value),null===(_props$onChange=props.onChange)||void 0===_props$onChange||_props$onChange.call(props,value,event))})),null===(_props$onMount=props.onMount)||void 0===_props$onMount||_props$onMount.call(props,editorRef.value,monacoRef.value)}return vue.onMounted((()=>{const stop=vue.watchEffect((()=>{monacoRef.value&&(vue.nextTick((()=>stop())),createEditor())}))})),{editorRef:editorRef}}(props,monacoRef,containerRef),{disposeValidator:disposeValidator}=function(props,monacoRef,editorRef){const disposeValidator=vue.ref(null),stop=vue.watchEffect((()=>{if(monacoRef.value&&editorRef.value){vue.nextTick((()=>stop()));const changeMarkersListener=monacoRef.value.editor.onDidChangeMarkers((uris=>{var _editorRef$value3,_editorRef$value3$get;const editorUri=null===(_editorRef$value3=editorRef.value)||void 0===_editorRef$value3||null===(_editorRef$value3$get=_editorRef$value3.getModel())||void 0===_editorRef$value3$get?void 0:_editorRef$value3$get.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){var _props$onValidate;const markers=monacoRef.value.editor.getModelMarkers({resource:editorUri});null===(_props$onValidate=props.onValidate)||void 0===_props$onValidate||_props$onValidate.call(props,markers)}}}));disposeValidator.value=()=>null==changeMarkersListener?void 0:changeMarkersListener.dispose()}}));return{disposeValidator:disposeValidator}}(props,monacoRef,editorRef),isEditorReady=vue.computed((()=>!!monacoRef.value&&!!editorRef.value));return vue.onUnmounted((()=>{var _disposeValidator$val,_getModel,_editorRef$value;null===(_disposeValidator$val=disposeValidator.value)||void 0===_disposeValidator$val||_disposeValidator$val.call(disposeValidator),null===(_getModel=editorRef.value.getModel())||void 0===_getModel||_getModel.dispose(),(null===(_editorRef$value=editorRef.value)||void 0===_editorRef$value?void 0:_editorRef$value.dispose())??unload()})),vue.watch((()=>props.value),(newValue=>{editorRef.value&&editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue)})),vue.watch((()=>props.path),((newPath,oldPath)=>{const model=getOrCreateModel(monacoRef.value,props.value||props.defaultValue,props.language||props.defaultLanguage,newPath);model!==editorRef.value.getModel()&&(props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(model),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)))})),vue.watch((()=>props.options),(options=>editorRef.value&&editorRef.value.updateOptions(options)),{deep:!0}),vue.watch((()=>props.theme),(theme=>monacoRef.value&&monacoRef.value.editor.setTheme(theme))),vue.watch((()=>props.language),(language=>isEditorReady.value&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),language))),vue.watch((()=>props.line),(line=>{editorRef.value&&void 0!==line&&editorRef.value.revealLine(line)})),()=>{var _slots$default;return vue.createVNode(MonacoContainer,{setContainerRef:setContainerRef,width:props.width,height:props.height,isEditorReady:isEditorReady.value},{default:()=>[(null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots))??"loading..."]})}}});Object.defineProperty(exports,"loader",{enumerable:!0,get:function(){return loader__default.default}}),exports.MonacoContainer=MonacoContainer,exports.default=Editor,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")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","vue"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_vue={},global.monaco_loader,global.Vue)}(this,(function(exports,loader,vue){"use strict";function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var loader__default=_interopDefaultLegacy(loader);function useMonaco(){const monacoRef=vue.shallowRef(null),monacoLoader=loader__default.default.init();return monacoLoader.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization error:",error)})),{monacoRef:monacoRef,unload:()=>monacoLoader.cancel()}}const editorProps={defaultValue:String,defaultPath:String,defaultLanguage:String,value:String,language:String,path:String,theme:{type:String,default:"light"},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,"onUpdate:value":Function,onBeforeMount:Function,onMount:Function,onChange:Function,onValidate:Function};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)}const monacoContainerProps={width:{type:[Number,String],required:!0},height:{type:[Number,String],required:!0},isEditorReady:{type:Boolean,required:!0},className:String,setContainerRef:Function},styles_wrapper={display:"flex",position:"relative",textAlign:"initial"},styles_fullWidth={width:"100%"},styles_hide={display:"none"},loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var Loading=vue.defineComponent(((props,_ref)=>{let{slots:slots}=_ref;return()=>{var _slots$default;return vue.createVNode("div",{style:vue.normalizeStyle(loadingStyles)},[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)])}})),MonacoContainer=vue.defineComponent({props:monacoContainerProps,setup(props,_ref){let{slots:slots}=_ref;const wrapperStyle=vue.computed((()=>{const{width:width,height:height}=props;return vue.normalizeStyle({...styles_wrapper,width:width,height:height})})),containerStyle=vue.computed((()=>vue.normalizeStyle({...styles_fullWidth,...!props.isEditorReady&&styles_hide})));return()=>{var _slots$default;return vue.createVNode("div",{style:wrapperStyle.value},[!props.isEditorReady&&vue.createVNode(Loading,null,{default:()=>[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)]}),vue.createVNode("div",{ref:props.setContainerRef,style:containerStyle.value,class:props.className},null)])}}}),Editor=vue.defineComponent({props:editorProps,setup(props,_ref){let{slots:slots}=_ref;const viewStates=new Map,containerRef=vue.shallowRef(null),setContainerRef=el=>containerRef.value=el,{monacoRef:monacoRef,unload:unload}=useMonaco(),{editorRef:editorRef}=function(props,monacoRef,containerRef){const editorRef=vue.shallowRef(null);function createEditor(){var _props$onBeforeMount,_editorRef$value2,_props$onMount;if(!containerRef.value||!monacoRef.value)return;null===(_props$onBeforeMount=props.onBeforeMount)||void 0===_props$onBeforeMount||_props$onBeforeMount.call(props,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,{model:defaultModel,theme:props.theme,automaticLayout:!0,autoIndent:"brackets",formatOnPaste:!0,formatOnType:!0,...props.options},props.overrideServices),null===(_editorRef$value2=editorRef.value)||void 0===_editorRef$value2||_editorRef$value2.onDidChangeModelContent((event=>{const value=editorRef.value.getValue();var _props$onUpdateValue,_props$onChange;value!==props.value&&(null===(_props$onUpdateValue=props["onUpdate:value"])||void 0===_props$onUpdateValue||_props$onUpdateValue.call(props,value),null===(_props$onChange=props.onChange)||void 0===_props$onChange||_props$onChange.call(props,value,event))})),null===(_props$onMount=props.onMount)||void 0===_props$onMount||_props$onMount.call(props,editorRef.value,monacoRef.value)}return vue.onMounted((()=>{const stop=vue.watchEffect((()=>{monacoRef.value&&(vue.nextTick((()=>stop())),createEditor())}))})),{editorRef:editorRef}}(props,monacoRef,containerRef),{disposeValidator:disposeValidator}=function(props,monacoRef,editorRef){const disposeValidator=vue.ref(null),stop=vue.watchEffect((()=>{if(monacoRef.value&&editorRef.value){vue.nextTick((()=>stop()));const changeMarkersListener=monacoRef.value.editor.onDidChangeMarkers((uris=>{var _editorRef$value3,_editorRef$value3$get;const editorUri=null===(_editorRef$value3=editorRef.value)||void 0===_editorRef$value3||null===(_editorRef$value3$get=_editorRef$value3.getModel())||void 0===_editorRef$value3$get?void 0:_editorRef$value3$get.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){var _props$onValidate;const markers=monacoRef.value.editor.getModelMarkers({resource:editorUri});null===(_props$onValidate=props.onValidate)||void 0===_props$onValidate||_props$onValidate.call(props,markers)}}}));disposeValidator.value=()=>null==changeMarkersListener?void 0:changeMarkersListener.dispose()}}));return{disposeValidator:disposeValidator}}(props,monacoRef,editorRef),isEditorReady=vue.computed((()=>!!monacoRef.value&&!!editorRef.value));return vue.onUnmounted((()=>{var _disposeValidator$val,_getModel,_editorRef$value;null===(_disposeValidator$val=disposeValidator.value)||void 0===_disposeValidator$val||_disposeValidator$val.call(disposeValidator),null===(_getModel=editorRef.value.getModel())||void 0===_getModel||_getModel.dispose(),(null===(_editorRef$value=editorRef.value)||void 0===_editorRef$value?void 0:_editorRef$value.dispose())??unload()})),vue.watch((()=>props.value),(newValue=>{editorRef.value&&editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue)})),vue.watch((()=>props.path),((newPath,oldPath)=>{const model=getOrCreateModel(monacoRef.value,props.value||props.defaultValue,props.language||props.defaultLanguage,newPath);model!==editorRef.value.getModel()&&(props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(model),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)))})),vue.watch((()=>props.options),(options=>editorRef.value&&editorRef.value.updateOptions(options)),{deep:!0}),vue.watch((()=>props.theme),(theme=>monacoRef.value&&monacoRef.value.editor.setTheme(theme))),vue.watch((()=>props.language),(language=>isEditorReady.value&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),language))),vue.watch((()=>props.line),(line=>{editorRef.value&&void 0!==line&&editorRef.value.revealLine(line)})),()=>{var _slots$default;return vue.createVNode(MonacoContainer,{setContainerRef:setContainerRef,width:props.width,height:props.height,isEditorReady:isEditorReady.value},{default:()=>[(null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots))??"loading..."]})}}});Object.defineProperty(exports,"loader",{enumerable:!0,get:function(){return loader__default.default}}),exports.MonacoContainer=MonacoContainer,exports.default=Editor,exports.useMonaco=useMonaco,Object.defineProperty(exports,"__esModule",{value:!0})}));

package.json

 {
   "name": "@guolao/vue-monaco-editor",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1",
   "description": "Monaco Editor for Vue - use the monaco-editor in any Vue application without needing to use webpack (or rollup/vite) configuration files / plugins",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -1,3 +0,271 @@
-# monaco-vue
+# monaco-vue [![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/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) 
 
-// todo description
+在 [Vue](https://vuejs.org/) 中使用从 [CDN](#cdn) 加载的 [monaco-editor](https://microsoft.github.io/monaco-editor/)，不需要在 `webpack` (or `rollup`, `vite`) 等打包工具中配置插件。
+
+如果你想以 `NPM Package` 的形式使用 [monaco-editor](https://microsoft.github.io/monaco-editor/)，并从 `node_modules` 中加载 `monaco-editor` 文件打包到你的代码中，则仍需要使用打包工具的插件，具体可[查看此处](#npm-package)。
+
+## Installation
+
+```sh
+# npm
+npm i @guolao/vue-monaco-editor
+
+# yarn
+yarn add @guolao/vue-monaco-editor
+
+# pnpm
+pnpm add @guolao/vue-monaco-editor
+```
+
+当然，你也可以使用 [CDN-unpkg](https://unpkg.com/@guolao/vue-monaco-editor@0.0.1-alpha.0/lib/umd/monaco-vue.js)。
+
+## Usage
+
+### `Editor` Component
+
+引入 `Editor` 组件使用即可。
+
+```js
+import { defineComponent } from 'vue'
+import Editor from '@guolao/vue-monaco-editor'
+
+export default defineComponent(() => {
+  return (
+    <Editor 
+      height="80vh"
+      theme='vs-dark'
+      defaultLanguage="javascript"
+      defaultValue="// some comment"
+      onChange={(val, event) => console.log(val, event)}
+    />
+  )
+})
+```
+
+### `editor instance` 
+
+编辑器实例可以通过 `onMount` 事件获取。
+
+```js
+import { defineComponent, ref } from 'vue'
+import Editor from '@guolao/vue-monaco-editor'
+
+export default defineComponent(() => {
+  const editorRef = ref()
+
+  function handleEditorMount(editor) {
+    // 在这里获取 editor instance
+    editorRef.value = editor
+  }
+
+  return (
+    <Editor 
+      height="80vh"
+      theme='vs-dark'
+      defaultLanguage="javascript"
+      defaultValue="// some comment"
+      onMount={handleEditorMount}
+    />
+  )
+})
+```
+
+### `monaco instance`
+
+#### `onBeforeMount` & `onMount` 事件
+
+[monaco-editor](https://microsoft.github.io/monaco-editor/) 实例可以通过 `onBeforeMount` or `onMount` 事件获取。
+
+```js
+import { defineComponent, ref } from 'vue'
+import Editor from '@guolao/vue-monaco-editor'
+
+export default defineComponent(() => {
+  const monacoRef = ref()
+
+  function handleMonacoBeforeMount(monaco) {
+    // 在这里获取 monaco instance
+    monacoRef.value = editor
+  }
+
+  function handleMonacoMount(editor, monaco) {
+    // 在这里获取 monaco instance
+    monacoRef.value = editor
+  }
+
+  return (
+    <Editor 
+      height="80vh"
+      theme='vs-dark'
+      defaultLanguage="javascript"
+      defaultValue="// some comment"
+      onBeforeMount={handleMonacoBeforeMount}
+      onMount={handleEditorMount}
+    />
+  )
+})
+```
+
+#### `useMonaco` hook
+
+`vue-monaco-editor` 提供了 `useMonaco` 来加载 [monaco-editor](https://microsoft.github.io/monaco-editor/)。
+
+`useMonaco` 是使用 [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) 从 CDN 加载 [monaco-editor](https://microsoft.github.io/monaco-editor/) 文件。
+
+需要注意的是 `useMonaco` 仅加载并导出 `monaco` 实例，仍需要配合 `Editor` 组件一起使用，或者你可以使用 `monaco` 实例手动创建编辑器实例。
+
+```js
+import { defineComponent, onUnmounted } from 'vue'
+import Editor, { useMonaco } from '@guolao/vue-monaco-editor'
+
+export default defineComponent(() => {
+  const { monacoRef, unload } = useMonaco()
+  
+  // 组件卸载时，
+  // monaco instance 没有加载成功的话，
+  // 需要手动取消加载。
+  onUnmounted(() => !monacoRef.value && unload())
+
+  return (
+    <Editor 
+      height="80vh"
+      theme='vs-dark'
+      defaultLanguage="javascript"
+      defaultValue="// some comment"
+    />
+  )
+})
+```
+
+#### `loader` 加载
+
+可以直接使用 [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) 从 CDN 加载 `monaco instance`，`loader` 的加载过程为异步加载，且只会执行一次加载。
+
+[@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) 的相关配置可以直接点击链接查看。
+
+```js
+import { loader } from "@guolao/vue-monaco-editor"
+
+// CDN 加载
+loader.config({ 
+  paths: { 
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs' 
+  },
+})
+
+//  可以配置语言
+loader.config({ "vs/nls": { availableLanguages: { "*": "de" } } })
+
+// or
+loader.config({
+  paths: {
+    vs: "...",
+  },
+  "vs/nls" : {
+    availableLanguages: {
+      "*": "de",
+    },
+  },
+})
+```
+## CDN
+
+`vue-monaco-editor` 基于 [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) 从 CDN 加载文件，默认 CDN 为 [jsdelivr](https://cdn.jsdelivr.net)。
+
+```js
+loader.config({ 
+  paths: { 
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs' 
+  },
+})
+```
+
+如果你有其他需求，可以通过修改配置从其他地方加载 [monaco-editor](https://microsoft.github.io/monaco-editor/) 相关文件。
+
+具体配置请查看 [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) 。
+
+## NPM Package
+
+如果你想以 `NPM Package` 的形式使用 [monaco-editor](https://microsoft.github.io/monaco-editor/)，从 `node_modules` 中加载 `monaco-editor` 文件并打包到你的代码中，则仍需要使用打包工具的插件。
+
+```js
+import * as monaco from "monaco-editor"
+import { loader } from "@guolao/vue-monaco-editor"
+
+// 配置从 `node_modules` 中加载 monaco-editor
+loader.config({ monaco })
+```
+
+### Vite
+
+如果使用 `vite`，你需要这样做（具体可查看 [#1791 (comment)](https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046)）：
+
+```js
+import { loader } from "@guolao/vue-monaco-editor"
+
+import * as monaco from "monaco-editor"
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === "json") {
+      return new jsonWorker()
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker()
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker()
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker()
+    }
+    return new editorWorker()
+  }
+}
+
+loader.config({ monaco })
+```
+
+### Rollup
+
+如果使用 `Rollup`，你可以使用社区提供的插件 [rollup-plugin-monaco-editor](https://github.com/chengcyber/rollup-plugin-monaco-editor)。
+
+### Webpack
+
+如果使用 `webpack`，[monaco-editor](https://microsoft.github.io/monaco-editor/) 官方提供了 `webpack` 的插件 [monaco-editor-webpack-plugin](https://www.npmjs.com/package/monaco-editor-webpack-plugin)，你可以安装并使用它。
+
+## Props & Events & slots
+
+`Editor`
+
+| Name | Type | Default | Description | remark |
+| --- | --- | --- | --- | --- |
+| defaultValue | `string` |  | 当前编辑器模型的默认值 |  |
+| defaultLanguage | `string` |  | 当前编辑器模型的默认语言 | `monaco-editor` 支持的语言[查看此处](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |
+| defaultPath | `string` |  | 当前编辑器模型的默认路径 | `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
+| value | `string` |  | 当前编辑器模型的值 | `v-model:value` |
+| language | `string` |  | 当前编辑器模型的语言 | `monaco-editor` 支持的语言[查看此处](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |
+| path | `string` |  | 当前编辑器的路径 |  |
+| theme | `light` \| `vs-dark` | `light` | `monaco-editor` 的主题 | `monaco.editor.defineTheme(...)` |
+| line | `number` |  | 可以设置要跳到行数 |  |
+| options | `object` | `{}` | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) |  |
+| overrideServices | `object` | `{}` | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorOverrideServices.html) |  |
+| saveViewState | `boolean` | `true` | 编辑器模型变更后，保存模型的视图状态（滚动位置等） | 需要给每个模型配置唯一 `path` |
+| width | `number` \| `string` | `100%` | 容器宽度 |  |
+| height | `number` \| `string` | `100%` | 容器高度 |  |
+| className | `string` |  | 容器 class |  |
+| `onUpdate:value` | `(value: string \| undefined) => void` |  | 编辑改变值后执行 | 可直接使用 `v-model` |
+| onBeforeMount | `(monaco: Monaco) => void` |  | 编辑器实例创建前执行 |  |
+| onMount | `(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void` |  | 编辑器实例创建后执行 |  |
+| onChange | `(value: string \| undefined) => void` |  | 编辑改变值后执行 | `monaco.editor.IModelContentChangedEvent) => void` |
+| onValidate | `(markers: monaco.editor.IMarker[]) => void` |  | 当语法发生错误时执行 | `monaco-editor` 支持语法校验的语言[查看此处](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |
+| `#defalut` | `slot` | `'loading...'` | 加载状态 | 从 CDN 加载文件需要一段时间，显示加载状态更为友好 |
+
+## License
+
+[MIT](LICENSE)

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

63463

increased by18.41%

Number of lines in readme file

272

increased by6700%

No dependency changes