Autocomplete and Hinter #1873

peilingjiang · 2021-05-23T19:52:53Z

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:

has no linting errors (npm run lint)
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)
is descriptively named and links to an issue number, i.e. Fixes #123

welcome · 2021-05-23T19:52:55Z

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

catarak · 2021-06-11T16:18:42Z

!!!!!!!!!!!! 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 · 2021-06-11T17:43:22Z

!!!!!!!!!!!! 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 · 2021-07-15T20:42:40Z

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 · 2021-07-15T20:48:44Z

Create Release Environment

catarak · 2021-07-15T20:54:54Z

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

peilingjiang · 2021-07-16T15:39:24Z

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 · 2021-07-16T18:38:23Z

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 😄

client/modules/IDE/components/EditorShowHint.jsx

client/styles/components/_hints.scss

catarak · 2021-07-16T19:39:04Z

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 · 2021-07-16T19:39:49Z

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

Atcold · 2021-08-18T21:44:53Z

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

peilingjiang · 2021-08-19T01:59:56Z

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 · 2021-08-19T19:12:05Z

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 ✨

catarak · 2022-04-27T19:18:08Z

Apologies for this taking so long to merge in! I clearly reached a place of burnout and am in the process of finding new leadership (see #2010). That being said, I am doing a lot better, and am focusing my attention on updating packages, documentation, closing pull requests, and organizing issues, so I will merge this one within the next month.

Atcold · 2022-05-27T20:39:39Z

Yay! One month anniversary today! 🥹
Jokes aside, I hope you're doing well 😊

peilingjiang · 2022-10-26T05:43:14Z

Any plans to reboot the merging of this PR? @catarak @raclim

raclim · 2022-10-26T14:59:05Z

Hi @peilingjiang! Thank you so much for your patience and understanding during our transitional period. I'm still learning the ropes for this position so merging in PRs and deployment might take some time, but I'd definitely love to continue the efforts that went into this feature.

Timeline wise, I'm hoping to get a flow established over the following month and will be delving into the PRs (including this one) within that time. 🙂

peilingjiang · 2023-05-20T13:30:10Z

Hey @raclim any plan on merging this? Thanks!

raclim · 2023-05-22T16:52:17Z

Hi @peilingjiang! I'm really sorry for not getting to this 😅 I'm currently away until the end of the week so I won't be as active here until then, but I'd still love to merge your work in! Would you be able to resolve some of the conflicts in this branch?

peilingjiang · 2023-05-25T07:44:26Z

@raclim I have resolved the conflicts, added the switch to turn it on and off, added tests for the switch, and updated the UI a little. It should be all ready to merge now.

Atcold · 2023-05-25T19:36:49Z

Let's do it! I'm waiting for this to be merged to start teaching P5.js using the native editor! 🥳🥳🥳

peilingjiang · 2023-05-29T16:18:25Z

@raclim Please let me know if there's anything that needs an update! Thanks for the review!

raclim · 2023-05-30T18:35:14Z

@peilingjiang Thanks so much for continuing to work on this! I just got back so I'll start looking over this today, and will hopefully get back to you on this by tomorrow!

raclim

Hi! Overall, I feel like this looks really great so far! :)

As noted in my other comments, I had some difficulty activating the feature without the noted line change within the show-hint.js file. Visually, it also appeared a bit differently for me.

Please let me know if there was something I might've missed or done incorrectly while reviewing this, or go ahead with adding any updates, thanks!

client/modules/IDE/components/show-hint.js

client/modules/IDE/components/Editor.jsx

Some of the requested changes have become outdated!

raclim · 2023-06-07T17:44:44Z

I looked through it with the updates and think it looks great! I also created a release environment for it. Thanks again so much for your hard work and super excited to see it live soon! :)

Atcold · 2023-06-07T20:43:23Z

Yay! 🥳🥳🥳

@peilingjiang, is there a way to trigger a command syntax suggestion?
Say I type re, the suggestion rect is provided, but there is no mention of what arguments it expects.
Having something like rect(x, y, w, [h], [tl], [tr], [br], [bl]) would help a lot!

peilingjiang · 2023-06-08T14:54:22Z

Thanks a lot @raclim @catarak @Atcold for all the support and comments! Pretty excited to see it being merged!

@Atcold Great suggestion! And here you go #2236 : )

add hinter and autocompletion for css and js

e5bda75

This comment has been minimized.

Sign in to view

change hinter options

5314b71

peilingjiang added 11 commits June 11, 2021 17:48

Merge branch 'develop' into autocomplete

9e5864d

rebase

fd3f5de

change hinter options

cdcb6e2

resolve

1770d49

resolve

c12470d

bump fuse.js

430b61f

Merge branch 'develop' into autocomplete

d994594

Merge branch 'develop' into autocomplete

d361074

Merge branch 'develop' into autocomplete

127efa8

Merge branch 'develop' into autocomplete

e272936

Merge branch 'develop' into autocomplete

26d881e

Merge branch 'develop' into autocomplete

538f313

catarak previously requested changes Jul 16, 2021

View reviewed changes

Merge branch 'develop' into autocomplete

b416d84

peilingjiang added 5 commits May 25, 2023 13:01

resolve package conflicts

5878d1d

update hinter utils for latest p5 updates

1056400

add switch for desktop and mobile and update ui

cddc1cd

make wider for long var names

044a230

update tests

02c276c

update syntax highlighting

14bef00

raclim reviewed Jun 2, 2023

View reviewed changes

client/modules/IDE/components/show-hint.js Show resolved Hide resolved

client/modules/IDE/components/Editor.jsx Outdated Show resolved Hide resolved

peilingjiang added 5 commits June 3, 2023 13:25

rm unused lines

2ff74a0

minor update

cf6b033

minor update

92ce962

update lock file

58f38cd

update lock file

0f3507a

raclim approved these changes Jun 7, 2023

View reviewed changes

raclim merged commit 4aaa5a0 into processing:develop Jun 7, 2023

peilingjiang mentioned this pull request Jun 8, 2023

Autocomplete++ #2236

Merged

4 tasks

bojidar-bg mentioned this pull request Jun 14, 2024

Keyword Syntax highlighting still outdated #3163

Open

Uh oh!

Autocomplete and Hinter #1873

Autocomplete and Hinter #1873

Uh oh!

Conversation

peilingjiang commented May 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

welcome bot commented May 23, 2021

Uh oh!

This comment has been minimized.

catarak commented Jun 11, 2021

Uh oh!

peilingjiang commented Jun 11, 2021

Uh oh!

catarak commented Jul 15, 2021

Uh oh!

catarak commented Jul 15, 2021

Uh oh!

catarak commented Jul 15, 2021

Uh oh!

peilingjiang commented Jul 16, 2021

Uh oh!

catarak commented Jul 16, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

catarak commented Jul 16, 2021

Uh oh!

catarak commented Jul 16, 2021

Uh oh!

Atcold commented Aug 18, 2021

Uh oh!

peilingjiang commented Aug 19, 2021

Uh oh!

catarak commented Aug 19, 2021

Uh oh!

catarak commented Apr 27, 2022

Uh oh!

Atcold commented May 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peilingjiang commented Oct 26, 2022

Uh oh!

raclim commented Oct 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peilingjiang commented May 20, 2023

Uh oh!

raclim commented May 22, 2023

Uh oh!

peilingjiang commented May 25, 2023

Uh oh!

Atcold commented May 25, 2023

Uh oh!

peilingjiang commented May 29, 2023

Uh oh!

raclim commented May 30, 2023

Uh oh!

raclim left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

raclim commented Jun 7, 2023

Uh oh!

Atcold commented Jun 7, 2023

Uh oh!

peilingjiang commented Jun 8, 2023

Uh oh!

Uh oh!

peilingjiang commented May 23, 2021 •

edited

Loading

Atcold commented May 27, 2022 •

edited

Loading

raclim commented Oct 26, 2022 •

edited

Loading