1415 show scratch logo in sidebar for scratch projects#1492
Merged
jamiebenstead merged 11 commits intoJun 11, 2026
Conversation
Closes: RaspberryPiFoundation/digital-editor-issues#1324 Added saved snapshot on HTML preview, based on the load: - Save/cache uses project.identifier || "project" in hooks/useProjectPersistence.js - Load reads with localStorage.getItem(id || "project") in hooks/useProject.js
Closes: RaspberryPiFoundation/digital-editor-issues#889 This fix makes the editor reload the project when the site language changes, but only if the project has not been edited. For example, if a project has both Spanish and English versions, switching the site from Spanish to English now loads the English project code. If the user has already changed the code, the editor keeps their local work instead of replacing it with the other language version. I've found for french is not working but i think it's because of the fallback of the server. https://github.com/user-attachments/assets/0fb0ab99-2e8c-4330-906a-d885fbfacc21
for editor-ui release
Part of RaspberryPiFoundation/digital-editor-issues#1448 ### Changes - Added pfem package and required changes for it to run properly - Added dompurify package for sanitising HTML contents that are returned from pfem - Added `friendly_errors_enabled` attribute set to `false` by default and added to redux - The new redux state read by PythonRunner and passed as a prop to both PyodideRunner and SkulptRunner - Added pfem logic to both runners and stored the friendly error html in redux - Updated ErrorMessage component to display the friendly errors conditionally - For now, CSS used to restrict to displaying title and summary parts of friendly error html - pfem will be updated so that we can choose parts before storing in redux -⚠️ The error messages will be formatted in another PR: #1485 ### Behaviour - When the editor-wc in the host app has `friendly_errors_enabled` attribute not set or set to `false`, it shows the original error. <img width="450" alt="Screenshot 2026-05-28 at 14 59 03" src="https://github.com/user-attachments/assets/4bff14ca-40cd-4a3e-b76e-98a69a45301e" /> - When the editor-wc in the host has `friendly_errors_enabled` attribute set to `true`, it shows the original error followed by title and summary of the new friendly error. <img width="500" alt="Screenshot 2026-06-01 at 15 16 33" src="https://github.com/user-attachments/assets/68b55121-0051-4169-84db-4abb9df4ca74" /> ### Notes on using the pfem ESM in Jest - Tried adding it to `jest.transformIgnorePatterns` in package.json, but resulted in a cascade of errors from plotly - Just moved `three` to `jest.transformIgnorePatterns` from `scripts.test` - Added global jest mocks for pfem and plotly to `setupTests.js` - Also imported plotly to `PyodideRunner/VisualOutputPane.test.js` - <- with a CJS build of pfem, these changes may be unnecessary
…#1486) Relates to: RaspberryPiFoundation/digital-editor-issues#1405 - Made the info panel feedback link configurable through the web component. - Kept the Code Editor feedback form as the default. ## Details - Added support for feedback_form_url on the web component. - Threaded feedbackFormUrl through the web component loader, project views, sidebar, and info panel. - Default feedback URL remains: https://form.raspberrypi.org/f/code-editor-feedback - Hosts such as Code Classroom can now pass: https://form.raspberrypi.org/4873801 --------- Co-authored-by: HJ <cocomarine@users.noreply.github.com>
## Summary - Add CLAUDE.md as a symlink to AGENTS.md so both agent instruction filenames resolve to the same content. ## Tests - Verified CLAUDE.md points to AGENTS.md with ls -l.
Reduces Sentry transaction sample rate - this should have a [performance benefit](https://docs.sentry.io/platforms/javascript/sampling/#sampling-transaction-events).
jamiebenstead
temporarily deployed
to
previews/1492/merge
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements issue #1415 by updating the sidebar branding for Scratch projects, and additionally introduces web-component feedback URL plumbing plus “friendly” Python error rendering (sanitized) for Pyodide/Skulpt runtimes.
Changes:
- Show a Scratch logo in the sidebar bar when the project type is Scratch.
- Add a configurable
feedback_form_urlattribute that drives the Info panel “Feedback” link (with URL validation). - Add optional “friendly errors” support for Python runners, including copydeck bundling and sanitized rendering.
Reviewed changes
Copilot reviewed 35 out of 37 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds lock entries for dompurify and @raspberrypifoundation/python-friendly-error-messages. |
| webpack.config.js | Adds webpack handling/copy step for python-friendly-error copydecks and resolves fullySpecified for the package. |
| src/web-component.js | Adds new web-component attributes (feedback_form_url, friendly_errors_enabled) and refactors change-detection into a helper. |
| src/utils/setupTests.js | Mocks python-friendly-error-messages and plotly for Jest. |
| src/utils/projectHelpers.test.js | Adds unit tests for projectHasChangedSinceInitialLoad. |
| src/utils/projectHelpers.js | Adds projectHasChangedSinceInitialLoad helper and internal component diffing. |
| src/redux/EditorSlice.test.js | Adds reducer tests for friendly-error state/actions. |
| src/redux/EditorSlice.js | Adds friendlyErrorsEnabled and friendlyError state plus actions. |
| src/hooks/useProjectPersistence.test.js | Updates tests to cover “don’t save on justLoaded unless changed” behavior. |
| src/hooks/useProjectPersistence.js | Uses initialComponents snapshot to avoid saving unchanged projects on initial load. |
| src/hooks/useProject.test.js | Adds tests ensuring local edits are preserved across locale changes. |
| src/hooks/useProject.js | Avoids reloading a project from cache/network when local edits exist for the same project. |
| src/containers/WebComponentLoader.jsx | Adds feedbackFormUrl default, passes it down, and wires friendlyErrorsEnabled into redux. |
| src/components/WebComponentProject/WebComponentProject.jsx | Passes feedbackFormUrl through to Project/MobileProject. |
| src/components/Mobile/MobileProject/MobileProject.jsx | Passes feedbackFormUrl into Sidebar. |
| src/components/Menus/Sidebar/SidebarBar.jsx | Adds Scratch logo support (via scratch_icon.svg) in the sidebar bar. |
| src/components/Menus/Sidebar/Sidebar.test.js | Adds coverage for passing feedback form URL to Info panel. |
| src/components/Menus/Sidebar/Sidebar.jsx | Wires feedbackFormUrl into the Info panel via panelProps. |
| src/components/Menus/Sidebar/InfoPanel/InfoPanel.test.js | Adds tests for custom feedback URL + invalid URL fallback behavior. |
| src/components/Menus/Sidebar/InfoPanel/InfoPanel.jsx | Adds feedback URL validation and supports injected feedbackFormUrl. |
| src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js | Adds tests for friendly-error integration in Skulpt runner. |
| src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx | Integrates python-friendly-error-messages (copydecks + adapter + dispatch friendly error). |
| src/components/Editor/Runners/PythonRunner/PythonRunner.jsx | Passes friendlyErrorsEnabled from redux into both Python runners. |
| src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.test.js | Updates Plotly test to assert Plotly calls (using mocked Plotly). |
| src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js | Adds tests for friendly-error integration in Pyodide runner. |
| src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx | Integrates python-friendly-error-messages and clears friendly error at run start. |
| src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js | Adds test ensuring project is cached before opening browser preview in a new tab. |
| src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx | Caches the current HTML project when opening preview in a new tab. |
| src/components/Editor/Project/Project.jsx | Passes feedbackFormUrl into Sidebar. |
| src/components/Editor/ErrorMessage/ErrorMessage.test.js | Adds coverage for friendly error rendering and sanitization behavior. |
| src/components/Editor/ErrorMessage/ErrorMessage.jsx | Sanitizes error HTML and renders optional friendly-error HTML. |
| src/assets/stylesheets/Scratch.scss | Hides the MakeyMakey extension element. |
| src/assets/stylesheets/ErrorMessage.scss | Hides “why/steps/patch/details” in friendly error output (title/summary only). |
| src/assets/scratch_icon.svg | Adds Scratch logo asset used in the sidebar bar. |
| README.md | Documents the new feedback_form_url web-component attribute. |
| package.json | Adds dependencies, updates test config/script, bumps version. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+68
to
+79
| const getProjectTypeLogo = (projectType) => { | ||
| switch (projectType) { | ||
| case "python": | ||
| return pythonLogo; | ||
| case "code_editor_scratch": | ||
| return scratchLogo; | ||
| case "html": | ||
| return htmlLogo; | ||
| default: | ||
| return null; | ||
| } | ||
| }; |
Comment on lines
+448
to
+461
| if (friendlyErrorsEnabled) { | ||
| const inputCode = | ||
| projectCode?.find((c) => c.name === "main" && c.extension === "py") | ||
| ?.content ?? ""; | ||
| const friendlyError = friendlyExplain({ | ||
| error: errorMessage, | ||
| code: inputCode, | ||
| runtime: "skulpt", | ||
| }); | ||
|
|
||
| if (friendlyError?.html) { | ||
| dispatch(setFriendlyError({ html: friendlyError.html })); | ||
| } | ||
| } |
Comment on lines
19
to
37
| "@raspberrypifoundation/design-system-react": "^2.7.0", | ||
| "@raspberrypifoundation/python-friendly-error-messages": "0.1.6", | ||
| "@react-three/drei": "9.114.3", | ||
| "@react-three/fiber": "^8.0.13", | ||
| "@reduxjs/toolkit": "^1.6.2", | ||
| "@replit/codemirror-indentation-markers": "^6.1.0", | ||
| "@sentry/browser": "^7.17.3", | ||
| "@sentry/react": "7.16.0", | ||
| "@sentry/tracing": "7.16.0", | ||
| "@szhsin/react-menu": "^3.2.0", | ||
| "apollo-link-sentry": "^3.2.3", | ||
| "assert": "^2.1.0", | ||
| "axios": "^1.15.2", | ||
| "classnames": "^2.3.2", | ||
| "codemirror": "^6.0.1", | ||
| "container-query-polyfill": "^1.0.2", | ||
| "date-fns": "^4.1.0", | ||
| "dompurify": "^3.4.6", | ||
| "eslint-config-prettier": "^8.8.0", |
jamiebenstead
deleted the
1415-show-scratch-logo-in-sidebar-for-scratch-projects
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Work for https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1415
Screenshot:
