Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating modelValue from outside of the editor #97

Closed
Lazac92 opened this issue Feb 17, 2021 · 2 comments
Closed

Updating modelValue from outside of the editor #97

Lazac92 opened this issue Feb 17, 2021 · 2 comments

Comments

@Lazac92
Copy link

Lazac92 commented Feb 17, 2021

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 F-loat closed this as completed in 47d7324 Jun 1, 2022
@F-loat

This comment was marked as outdated.

@F-loat F-loat pinned this issue Jun 1, 2022
@F-loat
Copy link
Owner

F-loat commented Jun 1, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants