After upgrading to react 18, composition events in prosemirror are not initially recognized

1

For some reason, following an upgrade to react 18, composition events in the prosemirror editor are no longer showing the appropriate ‘underlining’ on initial typing (the underline to initiate composition).

I am experiencing this behavior with Spanish language accent marks that are initially triggered by pressing the apostrophe+vowel to render a character such as ó.

Typically after pressing the apostrophe key, there would be an underline indicating that you are in a composing state. Now, however, even though the editorView.composing status is set to true, the IME underlined state does not appear until pressing the apostrophe key three times or so. Any thoughts or ideas here on how to remediate and force the underline to appear (instead of the actual apostrophe character) when editorView.composing is true on the initial pressing of the apostrophe character?

One thing to call out is that the compositionstart event listener is being fired, it´s just not showing the proper underlining of the apostrophe.

ime

2

Edit, I believe this was a result of the improvements to automatic batching that react 18 introduced, we’ve ended up going with an approach that uses flushSync when editorView is composing, and react 18’s automatic batching otherwise.

  /**
   *
   * In rare exceptions, we want to dispatch transactions in non-batched form
   * when the editorView is in a composing state, otherwise the composing character is overridden.
   * The composing state is when editors are intitializing compositionStart events
   * which creates an input method editor for foreign languages.
   *
   * @param {Transaction} tr
   */
  const onDispatchTransaction = (tr) => {
    if (editorView?.composing)
      flushSync(() => {
        dispatchTransaction(tr);
      });
    else {
      dispatchTransaction(tr);
    }