Vue: Unable to update the caret position using arrow keys

1

Hello, and first off, thanks for creating such a great library!

I’m adding ProseMirror to a Vue 3 SPA and it’s been mostly smooth sailing (after reading the docs), but I’m having trouble making the selection behave as expected when pressing the arrow keys when the contenteditable is focused. The caret always stays at the end of the text. This is also the case when clicking to the middle of your entered text.

I’ve made a minimal reproduction on Codesandbox. To reproduce, type some text, and then press the left arrow

Expected behaviour The caret moves back 1 position

Observed behaviour The caret stays in the same position

https://codesandbox.io/p/sandbox/competent-ptolemy-7x8fn6?file=%2Fsrc%2FApp.vue

Thanks very much, I’m quite sure that I’m doing something wrong here.

2

The issue is your use of ref. You should be calling methods on the original value, not the proxy.

  view.value = new EditorView(editor.value, {
    state: toRaw(state.value),
    dispatchTransaction(transaction) {
      if (!view.value) {
        return;
      }

      let newState = toRaw(view.value).state.apply(transaction);
      toRaw(view.value).updateState(newState);
    },
  });

You can also do the following since view is bounded to this in dispatchTransaction (see prosemirror-view source code or doc).

  view.value = new EditorView(editor.value, {
    state: toRaw(state.value),
    dispatchTransaction(transaction) {
      let newState = this.state.apply(transaction);
      this.updateState(newState);
    },
  });
3

Amazing, thank you so much for your help!

If anyone else finds this thread in the future, I’ve updated the CodeSandbox so that it now works.