feat: Add integrated console and error reporting to CodeEmbed

[Sumit6307]

Summary

This PR adds an integrated Console Panel to the interactive CodeEmbed component. It allows users to see console.log outputs, warnings, and runtime errors (such as syntax errors or missing arguments) directly within the website's interface, without needing to open the browser's developer tools.

Motivation

Currently, if a user—especially a beginner learning p5.js—makes a mistake in an interactive sketch (e.g., calling rect() without arguments), the sketch fails silently. This lack of feedback creates a significant barrier to learning. This feature closes the feedback loop by surfacing errors and logs immediately, making the documentation more interactive and helpful.

Implementation Details

1. New Component (ConsolePanel.jsx): Created a dedicated component to display a scrollable list of logs. It supports log, info, warn, and error levels with distinct visual styling (e.g., red background for errors).
2. Sandbox Bridge (frame.tsx): Modified the iframe injection logic to include a proxy script. This script intercepts console.* methods and global window.onerror / onunhandledrejection events inside the sandbox and forwards them to the parent window via postMessage.
3. State Management (index.jsx): Updated the main CodeEmbed component to listen for these console messages, store them in local state, and conditionally render the ConsolePanel. Also added a toggle button to the UI to show/hide the console.

Test Plan

I have verified the changes manually with the following scenarios:

1. Standard Logging: typed console.log("hello p5") in an editor -> confirmed the message appears in the panel.
2. Runtime Errors: typed rect() (missing arguments) -> confirmed a red error message appears and the console panel automatically expands to alert the user.
3. Syntax Errors: tested invalid syntax to ensure the error reporting catches execution failures.
4. UI Controls: verified that the "Clear" and "Reset" buttons correctly empty the log history.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have verified that the changes work as expected

[Sumit6307]

Summary

This PR adds an integrated Console Panel to the interactive CodeEmbed component. It allows users to see console.log outputs, warnings, and runtime errors (such as syntax errors or missing arguments) directly within the website's interface, without needing to open the browser's developer tools.

Motivation

Currently, if a user—especially a beginner learning p5.js—makes a mistake in an interactive sketch (e.g., calling rect() without arguments), the sketch fails silently. This lack of feedback creates a significant barrier to learning. This feature closes the feedback loop by surfacing errors and logs immediately, making the documentation more interactive and helpful.

Implementation Details

1. New Component (ConsolePanel.jsx): Created a dedicated component to display a scrollable list of logs. It supports log, info, warn, and error levels with distinct visual styling (e.g., red background for errors).
2. Sandbox Bridge (frame.tsx): Modified the iframe injection logic to include a proxy script. This script intercepts console.* methods and global window.onerror / onunhandledrejection events inside the sandbox and forwards them to the parent window via postMessage.
3. State Management (index.jsx): Updated the main CodeEmbed component to listen for these console messages, store them in local state, and conditionally render the ConsolePanel. Also added a toggle button to the UI to show/hide the console.

Test Plan

I have verified the changes manually with the following scenarios:

1. Standard Logging: typed console.log("hello p5") in an editor -> confirmed the message appears in the panel.
2. Runtime Errors: typed rect() (missing arguments) -> confirmed a red error message appears and the console panel automatically expands to alert the user.
3. Syntax Errors: tested invalid syntax to ensure the error reporting catches execution failures.
4. UI Controls: verified that the "Clear" and "Reset" buttons correctly empty the log history.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have verified that the changes work as expected

@ksen0 Plz Review and Merge this PR

[Sumit6307]

@ksen0 Plz Review and Merge this PR

[ksen0]

Hi @Sumit6307 , although this is a potentially interesting idea, this PR does not follow the contributor guidelines.

In this case, the motivation does not apply for the code snippets on the website:

Currently, if a user—especially a beginner learning p5.js—makes a mistake in an interactive sketch (e.g., calling rect() without arguments), the sketch fails silently. This lack of feedback creates a significant barrier to learning.

A user of the website is not developing their own sketches, they are running (possibly with tiny modifications) snippets that work. A beginner or learner working on their own sketch is either using the p5.js Editor, or another environment that has a console and error output. However, even if this can be motivated, it would need some community feedback in a discussion (in an issue), and approval for work and finally assignment by maintainers before submitting a PR. Please review the contributor guidelines, the process is explained there more thoroughly. You are welcome to consider opening an issue, but please explain the motivation more thoroughly, and create space for input before doing the work.

I did test this, and I see that the new button is not legible when toggled, and when there are multiple CodeEmbed objects, the console log is actually shared among them - which is extremely confusing. This indicates to me that the proposal was also not thoroughly tested.

For the above reasons, I will close this PR, thanks for understanding!