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

[luizzappa]

It looks like the doc prop in SQLEditor is only used to initialize the content, not to keep it in sync with reactive changes from Vue. The onDocChange extension mentioned above works for the opposite direction (detecting changes inside the editor), but it won’t help if you need to programmatically update the content.

From a quick look at the source, the editor instance is kept in an internal cache via EditorCacheProvide, and it’s not currently exposed for us to call something like:

editorView.dispatch({
  changes: {
    from: 0,
    to: editorView.state.doc.length,
    insert: newDocHere
  }
});

Since we don’t have direct access to editorView, my workaround was to avoid EditorCacheProvide and instead force the component to remount when doc changes, like this:

<SQLEditor
  class="text-left cursor-text"
  :key="currKey"
  editor-id="editor"
  :doc="currDoc"
  :sql-config="sqlConfig"
  :theme="bbedit"
  :extra-exts="extraExtensions"
/>

<script setup>
const currDoc = ref('-- Hi!');
const currKey = ref(0);

// Example: update doc after 1 second
onMounted(async () => {
  await new Promise(r => setTimeout(r, 1000));
  currDoc.value = 'newww';
  currKey.value++;
});
</script>

This way, every time you increment currKey, Vue will unmount and remount the editor with the updated doc.

It’s not as efficient as updating the content via editorView.dispatch(), but until the API exposes the editor instance, this is a simple way to make it reactive.