Automatically add a space before the emoji if the user is typing Chinese and uses emoji picker

Hi Discourse team:

I have been using Discourse for 4 years and love the modern design and quick update. Thank you!

Recently I have noticed some issues in my forum, that in China, we seldom use spaces like you do in English, so basically every emoji from emoji picker is screwed like this:

呵呵:thinking:

Which is annoying and confuses most Chinese users. Can you think of a way to improve the Chinese user experience?

Thank you!

Yinglu

7 إعجابات

Any ideas @j.jaffeux?

We half fixed this with:

https://github.com/discourse/discourse/commit/d2a7a4916abecea389c99ae84de3bd40517b00d9

But what we need to do is match the implementation here:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js.es6#L154-L156

Which is checking for isSpace or isPunctChar.

3 إعجابات

Any progress? Got complaints from my users again today ;(

You can do this much simpler by always putting a space before the emoji code when selected from the picker.

You can also skip this space if the character immediately before is space.

إعجاب واحد (1)

Do you mean doing this manually or programmatically?

That will need Discourse core to be modified. Probably somebody can write a simple plugin to do this…

إعجاب واحد (1)

We have a few options here:

  1. Allow 呵:t_rex: so :t_rex: is an emoji. The problem though is that it is very expensive to detect Chinese per https://github.com/alsotang/is-chinese/blob/master/ischinese.js so this would add a bunch of extra slowness to the MD engine.

  2. Fix it so autocomplete behaves consistently with the way the engine interprets it. Meaning 呵:t should not pop open an emoji window.

  3. @schungx suggestion where after autocomplete is done we insert a space prior to emoji if needed.

  4. Add a “special mode” into Markdown where it requires no special punctuation between emoji and then a:t_rex:a would render a :t_rex: a.

I feel like the best way forward here is (2) and (4) combined. So:

  • Out-of-the-box autocomplete is not doing any funny business where it pretends to add an emoji and does not

  • In Chinese forums where words are just joined we would set SiteSetting.require_punct_before_emoji = false (and have autocomplete respect this)

@misaka4e21 / @tgxworld what are your thoughts here?

8 إعجابات

Yea I think a locale based site setting is best way to go here.

3 إعجابات

There are two problems:

  • (a) If an emoji are chosen from the emoji picker, it will lack for a space before the first colon :, not only in Chinese posts, but in English posts as well. Users will get a not rendered a:smile: (a:smile:) if they input a and then select :smile: (:smile:) from the emoji picker.
  • (b) A colon : after a Latin character won’t cause auto-completion, yet a colon after a CJK Unihan character will. It could be solved exactly by (2).

To solve (a), (3) should be implemented in the emoji picker, not / not just in auto-completion.

(1) and (4) are in different logic.
To check if a character is in Chinese or not, we could try:
https://github.com/zh99998/discourse-username-localization/blob/master/assets/javascripts/discourse/pre-initializers/override-username-match.js.es6#L18
Though I don’t know whether the regular expression above will provide higher performance.

3 إعجابات

I remember going down the regular expression route in the past but that means we carry this giant regexp everywhere we go. For chinese forums, we can just have a site setting that does not require a space before : to render emojis.

5 إعجابات

@venarius is https://github.com/discourse/discourse/pull/7429 going to fix this ?

5 إعجابات

Yes, this will insert a space before an emoji if there isn’t any.

5 إعجابات