add editable code in slide view#9389
Merged
Light2Dark merged 7 commits intomainfrom Apr 29, 2026
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Light2Dark
added
enhancement
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an editable code editor to slide view so presenters can toggle code visibility and run cells directly from the deck, while keeping islands (read-only embeds) bundles slim via a build-time stub/alias.
Changes:
- Introduces
SlideCellView(CodeMirror editor + output + run/stop/status) and wires it into the Reveal slides renderer behind a “Show code” toggle (+Ckeybinding). - Extracts shared “needs run” and status-class logic into
frontend/src/core/cells/utils.tsand reuses it in notebook cells and slide cells. - Updates islands build to alias
@/components/slides/slide-cell-viewto a no-op stub, and updates slides smoke-test examples/layouts to exercise the new behavior.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| marimo/_smoke_tests/slides_examples/nested_slides.py | Adds additional cells (tables) to the nested slides example; minor refactors in markdown cell. |
| marimo/_smoke_tests/slides_examples/layouts/nested_slides.slides.json | Extends slide layout to include a new sub-slide + fragments sequence. |
| marimo/_smoke_tests/slides_examples/kitchen_sink.py | Bumps generated version, tweaks headings, adds an iframe slide example. |
| frontend/src/core/islands/stubs/slide-cell-view.tsx | Build-time stub to keep slide editor dependencies out of islands bundles. |
| frontend/src/core/cells/utils.ts | Adds cellNeedsRun and cellStatusClasses helpers. |
| frontend/src/components/slides/slide-form.tsx | Stops keydown propagation in sidebar to prevent reveal.js navigation while interacting. |
| frontend/src/components/slides/slide-cell-view.tsx | New slide cell renderer with editable editor + output + run controls. |
| frontend/src/components/slides/reveal-slides.css | Styles CodeMirror within slides. |
| frontend/src/components/slides/reveal-component.tsx | Adds code toggle UI/keybinding and renders SlideCellView when code is shown. |
| frontend/src/components/editor/renderers/slides-layout/slides-layout.tsx | Removes external deckRef plumbing; enables slide editing based on mode. |
| frontend/src/components/editor/notebook-cell.tsx | Reuses extracted cellNeedsRun / cellStatusClasses. |
| frontend/islands/vite.config.mts | Uses ESM-safe dirname resolution; adds alias to stub out slide editor in islands build. |
Comments suppressed due to low confidence (1)
marimo/_smoke_tests/slides_examples/nested_slides.py:481
- After inserting the new cells above, this comment’s cell numbering is now out of sync with the actual file/layout (the closing slide is no longer cell 22). Updating the numbering/labels will help keep the slide layout JSON and this annotated example aligned.
@app.cell(hide_code=True)
def _(mo):
# Cell 22 (slide) — closing slide.
mo.md(
Comment on lines
+229
to
+245
| @app.cell | ||
| def _(mo): | ||
| _bios_df = { | ||
| "first_name": ["Jane", "Alex", "Doe", "Maria", "Li", "Omar"], | ||
| "last_name": ["Smith", "Johnson", "Brown", "Garcia", "Wei", "Ali"], | ||
| "age": [29, 35, 42, 28, 31, 45], | ||
| "occupation": [ | ||
| "Data Scientist", | ||
| "Product Manager", | ||
| "Software Engineer", | ||
| "UX Designer", | ||
| "Researcher", | ||
| "Entrepreneur", | ||
| ], | ||
| "location": [ | ||
| "San Francisco, CA", | ||
| "New York, NY", |
There was a problem hiding this comment.
The _bios_df table data is duplicated verbatim across multiple consecutive cells. This adds a lot of noise to the slides example and makes future edits error-prone. Consider defining the dataset once (e.g., in an earlier cell that returns it, similar to how secret is shared) and reusing it in the downstream table cells.
Collaborator
Author
There was a problem hiding this comment.
I did this to showcase how a large code editor would look like
Collaborator
Author
|
@cubic-dev-ai review |
@Light2Dark I have started the AI code review. It will take a few minutes to complete. |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
3 issues found across 15 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="frontend/src/core/meta/__tests__/code-visibility.test.tsx">
<violation number="1" location="frontend/src/core/meta/__tests__/code-visibility.test.tsx:38">
P1: Don't redefine `window.location` in jsdom; use `history.replaceState` to update `search` and restore the original URL instead.</violation>
</file>
<file name="frontend/src/core/islands/stubs/slide-cell-view.tsx">
<violation number="1" location="frontend/src/core/islands/stubs/slide-cell-view.tsx:18">
P1: Missing `SlideCellReadOnlyView` export. The real module exports both `SlideCellView` and `SlideCellReadOnlyView`, and `reveal-component.tsx` statically imports both. This stub only provides `SlideCellView`, so `SlideCellReadOnlyView` will be `undefined` in the islands bundle. Add the stub for both exports to avoid a potential runtime crash and to keep the module contract consistent.</violation>
</file>
<file name="frontend/src/components/slides/reveal-component.tsx">
<violation number="1" location="frontend/src/components/slides/reveal-component.tsx:290">
P2: The "C" key binding is registered only once in `handleDeckReady` (which fires on the deck's `onReady` event). If `codeToggleEnabled` is `false` at that moment but later becomes `true` (e.g., in read mode when cell code loads asynchronously), the keyboard shortcut will never work — only the button will. Consider registering the binding unconditionally in `handleDeckReady` (since `codeShown` already guards rendering) or adding an effect that calls `addKeyBinding`/`removeKeyBinding` when `codeToggleEnabled` changes.</violation>
</file>
Architecture diagram
sequenceDiagram
participant User
participant RevealComp as RevealSlidesComponent
participant RevealJS as reveal.js API
participant CellView as SlideCellView
participant Editor as CellEditor (CodeMirror)
participant Kernel as Python Kernel
Note over User,Kernel: Initialization & Configuration
RevealComp->>RevealComp: useNotebookCodeAvailable()
Note right of RevealComp: Checks mode, kiosk status,<br/>and include-code query param
RevealComp->>RevealJS: NEW: addKeyBinding('C', toggleShowCode)
Note over User,Kernel: Toggle Code Flow
User->>RevealJS: Press "C" or Click Code Icon
RevealJS->>RevealComp: toggleShowCode()
RevealComp->>RevealComp: SET showCode = !showCode
alt NEW: showCode is TRUE
RevealComp->>CellView: Render SlideCellView
alt Mode is "Edit" or "Present"
CellView->>Editor: NEW: Initialize Editable Editor
Editor-->>CellView: Display Source Code
else Mode is "Read"
CellView->>CellView: NEW: Render SlideCellReadOnlyView
end
end
Note over User,Kernel: Interactive Execution (Editable Mode Only)
opt If isEditable is True
User->>Editor: Edit code + Ctrl/Cmd+Enter
Editor->>Kernel: NEW: runCell(cellId, code)
Kernel-->>CellView: Update Cell Runtime State
CellView->>CellView: CHANGED: Render Output (Above/Below)
Note right of CellView: Uses cellOutputPosition<br/>from UserConfig
end
Note over RevealComp,RevealJS: Layout Synchronization
RevealComp->>RevealJS: NEW: triggerResize()
Note right of RevealJS: Ensures slide content fits<br/>with editor visible
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.
There was a problem hiding this comment.
No issues found across 15 files
Architecture diagram
sequenceDiagram
participant U as User
participant R as RevealSlidesComponent
participant RV as Reveal.js (Deck)
participant CV as useNotebookCodeAvailable
participant SV as NEW: SlideCellView
participant CM as CellEditor (CodeMirror)
participant K as Marimo Kernel
Note over U,K: Slide View Initialization
R->>CV: Check code availability (mode, URL params, cells)
CV-->>R: codeToggleEnabled
opt codeToggleEnabled is true
R->>RV: NEW: addKeyBinding('C', toggleShowCode)
end
Note over U,K: Toggle Code Flow (Press 'C' or Click Icon)
U->>R: Trigger toggleShowCode()
R->>R: NEW: update showCode state (via startTransition)
alt showCode is TRUE
R->>SV: NEW: Render SlideCellView (for active slide)
SV->>CM: Mount CodeMirror instance
R->>RV: CHANGED: triggerResize() (adjust for editor height)
else showCode is FALSE
R->>SV: Unmount SlideCellView
R->>RV: triggerResize()
end
Note over U,K: Runtime Execution from Slide
U->>CM: Edit Python code
U->>CM: Cmd+Enter / Click Run
CM->>SV: runCell(cellId)
SV->>K: Send execution request
K-->>SV: Cell output/status update
SV->>SV: CHANGED: update cellStatusClasses (needsRun, errored, etc.)
Note over U,K: Read-Only / Island Boundary
alt Mode is "read"
R->>SV: NEW: Render SlideCellReadOnlyView
SV->>SV: Render syntax-highlighted static block
else Is Island/Static Export
Note over R,SV: Build-time stubbing replaces SlideCellView with null
R->>CV: returns false (isIslands() check)
end
Light2Dark
changed the title
|
🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.5-dev6 |
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.
📝 Summary
Screen.Recording.2026-04-27.at.1.20.50.PM.mov
run mode (with
include-code)Follow-up PRs:
📋 Pre-Review Checklist
✅ Merge Checklist