chrome devtools emulator iPhone devices can't input Chinese charaters.

[welkang]

Description
chrome emulator iPhone devices can't type Chinese characters, you can see it in the latest official demo.
https://www.slatejs.org/examples/plaintext

Recording
https://github.com/user-attachments/assets/6e831eed-aa14-482e-9d0b-cee04d0baed8

Sandbox
https://www.slatejs.org/examples/plaintext

Steps

1. Open the chrome devtools, then select the iPhone devices.
2. typing Chinese characters.

Expectation
Can't input Chinese characters normally.

Environment

• Slate Version: latest
• Operating System: MacOS 15.6.1
• Browser: [Chrome: 142.0.7444.162 arm64]

[welkang]

I have identified that it might be related to this two lines of code, but I'm not sure if there will be any other issues after the comments are added.

[welkang]

So my current solution is to externally call the onCompositionEnd method to override the internal behavior. Additionally, I have also tested it on both the real mobile device and the PC, and it works properly in both cases.

import {
  EDITOR_TO_PENDING_INSERTION_MARKS,
  EDITOR_TO_USER_MARKS,
  IS_ANDROID,
  IS_FIREFOX_LEGACY,
  // IS_IOS,
  IS_UC_MOBILE,
  // IS_WEBKIT,
  IS_WECHATBROWSER,
} from 'slate-dom';

  const onCompositionEnd = useCallback(
    (event: React.CompositionEvent<HTMLDivElement>) => {
      if (
        // !IS_WEBKIT &&
        !IS_FIREFOX_LEGACY &&
        // !IS_IOS &&
        !IS_WECHATBROWSER &&
        !IS_UC_MOBILE &&
        event.data
      ) {
        const placeholderMarks = EDITOR_TO_PENDING_INSERTION_MARKS.get(editor);
        EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor);

        // Ensure we insert text with the marks the user was actually seeing
        if (placeholderMarks !== undefined) {
          EDITOR_TO_USER_MARKS.set(editor, editor.marks);
          editor.marks = placeholderMarks;
        }

        Editor.insertText(editor, event.data);

        const userMarks = EDITOR_TO_USER_MARKS.get(editor);
        EDITOR_TO_USER_MARKS.delete(editor);
        if (userMarks !== undefined) {
          editor.marks = userMarks;
        }
      }
    },
    [editor]
  );


<Slate
      editor={editor}
      initialValue={initialValue}
      onChange={handleChange}
    >
      <Editable
        ...
        onCompositionEnd={onCompositionEnd}
    />
</Slate>