Chinese cannot be entered in the online version

[Wenjie Wu]

Chinese cannot be entered in the online version. （Just can't type directly with the keyboard, copy and paste is normal. I am using MacOS's built-in Input Method）

but can be entered in the native version

‌

‌

[John Maloney]

Thanks for letting me know. I’ll look into it.

I assume you are using the Chrome or Edge browser, right? What OS are you using? (It may not matter; I am just collecting information that might be relevant.)

[Wenjie Wu]

MacOS 10.15.7 . Chrome 97.0.4692.71

‌

[Wenjie Wu]

The same problem appears in Windows 10/Chrome

[John Maloney]

Thanks for the info. I’ve found the problem.

[John Maloney]

I’ve push a fix. Let me know if it works for you. You may need to flush your browser cache to get the latest version. It should be 1.1.26.

[Wenjie Wu]

It does allow for Chinese input, but with extra input process letters

‌

[John Maloney]

I was afraid that might happen. It’s getting two Javascript events with similar information, keyPress and textInput. The latter event, which I just added, is what enables Chinese input. Now that we have that, we should perhaps ignore the keyPress events… We can figure this out when you return from the New Year holiday.

[Wenjie Wu]

Hi @John Maloney , are you still dealing with the problem? I would like to know the current status.

[John Maloney]

Yep, a bit stuck at the moment and I haven’t had time to dig into it. The short-term workaround is to enter text in a text editor and use copy-paste. We can get input events with the Chinese characters but I’m not sure how to suppress the duplicated characters. I suspect it will be easy once we know the trick, it just isn’t obvious to me.

[Wenjie Wu]

The short-term workaround is to enter text in a text editor and use copy-paste.

That's exactly what I did.

I will try to solve the issue.

‌

[Wenjie Wu]

Hi John @John Maloney ,

I solved the problem！

I will create a pull request.

[Dariusz Dorożalski]

Your solution works by detecting Chinese "script" presence in "oninput" data...
There is a more generic, language-independent, solution for handling IME using "composition*" events.
https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

[John Maloney]

Thanks for that tip, Dariusz! I thought that’s what “oninput” was for; I didn’t know about compositionend. I’m much prefer a general, language-independent solution.

[John Maloney]

I experimented with composition events. While that may be the best way to handle Chinese input in the long run, I think it would require changes to the simple GP text editor. That is, a composition update event should replace the previous characters added since the start of composition, so the GP editor would need to keep track of the starting point and replace characters from there to the cursor on each update event.

Does Snap! handle Chinese input? If so, does it use composition events or some other mechanism?

For the short term, I’ve pushed Wenjie’s solution to the site. Wenje, let me know if it is working for you. It is working well for me – I am not getting doubled characters when I type in English.

I’ve left commented out handlers for composition events in the code to facilitate future experiments.

[Wenjie Wu]

Does Snap! handle Chinese input? If so, does it use composition events or some other mechanism?

Snap! supports Chinese input very well , Sanskrit and Japanese are also normal, It may use a a general, language-independent solution.

I haven't delved into snap! ， I'll look into it next week.

[Wenjie Wu]

Wenje, let me know if it is working for you

It works for me.

‌

I’ve left commented out handlers for composition events in the code to facilitate future experiments.

I will also continue to look for general solutions.

‌

[John Maloney]

I will ask Jens where this is handled in the Snap! code. With luck, it will be easy to adapt that mechanism for MicroBlocks…

[Wenjie Wu]

Good luck！

[Dariusz Dorożalski]

I’ve entered “women” by keyboard on Chrome@Win10 with Microsoft Pinyin - Chinese Simplified enabled.

input w

input wo
input wo'm
input wo'me
input wo'men
input 我们
compositionend 我们

There is only one “compositionend” event with completed phrase (IME “session” ended with mouse click or space). You may examine “keydown” to see if it’s properly flagged with “iscomposing” or 229 keycode to avoid duplication.

[John Maloney]

Great! So it looks like it would work to (a) have compositionstart to set a flag to suppresses normal keydown or input events during composition and (b) clear the flag when the compositionend event event is received and append the final text passed by that event. I’ll try that.

Part of my difficulty stems from not knowing how to use IME; it’s helpful to know that space or mouse click end the IME session.

Thanks for sharing your expertise!

[Dariusz Dorożalski]

“Keydown” event during “IME session” should be specially marked. You can compare regular and IME event to see difference in your browser. Chrome@Win10 - event.iscomposing = true

Part of my difficulty stems from not knowing how to use IME; it’s helpful to know that space or mouse click end the IME session.

It seems to be quite brittle. Sometimes I must switch back & forth ENG <> CHN, then select text field to see IME triggered

[John Maloney]

@Wenjie Wu I may have a fix. Try https://microblocks.fun/mbtest/ww/microblocks.html.

Here’s the relevant code from gpSupport.js (not yet committed since this is just a test):

//  document.oninput = function(evt) {
//      // console.log(evt.data)
//      if (Symbol.iterator in Object(evt.data)){
//          for (let ch of evt.data) {
//              if (/\p{Script=Han}/u.test(ch) || /\p{Emoji_Presentation}/u.test(ch)){
//                  GP.events.push([TEXTINPUT, ch.codePointAt(0)]);
//              }
//          }
//      }
//  }

    // IME composition events
    document.addEventListener('compositionstart', function(evt) {
console.log('compositionstart');
        GP.compositionText = '';
    });
    document.addEventListener('compositionupdate', function(evt) {
console.log('compositionupdate', evt.data);
        GP.compositionText = evt.data;
    });
    document.addEventListener('compositionend', function(evt) {
console.log('compositionend');
        for (let ch of GP.compositionText) {
            GP.events.push([TEXTINPUT, ch.codePointAt(0)]);
        }
        GP.compositionText = '';
    });

This does not use input events at all. It holds onto the contents of the most recent compositionupdate event and reports that to MicroBlocks when compositionend is received. (Note: In Chrome on MacOS, the compositionend event has an empty string in the data slot so the input text needs to be captured from the last compositionupdate event.)

Wenji, let me know if this works for you.

[Wenjie Wu]

It works perfectly for me！

[John Maloney]

Great! I have pushed that code to the MicroBlocks website. It should work for any input that uses composition events. I’m guessing that includes Emoji and other Asian and Indic languages. Thank you, @Dariusz Daniłko for the suggestion.

[Wenjie Wu]

👍