How to make doc prop reactive in vue

[abdul-alhasany]

Thanks for the this package.

I am trying to implment it using vue. It is working as expected, but I am unable to make doc prop reactive. Here is my code:

<script setup>
import { EditorCacheProvide, SQLEditor } from '@tidbcloud/tisqleditor-vue';
import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter';
const code = ref(sqlCode.value ?? '');
</script>

<template>
 <EditorCacheProvide>
	<SQLEditor
		editor-id="test"
		:doc="code"
		class="block grow"
		:basic-setup-options="{
			autocompletion: true
		}"
		:extra-exts="[
			curSqlGutter()
		]"
	/>
</EditorCacheProvide>
</template>

I have also installed @codemirror/view and @codemirror/state.

When I update code, the content inside the editor is not updated.

[jspri3]

@abdul-alhasany you need to use onDocChange from the events extension to get access to the SQL statement.

https://github.com/tidbcloud/tisqleditor/tree/main/packages/extensions/events

import {
  onDocChange,
  onSelectionChange
} from '@tidbcloud/codemirror-extension-events'

const docChangeHandler = (view, state, doc) => {
  console.log(doc);
}

const selectionChangeHandler = (view, state, ranges) => {
  console.log(ranges);
}
...
:extra-exts="[
			curSqlGutter(),
			onDocChange(docChangeHandler),
  onSelectionChange(selectionChangeHandler)
		]"

console will now log the query