Preview mode for the editor web component

[DNR500]

Issue: 1655

Summary

Adds a preview attribute on <editor-wc> so hosts (like Code Classroom’s Experience CS project preview) can let people try a project without saving it.

Works for Python, HTML, and Scratch (Blocks).

Upload and download stay available where the editor already shows them. Saving, renaming, autosave, remix, and local backup stay off.

This is separate from read_only, which is a locked-down view (no upload). If both are set, read_only wins.

Behaviour

When preview="true" (and read_only is not set):

• People can try the project and use upload/download as usual
• Changes are not saved (no save button, no autosave, no remix, no local backup)
• The project name cannot be renamed — including in the Scratch bar, the default project bar, and the sidebar projects panel

Hosts that already use read_only are unchanged.

What changed

• Redux: preview flag
• Shared “are we in preview?” helper (preview only counts when read_only is off)
• Scratch and default project bars: no save / rename in preview; Scratch upload still follows “not read-only”
• Save button and Python/HTML save paths also respect preview
• Sidebar projects panel: no rename in preview
• Web component accepts preview and wires it into app state (same idea as read_only)
• README documents the attribute

How hosts use it

<editor-wc
  preview="true"
  with_projectbar="true"
  load_remix_disabled="true"
  …>
</editor-wc>

Classroom’s preview page should use preview, not read_only, once this build is available. See PR -https://github.com/RaspberryPiFoundation/editor-standalone/pull/1064

[Copilot]

Pull request overview

Adds a new “preview mode” for the <editor-wc> web component so hosts can enable Scratch upload/download while keeping saving disabled, with read_only explicitly overriding preview behavior.

Changes:

• Introduces editor.preview state + setPreview Redux action, wired from the web component attribute through WebComponentLoader.
• Adds usePreviewMode/selectPreviewMode helper to enforce “preview only when not read-only”.
• Updates Scratch project bar behavior (save + rename) and adds unit tests + README documentation for the new attribute.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/web-component.jsx	Adds preview to observed/boolean attributes so hosts can set <editor-wc preview="true">.
src/redux/EditorSlice.js	Adds preview to initial state and introduces setPreview reducer/action.
src/redux/EditorSlice.test.js	Adds unit test coverage for setPreview.
src/hooks/usePreviewMode.js	Adds selector + hook to compute effective preview mode (preview && !readOnly).
src/hooks/usePreviewMode.test.js	Adds unit tests for preview-mode selector behavior, including read-only override.
src/containers/WebComponentLoader.jsx	Plumbs preview prop into Redux via dispatch(setPreview(preview)).
src/containers/WebComponentLoader.test.jsx	Adds test verifying setPreview(true) is dispatched when preview prop is provided.
src/components/ProjectBar/ScratchProjectBar.jsx	Disables Scratch save + rename when preview mode is active; keeps upload gated by read-only.
src/components/ProjectBar/ScratchProjectBar.test.jsx	Adds preview-mode tests (upload/download shown, save hidden, no autosave; read-only override).
README.md	Documents the new preview attribute and the read_only precedence rule.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.