Unable to type in Chinese in integrated terminal

Racaly commented 3 years ago

Issue Type: Bug

打开内置终端无法输入中文，

VS Code version: Code 1.53.0 (8490d3dde47c57ba65ec40dd192d014fd2113496, 2021-02-03T20:36:38.611Z) OS version: Windows_NT x64 10.0.18363

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz (12 x 3192)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
protected_video_decode: enabled
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|15.86GB (11.40GB free)| |Process Argv|--crash-reporter-id f85a41a1-239d-4bd7-a4a1-dc3c12e2b6be| |Screen Reader|no| |VM|0%|

Extensions (6)

Extension|Author (truncated)|Version ---|---|--- vscode-eslint|dba|2.1.14 vsc-material-theme|Equ|33.1.2 vsc-material-theme-icons|equ|1.2.2 git-graph|mhu|1.28.0 vscode-language-pack-zh-hans|MS-|1.53.2 vetur|oct|0.32.0 (1 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492cf:30211402 pythonvsdeb440:30248342 pythonvsded773:30248341 pythonvspyt600cf:30251589 ```

ccloli commented 3 years ago

By using git bisect and verify commits between v1.51.1 and v1.52.0, seems that 4b49bae9037bedcee2038905d3b4f65cbc42668b introduces the issue, ~~anyone can review and verify it?~~

Updated: verified.

vscode-debug

wyattzheng commented 3 years ago

@ccloli wow,that's a huge progress. i am also deploying developing environment to verify the commit

wyattzheng commented 3 years ago

the changes in this commit, are about css stylesheet of xterm.js, just 4 lines changes cause this problem. let's try to find out why

Python-37 commented 3 years ago

Aye, after I do these changes, VS Code works fine.

By using git bisect and verify commits between v1.51.1 and v1.52.0, seems that 4b49bae introduces the issue, ~anyone can review and verify it?~

Python-37 commented 3 years ago

Aye, after I do these changes, VS Code works fine.

By using git bisect and verify commits between v1.51.1 and v1.52.0, seems that 4b49bae introduces the issue, ~anyone can review and verify it?~

Not really, Chinese symbols will be repeated twice.

wyattzheng commented 3 years ago

nohelp it doesn't work for me to disable the three properties. chinese still can not be typed in through Sogou IME. my vscode version is 1.54.1

ccloli commented 3 years ago

Not really, Chinese symbols will be repeated twice.

@Python-37 Well, by removing padding it works fine again, and don't see the input letters are repeated.

I guess maybe it's because when padding is 0, some functions may not working properly. Since you can see the textarea width is matching with the input text (测试 which is 2em), so at least your input text has already sent to the input textarea.

I tested it on latest VSCode Insider (1.55.0) with checking padding: 0 or not, and it's fun that, when inputing without IME, onInput event is not trigger until you press space (so maybe xterm handles input function by onKeyDown?). However, when using these IMEs, with default padding (behavior before v1.52.0), your input letters are keep in the textarea until you press Enter; with zero padding (current behavior), your old input will override your last input. Maybe xterm detects IME input with textarea value length?

vscode-debug-2

At least I think revert that commit should fix the issue, but I cannot verify it directly, since node-gyp throws errors when I checkout to newer version.

Updated: just checked Microsoft Pinyin, by using zero padding or default padding, both of them works as expected and their values are the same:

vscode-debug-3

Maybe that's because Microsoft Pinyin (and QQ Pinyin's single-line mode) put input letters into the program UI, so that xterm can measure text change?

wyattzheng commented 3 years ago

i think in my environment , the problem may be different. the solutions don't help.

i made textarea to the top level by changing z-index and opacity in css. i found that things are weird, you can clearly see the chinese characters are typed in the textarea, but they can't be rendered into display area. nohelp

by the way, Microsoft PinYin works very well.

wyattzheng commented 3 years ago

i think in my environment , the problem may be different. the solutions don't help.

i made textarea to the top level by changing z-index and opacity in css. i found that things are weird, you can clearly see the chinese characters are typed in the textarea, but they can't be rendered into display area.

by the way, Microsoft PinYin works very well.

i found that Microsoft PinYin always works well . Even i type in chinese characters using Sogou IME before. i guess that's because vscode connect to System Input API directly instead of getting words from textarea.

if so, the problem in my environment should not be solved by changing CSS.

ccloli commented 3 years ago

@ZhyMC Well, I built it just now, can you help me to verify if it works for you? At least it works for me.

https://1drv.ms/u/s!As4fpXfOPou9ghCE3bCZXVu8u1gk?e=SeLPHO https://pan.baidu.com/s/1RrvKGtkKYWMMgVpSjy6mIQ us4x

If you're not satisfy with prebuilt binary, you can also TIY by following these steps, just to be sure that after you clone the repo, run git revert 4b49bae.

wyattzheng commented 3 years ago

@ccloli cool, i am downloading it.

wyattzheng commented 3 years ago

bad news, doesn't work even that's a fixed prebuilt. nohelp2

ccloli commented 3 years ago

bad news, doesn't work even that's a fixed prebuilt.

@ZhyMC That's a sad story, I only tested it with QQ Pinyin. 😢

For me it breaks on v1.52.0, but some comments said they worked fine in v1.52.0, and having issue in latter version, maybe there are some other commits are related to this issue.

If you're willing to try finding out which commits occurs the issue, you can clone the repo and follow wiki to setup develop enviornment, then use git bisect (Chinese translation) to mark good commits and bad commits, until you find the first occured commit. When you checkout to a new commit and yarn watch shows errors, you can run yarn again to fix dependencies issues.

wyattzheng commented 3 years ago

@ccloli Before your tip, i don't even know that git has git bisect command. That's quite a good way to find what causes the problem, i am trying to fix it in my environment. And I just spent long time to fix yarn watch problem, right now i know how to deal with it.

ccloli commented 3 years ago

I setup a fresh new Windows 10 VM (20H2, Enterprise, x64, with VirtualBox) and grab some versions of VSCode and IMEs. By testing these various versions of VSCode and IMEs, seems that there are at least 2 reasons that blocks terminal input.

VSCode Version	Sogou Pinyin	Baidu Pinyin	Microsoft Pinyin	Rime (Weasel)	QQ Pinyin
1.51.1	✔	✔	✔	✔	✔
1.52.0	✔	✔	✔	✖	✖
1.52.1	✔	✔	✔	✖	✖
1.53.0	✖	✖	✔	✖	✖
1.54.1	✖	✖	✔	✖	✖
1.55.0-fixed	✖	✖	✔	✔	✔

Weasel and QQ Pinyin are broken since 1.52.0, and VSCode terminal lets them to input the first word (or in details, follow this rule)
Sogou Pinyin and Baidu Pinyin are broken since 1.53.0, but VSCode terminal doesn't accept their inputs.

So if you're trying to find the broken commit for Sogou Pinyin, you can try git bisect bad 1.53.0 and git bisect good 1.52.1.

Detailed screen recording videos

https://user-images.githubusercontent.com/8115912/110276716-b9cc3f00-800e-11eb-99d0-1adcc0d0b2f9.mp4 https://user-images.githubusercontent.com/8115912/110276709-b20c9a80-800e-11eb-85f1-3e214d47c83e.mp4 https://user-images.githubusercontent.com/8115912/110276713-b5078b00-800e-11eb-87a9-53796e6ef6c7.mp4 https://user-images.githubusercontent.com/8115912/110276715-b8027b80-800e-11eb-9e2d-1cb61f6d1a3a.mp4

Python-37 commented 3 years ago

I setup a fresh new Windows 10 VM (20H2, Enterprise, x64, with VirtualBox) and grab some versions of VSCode and IMEs. By testing these various versions of VSCode and IMEs, seems that there are at least 2 reasons that blocks terminal input.

Nice work, so there is somewhere changed we still didn't find between 1.52.1 and 1.53.0, caused to sogou pinyin and baidu pinyin IME cannot work functionally.🤨

wyattzheng commented 3 years ago

@Python-37 the sheet shows that there is not only one reason causes the problem. i am working on this.

wyattzheng commented 3 years ago

hey guys , i have made progress by using git bisect bisect somebody can verify this.

the bad commit is: 94142bd7e0dbc073fe6abf130d7b7066a7beb1d6

if it is verified, maybe the issue comes from the upstream : Electron.

wyattzheng commented 3 years ago

i verified it again!

By using git reset --hard 94142bd and git reset --hard HEAD~ to compare the commit 94142bd7e0dbc073fe6abf130d7b7066a7beb1d6 and its last commit.

As this commit bumping Electron to a new version, i must re-compile it by running yarn. so i can't show a git, but that's real.

Bumping the dependency : Electron to a new version causes the problem,

To solve this, i think we should create a new issue on electron/electron and reference it to this issue, since it is a problem comes from upstream.

wyattzheng commented 3 years ago

what's more , the last commit of this bad commit is 962bedc4f47b26e4a6ddc917ee2a4d9445531fb9, this shows VSCODE updating itself to 1.53.0, which can explain why after 1.53.0, something is going wrong.

ccloli commented 3 years ago

the bad commit is: 94142bd

Bumping the dependency : Electron to a new version causes the problem,

@ZhyMC If that's true, at least for Sogou Pinyin, it would be like what's @yume-chan said:

^ So definitely something has been changed in either Electron, Code or Xterm.js that affected these IMEs.

^ I can't remember the exact version numbers that had these issues, but maybe Electron is currently using one of those bad ones. So hopefully these issues will go away when Electron upgrades to a newer version of Chromium.

Though it's still weird that only integrated terminal is affected, the other modules of VSCode is fine. And it seems that it cannot be fixed by a simple downgrade, since 1.53.0 updates Electron from 9.x to 11.x, which crosses 2 major version. So hopefully it would be fixed by newer Electron, or xterm does some compatibility works.

BTW, looks like Electron upgrade only affects to Sogou Pinyin (as previous comment, QQ Pinyin and Rime are because of some css layout issue, and revert them can still works on latest build with newer Electron).

wyattzheng commented 3 years ago

@ccloli You are right, that's weird that only integrated terminal is affected after upgrading electron to 11.x. Are there any ways to separate integrated terminal out and try to debug?

I am trying to create an empty electron project and simulate some features of integrated terminal. if i can reproduce the problem from doing this, maybe i can find out the solution.

wyattzheng commented 3 years ago

oh, that's interesting, i created a new project under electron@11.0.3, and install a xterm@latest as a dependency.

nohelp3

wyattzheng commented 3 years ago

index.html

<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="../node_modules/xterm/css/xterm.css" />
      <script src="../node_modules/xterm/lib/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m \r\n$ ')
        term.onData(e => {
          switch (e) {
            case '\r': // Enter
            case '\u0003': // Ctrl+C
              term.write('\r\n$ ');
              break;
            case '\u007F': // Backspace (DEL)
              // Do not delete the prompt
              if (term._core.buffer.x > 2) {
                term.write('\b \b');
              }
              break;
            default: // Print all other characters for demo
              term.write(e);
          }
       });
      </script>
    </body>
  </html>

wyattzheng commented 3 years ago

hey guys, i think i found the reason.

in /src/browser/input/CompositionHelper.ts of xtermjs/xterm.js

we can find the code snippet:

if (ev.keyCode === 229) {
    // If the "composition character" is used but gets to this point it means a non-composition
    // character (eg. numbers and punctuation) was pressed when the IME was active.
    this._handleAnyTextareaChanges();
    return false;
}

i set up a keydown listener by using DevTools, and print the ev.keyCode when i am typing in words.

By seaching in google, i found that 229 is a special keyCode event fired with that when you typing Chinese or characters of some other languages.

nohelp4

so the issue is caused by electron 11.x (maybe that's because of its dependency: chromium ) the event with that keyCode 229 would never fired when typing Chinese for some IMEs like Sogou IME and Baidu IME.

wyattzheng commented 3 years ago

And that explains the comment above:

i made textarea to the top level by changing z-index and opacity in css. i found that things are weird, you can clearly see the chinese characters are typed in the textarea, but they can't be rendered into display area.

maybe xterm.js can provide an alternative solution instead of using the event.

wyattzheng commented 3 years ago

@ccloli could you help testing these input methods :'Sogou Pinyin | Baidu Pinyin | Microsoft Pinyin | Rime (Weasel) | QQ Pinyin' . Will they fire the event ? i have no conditions to perform that test

ccloli commented 3 years ago

so the issue is caused by electron 11.x the event with that keyCode 229 would never fired when typing Chinese for some IME like Sogou IME and Baidu IME.

Well, not exactly. In fact, when you set a listener to keydown event, you'll find on Electron 9 it'll fire the event when you complete the inputs, while on newer Electron like 12, keydown event is never fired.

https://user-images.githubusercontent.com/8115912/110315282-ffefc580-8043-11eb-9816-98c79fa4147a.mp4

https://user-images.githubusercontent.com/8115912/110315303-041be300-8044-11eb-82a6-1d9c1de96d9a.mp4

So there are 3 behaviors:

Microsoft Pinyin will fire keyup, keydown, input event when you input, and the input value is what you input right now
Rime and QQ Pinyin will fire keyup and keydown event when you input, but input value is your previous input; it won't fire input event until you complete it, and at this time the input value is the final input
Sogou Pinyin and Baidu Pinyin will only fire keyup event when you input, and input value is your previous input; it won't fire input and keydown event until you complete it, and at this time the input value is the final input; and in newer Electron 12, keydown event is never fired.

wyattzheng commented 3 years ago

@ccloli So, there is always one of 'keydown','keyup','input' at least will be fired when inputing ? maybe that's the solution for xterm.

If the browser runtime doesn't pass any events to xterm after user completed the input, xterm has not chances to fix the problem.

ccloli commented 3 years ago

If the browser runtime doesn't pass any events to xterm after user completed the input, xterm has not chances to fix the problem.

@ZhyMC Yep, so we've already dig in deep enough, there are at least two major issue needs to be resolved:

A css style issue of Xterm that makes input textarea with 0 width, makes QQ Pinyin and Rime not working anymore. This may can be fixed by a simple revert.
A runtime environment issue of Electron that doesn't dispatch keydown event when using Sogou Pinyin, so that Xterm cannot measure IME has completed the inputs.

Until you're willing to dive into how Xterm or Electron works, maybe we should let VSCode's contributors to complete the rest job, I guess.

wyattzheng commented 3 years ago

Well, i have done a little more work to investigate it.

In MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event

The compositionstart event is fired when a text composition system such as an input method editor starts a new composition session. For example, this event could be fired after a user starts entering a Chinese character using a Pinyin IME.

And xterm depends on this web event totally to compose console string by CompositionHelper.

But , you see, Sogou Pinyin wouldn't fire the compositionstart when input starting.

In Chrome (not chromium or Electron), browser work very well on firing this event with Sogou Pinyin.

What's more important, i think that xterm will break its design if a series of hacking codes inserted into its source just for solving this problem.

So, maybe it's necessary to ask the developers or maintainers of electron to focus on the problem,

A web stardard like compositionstart , browsers should follow what it specifies.

maybe IMEs using not good API, can't make electron (or chromium) to fire the event, but in old versions of electron, they can handle Sogou IME well.

ccloli commented 3 years ago

or maybe IMEs using not good API, can't make electron ( or chromium) the fire the event,

Yep, when I was testing keyboard event, it's clear that compare to QQ Pinyin and Rime, Sogou Pinyin is a bit ugly, since I think firing keydown event when typing is more reasonable.

Though QQ Pinyin and Rime doesn't change value in time, as they're keeping input text in themselves (so there is no input event), at least the other events (keydown, keypress, keyup) are dispatched correctly.

But Sogou Pinyin only fires keyup event, think about that, you can release a key press without pressing it, that's confused in logical.

Still can't believe that even though QQ Pinyin has merged to Sogou, Inc., they're using different implementations on engine. lol

BTW, QQ Pinyin's single-line mode is more likely to Microsoft Pinyin, so it works well in latest VSCode.

Anyway, I tested Electron 9 and 12, except Sogou Pinyin and Baidu IME, all the others can dispatch CompositionEvent correctly on both versions.

The non input problem we believe is a third party IME that has some problems.

So at this time, I'm totally agreed* with Xterm author's opinion. 🤣

^* Except css style problem, I think it's still strange.

wyattzheng commented 3 years ago

@ccloli Hahaha, at this time, i think the best solution is that uninstall the Sogou IME and try something else. And revert the commit which causes the css style problem.

Python-37 commented 3 years ago

So, the final solution is switch to QQ pinyin or Rime, and do these changes? https://github.com/microsoft/vscode/issues/115814#issuecomment-792254020 Maybe we should new a pull request.@ccloli @ZhyMC

longshihui commented 3 years ago

最好的办法还是切换输入法，插件会自动升级，旧版本的VSCode上插件会出现不可用的情况，例如Vetur

ccloli commented 3 years ago

So, the final solution is switch to QQ pinyin or Rime, and do these changes? #115814 (comment)

@Python-37 Yes but not exactly, that's just a solution, I don't want to spend time on it for now since I'm still having works to do. At least, for common users, you can try these options, and for advanced users, you can build it by yourself and revert the broken commit (or just use my compiled binary, but I'm not supposed to update it).

BTW, I tried to run Xterm in Edge, a "real" browser, and it's fun that at this time, Sogou Pinyin fires all the events we needed, and Xterm works well. But Baidu IME is still not working, just the same as in Electron.

https://user-images.githubusercontent.com/8115912/110411731-0888e000-80c6-11eb-9f06-9f7449e56d5c.mp4

https://user-images.githubusercontent.com/8115912/110411743-0cb4fd80-80c6-11eb-9a73-ccd60ad35035.mp4

Browser	Events	Sogou Pinyin	Baidu Pinyin	Microsoft Pinyin	Rime (Weasel)	QQ Pinyin	QQ Pinyin (SL)
Electron 9	KeyboardEvent	🔺	🔺	✔	✔	✔	✔
	CompositionEvent	✖	✖	✔	✔	✔	✔
	Value up-on-date	✖	✖	✔	✖	✖	✔
	Xterm Working	✔	✔	✔	✖	✖	✔
Electron 12	KeyboardEvent	✖	✖	✔	✔	✔	✔
	CompositionEvent	✖	✖	✔	✔	✔	✔
	Value up-on-date	✖	✖	✔	✖	✖	✔
	Xterm Working	✖	✖	✔	✖	✖	✔
Edge	KeyboardEvent	✔	✖	✔	✔	✔	✔
	CompositionEvent	✔	✖	✔	✔	✔	✔
	Value up-on-date	✔	✖	✔	✖	✖	✔
	Xterm Working	✔	✖	✔	✖	✖	✔

KeyboardEvent: ✖ Only keyup | 🔺 Only keyup on input, but will fire keydown when completed | ✔ All events
CompositionEvent: ✖ No events | ✔ All events
Value up-on-date: ✖ Won't update UI input value in realtime when inputing | ✔ Will update UI input value in realtime
QQ Pinyin (Single-line mode) behaves more like Microsoft Pinyin
QQ Pinyin and Weasel are not working is mostly because of a css style issue

So I guess Sogou Pinyin maintains a list to determine which mode will be used for specific program, since when using Edge, its behavior is more like Microsoft Pinyin.

So at this time, I think (besides the css style problem) it's Sogou Pinyin and Baidu IME's fault. 🤔

longshihui commented 3 years ago

Today，Sogou Pinyin is work! maybe Sogou Pinyin updated? My VSCode version is 1.54.1

微信截图_20210310090344

ccloli commented 3 years ago

Today，Sogou Pinyin is work! maybe Sogou Pinyin updated? My VSCode version is 1.54.1

@longshihui Yep, so as I said in previous comment, Sogou Pinyin maintains a list that configuring use which mode for specific programs, and it has some hot-update today that changes working mode for VSCode. Though I guess it only matches released VSCode, since Code OSS, VSCode Insider and Electron are still not working.

https://user-images.githubusercontent.com/8115912/110570539-03449780-8191-11eb-9e36-5e01710dcf43.mp4

wyattzheng commented 3 years ago

@longshihui still not working for me, same as your vscode's version.

sogou

ccloli commented 3 years ago

@ZhyMC Restart your computer and retry. I reverted my VM to yesterday's snapshot, and disconnect the network, then I still get the hotfix, so maybe the hotfix is patched yesterday and it'll be apply on your next reboot.

BTW as I mentioned, the hotfix only applies to released stable VSCode, and seems that it's done by matching process execution name. If I rename Code.exe to Code-1.exe, it's broken again. 🤣

wyattzheng commented 3 years ago

@ccloli I have restarted my computer twice and found it's still not working (it's totally a released stable version which i downloaded from the vscode's official website).

But to my another computer in my workspace. It works! So the existence of hotfix is proved. As what you described, sogou maintains a list. that's incredible.