UNPKG

vue-codemirror6

Version:

CodeMirror6 Component for vue2 and vue3.

13 lines (12 loc) 7.05 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} */ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`@codemirror/commands`),t=require(`@codemirror/language`),n=require(`@codemirror/lint`),r=require(`@codemirror/state`),i=require(`@codemirror/view`),a=require(`codemirror`),o=require(`vue-demi`);var s={version:`1.5.2`,date:`2026-05-01T12:27:43.027Z`},c=e=>e?Object.entries(e).reduce((e,[t,n])=>(t=t.charAt(0).toUpperCase()+t.slice(1),t=`on${t}`,{...e,[t]:n}),{}):{};function l(e,t={},n){if(o.isVue2)return(0,o.h)(e,t,n);let{props:r,domProps:i,on:a,...s}=t,l=a?c(a):{};return(0,o.h)(e,{...s,...r,...i,...l},n)}var u=e=>typeof e==`function`?e():e??[],d=(0,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: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(s,c){let l=(0,o.ref)(),u=(0,o.ref)(s.modelValue),d=(0,o.shallowRef)(void 0),f=(0,o.computed)({get:()=>d.value?.hasFocus??!1,set:e=>{e&&d.value&&d.value.focus()}}),p=(0,o.computed)({get:()=>d.value?.state.selection,set:e=>{d.value&&e&&d.value.dispatch({selection:e})}}),m=(0,o.computed)({get:()=>d.value?.state.selection.main.head??0,set:e=>{d.value&&d.value.dispatch({selection:{anchor:e}})}}),h=(0,o.computed)({get:()=>d.value?.state.toJSON(),set:e=>{d.value&&e&&d.value.setState(r.EditorState.fromJSON(e))}}),g=(0,o.ref)(0),_=(0,o.ref)(0),v=(0,o.computed)(()=>{let o=new r.Compartment,l=new r.Compartment;if(s.basic&&s.minimal)throw Error(`[Vue CodeMirror] Both basic and minimal cannot be specified.`);let u=[];return s.keymap&&s.keymap.length>0&&(u=s.keymap),s.tab&&u.push(e.indentWithTab),[s.basic&&!s.minimal?a.basicSetup:void 0,s.minimal&&!s.basic?a.minimalSetup:void 0,i.EditorView.updateListener.of(e=>{d.value&&(c.emit(`focus`,d.value.hasFocus),g.value=d.value.state.doc?.length,!(e.changes.empty||!e.docChanged)&&(s.linter&&(s.forceLinting&&(0,n.forceLinting)(d.value),_.value=s.linter(d.value).length),c.emit(`update`,e)))}),i.EditorView.theme(s.theme,{dark:s.dark}),s.wrap?i.EditorView.lineWrapping:void 0,s.indentUnit?t.indentUnit.of(s.indentUnit):void 0,r.EditorState.allowMultipleSelections.of(s.allowMultipleSelections),s.tabSize?l.of(r.EditorState.tabSize.of(s.tabSize)):void 0,s.phrases?r.EditorState.phrases.of(s.phrases):void 0,r.EditorState.readOnly.of(s.readonly),i.EditorView.editable.of(!s.disabled),s.lineSeparator?r.EditorState.lineSeparator.of(s.lineSeparator):void 0,s.lang?o.of(s.lang):void 0,s.linter?(0,n.linter)(s.linter,s.linterConfig):void 0,s.linter&&s.gutter?(0,n.lintGutter)(s.gutterConfig):void 0,s.placeholder?(0,i.placeholder)(s.placeholder):void 0,u.length>0?i.keymap.of(u):void 0,...s.extensions].filter(e=>!!e)});(0,o.watch)(v,e=>d.value?.dispatch({effects:r.StateEffect.reconfigure.of(e)}),{immediate:!0}),(0,o.watch)(()=>s.modelValue,async e=>{if(!d.value||d.value.composing||d.value.state.doc.toJSON().join(s.lineSeparator??` `)===e)return;let t=!d.value.state.selection.ranges.every(t=>t.anchor<e.length&&t.head<e.length),n={from:0,to:d.value.state.doc.length,insert:e},r=s.preserveScrollPosition?d.value.scrollSnapshot().map(d.value.state.changes(n)):void 0;d.value.dispatch({changes:n,selection:t?{anchor:0,head:0}:d.value.state.selection,scrollIntoView:s.scrollIntoView,effects:r?[r]:void 0})},{immediate:!0}),(0,o.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 i.EditorView({parent:l.value,state:r.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,o.nextTick)(),c.emit(`ready`,{view:d.value,state:d.value.state,container:l.value})}),(0,o.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:()=>{!s.linter||!d.value||(s.forceLinting&&(0,n.forceLinting)(d.value),_.value=(0,n.diagnosticCount)(d.value.state))},forceReconfigure:()=>{d.value?.dispatch({effects:r.StateEffect.reconfigure.of([])}),d.value?.dispatch({effects:r.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:r.EditorSelection.create(e,t)})},extendSelectionsBy:e=>{d.value&&p.value&&d.value.dispatch({selection:r.EditorSelection.create(p.value.ranges.map(t=>t.extend(e(t))))})}};return c.expose(y),y},render(){return l(this.$props.tag,{ref:`editor`,class:`vue-codemirror`},this.$slots.default?l(`aside`,{style:`display: none;`,"aria-hidden":`true`},u(this.$slots.default)):void 0)}}),f=e=>{e.component(`CodeMirror`,d)};exports.Meta=s,exports.default=d,exports.install=f;