Web 输入框无法正常使用中文输入法预编辑文字

[galaxyboyleo]

Web 输入框无法正常使用中文输入法预编辑文字

问题

在 DSH Web composer 中使用微信输入法拼音模式时，无法正常输入中文；同一输入法在其他网页、应用和终端中工作正常。

复现环境

• DSH：0.1.0-rc.6
• 官方仓库提交：47f943859bef60e4160492346772ded9b24f765a
• macOS：26.5.1 (25F80)
• Chrome：151.0.7922.138
• 输入法：微信输入法 com.tencent.inputmethod.wetype.pinyin
• 启动方式：dsh web

复现步骤

1. 启动 dsh web，打开任意会话。
2. 聚焦底部消息输入框。
3. 切换到微信输入法拼音模式。
4. 输入拼音并选择中文候选词。

实际结果：中文预编辑文字无法正常显示或输入。

预期结果：拼音预编辑文字和候选词选择过程正常可见，选词后中文完整保留在草稿中。

初步定位

InputBar.module.css 中真实 textarea 使用 color: transparent，可见文字由其下方的 [data-input-backdrop] 镜像层绘制：

• InputBar.module.css#L202-L218
• InputBar.tsx#L689-L729

现有 compositionstart / compositionend 只维护按键保护用的 composingRef，没有处理原生预编辑文字的可见性：

• InputBar.tsx#L104-L119

CJK IME 的 preedit 文字由浏览器在原生输入控件中绘制；不同输入法/浏览器组合不保证在 composition 期间持续用普通 input 更新 React 镜像。因此真实 textarea 透明时，预编辑文字可能完全不可见。

已验证的本地 workaround

我用一个独立 Web client 插件验证了以下最小处理：

1. compositionstart 时给 composer textarea 添加临时属性；
2. composition 期间将真实 textarea 恢复为主题正文色；
3. 同期隐藏 [data-input-backdrop]，避免重复文字；
4. compositionend 后在下一个 task 恢复原有透明 textarea + backdrop；
5. blur 和插件卸载时清理临时状态。

核心 CSS：

textarea[data-dsh-ime-composing] {
  color: var(--dsw-alias-label-primary) !important;
  -webkit-text-fill-color: var(--dsw-alias-label-primary) !important;
}

[data-input-backdrop]:has(+ textarea[data-dsh-ime-composing]) {
  visibility: hidden !important;
}

浏览器组合事件验证结果：

• composition 期间：中文 value 保留，原生 textarea 为主题正文色，backdrop 隐藏；
• composition 结束后：临时属性清除，textarea 恢复透明，backdrop 恢复显示且中文草稿完整；
• 未改写 draft、提交、空格、回车或候选词按键逻辑。

建议验收

1. macOS + Chrome + 微信输入法输入 zhongwen 并选择“中文”，草稿正确显示“中文”；
2. composition 期间的空格、回车、方向键不触发提交或 DSH 快捷命令；
3. 中文、日本语、韩语至少各覆盖一个 IME smoke test；
4. 在 input-bar.client.spec.tsx 增加 composition 可见状态的回归测试，并保留现有 Safari 延迟清除按键保护。