[Vue3] Code Mirror 적용하기

vue3에선 아래 npm모듈로 편리하게 v-model을 활용하면서 양방향 데이터 전달이 가능하다

vue-codemirror

1. npm install vue-codemirror

2. main.js에 import

import VueCodemirror from 'vue-codemirror';

const app = createApp(App);
app.use(VueCodemirror, {
	// optional default global options
	autofocus: true,
	disabled: false,
	indentWithTab: true,
	tabSize: 2,
	extensions: [basicSetup],
	// ...
});​

 

3. 컴포넌트 사용

 

- template 영역

<codemirror
    v-model="query"
    autoDestroy
    ref="editor"
    placeholder="Query goes here..."
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="handleReady"
/>

 

- script영역

const extensions = [sql(), ayuLight, autocompletion({ override: [customCompletion] })];

const handleReady = payload => {
	const view = shallowRef();
	view.value = payload.view;
};

 

- 자동완성 (auto completion)

const sqlCommands = [
	'select',
	'from',
	'where',
	'insert into',
	'update',
	'delete from',
	'group by',
	'order by',
	'join',
	'inner join',
	'left join',
	'right join',
	'full outer join',
	'union',
	'union all',
	'having',
	'like',
	'distinct',
	'limit',
];
const sqlCommandObj = sqlCommands.map(command => {
	return { label: command, type: 'keyword' };
});
const completions = sqlCommandObj;

function customCompletion(context) {
	let before = context.matchBefore(/\w+/);
	if (!context.explicit && !before) return null;
	return {
		from: before ? before.from : context.pos,
		options: completions.value,
		validFor: /^\w*$/,
	};
}

 

** 추가. code mirror 테마 적용

1. npm install thememirror

https://www.npmjs.com/package/thememirror

thememirror

2. 아래 사이트에서 사용하고싶은 테마명 import 

ThemeMirror

import { ayuLight } from 'thememirror';

const extensions = [sql(), ayuLight, autocompletion({ override: [customCompletion] })];