vue-codemirror6
Version:
CodeMirror6 Component for vue2 and vue3.
14 lines (12 loc) • 6.97 kB
JavaScript
/**
* vue-codemirror6
*
* @description CodeMirror6 Component for vue2 and vue3.
* @author Logue <logue@hotmail.co.jp>
* @copyright 2022-2025 By Masashi Yoshikawa All rights reserved.
* @license MIT
* @version 1.3.12
* @see {@link https://github.com/logue/vue-codemirror6}
*/
(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("@codemirror/commands"),require("@codemirror/language"),require("@codemirror/lint"),require("@codemirror/state"),require("@codemirror/view"),require("codemirror"),require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","@codemirror/commands","@codemirror/language","@codemirror/lint","@codemirror/state","@codemirror/view","codemirror","vue-demi"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l.CodeMirror={},l.commands,l.language,l.lint,l.state,l.view,l.codemirror,l.VueDemi))})(this,function(l,f,E,v,r,s,p,o){"use strict";const O={version:"1.3.12",date:"2025-03-31T11:10:32.144Z"},M=e=>e?Object.entries(e).reduce((d,[i,u])=>(i=i.charAt(0).toUpperCase()+i.slice(1),i=`on${i}`,{...d,[i]:u}),{}):{};function w(e,d={},i){if(o.isVue2)return o.h(e,d,i);const{props:u,domProps:t,on:m,...h}=d,g=m?M(m):{};return o.h(e,{...h,...u,...t,...g},i)}const B=e=>typeof e=="function"?e():e;var C=o.defineComponent({name:"CodeMirror",model:{prop:"modelValue",event:"update:modelValue"},props:{modelValue:{type:String,default:""},theme:{type:Object,default:()=>({})},dark:{type:Boolean,default:!1},basic:{type:Boolean,default:!1},minimal:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},wrap:{type:Boolean,default:!1},tab:{type:Boolean,default:!1},indentUnit:{type:String,default:void 0},allowMultipleSelections:{type:Boolean,default:!1},tabSize:{type:Number,default:void 0},lineSeparator:{type:String,default:void 0},readonly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},extensions:{type:Array,default:()=>[]},phrases:{type:Object,default:()=>{}},lang:{type:Object,default:()=>{}},linter:{type:Function,default:void 0},linterConfig:{type:Object,default:()=>({})},forceLinting:{type:Boolean,default:!1},gutter:{type:Boolean,default:!1},gutterConfig:{type:Object,default:()=>{}},tag:{type:String,default:"div"},scrollIntoView:{type:Boolean,default:!0}},emits:{"update:modelValue":(e="")=>!0,update:e=>!0,ready:e=>!0,focus:e=>!0,change:e=>!0,destroy:()=>!0},setup(e,d){const i=o.ref(),u=o.ref(e.modelValue),t=o.shallowRef(new s.EditorView),m=o.computed({get:()=>t.value.hasFocus,set:a=>{a&&t.value.focus()}}),h=o.computed({get:()=>t.value.state.selection,set:a=>t.value.dispatch({selection:a})}),g=o.computed({get:()=>t.value.state.selection.main.head,set:a=>t.value.dispatch({selection:{anchor:a}})}),j=o.computed({get:()=>t.value.state.toJSON(),set:a=>t.value.setState(r.EditorState.fromJSON(a))}),b=o.ref(0),S=o.ref(0),y=o.computed(()=>{const a=new r.Compartment,n=new r.Compartment;if(e.basic&&e.minimal)throw"[Vue CodeMirror] Both basic and minimal cannot be specified.";return[e.basic&&!e.minimal?p.basicSetup:void 0,e.minimal&&!e.basic?p.minimalSetup:void 0,s.EditorView.updateListener.of(c=>{d.emit("focus",t.value.hasFocus),b.value=t.value.state.doc?.length,!(c.changes.empty||!c.docChanged)&&(e.linter&&(e.forceLinting&&v.forceLinting(t.value),S.value=e.linter(t.value).length),d.emit("update",c))}),s.EditorView.theme(e.theme,{dark:e.dark}),e.wrap?s.EditorView.lineWrapping:void 0,e.tab?s.keymap.of([f.indentWithTab]):void 0,e.indentUnit?E.indentUnit.of(e.indentUnit):void 0,r.EditorState.allowMultipleSelections.of(e.allowMultipleSelections),e.tabSize?n.of(r.EditorState.tabSize.of(e.tabSize)):void 0,e.phrases?r.EditorState.phrases.of(e.phrases):void 0,r.EditorState.readOnly.of(e.readonly),s.EditorView.editable.of(!e.disabled),e.lineSeparator?r.EditorState.lineSeparator.of(e.lineSeparator):void 0,e.lang?a.of(e.lang):void 0,e.linter?v.linter(e.linter,e.linterConfig):void 0,e.linter&&e.gutter?v.lintGutter(e.gutterConfig):void 0,e.placeholder?s.placeholder(e.placeholder):void 0,...e.extensions].filter(c=>!!c)});o.watch(y,a=>{t.value?.dispatch({effects:r.StateEffect.reconfigure.of(a)})},{immediate:!0}),o.watch(()=>e.modelValue,async a=>{if(t.value.composing||t.value.state.doc.toJSON().join(e.lineSeparator??`
`)===a)return;const n=!t.value.state.selection.ranges.every(c=>c.anchor<a.length&&c.head<a.length);t.value.dispatch({changes:{from:0,to:t.value.state.doc.length,insert:a},selection:n?{anchor:0,head:0}:t.value.state.selection,scrollIntoView:e.scrollIntoView})},{immediate:!0}),o.onMounted(async()=>{let a=u.value;i.value&&(i.value.childNodes[0]&&(u.value!==""&&console.warn("[CodeMirror.vue] The <code-mirror> tag contains child elements that overwrite the `v-model` values."),a=i.value.childNodes[0].innerText.trim()),t.value=new s.EditorView({parent:i.value,state:r.EditorState.create({doc:a,extensions:y.value}),dispatch:n=>{t.value.update([n]),!(n.changes.empty||!n.docChanged)&&(d.emit("update:modelValue",n.state.doc.toString()??""),d.emit("change",n.state))}}),await o.nextTick(),d.emit("ready",{view:t.value,state:t.value.state,container:i.value}))}),o.onUnmounted(()=>{t.value.destroy(),d.emit("destroy")});const _=()=>{!e.linter||!t.value||(e.forceLinting&&v.forceLinting(t.value),S.value=v.diagnosticCount(t.value.state))},q=()=>{t.value?.dispatch({effects:r.StateEffect.reconfigure.of([])}),t.value?.dispatch({effects:r.StateEffect.appendConfig.of(y.value)})},L=(a,n)=>t.value.state.sliceDoc(a,n),T=a=>t.value.state.doc.line(a+1).text,x=()=>t.value.state.doc.lines,N=()=>t.value.state.selection.main.head,U=()=>{let a;return(a=t.value.state.selection.ranges)!==null&&a!==void 0?a:[]},z=()=>{let a;return(a=t.value.state.sliceDoc(t.value.state.selection.main.from,t.value.state.selection.main.to))!==null&&a!==void 0?a:""},R=()=>{const a=t.value.state;return a?a.selection.ranges.map(n=>a.sliceDoc(n.from,n.to)):[]},F=()=>t.value.state.selection.ranges.some(a=>!a.empty),I=(a,n,c)=>t.value.dispatch({changes:{from:n,to:c,insert:a}}),J=a=>t.value.dispatch(t.value.state.replaceSelection(a)),A=a=>t.value.dispatch({selection:{anchor:a}}),P=(a,n)=>t.value.dispatch({selection:{anchor:a,head:n}}),W=(a,n)=>t.value.dispatch({selection:r.EditorSelection.create(a,n)}),G=a=>t.value.dispatch({selection:r.EditorSelection.create(h.value.ranges.map(n=>n.extend(a(n))))}),V={editor:i,view:t,cursor:g,selection:h,focus:m,length:b,json:j,diagnosticCount:S,dom:t.value.contentDOM,lint:_,forceReconfigure:q,getRange:L,getLine:T,lineCount:x,getCursor:N,listSelections:U,getSelection:z,getSelections:R,somethingSelected:F,replaceRange:I,replaceSelection:J,setCursor:A,setSelection:P,setSelections:W,extendSelectionsBy:G};return d.expose(V),V},render(){return w(this.$props.tag,{ref:"editor",class:"vue-codemirror"},this.$slots.default?w("aside",{style:"display: none;","aria-hidden":"true"},B(this.$slots.default)):void 0)}});const $=e=>e.component("CodeMirror",C);l.Meta=O,l.default=C,l.install=$,Object.defineProperty(l,"__esModule",{value:!0})});