Autocomplete and Hinter

[peilingjiang]

trafficstars

Resolves #99

I was looking for WIPs and issues regarding autocompletion and found #99. Although the issue has been idle for a while, I think this feature can greatly help beginners to start and help reduce typos and increase efficiency in general. It turns out that CodeMirror provides a great base for implementing it so I tried to use its hinter addon and build this PR.

In addition to autocompletion, the hinters also have links to the corresponding documentation page. Not exactly the same as requested in #99 but provides a similar reference capability.

Some more details of this implementation:

• The style has been configured to work in all three themes.
• TBD It is triggered every time an alphabet is typed, unlike the native CodeMirror hinter that will only be triggered by Ctrl-Space.
• TBD It only works in css and javascript modes, as CodeMirror's HTML hinter works weirdly.
• TBD For JavaScript, it can only hint and autocomplete p5 keywords, unlike fancy IDEs that can also complete JS and customized keywords.
• I added a lightweight new dependency, fuse.js, to tolerate some misspellings, e.g., you can still get an option of circle even when you type cic as a start.
• It depends on a new utils file - p5-hinter.js - that can be updated by update-p5-hinter.js (just like update-syntax-highlighting.js). It fetches the same data but organizes it in a different way.

I have verified that this pull request:

• [x] has no linting errors (npm run lint)
• [x] is from a uniquely-named feature branch and has been rebased on top of the latest develop branch. (If I was asked to make more changes, I have made sure to rebase onto develop then too)
• [x] is descriptively named and links to an issue number, i.e. Fixes #123

[welcome[bot]]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[release-com[bot]]

Release Environments

This pull request environment is provided by Release, learn more! To see the status of the environment click on Environment Status below.

• p5.js-web-editor
  • app-ted6708-p5-js-web-editor.releaseapp.io

:wrench:Environment Status : https://app.releasehub.com/public/Processing%20Foundation/env-5c16b53226

[catarak]

!!!!!!!!!!!! thank you for working on this! there's actually a google summer of code project focused on autocomplete for the web editor, so I'm going to let them take the charge in reviewing this and making sure the UI/UX is good/is web accessible/keyboard shortcuts are good/etc.

[peilingjiang]

!!!!!!!!!!!! thank you for working on this! there's actually a google summer of code project focused on autocomplete for the web editor, so I'm going to let them take the charge in reviewing this and making sure the UI/UX is good/is web accessible/keyboard shortcuts are good/etc.

Didn't know about the ongoing progress. If possible, I'm also happy to work with the corresponding developer(s) to push it to the shipping state. Please let me know!

[catarak]

Thank you for continuing to update this PR! Sorry that progress has been slow. It turns out that there's not a GSoC project focusing on this issue, so I'm happy to review it.

[catarak]

Create Release Environment

[catarak]

Deployed at https://app-ted8cea-p5-js-web-editor.releaseapp.io

[peilingjiang]

Thank you for continuing to update this PR! Sorry that progress has been slow. It turns out that there's not a GSoC project focusing on this issue, so I'm happy to review it.

Thanks! Please let me know anything that I need to put more work on!

[catarak]

• TBD It is triggered every time an alphabet is typed, unlike the native CodeMirror hinter that will only be triggered by Ctrl-Space. I think this is the right approach as it functions like more "normal" IDE's.

• TBD It only works in css and javascript modes, as CodeMirror's HTML hinter works weirdly. In what way does it work weirdly?

• TBD For JavaScript, it can only hint and autocomplete p5 keywords, unlike fancy IDEs that can also complete JS and customized keywords. Do you know how much work it would be to complete JS keywords and user-defined functions/keywords? This could be a separate PR.

• I added a lightweight new dependency, fuse.js, to tolerate some misspellings, e.g., you can still get an option of circle even when you type cic as a start. This is great!

• It depends on a new utils file - p5-hinter.js - that can be updated by update-p5-hinter.js (just like update-syntax-highlighting.js). It fetches the same data but organizes it in a different way. This is totally cool. I think a separate PR could document these scripts 😄

[catarak]

One UI feedback—I think that the font size of the text in the hinter should be the same size as whatever the text size is set to in a user's preferences. This may need to be done in JS rather than CSS.

[catarak]

Overall this works so well and I can't wait to refine it and merge it in!!

[Atcold]

Hi @catarak, when were you thinking to merge this?

[peilingjiang]

Hi @catarak, when were you thinking to merge this?

So sorry for the delay in updating the PR! I don't think I'll have time to resolve the problems until early September as I'm running for some submission deadlines. I'll try to update as soon as possible for it to be ready to merge.

[catarak]

So sorry for the delay in updating the PR! I don't think I'll have time to resolve the problems until early September as I'm running for some submission deadlines. I'll try to update as soon as possible for it to be ready to merge.

No worries at all! I really appreciate the work you have done so far ✨

[peilingjiang]

Hi @catarak Can you please review the latest updates? All the requested changes are made, except the final UI improvement of dynamic text size which I think would take some more time for me to finish. Would it be possible for us to merge the current one so that people can start using it and I can work on the dynamic size with another PR?

[catarak]

Hi @catarak Can you please review the latest updates? All the requested changes are made, except the final UI improvement of dynamic text size which I think would take some more time for me to finish. Would it be possible for us to merge the current one so that people can start using it and I can work on the dynamic size with another PR?

This makes sense to me! I'll review it right now.

[catarak]

Just two things:

1. I noticed a couple of lines removed from the CodeMirror show-hint.js file to adapt it to work in the p5.js Editor. I'm not sure what they do, but I'm just curious if there's a reason you took them out.
2. I also think there should be a way to open the reference pages without using your mouse. I'm going to think about how this should work, because the usual way to focus on the button would be to use Tab. This obviously doesn't work because it triggers the autocomplete. If you have any ideas, let me know!

Edit: I've been thinking about (2) and I haven't been able to figure it out! I can't find any comparable UX patterns.

[catarak]

I couldn't figure out how to push to this branch so I made a couple of commits to https://github.com/processing/p5.js-web-editor/tree/catarak/autocomplete

[peilingjiang]

Thank you! I will rebase mine to yours. I think I removed the lines as I found the this.id is undefined, but I just realized that they do have a line to set that and I didn't add it at the beginning. Thanks for the updates! I am looking into the Tab functionality right now.

[peilingjiang]

Just two things:

1. I noticed a couple of lines removed from the CodeMirror show-hint.js file to adapt it to work in the p5.js Editor. I'm not sure what they do, but I'm just curious if there's a reason you took them out.
2. I also think there should be a way to open the reference pages without using your mouse. I'm going to think about how this should work, because the usual way to focus on the button would be to use Tab. This obviously doesn't work because it triggers the autocomplete. If you have any ideas, let me know!

Edit: I've been thinking about (2) and I haven't been able to figure it out! I can't find any comparable UX patterns.

I added the Tab. The thing is once you focus on the link, the hinter is blurred so up-n-down arrows no longer work - if you then change your mind and don't want to go to the documentation page and want to switch to another item, you'll need to click. Alternatively, as the second last commit did, I can also trigger the link directly by pressing Tab, we may want to make it as Ctrl/Command + Tab though (which is possible). I think I'd prefer this way. Please let me know what do you think!

[catarak]

Thanks for making these changes! I think this is moving in the right direction but it's not quite there.

I'm not sure about using Tab to open the reference link. Some ideas:

• Use the right arrow key to focus on the arrow, then Enter to open the link. Then left arrow would allow you to move up and down in the autocomplete again.
• Add a new keyboard shortcut (perhaps Shift + Right Arrow) that opens the selected dropdown item reference in a new tab, which keeps your focus on the editor window. This would allow a user to open multiple reference tabs, which could be useful. We could document this in the keyboard shortcuts.

Thank you so much for all of your work on this! Can't wait to get this right and merge it in ✨

[peilingjiang]

Great suggestions. I added arrow navigations - Right Arrow brings the nav to links, and Left Arrow brings it back. When a link is highlighted, hitting Return will not complete the word, but go to the page instead.

However, for Shift-Right Arrow shortcut, I did research and tried multiple ways, but it seems browsers intentionally disallow you to use JS to open a new tab in the background, to avoid malicious websites opening something without the user knowing it. I still added it, but the new tab will always be focused instead of stacking in the background. When the new tab is closed, the hinter is still focused.

On the other hand, Ctrl/Command + click still works for opening tabs in the background.

[catarak]

Thank you for making that change, I think the arrow keys work great!

One last thing I'm noticing is the color contrast. For the light and dark themes, I've tried to make everything WCAG 2.0 compliant, and the high contrast theme WCAG 3.0 compliant. I usually use this contrast checker. I'm happy to help with this, just let me know!

[peilingjiang]

Thank you for making that change, I think the arrow keys work great!

One last thing I'm noticing is the color contrast. For the light and dark themes, I've tried to make everything WCAG 2.0 compliant, and the high contrast theme WCAG 3.0 compliant. I usually use this contrast checker. I'm happy to help with this, just let me know!

I've made several changes to increase the readability and checked with WCAG, but this is relatively new to me so please feel free to tweak colors and UI if needed!

[Atcold]

I just wanted to point out that Jupyter lets you access the documentation with Shift-Tab. Then, I didn't get the right / left arrow bit. Usually you go up / down, no?

[catarak]

I just wanted to point out that Jupyter lets you access the documentation with Shift-Tab. Then, I didn't get the right / left arrow bit. Usually you go up / down, no?

Oh, thanks for the reference! I'll try Jupyter and see if I like how the autocomplete/opening documentation works.

[catarak]

@peilingjiang the color changes you made look great. the last things i would like to add to this are:

1. Adding the autocomplete keyboard usage to the keyboard shortcuts page
2. Adding the ability to turn on/off the the autocomplete in the preferences.

I can definitely work on these too!

[peilingjiang]

@catarak For these, do I also need to modify the translation files for each language?

[catarak]

@catarak For these, do I also need to modify the translation files for each language?

No! I think those can be separate tasks.

[peilingjiang]

I added it to the shortcut page, but for the switch I'm not sure how to do it, can you help me with that? @catarak I can rebase my branch to yours once you are done. Thanks.