UNPKG

vue-codemirror6

Version:

CodeMirror6 Component for vue2 and vue3.

13 lines (12 loc) 6.92 kB
/** * vue-codemirror6 * * @description CodeMirror6 Component for vue2 and vue3. * @author Logue <logue@hotmail.co.jp> * @copyright 2022-2026 By Masashi Yoshikawa All rights reserved. * @license MIT * @version 1.5.2 * @see {@link https://github.com/logue/vue-codemirror6} */ var CodeMirror=(function(e,t,n,r,i,a,o,s){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var c={version:`1.5.2`,date:`2026-05-01T12:27:43.027Z`},l=e=>e?Object.entries(e).reduce((e,[t,n])=>(t=t.charAt(0).toUpperCase()+t.slice(1),t=`on${t}`,{...e,[t]:n}),{}):{};function u(e,t={},n){if(s.isVue2)return(0,s.h)(e,t,n);let{props:r,domProps:i,on:a,...o}=t,c=a?l(a):{};return(0,s.h)(e,{...o,...r,...i,...c},n)}var d=e=>typeof e==`function`?e():e??[],f=(0,s.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:void 0},lang:{type:Object,default:void 0},linter:{type:Function,default:void 0},linterConfig:{type:Object,default:()=>({})},forceLinting:{type:Boolean,default:!1},gutter:{type:Boolean,default:!1},gutterConfig:{type:Object,default:void 0},tag:{type:String,default:`div`},scrollIntoView:{type:Boolean,default:!0},preserveScrollPosition:{type:Boolean,default:!1},keymap:{type:Array,default:()=>[]}},emits:{"update:modelValue":(e=``)=>!0,update:e=>!0,ready:e=>!0,focus:e=>!0,change:e=>!0,destroy:()=>!0},setup(e,c){let l=(0,s.ref)(),u=(0,s.ref)(e.modelValue),d=(0,s.shallowRef)(void 0),f=(0,s.computed)({get:()=>d.value?.hasFocus??!1,set:e=>{e&&d.value&&d.value.focus()}}),p=(0,s.computed)({get:()=>d.value?.state.selection,set:e=>{d.value&&e&&d.value.dispatch({selection:e})}}),m=(0,s.computed)({get:()=>d.value?.state.selection.main.head??0,set:e=>{d.value&&d.value.dispatch({selection:{anchor:e}})}}),h=(0,s.computed)({get:()=>d.value?.state.toJSON(),set:e=>{d.value&&e&&d.value.setState(i.EditorState.fromJSON(e))}}),g=(0,s.ref)(0),_=(0,s.ref)(0),v=(0,s.computed)(()=>{let s=new i.Compartment,l=new i.Compartment;if(e.basic&&e.minimal)throw Error(`[Vue CodeMirror] Both basic and minimal cannot be specified.`);let u=[];return e.keymap&&e.keymap.length>0&&(u=e.keymap),e.tab&&u.push(t.indentWithTab),[e.basic&&!e.minimal?o.basicSetup:void 0,e.minimal&&!e.basic?o.minimalSetup:void 0,a.EditorView.updateListener.of(t=>{d.value&&(c.emit(`focus`,d.value.hasFocus),g.value=d.value.state.doc?.length,!(t.changes.empty||!t.docChanged)&&(e.linter&&(e.forceLinting&&(0,r.forceLinting)(d.value),_.value=e.linter(d.value).length),c.emit(`update`,t)))}),a.EditorView.theme(e.theme,{dark:e.dark}),e.wrap?a.EditorView.lineWrapping:void 0,e.indentUnit?n.indentUnit.of(e.indentUnit):void 0,i.EditorState.allowMultipleSelections.of(e.allowMultipleSelections),e.tabSize?l.of(i.EditorState.tabSize.of(e.tabSize)):void 0,e.phrases?i.EditorState.phrases.of(e.phrases):void 0,i.EditorState.readOnly.of(e.readonly),a.EditorView.editable.of(!e.disabled),e.lineSeparator?i.EditorState.lineSeparator.of(e.lineSeparator):void 0,e.lang?s.of(e.lang):void 0,e.linter?(0,r.linter)(e.linter,e.linterConfig):void 0,e.linter&&e.gutter?(0,r.lintGutter)(e.gutterConfig):void 0,e.placeholder?(0,a.placeholder)(e.placeholder):void 0,u.length>0?a.keymap.of(u):void 0,...e.extensions].filter(e=>!!e)});(0,s.watch)(v,e=>d.value?.dispatch({effects:i.StateEffect.reconfigure.of(e)}),{immediate:!0}),(0,s.watch)(()=>e.modelValue,async t=>{if(!d.value||d.value.composing||d.value.state.doc.toJSON().join(e.lineSeparator??` `)===t)return;let n=!d.value.state.selection.ranges.every(e=>e.anchor<t.length&&e.head<t.length),r={from:0,to:d.value.state.doc.length,insert:t},i=e.preserveScrollPosition?d.value.scrollSnapshot().map(d.value.state.changes(r)):void 0;d.value.dispatch({changes:r,selection:n?{anchor:0,head:0}:d.value.state.selection,scrollIntoView:e.scrollIntoView,effects:i?[i]:void 0})},{immediate:!0}),(0,s.onMounted)(async()=>{if(globalThis.window===void 0||!l.value)return;let e=u.value;l.value.childNodes[0]&&(u.value!==``&&console.warn("[CodeMirror.vue] The <code-mirror> tag contains child elements that overwrite the `v-model` values."),e=l.value.childNodes[0].innerText.trim()),d.value=new a.EditorView({parent:l.value,state:i.EditorState.create({doc:e,extensions:v.value}),dispatch:e=>{d.value&&(d.value.update([e]),!(e.changes.empty||!e.docChanged)&&(c.emit(`update:modelValue`,e.state.doc.toString()),c.emit(`change`,e.state)))}}),await(0,s.nextTick)(),c.emit(`ready`,{view:d.value,state:d.value.state,container:l.value})}),(0,s.onUnmounted)(()=>{d.value&&(d.value.destroy(),c.emit(`destroy`))});let y={editor:l,view:d,cursor:m,selection:p,focus:f,length:g,json:h,diagnosticCount:_,dom:d.value?.contentDOM,lint:()=>{!e.linter||!d.value||(e.forceLinting&&(0,r.forceLinting)(d.value),_.value=(0,r.diagnosticCount)(d.value.state))},forceReconfigure:()=>{d.value?.dispatch({effects:i.StateEffect.reconfigure.of([])}),d.value?.dispatch({effects:i.StateEffect.appendConfig.of(v.value)})},getRange:(e,t)=>d.value?.state.sliceDoc(e,t),getLine:e=>d.value?.state.doc.line(e+1).text,lineCount:()=>d.value?.state.doc.lines??0,getCursor:()=>d.value?.state.selection.main.head??0,listSelections:()=>d.value?.state.selection.ranges??[],getSelection:()=>d.value?d.value.state.sliceDoc(d.value.state.selection.main.from,d.value.state.selection.main.to):``,getSelections:()=>{let e=d.value?.state;return e?e.selection.ranges.map(t=>e.sliceDoc(t.from,t.to)):[]},somethingSelected:()=>d.value?.state.selection.ranges.some(e=>!e.empty)??!1,replaceRange:(e,t,n)=>{d.value&&d.value.dispatch({changes:{from:t,to:n,insert:e}})},replaceSelection:e=>{d.value&&d.value.dispatch(d.value.state.replaceSelection(e))},setCursor:e=>{d.value&&d.value.dispatch({selection:{anchor:e}})},setSelection:(e,t)=>{d.value&&d.value.dispatch({selection:{anchor:e,head:t}})},setSelections:(e,t)=>{d.value&&d.value.dispatch({selection:i.EditorSelection.create(e,t)})},extendSelectionsBy:e=>{d.value&&p.value&&d.value.dispatch({selection:i.EditorSelection.create(p.value.ranges.map(t=>t.extend(e(t))))})}};return c.expose(y),y},render(){return u(this.$props.tag,{ref:`editor`,class:`vue-codemirror`},this.$slots.default?u(`aside`,{style:`display: none;`,"aria-hidden":`true`},d(this.$slots.default)):void 0)}});return e.Meta=c,e.default=f,e.install=e=>{e.component(`CodeMirror`,f)},e})({},commands,language,lint,state,view,codemirror,VueDemi);