p5.js library Autocomplete and/or link to specific parts of reference

[shiffman]

Students requested a link to the p5.js reference in the editor. Ideally we would also eventually have an option where you could highlight a function name like fill, right-click, and have a "find in reference" option.

[catarak]

We could also consider features like autocomplete, definitions in the editor, and so on, using Tern.js. I found an example of using it with CodeMirror as well..

[zhuoxi]

In the mean time, maybe we could just put a link to the reference https://p5js.org/reference/ somewhere in the editor menu bar?

[ducklin5]

Ive tried compiling a tern definitions json file for p5 with tern's "condense" tool but it failed to work. Ive even tried it with other libraries like Three.js and jquery, and it worked. So condense works fine; I think the problem is the script. This was the command and the output : ****@**** MINGW64 ~/AppData/Roaming/Brackets/extensions/user/ternific/node_modules/tern/bin $ ./condense --name p /c/wamp/www/libraries/p5.js { "!name": "p" }

[catarak]

@ducklin5 I've never used tern before so I'm not sure how to help... want to give me more details as to what you've done so far and maybe we can attack it together?

[ducklin5]

Yes! Im using tern on brackets and on sublime text. Ive got no experience with it either and Im just trying to follow the manual and guides that Ive found googling. From what I gather we can use the "condense" tool that comes with it to compile a json file of definition and autocomplete terms for p5. Another option is the configure the yuidoc to format the output in the same format as that of tern.

[catarak]

Autocomplete file: https://p5js.org/reference/data.json

[ducklin5]

@catarak, is this json file a tern plugin or auto completion specifically for the p5 web editor?

[kaganjd]

@ducklin5 it's the output of running grunt on the p5 source. it's basically all the p5 documentation in JSON form. i'm working on getting it to a format that works with tern. here's a gist of that process so far: https://gist.github.com/kaganjd/32c87c49fda5f61b78aa2b88993daca4

[ash97531]

@catarak if this issue still not done.. I will be happy to work on this.

[jonnytest1]

y not just add typescript integration ? (i'd recommend switching to the monaco editor for this )

[lindapaiste]

The autocompletion is actually very easy to do using @codemirror/autocomplete once we upgrade to CodeMirror v6.

import { completeFromList, autocompletion } from '@codemirror/autocomplete';

import {
  p5FunctionKeywords,
  p5VariableKeywords
} from '../../../utils/p5-keywords';

const p5AutocompleteSource = completeFromList(
  Object.keys(p5FunctionKeywords)
    .map((keyword) => ({
      label: keyword,
      type: 'function',
      boost: 99 // TODO: detail
    }))
    .concat(
      Object.keys(p5VariableKeywords).map((keyword) => ({
        label: keyword,
        type: 'constant',
        boost: 50 // TODO: detail
      }))
    )
);

const p5AutocompleteExt = autocompletion({
  override: [p5AutocompleteSource] // TODO: include native JS
});

And then you include that p5AutocompleteExt object in the extensions array when creating the EditorView.