Broken example. Pressing enter navigates to top. about jodit-vue

[abdelaziz321]

Okay, doing this:

if (this.editor.value !== newValue) {
  this.editor.value = newValue
}

now, we are changing this.editor.value only if content is different from the value of the editor.

example: https://codesandbox.io/s/l27n8z9l6l

#3

[abdelaziz321]

Hey @WendellAdriel

- I think the problem came from here:

watch: {
  value (newValue) {
    this.editor.value = newValue
  }
},

- because we don't want to change the value of the editor each time by using the value we got from the editor itself.

- we only need to initialize the editor value this.editor.value when the component is mounted.

- so now if we remove the watch option, considering this code:

<template>
  <div id="app">
    <jodit-vue v-model="content" />
  </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import JoditVue from 'jodit-vue'

export default {
  name: 'app',
  components: { JoditVue },

  data () {
    return {
      content: '<p>Jodit Vue</p>'
    }
  }
}
</script>

- here is what we will get:

# content          this.value      this.editor.value
     |                 |                 |
     |================>|                 |  // v-model="content"
     |                 |                 |  // now: this.value="<p>JoditVue</p>"
     |                 |                 |
     |                 |================>|  // mounted(){this.editor.value = this.value}
     |                 |                 |  // now: this.editor.value="<p>JoditVue</p>"
     |                 |                 |

- here the editor will show the value of `content`

- jumping to the change event:


> this.editor.events.on('change', (newValue) => {
>   this.$emit('input', newValue);
> })


- each time `this.editor.value` change,`content` will be changed **this is what we want**.

# content          this.value      this.editor.value
     |                 |                 |
     |<==================================|  // this.$emit('input', newValue);
     |                 |                 |  // now: content=newValue
     |================>|                 |  // and: this.value=content
     |                 |                 |
     
- the removed `watch` option come to play here by adding a new step because
it watch `this.value` and added it again to `this.editor.value` which cause the problem

Example here: https://codesandbox.io/s/l27n8z9l6l

let me know if i missed something and sorry for my poor English 😄

[WendellAdriel]

Hello @abdelaziz321, thanks for the feedback and also thanks for the PR.
The watch option was added in the last version to fix another issue, so I think that we can think about a solution that will fix both issues.

Here's an example without the watch: https://codesandbox.io/s/jpvvvz0jq5
If we update the content from outside the editor, the value of the editor isn't updated, that's why I had to update the watch

[WendellAdriel]

AWESOME!!!
Thank you so much @abdelaziz321!!!
I'll merge, put your user on the README file and release a new version!!!
😉 😉 😉

[WendellAdriel]

Thanks for the feedback, I tried here some things and saw that this happens only when pressing enter at the end of the line, can you just confirm if you're getting this same behavior or if it's in all cases of using the enter key?

I'll check what's causing this behavior

[edgar-koster]

Sorry to jump in. This happens at the end and at the beginning of the line. Let us now if we can do a test, be happy to do so.

I have it in a quasar installation where I installed this with npm install --save jodit-vu. I have the component added to a page with import of the css and jodit-vue.

[WendellAdriel]

Hey @edgar-koster, don't need to apologize, every help is welcome!!!
If you can test it I'll be happy to check your feedback and if you come to any solution before I can check it, I would love to receive a PR on that!!! Thanks for the help!!!

[edgar-koster]

Sure I'll let you know. I'm thinking it may be about a re-render I read about a few days ago. I will need to read more on it for that's new to me. I recall that sometime a preventDefault was added to the components to influence that. Maybe tat's a good starting direction