processing / processing/p5.js-web-editor

[Enhancement] Jump to Documentation — open p5.js reference from editor via context menu

Open
#4,098 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Feature Request On Hold
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Description

Increasing Access

When a user writes or selects a p5.js function using the autocomplete hinter (e.g. loadFont()), there is currently no way to quickly look up what that function does without leaving the editor, opening a browser tab, and manually searching the p5.js reference. This is slow and disruptive, especially for developers building larger sketches who need to check parameters and return values frequently.

Feature request details

Add a "Go to Documentation" option to the editor's right-click context menu. When clicked, it opens the official p5.js reference page for the selected/hovered token directly in a new browser tab.
Implementation outline:

Detect the token — Use CodeMirror's getTokenAt(cursor) to read the word at the cursor position when the context menu is triggered.
Construct the URL — Build a reference URL dynamically:

https://p5js.org/reference/p5/{token}
For example, right-clicking loadFont opens:
https://p5js.org/reference/p5/loadFont

Open in a new tab — Call window.open(url, '_blank') from the context menu handler.

Files likely affected:

Custom context menu component (wherever right-click menu is defined)
CodeMirror editor integration layer

User Experience

This mirrors the "Go to Definition" / F12 behaviour familiar from VS Code and other modern IDEs. The interaction would be:

User types or selects a p5.js function using autocomplete
User right-clicks the function name
Context menu shows "↗ Go to Documentation" as the first/highlighted item
Clicking it opens https://p5js.org/reference/p5/{functionName} in a new tab

Why this matters

Reduces context switching for beginners and experienced users alike
Consistent with IDE conventions users already know
Especially valuable during autocomplete-driven coding, where the user may not remember exact parameter order or return types
Low implementation complexity relative to the workflow improvement

Related / Prior Art

VS Code: hover + F12 / Ctrl+Click → Go to Definition
Chrome DevTools: documented function links in Console autocomplete

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the custom context menu component and the CodeMirror editor integration layer mentioned in the issue. Trace how the right-click handler obtains the cursor position, then use CodeMirror's getTokenAt(cursor) to identify the token. Done means a “Go to Documentation” item opens the corresponding p5.js reference URL in a new browser tab.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.