Split text into graphemes correctly

[jiayihu]

Use graphemeSplit to correctly split chars into graphemes correctly for textStyles conversion.

This bug doesn't cause actually any issue to fabric, which I why I could not write any test. Fabric uses the textStyles utils only for toObject and fromObject, but since the bug is present in both directions fromObject(toObject(textStyles)) === textStyles, but it's technically wrong. If you use a text like 👨‍👩‍👦‍👦, it will be looped through as 4 distinct chars, but it's a single grapheme.

I know we should use object.graphemeSplit to actually use the overriden implementation from the consumer, but there's a comment that says there should be a way to provide the graphemeSplit implementation directly to fabric. So for now I think this is enough as reminder that textStyles should do grapheme splitting as well. If needed, we can change the functions to accept textLines: string[][] as array of grapheme-split text lines.

Also nobody reported this issue. I knew about it only because at work we use the TextStyleArray format both for serialization and for the React UI state, e.g. to show the text formatting buttons for the selected text.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[ShaMan123]

I have an easier solution for all this mess but we decided that Text is going to be rewritten.
I think this is a good PR and agree that graphemeSplit should be the instance method.
You can't override the fabric impl anymore, that was v5 architecture.
Regarding a test, I think the char you provided is a prefect test for the PR.

[ShaMan123]

Your other suggestion is even better IMO, passing down all the context.

[asturur]

grapheme split should still be overridable in some way, probably we should make it overridable with some configuration.

To be noted that if you change grapheme split implementation during lifetime of an app, or simply if new emoji get released and you update your code to support them with different splitting, then at that point style will be different, but so will be the text displayed, so i would consider that an edge case.

Regarding text, yes i m not going flip text over since is an highly used feature that requires stability.
If we really want to improve text we need to write a new one, starting to define what better means.

[jiayihu]

grapheme split should still be overridable in some way, probably we should make it overridable with some configuration.

Yes I agree, setting some configuration seems the most logical way

Thanks for writing the test 👍