logue / vue-codemirror6

⌨️ @codemirror 6 component for @vuejs. Vue2 & Vue3 both supported.
https://logue.dev/vue-codemirror6/
MIT License
123 stars 16 forks source link

Cursor position not updated #17

Open am-den opened 1 year ago

am-den commented 1 year ago

Hi,

I'm trying to get the cursor position (using either the getCursor method or the cursor property) but it always returns the same value.

I slightly modified one of the provided example to demonstrate this behavior. Clicking on the getCursor button for the first time will output the correct cursor position. But after that, it will always output the same position, whatever the cursor position is.

<!-- eslint-disable import/no-duplicates -->
<script setup>
import CodeMirror from 'vue-codemirror6';
import { vue } from '@codemirror/lang-vue';

import {ref} from 'vue'

const content = ref('hello world')
const mirror = ref(null);

const getCursor = (e) => {
  console.debug(mirror.value.getCursor())
}

const updateContent = (e) => {
  console.debug(e.doc.length)
} 
</script>
<template>
  <div class="container">
    <section class="mb-5">
      <p>
        <button type="button" @click="getCursor">getCursor</button>
      </p>
      <code-mirror
        ref="mirror"
        v-model="content"
        @change="updateContent"
        :lang="vue()"
        basic
        wrap
      />
    </section>
  </div>
</template>

<style>
.vue-codemirror * {
  font-family: var(--bs-font-monospace);
}
</style>

Here the expected result

logue commented 1 year ago

getCursor reproduces the old CodeMirror5 API and its use is not recommended.

To get the cursor just call the cursor variable. In this case, you should be able to get it with mirror.value.cursor. Since this is a WritableComputedRef, it can be treated like a variable.

am-den commented 1 year ago

I did try that too, yet the cursor position is not updated.

const getCursor = (e) => {
  console.debug(mirror.value.cursor)
}

vue-codemirror.webm

logue commented 1 year ago

The cause was that the change of EditorState in EditorView could not be detected. Currently investigating countermeasures.

NikoArtz commented 1 year ago

Hi @logue, if there are any updates for that issue? I see that you added fix, but for me behavior is still the same as @mimnot described. We are using v1.1.19

logue commented 1 year ago

I don't have much time for development resources, but I made it work only to get the cursor position.