New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slash autocomplete: Support non-Latin inputs #10961

Merged
merged 1 commit into from Oct 24, 2018

Conversation

Projects
None yet
5 participants
@mcsf
Contributor

mcsf commented Oct 23, 2018

Fixes #10775

Description

Fix the / autocompleter for non-Latin scripts, i.e. make sure a block type whose name is registered in a non-Latin script (e.g. Список for the List block in Russian) can be chosen from the completer by typing /сп.

Context

In JavaScript regular expressions, \w and \W only match ASCII-based characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_". \w was used presumably to weed out any whitespace-containing
autocompleter inputs. Instead, look for non-whitespace characters.

How has this been tested?

  1. Set WordPress to Russian.
  2. Make sure you have the translation for the plugin: navigate to /wp-admin/update-core.php and click on the Upgrade button (can be found in the DOM under ID upgrade).
  3. Start a new post.
  4. In a blank paragraph block, type /сп

You should see the List block (Список) as the primary result.

Make sure the functionality is kept intact with Latin, and that the autocomplete feature doesn't pop up or disappear at unexpected times.

Types of changes

Bug fix

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
Autocomplete: Support non-Latin inputs
In JavaScript regular expressions, `\w` and `\W` only match ASCII-based
characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_".
`\w` was used presumably to weed out any whitespace-containing
autocompleter inputs. Instead, look for non-whitespace characters.

@mcsf mcsf force-pushed the fix/autocompleter-non-latin-matches branch from f7f2d4d to cf649d5 Oct 23, 2018

@mcsf mcsf added this to the 4.2 milestone Oct 23, 2018

@mcsf

This comment has been minimized.

Contributor

mcsf commented Oct 23, 2018

@youknowriad: wonder if you could test this with Arabic :)

@youknowriad

LGTM 👍 (at least in arabic)

@mcsf

This comment has been minimized.

Contributor

mcsf commented Oct 24, 2018

Thanks for reviewing! I'll merge.

/cc @brandonpayton since you worked a lot on Autocomplete.

@mcsf mcsf merged commit 80aa322 into master Oct 24, 2018

2 checks passed

codecov/project 48.77% remains the same compared to 1232f8f
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@mcsf mcsf deleted the fix/autocompleter-non-latin-matches branch Oct 24, 2018

@youknowriad youknowriad modified the milestones: 4.2, 4.1 - UI freeze Oct 24, 2018

youknowriad added a commit that referenced this pull request Oct 24, 2018

Autocomplete: Support non-Latin inputs (#10961)
In JavaScript regular expressions, `\w` and `\W` only match ASCII-based
characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_".
`\w` was used presumably to weed out any whitespace-containing
autocompleter inputs. Instead, look for non-whitespace characters.

antpb added a commit to antpb/gutenberg that referenced this pull request Oct 26, 2018

Autocomplete: Support non-Latin inputs (WordPress#10961)
In JavaScript regular expressions, `\w` and `\W` only match ASCII-based
characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_".
`\w` was used presumably to weed out any whitespace-containing
autocompleter inputs. Instead, look for non-whitespace characters.
@mtias

This comment has been minimized.

Contributor

mtias commented Oct 30, 2018

Thanks for the fix here!

@naokomc

This comment has been minimized.

naokomc commented Nov 2, 2018

I see this is closed but I noticed that the issue isn't solved for Japanese. I don't have Windows machine at hand so am explaining this for Mac (Chrome 69.0.3497.100).

  1. Open your computer's keyboard settings and add a Japanese keyboard (日本語). Once an additional keyboard is added, you can switch them using ctrl + space keys. If you have another app assigned to the shortcut, use the top bar icon near where your clock is.
  2. Set your WordPress language to Japanese.
  3. Start a new post.
  4. Set your keyboard to English and type / in a blank paragraph block.
  5. Switch to Japanese keyboard and type gazou -> hit space bar -> hit enter. You should see the letters 画像 after the /.

Result: I expected to see the image block appear in the search results but it did not.

A. At this point, you can move your cursor between the two letters ( and ) using arrow keys. If you hit and once each, you'll see the suggestion pop-up.

B. Also, if you delete the last letter and just leave /画, you'll see suggestions.

C. But just entering the first letter by regular writing action (ga -> space bar -> enter) doesn't have the same result as B above.

gutenberg-slash-insert

@designsimply

This comment has been minimized.

Contributor

designsimply commented Nov 2, 2018

Tested and confirmed using WordPress 4.9.8 and Gutenberg 4.2.0-rc.1 that I can't use the slash inserter search in Japanese. (17s)

@designsimply

This comment has been minimized.

Contributor

designsimply commented Nov 2, 2018

Note: I suggested a comment here because this PR was recent, but now I'm thinking it may be better as a separate issue. Please let me know and I would be happy to move it!

@mcsf

This comment has been minimized.

Contributor

mcsf commented Nov 5, 2018

Issue filed by Riad in #11479 — let's move the conversation there.

@designsimply, I suspect you weren't able to use slash completion mainly because your Gutenberg wasn't being localized to Japanese.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment