Updating modelValue from outside of the editor

[Lazac92]

Hi, and thanks for creating & sharing this project!

I find an issue while trying to replace line breaks (\n) to double spaces and \n in the editor's model.
The code looks like this:

<template>
	<vue-simplemde :modelValue="value" @update:modelValue="textChanged"/>
<template>

<script>
methods: {
	textChanged(txt) {
		this.$set(this, 'value', txt.replace(/(?<! {2})\n/g,'  \n'));
	}
}
</script>

When I changed the value outside of the editor, it did not update the actual text, inside the editor.
So i started to dig into the editor's source code and find the modelValue's watcher:

  watch: {
    modelValue(val) {
      if (this.isValueUpdateFromInner) {
        this.isValueUpdateFromInner = false;
      } else {
        this.simplemde.value(val);
      }
    },
  }

Then I started to play, and remove the whole if-else logic to always reach the simplemde.value setter:

watch: {
    modelValue(val) {
        this.simplemde.value(val);
    }
}

The issue now is when setting the value, we lose the cursor's position.
So this could be a solution, to keep the editor's content up-to-date, even if we modify it from outside, while keeping the cursor's position:

  watch: {
    modelValue(val) {
        const pos = this.simplemde.codemirror.getCursor();
        this.simplemde.value(val);
        this.simplemde.codemirror.setSelection(pos);
    },
  },

What do you think? Can this be implemented in this repo? Will it cause this any other issue?

[F-loat]

This design is based on performance considerations. It is recommended to use it as follows

<script>
methods: {
  textChanged(txt) {
    this.value = txt; // set isValueUpdateFromInner to false
    this.$nextTick(() => {
      this.value = txt.replace(/(?<! {2})\n/g,'  \n'));
    });
  }
}
</script>

or

<script>
methods: {
  textChanged(txt) {
    const { simplemde } = this.$refs.markdownEditor;
    const pos = simplemde.codemirror.getCursor();
    this.value = txt.replace(/(?<! {2})\n/g,'  \n');
    simplemde.value(this.value);
    simplemde.codemirror.setSelection(pos);
  }
}
</script>

[F-loat]

this.value = txt.replace(/(?<! {2})\n/g,' \n'); will work after v2.1.1 and you can set :forceSync="false" for better performance.