Incorrect undo behaviour for Chineses Characters [Need Help] Thx very much!

Show
1

Hi folks, I’d like to separate input procedure when user type Chinese word using input method.

When inputing a Chinese word, the user first spell them in English letters, and then select the Chinese word with the help of input method, as the gif shows. But after inputing a Chinese word, when the user hit undo(Command/Ctrl+Z), the inputed content is reverted to the English letters, while we expect it to be empty.

GIF of prosemirror official demo. ime-unexpected-2022-09191502 (1)

The behaviour in CodeMirror is expected. GIF of codemirror official demo. codemirror-09191624

Is there a way to implement the same behaviour in ProseMirror?

During my research, I found that when the editor transaction step contain “你好”, there is a logic in Branch#addTransform method that will call steps[i].invert(transform.docs[I]). This line will invert “你好” to “nihao” as the previous state.doc instead of empty state.

1 Like
2

I find the workaround solution to fix.

Here is the code.

let composingStart = false;
let compositionStartTime = NaN;
// define customize history plugin,
new Plugin({
  key: new PluginKey('CustomizeHistory'),
  props: {
    // overwrite handleTextInput merge composition events in single historyState by set same transaction time
    handleTextInput: (view, chFrom, chTo, text) => {
      if (view.composing) {
        if (composingStart === false) {
          composingStart = true;
          compositionStartTime = Date.now();
        }
        view.dispatch(
          view.state.tr
            .insertText(text, chFrom, chTo)
            .setTime(compositionStartTime)
        );
        return true;
      }
      if (composingStart === true) {
        composingStart = false;
        view.dispatch(
          view.state.tr
            .insertText(text, chFrom, chTo)
            .setTime(compositionStartTime),
        );
        return true;
      }
      return false;
    },
  },
});
1 Like