koca/vue-prism-editor

Add text edit to history stack

Opened this issue · 2 comments

If I need to change the state of the text that is bound to the <prism-editor /> component (i.e., by doing something other than typing into the text field), is there any way to ensure that the history stack stays correct?

koca commented

I guess yes, have you tried it?

Yes, I've tried it. For example, this doesn't work:

    <button @click="addLine">Add line</button>
    <prism-editor
      class="my-editor"
      v-model="code"
      :highlight="highlighter"
      line-numbers
    />
  data() {
    return {
      code: '',
    };
  },
  methods: {
    highlighter(code) {
      return highlight(code, languages.js);
    },
    addLine() {
      this.code = `${this.code}\nconst foo = "bar";`;
    }
  },

Clicking the "addLine" button will update the text--but then typing ⌘+Z will cause the textarea state to go back to one edit prior to the state before clicking the "addLine" method.