Bug: RangeError: Selection points outside of document

[jonkad]

Hello,

When I update the v-model value from another function, then I got this error: Uncaught (in promise) RangeError: Selection points outside of document

Versions: vue: 3.3.4 codemirror: 6.0.1 vue-codemirror6: 1.1.31 @codemirror/lang-css: 6.2.1

Maybe someone have an Idea?

<template>
  <button @click="restoreCustomStyleCss()">restore</button>
  <button @click="cearCustomStyleCss()">clear</button>
  <code-mirror
    v-model="customStyleCss"
    :lang="[lang]"
    :basic="true"
    :gutter="true"
  />
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";

import CodeMirror from "vue-codemirror6";
import { css } from "@codemirror/lang-css";
export default defineComponent({
  name: "EventStyle",
  components: {
    CodeMirror,
  },
  setup() {
    const lang = css();
    return { lang };
  },
  data() {
    return {
      customStyleCss: "",
      restoreCustomStyleCss = "body {color: red;}",
    };
  },
  methods: {
    restoreCustomStyleCss() {
      this.customStyleCss = this.restoreCustomStyleCss;
    },
    cearCustomStyleCss() {
      this.customStyleCss = "";
    },
  },
});
</script>

[jonkad]

I have temporarily solved the error as follows: this.$refs.cm.setCursor(0);

<template>
  <button @click="restoreCustomStyleCss()">restore</button>
  <button @click="cearCustomStyleCss()">clear</button>
  <code-mirror
    v-model="customStyleCss"
    :lang="[lang]"
    :basic="true"
    :gutter="true"
    ref="cm"
  />
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";

import CodeMirror from "vue-codemirror6";
import { css } from "@codemirror/lang-css";
export default defineComponent({
  name: "EventStyle",
  components: {
    CodeMirror,
  },
  setup() {
    const lang = css();
    return { lang };
  },
  data() {
    return {
      customStyleCss: "",
      restoreCustomStyleCss = "body {color: red;}",
    };
  },
  methods: {
    restoreCustomStyleCss() {
      //@ts-expect-error
      this.$refs.cm.setCursor(0);
      this.customStyleCss = this.restoreCustomStyleCss;
    },
    cearCustomStyleCss() {
      //@ts-expect-error
      this.$refs.cm.setCursor(0);
      this.customStyleCss = "";
    },
  },
});
</script>

[redisviewer]

https://github.com/josdejong/svelte-jsoneditor/issues/423

refer to this issues? @logue