codemirror-editor-vue3 - npm Package Compare versions

Comparing version 2.2.0 to 2.2.2

CHANGELOG.md

@@ -0,1 +1,5 @@
+## [2.2.1](https://github.com/RennCheung/codemirror-editor-vue3/compare/v2.2.0...v2.2.1) (2023-03-03)
+
+
+
 # [2.2.0](https://github.com/RennCheung/codemirror-editor-vue3/compare/v2.1.9-beta1...v2.2.0) (2023-02-09)
@@ -2,0 +6,0 @@

dist/codemirror-editor-vue3.umd.js

@@ -1,6 +0,6 @@
-var Me=Object.defineProperty,be=Object.defineProperties;var Ce=Object.getOwnPropertyDescriptors;var H=Object.getOwnPropertySymbols;var Se=Object.prototype.hasOwnProperty,Ee=Object.prototype.propertyIsEnumerable;var P=(s,t,w)=>t in s?Me(s,t,{enumerable:!0,configurable:!0,writable:!0,value:w}):s[t]=w,b=(s,t)=>{for(var w in t||(t={}))Se.call(t,w)&&P(s,w,t[w]);if(H)for(var w of H(t))Ee.call(t,w)&&P(s,w,t[w]);return s},z=(s,t)=>be(s,Ce(t));(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("codemirror/lib/codemirror.css"),require("codemirror"),require("codemirror/addon/merge/merge.css"),require("codemirror/addon/merge/merge.js"),require("diff-match-patch"),require("codemirror/addon/mode/simple.js")):typeof define=="function"&&define.amd?define(["exports","vue","codemirror/lib/codemirror.css","codemirror","codemirror/addon/merge/merge.css","codemirror/addon/merge/merge.js","diff-match-patch","codemirror/addon/mode/simple.js"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s["codemirror-editor-vue3"]={},s.Vue,null,s.codemirror,null,null,s.DiffMatchPatch))})(this,function(s,t,w,q,xe,ve,U){"use strict";function T(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var L=T(q),W=T(U);!window.CodeMirror&&(window.CodeMirror=L.default);const C=window.CodeMirror||L.default;var v=(e,o)=>{const a=e.__vccOpts||e;for(const[n,r]of o)a[n]=r;return a};const G=t.defineComponent({name:"DefaultMode",props:{name:{type:String,default:`cm-textarea-${+new Date}`},value:{type:String,default:""},content:{type:String,default:""},options:{type:Object,default:()=>({})},cminstance:{type:Object,default:()=>null},placeholder:{type:String,default:""}},emits:{ready:e=>e,"update:cminstance":e=>e},setup(e,{emit:o}){const a=t.ref(),n=t.ref(null),r=()=>{n.value=t.markRaw(C.fromTextArea(a.value,e.options)),o("update:cminstance",n.value);const u=t.watch(()=>e.cminstance,l=>{var y;l&&((y=e.cminstance)==null||y.setValue(e.value||e.content)),o("ready",t.unref(n)),u==null||u()},{deep:!0})};return t.onMounted(()=>{r()}),{textarea:a,initialize:r}}}),J=["name","placeholder"];function Z(e,o,a,n,r,u){return t.openBlock(),t.createElementBlock("textarea",{ref:"textarea",name:e.$props.name,placeholder:e.$props.placeholder},null,8,J)}var D=v(G,[["render",Z]]);window.diff_match_patch=W.default,window.DIFF_DELETE=-1,window.DIFF_INSERT=1,window.DIFF_EQUAL=0;const K=t.defineComponent({name:"MergeMode",props:{options:{type:Object,default:()=>({})},cminstance:{type:Object,default:()=>({})}},emits:["update:cminstance","ready"],setup(e,{emit:o}){const a=t.ref(),n=t.ref(),r=()=>{a.value=t.markRaw(C.MergeView(n.value,e.options)),o("update:cminstance",a.value),o("ready",a)};return t.onMounted(()=>{r()}),{mergeView:n,initialize:r}}}),Q={ref:"mergeView"};function X(e,o,a,n,r,u){return t.openBlock(),t.createElementBlock("div",Q,null,512)}var Y=v(K,[["render",X]]);s.logErrorType=void 0,function(e){e.info="info",e.warning="warning",e.error="error"}(s.logErrorType||(s.logErrorType={}));function I(){const e=new Date,o=e.getHours()<10?`0${e.getHours()}`:e.getHours(),a=e.getMinutes()<10?`0${e.getMinutes()}`:e.getMinutes(),n=e.getSeconds()<10?`0${e.getSeconds()}`:e.getSeconds();return`${o}:${a}:${n}`}function ee(e){return`#link#${JSON.stringify(e)}#link#`}function A(e){const o=/#link#(.+)#link#/g,a=[];let n;for(n=o.exec(e);n;){const r=document.createElement("a"),u=JSON.parse(n[1]),l=Object.entries(u);for(const[y,f]of l)r.setAttribute(y,f);r.className="editor_custom_link",r.innerHTML="logDownload",a.push({start:n.index,end:n.index+n[0].length,node:r}),n=o.exec(e)}return a}function te(e="",o="info"){return`#log<${o}>log#${e}#log<${o}>log#`}function B(e){const o=[];function a(){const n=/#log<(\w*)>log#((.|\r\n|\n)*?)#log<(\w*)>log#/g;let r;for(r=n.exec(e);r;){const l=r[0].replace(/\r\n/g,`
+(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("codemirror/lib/codemirror.css"),require("codemirror"),require("codemirror/addon/merge/merge.css"),require("codemirror/addon/merge/merge.js"),require("diff-match-patch"),require("codemirror/addon/mode/simple.js")):typeof define=="function"&&define.amd?define(["exports","vue","codemirror/lib/codemirror.css","codemirror","codemirror/addon/merge/merge.css","codemirror/addon/merge/merge.js","diff-match-patch","codemirror/addon/mode/simple.js"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m["codemirror-editor-vue3"]={},m.Vue,null,m.codemirror,null,null,m.DiffMatchPatch))})(this,function(m,t,fe,v,ge,he,F){"use strict";!window.CodeMirror&&(window.CodeMirror=v);const M=window.CodeMirror||v,R=t.defineComponent({name:"DefaultMode",props:{name:{type:String,default:`cm-textarea-${+new Date}`},value:{type:String,default:""},content:{type:String,default:""},options:{type:Object,default:()=>({})},cminstance:{type:Object,default:()=>null},placeholder:{type:String,default:""}},emits:{ready:e=>e,"update:cminstance":e=>e},setup(e,{emit:o}){const a=t.ref(),n=t.ref(null),r=()=>{n.value=t.markRaw(M.fromTextArea(a.value,e.options)),o("update:cminstance",n.value);const d=t.watch(()=>e.cminstance,c=>{var y;c&&((y=e.cminstance)==null||y.setValue(e.value||e.content)),o("ready",t.unref(n)),d==null||d()},{deep:!0})};return t.onMounted(()=>{r()}),{textarea:a,initialize:r}}}),S=(e,o)=>{const a=e.__vccOpts||e;for(const[n,r]of o)a[n]=r;return a},H=["name","placeholder"];function z(e,o,a,n,r,d){return t.openBlock(),t.createElementBlock("textarea",{ref:"textarea",name:e.$props.name,placeholder:e.$props.placeholder},null,8,H)}const j=S(R,[["render",z]]);window.diff_match_patch=F,window.DIFF_DELETE=-1,window.DIFF_INSERT=1,window.DIFF_EQUAL=0;const P=t.defineComponent({name:"MergeMode",props:{options:{type:Object,default:()=>({})},cminstance:{type:Object,default:()=>({})}},emits:["update:cminstance","ready"],setup(e,{emit:o}){const a=t.ref(),n=t.ref(),r=()=>{a.value=t.markRaw(M.MergeView(n.value,e.options)),o("update:cminstance",a.value),o("ready",a)};return t.onMounted(()=>{r()}),{mergeView:n,initialize:r}}}),q={ref:"mergeView"};function U(e,o,a,n,r,d){return t.openBlock(),t.createElementBlock("div",q,null,512)}const W=S(P,[["render",U]]);var L=(e=>(e.info="info",e.warning="warning",e.error="error",e))(L||{});function T(){const e=new Date,o=e.getHours()<10?`0${e.getHours()}`:e.getHours(),a=e.getMinutes()<10?`0${e.getMinutes()}`:e.getMinutes(),n=e.getSeconds()<10?`0${e.getSeconds()}`:e.getSeconds();return`${o}:${a}:${n}`}function G(e){return`#link#${JSON.stringify(e)}#link#`}function I(e){const o=/#link#(.+)#link#/g,a=[];let n;for(n=o.exec(e);n;){const r=document.createElement("a"),d=JSON.parse(n[1]),c=Object.entries(d);for(const[y,u]of c)r.setAttribute(y,u);r.className="editor_custom_link",r.innerHTML="logDownload",a.push({start:n.index,end:n.index+n[0].length,node:r}),n=o.exec(e)}return a}function J(e="",o="info"){return`#log<${o}>log#${e}#log<${o}>log#`}function A(e){const o=[];function a(){const n=/#log<(\w*)>log#((.|\r\n|\n)*?)#log<(\w*)>log#/g;let r;for(r=n.exec(e);r;){const c=r[0].replace(/\r\n/g,`
 `).split(`
-`),f=r[2].replace(/\r\n/g,`
+`),u=r[2].replace(/\r\n/g,`
 `).split(`
-`),h=document.createElement("span"),d=r[1];h.className=`c-editor--log__${d}`;let m=0;for(let i=0;i<l.length;i++){const p=l[i],_=f[i],$=h.cloneNode(!1);$.innerText=_,o.push({start:r.index+m,end:r.index+m+p.length,node:$}),m=m+p.length+1}r=n.exec(e)}}return a(),o}function ne(e,o){return`[${I()}] <${o}> ${e}`}function re(e,o,a){const r=new Array(Math.max(o||15,5)).join(a||"=");return`${r}${e}${r}`}const S=[{regex:/(\[.*?\])([ \t]*)(<error>[ \t])(.+)/,token:["tag","","error.strong","error.strong"],sol:!0},{regex:/(\[.*?\])([ \t]*)(<info>)(.+)(.?)/,token:["tag","","bracket","bracket","hr"],sol:!0},{regex:/(\[.*?\])([ \t]*)(<warning>)(.+)(.?)/,token:["tag","","comment","comment","hr"],sol:!0}];C.defineSimpleMode("fclog",{start:[...S,{regex:/.*/,token:"hr"}],error:[...S,{regex:/.*/,token:"error.strong"}],info:[...S,{regex:/.*/,token:"bracket"}],warning:[...S,{regex:/.*\[/,token:"comment"}]}),C.defineSimpleMode("log",{start:[{regex:/^[=]+[^=]*[=]+/,token:"strong"},{regex:/([^\w])([A-Z][\w]*)/,token:["","string"]},{regex:/(^[A-Z][\w]*)/,token:"string"}]});const oe=t.defineComponent({name:"CodemirrorFclog",props:{value:{type:String,default:""},name:{type:String,default:`cm-textarea-${+new Date}`},options:{type:Object,default:()=>({})},cminstance:{type:Object,default:()=>({})},placeholder:{type:String,default:""}},emits:["update:cminstance","ready"],setup(e,{emit:o}){const a=t.ref(),n=t.ref(null),r=(l=e.cminstance)=>{l.getAllMarks().forEach(d=>d.clear());const f=l.getValue(),h=[].concat(A(f)).concat(B(f));for(let d=0;d<h.length;d++){const m=h[d];l.markText(l.posFromIndex(m.start),l.posFromIndex(m.end),{replacedWith:m.node})}},u=()=>{var l;n.value=t.markRaw(C.fromTextArea(a.value,e.options)),o("update:cminstance",t.unref(n)),(l=n.value)==null||l.on("change",r)};return t.watch(()=>e.cminstance,l=>{var y;l&&(r(e.cminstance),(y=e.cminstance)==null||y.setValue(e.value),o("ready",n))},{deep:!0,immediate:!0}),t.onMounted(()=>{u()}),{initialize:u,textarea:a}}}),ae=["name","placeholder"];function se(e,o,a,n,r,u){return t.openBlock(),t.createElementBlock("textarea",{ref:"textarea",name:e.$props.name,placeholder:e.$props.placeholder},null,8,ae)}var ce=v(oe,[["render",se]]);const N={"update:value":()=>!0,change:(e,o)=>({value:e,cm:o}),input:()=>!0,ready:e=>e},le=["changes","scroll","beforeChange","cursorActivity","keyHandled","inputRead","electricInput","beforeSelectionChange","viewportChange","swapDoc","gutterClick","gutterContextMenu","focus","blur","refresh","optionChange","scrollCursorIntoView","update"],ie=()=>{const e={};return le.forEach(o=>{e[o]=(...a)=>a}),e},de=b(b({},N),ie()),O={mode:"text",theme:"default",lineNumbers:!0,smartIndent:!0,indentUnit:2};function ue(e){Promise.resolve().then(()=>{const o=e.getScrollInfo();e.scrollTo(o.left,o.height)})}const fe=({props:e,cminstance:o,emit:a,internalInstance:n,content:r})=>{const u=t.computed(()=>{var f;return e.merge?(f=t.unref(o))==null?void 0:f.editor():t.unref(o)}),l=()=>{const f=[];return Object.keys(n==null?void 0:n.vnode.props).forEach(h=>{if(h.startsWith("on")){const d=h.replace(h[2],h[2].toLowerCase()).slice(2);!N[d]&&f.push(d)}}),f};return{listenerEvents:()=>{u.value.on("change",d=>{const m=d.getValue();m===r.value&&m!==""||(r.value=m,a("update:value",r.value||""),a("input",r.value||" "),Promise.resolve().then(()=>{a("change",r.value,d)}),e.keepCursorInEnd&&ue(d))});const f={};l().filter(d=>!f[d]&&(f[d]=!0)).forEach(d=>{u.value.on(d,(...m)=>{a(d,...m)})})}}};function me({props:e,cminstance:o,presetRef:a}){const n=t.ref(null),r=t.ref(null),u=t.computed(()=>{var i;return e.merge?(i=t.unref(o))==null?void 0:i.editor():t.unref(o)}),l=()=>{t.nextTick(()=>{var i;(i=u.value)==null||i.refresh()})},y=(i=e.width,p=e.height)=>{var $;n.value=String(i).replace("px",""),r.value=String(p).replace("px","");const _=r.value;($=u.value)==null||$.setSize(n.value,_)},f=()=>{var p;const i=(p=u.value)==null?void 0:p.getWrapperElement();i==null||i.remove()},h=()=>{var p,_,$;const i=(p=u.value)==null?void 0:p.getDoc().getHistory();(_=a.value)==null||_.initialize(),f(),($=u.value)==null||$.getDoc().setHistory(i)},d=()=>{const i=document.querySelector(".CodeMirror-gutters");return(i==null?void 0:i.style.left.replace("px",""))!=="0"};return{reload:h,refresh:l,resize:y,destroy:f,containerHeight:r,reviseStyle:()=>{if(l(),!d())return;const i=setInterval(()=>{d()?l():clearInterval(i)},60),p=setTimeout(()=>{clearInterval(i),clearTimeout(p)},400)}}}const E=t.defineComponent({props:{value:{type:String,default:""},options:{type:Object,default:()=>O},globalOptions:{type:Object,default:()=>O},placeholder:{type:String,default:""},border:{type:Boolean,default:!1},width:{type:[String,Number],default:null},height:{type:[String,Number],default:null},originalStyle:{type:Boolean,default:!1},keepCursorInEnd:{type:Boolean,default:!1},merge:{type:Boolean,default:!1},name:{type:String,default:""},marker:{type:Function,default:()=>null},unseenLines:{type:Array,default:()=>[]}},emits:de,setup(e,{expose:o,emit:a}){var F,R;const n=e;typeof Object.assign!="function"&&Object.defineProperty(Object,"assign",{value(c,g){if(c==null)throw new TypeError("Cannot convert undefined or null to object");const k=Object(c);for(let M=1;M<arguments.length;M++){const x=arguments[M];if(x!=null)for(const j in x)Object.prototype.hasOwnProperty.call(x,j)&&(k[j]=x[j])}return k},writable:!0,configurable:!0});const r=t.ref(null),u=t.ref(""),l=t.shallowRef(D),y=t.ref(b(b(b({},O),n.globalOptions),n.options)),f=t.getCurrentInstance(),h=n.name||((R=(F=f==null?void 0:f.parent)==null?void 0:F.type)==null?void 0:R.name)||void 0,d=t.ref(null),m=t.computed(()=>{var c;return n.merge?(c=t.unref(r))==null?void 0:c.editor():t.unref(r)}),{refresh:i,resize:p,destroy:_,containerHeight:$,reviseStyle:ye}=me({props:n,cminstance:r,presetRef:d}),{listenerEvents:ke}=fe({props:n,cminstance:r,emit:a,internalInstance:f,content:u}),V=()=>{n.unseenLines!==void 0&&n.marker!==void 0&&n.unseenLines.forEach(c=>{var k,M;const g=(k=r.value)==null?void 0:k.lineInfo(c);(M=r.value)==null||M.setGutterMarker(c,"breakpoints",(g==null?void 0:g.gutterMarkers)?null:n.marker())})},we=c=>{var k,M;const g=(k=r.value)==null?void 0:k.getValue();c!==g&&((M=r.value)==null||M.setValue(c),u.value=c,ye()),V()},$e=()=>{ke(),V(),p(n.width,n.height),a("ready",r.value),t.watch([()=>n.width,()=>n.height],([c,g])=>{p(c,g)},{deep:!0})},_e=()=>{if(n.options.mode==="fclog"||n.options.mode==="log"){l.value=ce;return}if(n.merge){l.value=Y;return}l.value=D};return t.watch(()=>n.options,c=>{var g;for(const k in n.options)(g=m.value)==null||g.setOption(k,t.unref(c[k]))},{deep:!0}),t.watch(()=>n.value,c=>{we(c)}),t.watch(()=>n.placeholder,c=>{var g;(g=m.value)==null||g.setOption("placeholder",c)}),t.watch(()=>n.merge,c=>{_e()},{immediate:!0}),t.onBeforeUnmount(()=>{_()}),o({cminstance:r,resize:p,refresh:i,destroy:_}),(c,g)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["codemirror-container",{merge:c.$props.merge,bordered:c.$props.border||c.$props.merge&&!n.originalStyle,"width-auto":!c.$props.width||c.$props.width=="100%","height-auto":!c.$props.height||c.$props.height=="100%","original-style":n.originalStyle}]),style:t.normalizeStyle({height:t.unref($)+"px"})},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(l)),t.mergeProps({ref_key:"presetRef",ref:d,cminstance:r.value,"onUpdate:cminstance":g[0]||(g[0]=k=>r.value=k),style:{height:"100%"}},z(b(b({},c.$props),c.$attrs),{options:y.value,name:t.unref(h),content:u.value}),{onReady:$e}),null,16,["cminstance"]))],6))}});var Oe="";const pe=(e,o)=>(o&&o.options&&(E.props.globalOptions.default=()=>o.options),e.component((o==null?void 0:o.componentName)||"Codemirror",E),e),ge=window.CodeMirror||C,he=pe;function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(`.codemirror-container {
+`),h=document.createElement("span"),i=r[1];h.className=`c-editor--log__${i}`;let p=0;for(let l=0;l<c.length;l++){const f=c[l],$=u[l],w=h.cloneNode(!1);w.innerText=$,o.push({start:r.index+p,end:r.index+p+f.length,node:w}),p=p+f.length+1}r=n.exec(e)}}return a(),o}function Z(e,o){return`[${T()}] <${o}> ${e}`}function K(e,o,a){const r=new Array(Math.max(o||15,5)).join(a||"=");return`${r}${e}${r}`}const b=[{regex:/(\[.*?\])([ \t]*)(<error>[ \t])(.+)/,token:["tag","","error.strong","error.strong"],sol:!0},{regex:/(\[.*?\])([ \t]*)(<info>)(.+)(.?)/,token:["tag","","bracket","bracket","hr"],sol:!0},{regex:/(\[.*?\])([ \t]*)(<warning>)(.+)(.?)/,token:["tag","","comment","comment","hr"],sol:!0}];M.defineSimpleMode("fclog",{start:[...b,{regex:/.*/,token:"hr"}],error:[...b,{regex:/.*/,token:"error.strong"}],info:[...b,{regex:/.*/,token:"bracket"}],warning:[...b,{regex:/.*\[/,token:"comment"}]}),M.defineSimpleMode("log",{start:[{regex:/^[=]+[^=]*[=]+/,token:"strong"},{regex:/([^\w])([A-Z][\w]*)/,token:["","string"]},{regex:/(^[A-Z][\w]*)/,token:"string"}]});const Q=t.defineComponent({name:"CodemirrorFclog",props:{value:{type:String,default:""},name:{type:String,default:`cm-textarea-${+new Date}`},options:{type:Object,default:()=>({})},cminstance:{type:Object,default:()=>({})},placeholder:{type:String,default:""}},emits:["update:cminstance","ready"],setup(e,{emit:o}){const a=t.ref(),n=t.ref(null),r=(c=e.cminstance)=>{c.getAllMarks().forEach(i=>i.clear());const u=c.getValue(),h=[].concat(I(u)).concat(A(u));for(let i=0;i<h.length;i++){const p=h[i];c.markText(c.posFromIndex(p.start),c.posFromIndex(p.end),{replacedWith:p.node})}},d=()=>{var c;n.value=t.markRaw(M.fromTextArea(a.value,e.options)),o("update:cminstance",t.unref(n)),(c=n.value)==null||c.on("change",r)};return t.watch(()=>e.cminstance,c=>{var y;c&&(r(e.cminstance),(y=e.cminstance)==null||y.setValue(e.value),o("ready",n))},{deep:!0,immediate:!0}),t.onMounted(()=>{d()}),{initialize:d,textarea:a}}}),X=["name","placeholder"];function Y(e,o,a,n,r,d){return t.openBlock(),t.createElementBlock("textarea",{ref:"textarea",name:e.$props.name,placeholder:e.$props.placeholder},null,8,X)}const ee=S(Q,[["render",Y]]),B={"update:value":()=>!0,change:(e,o)=>({value:e,cm:o}),input:()=>!0,ready:e=>e},te=["changes","scroll","beforeChange","cursorActivity","keyHandled","inputRead","electricInput","beforeSelectionChange","viewportChange","swapDoc","gutterClick","gutterContextMenu","focus","blur","refresh","optionChange","scrollCursorIntoView","update"],ne={...B,...(()=>{const e={};return te.forEach(o=>{e[o]=(...a)=>a}),e})()},E={mode:"text",theme:"default",lineNumbers:!0,smartIndent:!0,indentUnit:2};function re(e){Promise.resolve().then(()=>{const o=e.getScrollInfo();e.scrollTo(o.left,o.height)})}const oe=({props:e,cminstance:o,emit:a,internalInstance:n,content:r})=>{const d=t.computed(()=>{var u;return e.merge?(u=t.unref(o))==null?void 0:u.editor():t.unref(o)}),c=()=>{const u=[];return Object.keys(n==null?void 0:n.vnode.props).forEach(h=>{if(h.startsWith("on")){const i=h.replace(h[2],h[2].toLowerCase()).slice(2);!B[i]&&u.push(i)}}),u};return{listenerEvents:()=>{d.value.on("change",i=>{const p=i.getValue();p===r.value&&p!==""||(r.value=p,a("update:value",r.value||""),a("input",r.value||" "),Promise.resolve().then(()=>{a("change",r.value,i)}),e.keepCursorInEnd&&re(i))});const u={};c().filter(i=>!u[i]&&(u[i]=!0)).forEach(i=>{d.value.on(i,(...p)=>{a(i,...p)})})}}};function ae({props:e,cminstance:o,presetRef:a}){const n=t.ref(null),r=t.ref(null),d=t.computed(()=>{var l;return e.merge?(l=t.unref(o))==null?void 0:l.editor():t.unref(o)}),c=()=>{t.nextTick(()=>{var l;(l=d.value)==null||l.refresh()})},y=(l=e.width,f=e.height)=>{var w;n.value=String(l).replace("px",""),r.value=String(f).replace("px","");const $=r.value;(w=d.value)==null||w.setSize(n.value,$)},u=()=>{var f;const l=(f=d.value)==null?void 0:f.getWrapperElement();l==null||l.remove()},h=()=>{var f,$,w;const l=(f=d.value)==null?void 0:f.getDoc().getHistory();($=a.value)==null||$.initialize(),u(),(w=d.value)==null||w.getDoc().setHistory(l)},i=()=>{const l=document.querySelector(".CodeMirror-gutters");return(l==null?void 0:l.style.left.replace("px",""))!=="0"};return{reload:h,refresh:c,resize:y,destroy:u,containerHeight:r,reviseStyle:()=>{if(c(),!i())return;const l=setInterval(()=>{i()?c():clearInterval(l)},60),f=setTimeout(()=>{clearInterval(l),clearTimeout(f)},400)}}}const C=t.defineComponent({__name:"index",props:{value:{type:String,default:""},options:{type:Object,default:()=>E},globalOptions:{type:Object,default:()=>E},placeholder:{type:String,default:""},border:{type:Boolean,default:!1},width:{type:[String,Number],default:null},height:{type:[String,Number],default:null},originalStyle:{type:Boolean,default:!1},keepCursorInEnd:{type:Boolean,default:!1},merge:{type:Boolean,default:!1},name:{type:String,default:""},marker:{type:Function,default:()=>null},unseenLines:{type:Array,default:()=>[]}},emits:ne,setup(e,{expose:o,emit:a}){var N,V;const n=e;typeof Object.assign!="function"&&Object.defineProperty(Object,"assign",{value(s,g){if(s==null)throw new TypeError("Cannot convert undefined or null to object");const k=Object(s);for(let _=1;_<arguments.length;_++){const x=arguments[_];if(x!=null)for(const O in x)Object.prototype.hasOwnProperty.call(x,O)&&(k[O]=x[O])}return k},writable:!0,configurable:!0});const r=t.ref(null),d=t.ref(""),c=t.shallowRef(j),y=t.ref({...E,...n.globalOptions,...n.options}),u=t.getCurrentInstance(),h=n.name||((V=(N=u==null?void 0:u.parent)==null?void 0:N.type)==null?void 0:V.name)||void 0,i=t.ref(null),p=t.computed(()=>{var s;return n.merge?(s=t.unref(r))==null?void 0:s.editor():t.unref(r)}),{refresh:l,resize:f,destroy:$,containerHeight:w,reviseStyle:ie}=ae({props:n,cminstance:r,presetRef:i}),{listenerEvents:de}=oe({props:n,cminstance:r,emit:a,internalInstance:u,content:d}),D=()=>{n.unseenLines!==void 0&&n.marker!==void 0&&n.unseenLines.forEach(s=>{var k,_;const g=(k=r.value)==null?void 0:k.lineInfo(s);(_=r.value)==null||_.setGutterMarker(s,"breakpoints",g!=null&&g.gutterMarkers?null:n.marker())})},ue=s=>{var k,_;const g=(k=r.value)==null?void 0:k.getValue();s!==g&&((_=r.value)==null||_.setValue(s),d.value=s,ie()),D()},me=()=>{de(),D(),f(n.width,n.height),a("ready",r.value),t.watch([()=>n.width,()=>n.height],([s,g])=>{f(s,g)},{deep:!0})},pe=()=>{if(n.options.mode==="fclog"||n.options.mode==="log"){c.value=ee;return}if(n.merge){c.value=W;return}c.value=j};return t.watch(()=>n.options,s=>{var g;for(const k in n.options)(g=p.value)==null||g.setOption(k,t.unref(s[k]))},{deep:!0}),t.watch(()=>n.value,s=>{ue(s)}),t.watch(()=>n.placeholder,s=>{var g;(g=p.value)==null||g.setOption("placeholder",s)}),t.watch(()=>n.merge,s=>{pe()},{immediate:!0}),t.onBeforeUnmount(()=>{$()}),o({cminstance:r,resize:f,refresh:l,destroy:$}),(s,g)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["codemirror-container",{merge:s.$props.merge,bordered:s.$props.border||s.$props.merge&&!n.originalStyle,"width-auto":!s.$props.width||s.$props.width=="100%","height-auto":!s.$props.height||s.$props.height=="100%","original-style":n.originalStyle}]),style:t.normalizeStyle({height:t.unref(w)+"px"})},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(c)),t.mergeProps({ref_key:"presetRef",ref:i,cminstance:r.value,"onUpdate:cminstance":g[0]||(g[0]=k=>r.value=k),style:{height:"100%"}},{...s.$props,...s.$attrs,options:y.value,name:t.unref(h),content:d.value},{onReady:me}),null,16,["cminstance"]))],6))}}),ke="",se=(e,o)=>(o&&o.options&&(C.props.globalOptions.default=()=>o.options),e.component((o==null?void 0:o.componentName)||"Codemirror",C),e),ce=window.CodeMirror||M,le=se;function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(`.codemirror-container {
   position: relative;
@@ -66,2 +66,2 @@ display: inline-block;
 }
-`),s.CodeMirror=ge,s.GlobalCmComponent=he,s.VueCodemirror=E,s.createLinkMark=ee,s.createLog=ne,s.createLogMark=te,s.createTitle=re,s.default=E,s.getLinkMarks=A,s.getLocalTime=I,s.getLogMark=B,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+`),m.CodeMirror=ce,m.GlobalCmComponent=le,m.VueCodemirror=C,m.createLinkMark=G,m.createLog=Z,m.createLogMark=J,m.createTitle=K,m.default=C,m.getLinkMarks=I,m.getLocalTime=T,m.getLogMark=A,m.logErrorType=L,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/packages/index.d.ts

@@ -10,3 +10,3 @@ import type { App } from "vue";
 }
-export declare type CmComponentRef = CmComp | null;
+export type CmComponentRef = CmComp | null;
 declare interface InstallConfig {
@@ -24,5 +24,5 @@ options: EditorConfiguration;
  */
-declare const GlobalCmComponent: (app: App, config?: InstallConfig | undefined) => App<any>;
+declare const GlobalCmComponent: (app: App, config?: InstallConfig) => App<any>;
 export * from "./src/components/presetMode/log/utils";
 export { CodeMirror, GlobalCmComponent, VueCodemirror };
 export default VueCodemirror;

dist/packages/src/components/index.vue.d.ts

@@ -69,42 +69,2 @@ import type { Ref, PropType } from "vue";
 }, {
-    props: Readonly<{
-        onChange: ((value: string, cm: Editor) => any) | undefined;
-        onChanges: ((instance: Editor, changes: import("codemirror").EditorChange[]) => any) | undefined;
-        onBeforeChange: ((instance: Editor, changeObj: import("codemirror").EditorChangeCancellable) => any) | undefined;
-        onCursorActivity: ((instance: Editor) => any) | undefined;
-        onKeyHandled: ((instance: Editor, name: string, eventObj: Event) => any) | undefined;
-        onInputRead: ((instance: Editor, changeObj: import("codemirror").EditorChange) => any) | undefined;
-        onElectricInput: ((instance: Editor, line: number) => any) | undefined;
-        onBeforeSelectionChange: ((instance: Editor, obj: import("codemirror").EditorSelectionChange) => any) | undefined;
-        onViewportChange: ((instance: Editor, from: number, to: number) => any) | undefined;
-        onSwapDoc: ((instance: Editor, oldDoc: import("codemirror").Doc) => any) | undefined;
-        onGutterClick: ((instance: Editor, line: number, gutter: string, clickEvent: Event) => any) | undefined;
-        onGutterContextMenu: ((instance: Editor, line: number, gutter: string, contextMenuEvent: MouseEvent) => any) | undefined;
-        onFocus: ((instance: Editor, eventObj: FocusEvent) => any) | undefined;
-        onBlur: ((instance: Editor, eventObj: FocusEvent) => any) | undefined;
-        onScroll: ((instance: Editor) => any) | undefined;
-        onRefresh: ((instance: Editor) => any) | undefined;
-        onOptionChange: ((instance: Editor, option: keyof EditorConfiguration) => any) | undefined;
-        onScrollCursorIntoView: ((instance: Editor, eventObj: Event) => any) | undefined;
-        onUpdate: ((instance: Editor) => any) | undefined;
-        onRenderLine: ((instance: Editor, lineHandle: import("codemirror").LineHandle, element: HTMLElement) => any) | undefined;
-        onOverwriteToggle: ((instance: Editor, overwrite: boolean) => any) | undefined;
-        "onUpdate:value": ((value: string) => any) | undefined;
-        onInput: ((value: string) => any) | undefined;
-        onReady: ((cm: Editor) => any) | undefined;
-        value: string;
-        options: EditorConfiguration;
-        globalOptions: EditorConfiguration;
-        placeholder: string;
-        border: boolean;
-        width: string | number | null;
-        height: string | number | null;
-        originalStyle: boolean;
-        keepCursorInEnd: boolean;
-        merge: boolean;
-        name: string;
-        marker: () => HTMLElement;
-        unseenLines: any[];
-    }>;
-    emit: ((event: "change", value: string, cm: Editor) => void) & ((event: "changes", instance: Editor, changes: import("codemirror").EditorChange[]) => void) & ((event: "beforeChange", instance: Editor, changeObj: import("codemirror").EditorChangeCancellable) => void) & ((event: "cursorActivity", instance: Editor) => void) & ((event: "keyHandled", instance: Editor, name: string, eventObj: Event) => void) & ((event: "inputRead", instance: Editor, changeObj: import("codemirror").EditorChange) => void) & ((event: "electricInput", instance: Editor, line: number) => void) & ((event: "beforeSelectionChange", instance: Editor, obj: import("codemirror").EditorSelectionChange) => void) & ((event: "viewportChange", instance: Editor, from: number, to: number) => void) & ((event: "swapDoc", instance: Editor, oldDoc: import("codemirror").Doc) => void) & ((event: "gutterClick", instance: Editor, line: number, gutter: string, clickEvent: Event) => void) & ((event: "gutterContextMenu", instance: Editor, line: number, gutter: string, contextMenuEvent: MouseEvent) => void) & ((event: "focus", instance: Editor, eventObj: FocusEvent) => void) & ((event: "blur", instance: Editor, eventObj: FocusEvent) => void) & ((event: "scroll", instance: Editor) => void) & ((event: "refresh", instance: Editor) => void) & ((event: "optionChange", instance: Editor, option: keyof EditorConfiguration) => void) & ((event: "scrollCursorIntoView", instance: Editor, eventObj: Event) => void) & ((event: "update", instance: Editor) => void) & ((event: "renderLine", instance: Editor, lineHandle: import("codemirror").LineHandle, element: HTMLElement) => void) & ((event: "overwriteToggle", instance: Editor, overwrite: boolean) => void) & ((event: "update:value", value: string) => void) & ((event: "input", value: string) => void) & ((event: "ready", cm: Editor) => void);
     cminstance: Ref<{
@@ -219,8 +179,6 @@ hasFocus: () => boolean;
             <K_2 extends "mousedown" | "dblclick" | "touchstart" | "contextmenu" | "keydown" | "keypress" | "keyup" | "dragstart" | "dragenter" | "dragover" | "dragleave" | "drop">(eventName: K_2, handler: (instance: Editor, event: GlobalEventHandlersEventMap[K_2]) => void): void;
-            <K_3 extends "cut" | "copy" | "paste">(eventName: K_3, handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K_3]) => void): void;
         };
         off: {
             <T_2 extends keyof import("codemirror").EditorEventMap>(eventName: T_2, handler: import("codemirror").EditorEventMap[T_2]): void;
-            <K_4 extends "mousedown" | "dblclick" | "touchstart" | "contextmenu" | "keydown" | "keypress" | "keyup" | "dragstart" | "dragenter" | "dragover" | "dragleave" | "drop">(eventName: K_4, handler: (instance: Editor, event: GlobalEventHandlersEventMap[K_4]) => void): void;
-            <K_5 extends "cut" | "copy" | "paste">(eventName: K_5, handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K_5]) => void): void;
+            <K_3 extends "mousedown" | "dblclick" | "touchstart" | "contextmenu" | "keydown" | "keypress" | "keyup" | "dragstart" | "dragenter" | "dragover" | "dragleave" | "drop">(eventName: K_3, handler: (instance: Editor, event: GlobalEventHandlersEventMap[K_3]) => void): void;
         };
@@ -244,3 +202,3 @@ state: any;
             tags?: {
-                [x: string]: unknown;
+                [key: string]: unknown;
             } | undefined;
@@ -350,291 +308,5 @@ json?: boolean | undefined;
     } | null>;
-    content: Ref<string>;
-    presetModeName: import("vue").ShallowRef<import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any>> | import("vue").ShallowRef<import("vue").FunctionalComponent<any, any>> | import("vue").ShallowRef<{
-        new (...args: any[]): any;
-        __isFragment?: undefined;
-        __isTeleport?: undefined;
-        __isSuspense?: undefined;
-    }>;
-    cmOptions: Ref<{
-        value?: string | {
-            getEditor: () => Editor | null;
-            copy: (copyHistory: boolean) => import("codemirror").Doc;
-            on: <T_3 extends keyof import("codemirror").DocEventMap>(eventName: T_3, handler: import("codemirror").DocEventMap[T_3]) => void;
-            off: <T_4 extends keyof import("codemirror").DocEventMap>(eventName: T_4, handler: import("codemirror").DocEventMap[T_4]) => void;
-            modeOption: string | {
-                highlightNonStandardPropertyKeywords?: boolean | undefined;
-                version?: 2 | 3 | undefined;
-                singleLineStringErrors?: boolean | undefined;
-                hangingIndent?: number | undefined;
-                singleOperators?: unknown;
-                singleDelimiters?: unknown;
-                doubleOperators?: unknown;
-                doubleDelimiters?: unknown;
-                tripleDelimiters?: unknown;
-                identifiers?: unknown;
-                extra_keywords?: string[] | undefined;
-                extra_builtins?: string[] | undefined;
-                useCPP?: boolean | undefined;
-                base?: string | undefined;
-                tags?: {
-                    [x: string]: unknown;
-                } | undefined;
-                json?: boolean | undefined;
-                jsonld?: boolean | undefined;
-                typescript?: boolean | undefined;
-                trackScope?: boolean | undefined;
-                statementIndent?: boolean | undefined;
-                wordCharacters?: unknown;
-                highlightFormatting?: boolean | undefined;
-                maxBlockquoteDepth?: boolean | undefined;
-                xml?: boolean | undefined;
-                fencedCodeBlockHighlighting?: boolean | undefined;
-                fencedCodeBlockDefaultMode?: string | undefined;
-                tokenTypeOverrides?: unknown;
-                allowAtxHeaderWithoutSpace?: boolean | undefined;
-                gitHubSpice?: boolean | undefined;
-                taskLists?: boolean | undefined;
-                strikethrough?: boolean | undefined;
-                emoji?: boolean | undefined;
-                leftDelimiter?: string | undefined;
-                rightDelimiter?: string | undefined;
-                baseMode?: string | undefined;
-                inMathMode?: boolean | undefined;
-                noIndentKeywords?: unknown;
-                atoms?: unknown;
-                hooks?: unknown;
-                multiLineStrings?: boolean | undefined;
-                htmlMode?: boolean | undefined;
-                matchClosing?: boolean | undefined;
-                alignCDATA?: boolean | undefined;
-                name: string;
-            };
-            getValue: (seperator?: string | undefined) => string;
-            setValue: (content: string) => void;
-            getRange: (from: import("codemirror").Position, to: import("codemirror").Position, seperator?: string | undefined) => string;
-            replaceRange: (replacement: string | string[], from: import("codemirror").Position, to?: import("codemirror").Position | undefined, origin?: string | undefined) => void;
-            getLine: (n: number) => string;
-            setLine: (n: number, text: string) => void;
-            removeLine: (n: number) => void;
-            lineCount: () => number;
-            firstLine: () => number;
-            lastLine: () => number;
-            getLineHandle: (num: number) => import("codemirror").LineHandle;
-            getLineNumber: (handle: import("codemirror").LineHandle) => number | null;
-            eachLine: {
-                (f: (line: import("codemirror").LineHandle) => void): void;
-                (start: number, end: number, f: (line: import("codemirror").LineHandle) => void): void;
-            };
-            markClean: () => void;
-            changeGeneration: (closeEvent?: boolean | undefined) => number;
-            isClean: (generation?: number | undefined) => boolean;
-            getSelection: () => string;
-            getSelections: (lineSep?: string | undefined) => string[];
-            replaceSelection: (replacement: string, collapse?: string | undefined) => void;
-            replaceSelections: (replacements: string[], collapse?: string | undefined) => void;
-            getCursor: (start?: string | undefined) => import("codemirror").Position;
-            listSelections: () => import("codemirror").Range[];
-            somethingSelected: () => boolean;
-            setCursor: (pos: number | import("codemirror").Position, ch?: number | undefined, options?: {
-                bias?: number | undefined;
-                origin?: string | undefined;
-                scroll?: boolean | undefined;
-            } | undefined) => void;
-            setSelection: (anchor: import("codemirror").Position, head?: import("codemirror").Position | undefined, options?: {
-                bias?: number | undefined;
-                origin?: string | undefined;
-                scroll?: boolean | undefined;
-            } | undefined) => void;
-            setSelections: (ranges: {
-                anchor: import("codemirror").Position;
-                head: import("codemirror").Position;
-            }[], primary?: number | undefined, options?: import("codemirror").SelectionOptions | undefined) => void;
-            addSelection: (anchor: import("codemirror").Position, head?: import("codemirror").Position | undefined) => void;
-            extendSelection: (from: import("codemirror").Position, to?: import("codemirror").Position | undefined, options?: import("codemirror").SelectionOptions | undefined) => void;
-            extendSelections: (heads: import("codemirror").Position[], options?: import("codemirror").SelectionOptions | undefined) => void;
-            extendSelectionsBy: (f: (range: import("codemirror").Range) => import("codemirror").Position) => void;
-            setExtending: (value: boolean) => void;
-            getExtending: () => boolean;
-            linkedDoc: (options: {
-                sharedHist?: boolean | undefined;
-                from?: number | undefined;
-                to?: number | undefined;
-                mode?: string | import("codemirror").ModeSpec<import("codemirror").ModeSpecOptions> | undefined;
-            }) => import("codemirror").Doc;
-            unlinkDoc: (doc: import("codemirror").Doc) => void;
-            iterLinkedDocs: (fn: (doc: import("codemirror").Doc, sharedHist: boolean) => void) => void;
-            undo: () => void;
-            redo: () => void;
-            undoSelection: () => void;
-            redoSelection: () => void;
-            historySize: () => {
-                undo: number;
-                redo: number;
-            };
-            clearHistory: () => void;
-            getHistory: () => any;
-            setHistory: (history: any) => void;
-            markText: (from: import("codemirror").Position, to: import("codemirror").Position, options?: import("codemirror").TextMarkerOptions | undefined) => import("codemirror").TextMarker<import("codemirror").MarkerRange>;
-            setBookmark: (pos: import("codemirror").Position, options?: {
-                widget?: HTMLElement | undefined;
-                insertLeft?: boolean | undefined;
-                shared?: boolean | undefined;
-                handleMouseEvents?: boolean | undefined;
-            } | undefined) => import("codemirror").TextMarker<import("codemirror").Position>;
-            findMarks: (from: import("codemirror").Position, to: import("codemirror").Position) => import("codemirror").TextMarker<import("codemirror").Position | import("codemirror").MarkerRange>[];
-            findMarksAt: (pos: import("codemirror").Position) => import("codemirror").TextMarker<import("codemirror").Position | import("codemirror").MarkerRange>[];
-            getAllMarks: () => import("codemirror").TextMarker<import("codemirror").Position | import("codemirror").MarkerRange>[];
-            addLineWidget: (line: any, node: HTMLElement, options?: import("codemirror").LineWidgetOptions | undefined) => import("codemirror").LineWidget;
-            removeLineWidget: (widget: import("codemirror").LineWidget) => void;
-            getMode: () => import("codemirror").Mode<unknown>;
-            lineSeparator: () => string;
-            posFromIndex: (index: number) => import("codemirror").Position;
-            indexFromPos: (object: import("codemirror").Position) => number;
-            state: any;
-        } | undefined;
-        mode?: string | {
-            highlightNonStandardPropertyKeywords?: boolean | undefined;
-            version?: 2 | 3 | undefined;
-            singleLineStringErrors?: boolean | undefined;
-            hangingIndent?: number | undefined;
-            singleOperators?: unknown;
-            singleDelimiters?: unknown;
-            doubleOperators?: unknown;
-            doubleDelimiters?: unknown;
-            tripleDelimiters?: unknown;
-            identifiers?: unknown;
-            extra_keywords?: string[] | undefined;
-            extra_builtins?: string[] | undefined;
-            useCPP?: boolean | undefined;
-            base?: string | undefined;
-            tags?: {
-                [x: string]: unknown;
-            } | undefined;
-            json?: boolean | undefined;
-            jsonld?: boolean | undefined;
-            typescript?: boolean | undefined;
-            trackScope?: boolean | undefined;
-            statementIndent?: boolean | undefined;
-            wordCharacters?: unknown;
-            highlightFormatting?: boolean | undefined;
-            maxBlockquoteDepth?: boolean | undefined;
-            xml?: boolean | undefined;
-            fencedCodeBlockHighlighting?: boolean | undefined;
-            fencedCodeBlockDefaultMode?: string | undefined;
-            tokenTypeOverrides?: unknown;
-            allowAtxHeaderWithoutSpace?: boolean | undefined;
-            gitHubSpice?: boolean | undefined;
-            taskLists?: boolean | undefined;
-            strikethrough?: boolean | undefined;
-            emoji?: boolean | undefined;
-            leftDelimiter?: string | undefined;
-            rightDelimiter?: string | undefined;
-            baseMode?: string | undefined;
-            inMathMode?: boolean | undefined;
-            noIndentKeywords?: unknown;
-            atoms?: unknown;
-            hooks?: unknown;
-            multiLineStrings?: boolean | undefined;
-            htmlMode?: boolean | undefined;
-            matchClosing?: boolean | undefined;
-            alignCDATA?: boolean | undefined;
-            name: string;
-        } | undefined;
-        lineSeparator?: string | null | undefined;
-        theme?: string | undefined;
-        indentUnit?: number | undefined;
-        smartIndent?: boolean | undefined;
-        tabSize?: number | undefined;
-        indentWithTabs?: boolean | undefined;
-        electricChars?: boolean | undefined;
-        specialChars?: {
-            exec: (string: string) => RegExpExecArray | null;
-            test: (string: string) => boolean;
-            readonly source: string;
-            readonly global: boolean;
-            readonly ignoreCase: boolean;
-            readonly multiline: boolean;
-            lastIndex: number;
-            compile: (pattern: string, flags?: string | undefined) => RegExp;
-            readonly flags: string;
-            readonly sticky: boolean;
-            readonly unicode: boolean;
-            readonly dotAll: boolean;
-            [Symbol.match]: (string: string) => RegExpMatchArray | null;
-            [Symbol.replace]: {
-                (string: string, replaceValue: string): string;
-                (string: string, replacer: (substring: string, ...args: any[]) => string): string;
-            };
-            [Symbol.search]: (string: string) => number;
-            [Symbol.split]: (string: string, limit?: number | undefined) => string[];
-            [Symbol.matchAll]: (str: string) => IterableIterator<RegExpMatchArray>;
-        } | undefined;
-        specialCharPlaceholder?: ((char: string) => HTMLElement) | undefined;
-        direction?: "ltr" | "rtl" | undefined;
-        rtlMoveVisually?: boolean | undefined;
-        keyMap?: string | undefined;
-        extraKeys?: string | {
-            [x: string]: string | false | ((instance: Editor) => void | {
-                toString(): "CodeMirror.PASS";
-            });
-        } | undefined;
-        configureMouse?: ((cm: Editor, repeat: "single" | "double" | "triple", event: Event) => import("codemirror").MouseSelectionConfiguration) | undefined;
-        lineWrapping?: boolean | undefined;
-        lineNumbers?: boolean | undefined;
-        firstLineNumber?: number | undefined;
-        lineNumberFormatter?: ((line: number) => string) | undefined;
-        gutters?: (string | {
-            className: string;
-            style?: string | undefined;
-        })[] | undefined;
-        fixedGutter?: boolean | undefined;
-        scrollbarStyle?: keyof import("codemirror").ScrollbarModels | undefined;
-        coverGutterNextToScrollbar?: boolean | undefined;
-        inputStyle?: import("codemirror").InputStyle | undefined;
-        readOnly?: boolean | "nocursor" | undefined;
-        screenReaderLabel?: string | undefined;
-        showCursorWhenSelecting?: boolean | undefined;
-        lineWiseCopyCut?: boolean | undefined;
-        pasteLinesPerSelection?: boolean | undefined;
-        selectionsMayTouch?: boolean | undefined;
-        undoDepth?: number | undefined;
-        historyEventDelay?: number | undefined;
-        tabindex?: number | undefined;
-        autofocus?: boolean | undefined;
-        phrases?: {
-            [x: string]: unknown;
-        } | undefined;
-        dragDrop?: boolean | undefined;
-        allowDropFileTypes?: string[] | null | undefined;
-        onDragEvent?: ((instance: Editor, event: DragEvent) => boolean) | undefined;
-        onKeyEvent?: ((instance: Editor, event: KeyboardEvent) => boolean) | undefined;
-        cursorBlinkRate?: number | undefined;
-        cursorScrollMargin?: number | undefined;
-        cursorHeight?: number | undefined;
-        resetSelectionOnContextMenu?: boolean | undefined;
-        workTime?: number | undefined;
-        workDelay?: number | undefined;
-        pollInterval?: number | undefined;
-        flattenSpans?: boolean | undefined;
-        addModeClass?: boolean | undefined;
-        maxHighlightLength?: number | undefined;
-        viewportMargin?: number | undefined;
-        spellcheck?: boolean | undefined;
-        autocorrect?: boolean | undefined;
-        autocapitalize?: boolean | undefined;
-    }>;
-    internalInstance: import("vue").ComponentInternalInstance | null;
-    instanceName: string | undefined;
-    presetRef: Ref<null>;
-    realCminstance: import("vue").ComputedRef<Editor>;
+    resize: (width?: string | number | null, height?: string | number | null) => void;
     refresh: () => void;
-    resize: (width?: string | number | null, height?: string | number | null) => void;
     destroy: () => void;
-    containerHeight: Ref<string | null>;
-    reviseStyle: () => void;
-    listenerEvents: () => void;
-    unseenLineMarkers: () => void;
-    onCodeChange: (newVal: string) => void;
-    ready: () => void;
-    handlePresetModeName: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -668,31 +340,68 @@ changes: (instance: Editor, changes: import("codemirror").EditorChange[]) => void;
     ready: (cm: Editor) => Editor;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    value?: unknown;
-    options?: unknown;
-    globalOptions?: unknown;
-    placeholder?: unknown;
-    border?: unknown;
-    width?: unknown;
-    height?: unknown;
-    originalStyle?: unknown;
-    keepCursorInEnd?: unknown;
-    merge?: unknown;
-    name?: unknown;
-    marker?: unknown;
-    unseenLines?: unknown;
-} & {
-    value: string;
-    options: EditorConfiguration;
-    globalOptions: EditorConfiguration;
-    placeholder: string;
-    border: boolean;
-    width: string | number | null;
-    height: string | number | null;
-    originalStyle: boolean;
-    keepCursorInEnd: boolean;
-    merge: boolean;
-    name: string;
-    marker: () => HTMLElement;
-    unseenLines: any[];
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: PropType<EditorConfiguration>;
+        default: () => {
+            mode: string;
+            theme: string;
+            lineNumbers: boolean;
+            smartIndent: boolean;
+            indentUnit: number;
+        };
+    };
+    globalOptions: {
+        type: PropType<EditorConfiguration>;
+        default: () => {
+            mode: string;
+            theme: string;
+            lineNumbers: boolean;
+            smartIndent: boolean;
+            indentUnit: number;
+        };
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    border: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    width: {
+        type: PropType<string | number | null>;
+        default: null;
+    };
+    height: {
+        type: PropType<string | number | null>;
+        default: null;
+    };
+    originalStyle: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    keepCursorInEnd: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    merge: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    name: {
+        type: PropType<string>;
+        default: string;
+    };
+    marker: {
+        type: PropType<() => HTMLElement>;
+        default: () => null;
+    };
+    unseenLines: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+}>> & {
     onChange?: ((value: string, cm: Editor) => any) | undefined;
@@ -699,0 +408,0 @@ onChanges?: ((instance: Editor, changes: import("codemirror").EditorChange[]) => any) | undefined;

dist/packages/src/components/presetMode/default/index.vue.d.ts

 import type { PropType } from "vue";
 import type { Editor, EditorConfiguration } from "codemirror";
-declare const _default: import("vue").DefineComponent<{
+declare const _sfc_main: import("vue").DefineComponent<{
     name: {
@@ -29,3 +29,3 @@ type: PropType<string>;
 }, {
-    textarea: import("vue").Ref<any>;
+    textarea: globalThis.Ref<any>;
     initialize: () => void;
@@ -35,17 +35,28 @@ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:cminstance": (instance: Editor) => Editor | null;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name?: unknown;
-    value?: unknown;
-    content?: unknown;
-    options?: unknown;
-    cminstance?: unknown;
-    placeholder?: unknown;
-} & {
-    value: string;
-    options: EditorConfiguration;
-    placeholder: string;
-    name: string;
-    content: string;
-    cminstance: Editor | null;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: PropType<string>;
+        default: string;
+    };
+    value: {
+        type: PropType<string>;
+        default: string;
+    };
+    content: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: PropType<EditorConfiguration>;
+        default: () => {};
+    };
+    cminstance: {
+        type: PropType<Editor | null>;
+        default: () => null;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+}>> & {
     onReady?: ((instance: Editor) => any) | undefined;
@@ -58,5 +69,5 @@ "onUpdate:cminstance"?: ((instance: Editor) => any) | undefined;
     name: string;
+    cminstance: Editor | null;
     content: string;
-    cminstance: Editor | null;
 }>;
-export default _default;
+export default _sfc_main;

dist/packages/src/components/presetMode/log/index.vue.d.ts

 import type { PropType } from "vue";
 import type { Editor } from "codemirror";
-declare const _default: import("vue").DefineComponent<{
+declare const _sfc_main: import("vue").DefineComponent<{
     value: {
@@ -26,16 +26,25 @@ type: PropType<string>;
     initialize: () => void;
-    textarea: import("vue").Ref<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:cminstance" | "ready")[], "ready" | "update:cminstance", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    value?: unknown;
-    name?: unknown;
-    options?: unknown;
-    cminstance?: unknown;
-    placeholder?: unknown;
-} & {
-    value: string;
-    options: Record<string, any>;
-    placeholder: string;
-    name: string;
-    cminstance: Editor | null;
-} & {}> & {
+    textarea: globalThis.Ref<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("ready" | "update:cminstance")[], "ready" | "update:cminstance", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string>;
+        default: string;
+    };
+    name: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    cminstance: {
+        type: PropType<Editor | null>;
+        default: () => {};
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
     onReady?: ((...args: any[]) => any) | undefined;
@@ -50,2 +59,2 @@ "onUpdate:cminstance"?: ((...args: any[]) => any) | undefined;
 }>;
-export default _default;
+export default _sfc_main;

dist/packages/src/components/presetMode/log/utils.d.ts

@@ -11,3 +11,3 @@ export interface MarkStates {
 }
-export declare type logErrorTypes = keyof typeof logErrorType;
+export type logErrorTypes = keyof typeof logErrorType;
 /**
@@ -14,0 +14,0 @@ * Get Local time, format:  HH:mm:ss

dist/packages/src/components/presetMode/Merge/index.vue.d.ts

 import type { Editor, EditorConfiguration } from "codemirror";
 import type { PropType } from "vue";
-declare const _default: import("vue").DefineComponent<{
+declare const _sfc_main: import("vue").DefineComponent<{
     options: {
@@ -13,11 +13,14 @@ type: PropType<EditorConfiguration>;
 }, {
-    mergeView: import("vue").Ref<HTMLElement | undefined>;
+    mergeView: globalThis.Ref<HTMLElement | undefined>;
     initialize: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:cminstance" | "ready")[], "ready" | "update:cminstance", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    options?: unknown;
-    cminstance?: unknown;
-} & {
-    options: EditorConfiguration;
-    cminstance: Editor | null;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("ready" | "update:cminstance")[], "ready" | "update:cminstance", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<EditorConfiguration>;
+        default: () => {};
+    };
+    cminstance: {
+        type: PropType<Editor | null>;
+        default: () => {};
+    };
+}>> & {
     onReady?: ((...args: any[]) => any) | undefined;
@@ -29,2 +32,2 @@ "onUpdate:cminstance"?: ((...args: any[]) => any) | undefined;
 }>;
-export default _default;
+export default _sfc_main;

dist/packages/src/config/index.d.ts

 import { Editor, EditorEventMap } from "codemirror";
-export declare type EditorEventNames = Exclude<keyof EditorEventMap, "change">;
+export type EditorEventNames = Exclude<keyof EditorEventMap, "change">;
 interface EditorEventMapWithChange extends EditorEventMap {
@@ -4,0 +4,0 @@ keyHandled: (instance: Editor, name: string, eventObj: Event) => void;

package.json

 {
   "name": "codemirror-editor-vue3",
   "description": "CodeMirror component for Vue3",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "license": "MIT",
@@ -31,3 +31,3 @@ "files": [
   },
-  "homepage": "https://renncheung.github.io/codemirror-editor-vue3/index.html",
+  "homepage": "https://renncheung.github.io/codemirror-editor-vue3/en/guide/getting-started",
   "unpkg": "dist/codemirror-editor-vue3.js",
@@ -76,33 +76,32 @@ "jsnext:main": "dist/codemirror-editor-vue3.js",
     "@types/node": "^16.11.13",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "@vitejs/plugin-vue": "^2.0.1",
-    "@vitejs/plugin-vue-jsx": "^1.3.7",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/cli-plugin-typescript": "~4.5.15",
-    "@vue/compiler-sfc": "^3.2.26",
-    "@vueuse/core": "^7.3.0",
+    "@vueuse/core": "^9.13.0",
     "dedent": "^0.7.0",
     "diff-match-patch": "^1.0.5",
-    "eslint": "^8.7.0",
+    "eslint": "^8.35.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.3.0",
-    "less": "^4.1.2",
-    "prettier": "^2.5.1",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.9.0",
+    "less": "^4.1.3",
+    "prettier": "^2.8.4",
     "rollup-plugin-cpy": "^2.0.1",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.5.4",
-    "unplugin-auto-import": "^0.5.11",
-    "vite": "^2.7.2",
-    "vite-plugin-checker": "^0.4.2",
-    "vite-plugin-dts": "^1.2.0",
-    "vite-plugin-pages": "^0.22.0",
-    "vite-plugin-windicss": "^1.8.3",
-    "vitepress": "^0.22.3",
-    "vue": "^3.2.26",
-    "vue-router": "^4.0.14",
-    "vue-tsc": "^0.3.0",
-    "windicss": "^3.5.1",
+    "typescript": "^4.9.5",
+    "unplugin-auto-import": "^0.15.0",
+    "vite": "^4.1.4",
+    "vite-plugin-checker": "^0.5.6",
+    "vite-plugin-dts": "^2.0.2",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-windicss": "^1.8.10",
+    "vitepress": "1.0.0-alpha.49",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vue-tsc": "^1.2.0",
+    "windicss": "^3.5.6",
     "chalk": "^4.1.2",
@@ -109,0 +108,0 @@ "conventional-changelog-cli": "^2.0.31",

README.md

@@ -8,23 +8,25 @@ [![GitHub stars](https://img.shields.io/github/stars/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3/stargazers)
 
-### Introduction
+# Introduction
 
-The plug-in is based on [Codemirror](http://codemirror.net/) 5 and only supports Vue 3. In addition to the modes supported by codemirror, this plugin also supports custom log modes.
+The codemirror component of vue3. This component is developed based on [Codemirror 5](http://codemirror.net/5/) and only vue3 is supported. 
 
-For complete documentation and more cases, please check [codemirror-editor-vue3-docs](https://renncheung.github.io/codemirror-editor-vue3/index.html).(Currently only Chinese version, English version is under planning)
+In addition to the officially supported modes, the log output presentation mode is added, out of the box, but not necessarily suitable for all scenarios.
 
-### Install
+For complete documentation and more cases, please check [codemirror-editor-vue3 docs](https://renncheung.github.io/codemirror-editor-vue3/en/guide/getting-started).
 
+## Install
+
 ```bash
-npm install codemirror-editor-vue3 -S
+npm install codemirror-editor-vue3 codemirror@5.6.0 -S
 ```
 
 ```bash
-yarn add codemirror-editor-vue3
+yarn add codemirror-editor-vue3 codemirror@5.6.0
 ```
 
 ```bash
-pnpm i codemirror-editor-vue3 codemirror -S
+pnpm i codemirror-editor-vue3 codemirror@5.6.0 -S
 ```
 
-### Use in the global
+## Register global component
 
@@ -45,3 +47,3 @@ > **Do not recommend global registration components**, which will result in the type of prompt on the template that cannot be properly obtained.
 
-custom component name:
+The global registered component name is Codemirror or you can customize a component name, for example:
 
@@ -52,3 +54,3 @@ ```js
 
-### Use in components
+## Use in components
 
@@ -70,5 +72,9 @@ ```vue
 
+// placeholder
+import "codemirror/addon/display/placeholder.js";
+
 // language
 import "codemirror/mode/javascript/javascript.js";
-
+// placeholder
+import "codemirror/addon/display/placeholder.js";
 // theme
@@ -93,7 +99,2 @@ import "codemirror/theme/dracula.css";
         theme: "dracula", // Theme
-        lineNumbers: true, // Show line number
-        smartIndent: true, // Smart indent
-        indentUnit: 2, // The smart indent unit is 2 spaces in length
-        foldGutter: true, // Code folding
-        styleActiveLine: true, // Display the style of the selected row
       },
@@ -106,28 +107,72 @@ };
 
-### Get codemirror instance object
+## Component Props
 
-[View code](https://renncheung.github.io/codemirror-editor-vue3/instructions/cminstance.html)
+[cm_config_url]: https://codemirror.net/doc/manual.html#config
+[cm_editor_type_url]: https://codemirror.net/doc/manual.html#config
+[default_options_url]: https://github.com/RennCheung/codemirror-editor-vue3/blob/main/packages/src/config/index.ts#L68
 
-### use [Codemirror Static property](https://codemirror.net/doc/manual.html#api_static)
+| name              |                            description                            | type                         |                 default                 | 
+| ----------------- | :--------------------------------------------------------: | :--------------------------- | :------------------------------------: | 
+| **value(v-model)**  |                         Editor content                         | `string`                     |                   ""                   |  
+| **options**         |            [Configuration options of codemirror5][cm_config_url]            | [EditorConfiguration][cm_editor_type_url] | [DEFAULT_OPTIONS][default_options_url] |  
+| **placeholder**     |         Editor placeholder content to introduce codemirror related files         | `string`                     |                   ""                    | 
+| **border**          |                         Whether to display editor borders                         | `boolean`                    |                `false`                 | 
+| **width**           |                   width               | `string`                     |                `100%  `                | 
+| **height**          |                         height                         | `string`                     |                `100%  `                | 
+| **original-style**  | Using the original style, disable the second modification of the style for this component (but does not affect width, height, and border) | ` boolean`                   |                `false`                 | 
+| **KeepCursorInEnd** |      Always keep the mouse position on the last line      | `boolean`                    |                `false`                 | 
+| **merge**           |                         merge mode, can also be used as diff pattern                      | `boolean`                    |                `false`                 | 
+| *name*            |             Name, which is passed to the textarea inside the component(This is useless🙃)            | `string`                     |          -           | 
 
-```js
-import { CodeMirror } from "codemirror-editor-vue3";
-CodeMirror.Pos(0, 5);
-```
 
-`or:`
+## Events
+### Component Events
+> The following three are only the events encapsulated by this component. Please refer to more events [Codemirror Events](./events#codemirror-events)
 
-```js
-import _CodeMirror from "codemirror";
-_CodeMirror.Pos(0, 5);
+| event name |          description           | params                              |
+| -------- | :---------------------: | :------------------------------------ |
+| `change` |   value or instance changes    | `(value: string, cm: Editor) => void` |
+| `input`  |          input          | `(value: string) => void`             |
+| `ready`  | The Codemirror component is mounted | `(cm: Editor) => void;`               |
+
+---
+
+### Codemirror Events
+
+The following events are official events of Codemirror5. You can refer to the official documents for details [Codemirror Event](https://codemirror.net/doc/manual.html#events)，You can use this component to bind events directly through components, for example：
+
+```vue {8-10}
+<Codemirror
+  v-model:value="code"
+  :options="{ mode: 'text/x-vue', theme: 'default' }"
+  border
+  placeholder="test-placeholder"
+  :height="200"
+  @change="onChange"
+  @blur="onBlur"
+  @focus="onFocus"
+  @scroll="onScroll"
+/>
 ```
 
-### Other instructions
+> All event names are as follows：
 
-The codemirror basic style has been introduced inside the `codemirror-editor-vue3` plugin, and there is no need to repeatedly introduce the following styles when using:
+- `changes`
+- `scroll`
+- `beforeChange`
+- `cursorActivity`
+- `keyHandled`
+- `inputRead`
+- `electricInput`
+- `beforeSelectionChange`
+- `viewportChange`
+- `swapDoc`
+- `gutterClick`
+- `gutterContextMenu`
+- `focus`
+- `blur`
+- `refresh`
+- `optionChange`
+- `scrollCursorIntoView`
+- `update`
 
-```js
-// base style
-import "codemirror/lib/codemirror.css";
-import "codemirror/mode/css/css.js";
-```

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

43

-2.27%

Number of lines in readme file

173

35.16%

Worsened metrics

Total package byte prevSize

63876

-38.32%

Number of package files

18

-10%

Lines of code

920

-53.63%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes