InputText and TextBlock work incorrectly with Unicode characters (Emoji, for example)

[AntonKosov]

Link on the forum

Repro

• Bug repro on jsfiddle
• Expected result: Unicode characters should be drawn correctly.
• Current result: Unicode characters are split by bytes (backspace deletes parts of Unicode characters, TextBlock splits Unicode characters incorrectly).

Screenshots

Desktop:

• OS: MS Windows 10
• Browser: Chrome
• Version: 84.0.4147.135 (Official Build) (64-bit)

[RaananW]

The issue is due to these lines:

while (line.length > 2 && lineWidth > width) {
            line = line.slice(0, -2) + '…';
            lineWidth = context.measureText(line).width;
        }

in textBlock.ts

Javascript has an issue with unicode, but it seems like for(let s in text) splits the string correctly. Fix should be trivial

[Popov72]

Unfortunately the fix won't be trivial because for (let s in text) works only in es6 and we target es5!

There are other locations where we will have to perform some changes: text.length does not work correctly when using >16 bits unicode char, so all code using substring with some variation of text.length will have to be changed too.

Targeting es6 would make the fix easier, else I think it can be a tedious task...

[RaananW]

Yep, just realized that as well. So, not trivial :-)

we won't target es6 only (especially due to our UMD module)

[RaananW]

Array.from does the job, but sadly not available in IE11. so I had to keep the old code for back-compat

[Popov72]

Nice!

Note that there are also some problems with the InputText control (maybe it's for another PR?).