Cannot Input Chinese Characters in Comments Feature in iphone Mobile Mode

[lizheng-steedos]

Description
The comments feature is not allowing input of Chinese characters using an input method in mobile mode. Users can copy and paste Chinese text (e.g., "你好") into the comments input box, but they cannot type it directly using an input method.

Recording
https://github.com/user-attachments/assets/fdc91827-aa93-44f8-947e-914acd984555

Sandbox
https://www.slatejs.org/

Steps
To reproduce the behavior:

1. iphone safari：https://www.slatejs.org/
2. Clear input and Input Chinese Characters
3. can't delect the Input Chinese Characters

Expectation
iphone safari can Input Chinese Characters normaly

Environment

• Slate Version: 0.110.2
• Operating System: ios 18.3.1
• Browser: iphone Safari

Context
releated issue：liveblocks/liveblocks#2194

[xklFFF]

Have you solved this problem? We also encountered the same error.

[cgluWxh]

Solved by using solution given by ProseMirror/prosemirror#934

<Editable
      onDOMBeforeInput={onDOMBeforeInput}
      onInput={onInput}

const ZERO_WIDTH_SPACE = '\u200b'

const onDOMBeforeInput = (browser.isAppleMobile || browser.isMacSafari) ? (event: InputEvent) => {
        if (event.inputType !== 'deleteCompositionText') {
          return;
        }
        
        const selection = window.getSelection();
        if (!selection || selection.rangeCount === 0) return;
        
        const range = selection.getRangeAt(0);
        const { startContainer, endContainer, endOffset, startOffset } = range;
        
        /**
         * Safari 删除 Composition Text 时会删除一个空节点导致 Slate 无法正常识别
         * 我们在 Safari 删除 Composition Text 前在节点内插入一个 0 宽空格，骗过 Safari 使它不删除
         */
        if (
          startContainer &&
          isTextNode(startContainer) &&
          startContainer === endContainer &&
          startOffset === 0 &&
          endOffset === (startContainer as Text).length 
        ) {
          startContainer.parentElement!.insertBefore(document.createTextNode(ZERO_WIDTH_SPACE), startContainer);
        }
      } : undefined

      const onInput = (browser.isAppleMobile || browser.isMacSafari) ? (event: React.FormEvent<InputEvent>) => {
        if ((event.nativeEvent as InputEvent).inputType !== 'deleteCompositionText') {
          return;
        }
        
        const selection = window.getSelection();
        if (!selection || selection.rangeCount === 0) return;
        
        const range = selection.getRangeAt(0);
        const node = range.startContainer;
        if (!node || !node.parentElement) return;

        const textNodes = Array.from(node.parentElement.childNodes).filter(isTextNode);
        
        for (const textNode of textNodes) {
          if (textNode.textContent === ZERO_WIDTH_SPACE) {
            textNode.remove();
          } else if (textNode.textContent && textNode.textContent.includes(ZERO_WIDTH_SPACE)) {
            textNode.textContent = textNode.textContent.replace(new RegExp(ZERO_WIDTH_SPACE, 'g'), '');
          }
        }
      } : undefined