More agile code block edit flow (#1390) by SukuWc · Pull Request #1537 · intechstudio/grid-editor

SukuWc · 2026-06-23T11:56:41Z

Closes #1390
Closes #967

Makes working with code blocks less of a time sink by removing the need to open/close the full editor modal to switch between blocks.

Part 1 — auto-close & replace

A new monaco-session.store tracks the open editor's action + dirty state. Opening another block's editor while the current one is clean auto-closes and replaces it; while it has unsaved changes it's protected and the trigger is disabled.

Part 2 — inline editing

The read-only preview is replaced by a real inline Monaco editor in the action block, so you can edit any number of blocks without ever opening the modal.

Monaco.svelte decomposed into reusable CodeEditor (editor + validation + commit), CommitStatus, and CharacterCount components, reused by both the modal and the inline editor.
Inline editor: Commit/Discard with the modal's commit behavior, auto-sizing (5–20 lines), syntax validation, no line numbers, horizontal scroll, suggestions off.
Open Editor carries uncommitted inline edits into the modal; discard from the modal reverts the inline editor; commit from either keeps the other in sync.
The block open in the modal is locked inline with a dimmed grayscale overlay.
Syntax errors are dispatched to DynamicWrapper so the block is flagged invalid (red border) like other blocks, and cleared on teardown so the flag doesn't outlive the editor.
"Powered by Lua" footer moved into the modal.
Replaced svelte/animate flip with a translate-only reflow animation so blocks whose height changes (e.g. showing a syntax error) aren't vertically squished mid-animation.
Border/background switched to grid-uikit theme tokens (background-muted / background-soft), also applied to LineEditor.

Ctrl+S to commit/save (#967)

Ctrl/Cmd+S now commits/saves in every code-editor context. Each container catches the keystroke (preventDefault + stopPropagation, so it's scoped and doesn't hit the browser default or other handlers) and triggers the context's canonical button, which no-ops on its own when disabled:

Context	Component	Action
Inline code block	`CodeBlock.svelte`	Commit
Code editor modal	`Monaco.svelte`	Commit
File Manager	`FileManager.svelte`	Save

Per the direction in #967, this is scoped to editor/file-system commits rather than a global "save everything" state. Buttons are triggered via their rendered <button> for now; follow-up intechstudio/grid-uikit#50 proposes a MoltenPushButton.trigger() method to drop the wrapper + querySelector.

Notes

The literal "double-click the preview to open" trigger from Feature: More agile Code block edit flow #1390 is replaced by inline editing + an Open Editor button (the preview no longer exists).
Uncommitted inline edits live only in the editor buffer until Commit; collapsing/navigating away discards them (visible "Unsaved changes!" status + Commit/Discard mitigate this).

🤖 Generated with Claude Code

Double-clicking a code block or pressing Edit Code while another editor is open now auto-closes the clean editor and opens the new block. While an editor has unsaved changes (or an error), the Edit Code button is disabled on all code blocks until it is committed or discarded. Tracks the active editor in a new monaco-session store so any code block can react to its dirty state without reaching into the modal instance. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Make the code block editable in place instead of only via the modal. Decompose Monaco.svelte into reusable CodeEditor/CommitStatus/ CharacterCount components and reuse them for an in-action-block editor with Commit/Discard, auto-sizing (5-20 lines), syntax validation, and grid sync. - Open Editor carries uncommitted inline edits into the modal; discard from the modal reverts the inline editor; commit from either updates the other. - The block being edited in the modal is locked inline with a dimmed overlay. - Syntax errors are dispatched to DynamicWrapper so the block is flagged invalid (red border) like other blocks, and cleared on teardown so the flag doesn't outlive the editor. - Move the "Powered by Lua" footer into the modal. - Replace svelte/animate flip with a translate-only reflow so blocks whose height changes (e.g. showing a syntax error) aren't squished. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-23T11:58:37Z

Visit the preview URL for this PR (updated for commit 5871fca):

https://grid-editor-web--pr1537-feature-1390-agile-c-shodvob6.web.app

_{(expires Wed, 29 Jul 2026 09:58:14 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2b65ba6ef19c55d367eaffd04e46bcde25305d6f}

Catch Ctrl/Cmd+S in each code-editor context and trigger its commit/save button, which no-ops on its own when disabled. The handler is scoped to the editor's container (preventDefault + stopPropagation) so the shortcut doesn't leak to other handlers or the browser default. - CodeBlock.svelte: inline editor -> Commit - Monaco.svelte: editor modal -> Commit - FileManager.svelte: file editor -> Save Buttons are triggered via a click on their rendered <button> for now; once intechstudio/grid-uikit#50 lands (MoltenPushButton.trigger()) these can drop the wrapper + querySelector. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Update Playwright tests for the new code-block flow (the "Edit Code" button was replaced by inline editing + an "Open Editor" modal): - locators/page object open the modal via "Open Editor", scope the editor input and Commit/Close to #monaco-container, and read the inline editor (.view-line) instead of the removed <pre> preview - code-jump-back filters on the code text, not the old "Code preview:" Harden cross-test bleed on the shared page: - LogStream.store: expose reset() to force the log stream/logger empty - App.svelte: expose window.__gridTest.resetLogStream() in the web build - CursorLog: make the toast container pointer-events-none (messages stay interactive) so it no longer overlays clicks for ~5s after operations - configPage.resetTransientUi() clears toasts and closes a leftover-open action menu (blur first, since its search input swallows Escape) - target a single "Modifications can not" toast to avoid strict-mode hits Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-24T11:17:18Z

Visit the preview URL for this PR (updated for commit 5871fca):

https://grid-playwright-result--pr1537-feature-1390-agile-c-cwayx15g.web.app

_{(expires Thu, 02 Jul 2026 10:06:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 0f764ceb264072188bf1a5dee10613d8f10b4ca2}

Greg-Orca · 2026-06-24T12:06:32Z

shrink the error messages box

selectAllActions clicked into the config area, which now lands focus in a code block's inline Monaco editor — so Ctrl+A selected editor text and the select-all-actions shortcut silently bailed (the handler ignores events originating in .monaco-editor). That made "code jump back" delete the wrong block. Focus the .configpanel container instead so Ctrl+A reaches handleSelectAll. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Align error/luaSyntaxError displays with CodeBlock's pattern: theme-aware text-error, text-sm, whitespace-pre-line, max-h-24 overflow-y-auto. Replaces hardcoded text-red-400.

When GridScript.expandScript throws (malformed/compressed Lua), the outer catch nulled everything including fileContent, hiding the editor. Now the inner try/catch sets fileContent to the raw content and records the error, so the Monaco editor remains visible and the user can fix it.

…wraps

SukuWc · 2026-06-27T10:07:33Z

@Greg-Orca fixed

Greg-Orca · 2026-06-29T09:27:05Z

This error occurred during testing, but I can no longer reproduce it. I used virtual module, I created two Action Blocks on a single element and introduced syntax errors in both. I opened the second one, corrected it, and committed the changes. After that, these error messages occurred.

Greg-Orca · 2026-06-29T09:35:12Z

Unnecessary messages appear in the console

SukuWc · 2026-06-29T09:58:14Z

Automatic height calculator removed from inline code editor, height is now fixed 128px. The automatic height calculation is the most likely cause of the resize observer infinite loop. (Cannot verify 100%, let's hope)

SukuWc and others added 2 commits June 23, 2026 11:41

SukuWc added this to Editor Roadmap Jun 23, 2026

github-project-automation Bot moved this to Todo in Editor Roadmap Jun 23, 2026

SukuWc moved this from Todo to Ready for QA in Editor Roadmap Jun 23, 2026

SukuWc and others added 2 commits June 23, 2026 14:37

Merge branch 'stable' into feature/1390-agile-code-block-edit

c667362

Greg-Orca moved this from Ready for QA to QA in progress in Editor Roadmap Jun 24, 2026

Greg-Orca moved this from QA in progress to In Progress in Editor Roadmap Jun 24, 2026

SukuWc and others added 6 commits June 25, 2026 13:21

Standardize error message styling in FileManager

0cb3b64

Align error/luaSyntaxError displays with CodeBlock's pattern: theme-aware text-error, text-sm, whitespace-pre-line, max-h-24 overflow-y-auto. Replaces hardcoded text-red-400.

Move error display below code editor in FileManager and Monaco modal

345e825

Wrap buttons in container so they stay on one line when CommitStatus …

9694f57

…wraps

Merge branch 'stable' into feature/1390-agile-code-block-edit

624cf28

SukuWc moved this from In Progress to Ready for QA in Editor Roadmap Jun 26, 2026

Greg-Orca moved this from Ready for QA to QA in progress in Editor Roadmap Jun 29, 2026

Greg-Orca moved this from QA in progress to In Progress in Editor Roadmap Jun 29, 2026

Inline code editor: fixed 7-line height, removed auto-size logic

5871fca

SukuWc moved this from In Progress to Ready for QA in Editor Roadmap Jun 29, 2026

Greg-Orca moved this from Ready for QA to QA in progress in Editor Roadmap Jun 29, 2026

SukuWc merged commit e6cb943 into stable Jun 30, 2026
14 checks passed

Greg-Orca moved this from QA in progress to Done in Editor Roadmap Jun 30, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

More agile code block edit flow (#1390)#1537

More agile code block edit flow (#1390)#1537
SukuWc merged 12 commits into
stablefrom
feature/1390-agile-code-block-edit

SukuWc commented Jun 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 24, 2026 •

edited

Loading

Uh oh!

Greg-Orca commented Jun 24, 2026

Uh oh!

SukuWc commented Jun 27, 2026

Uh oh!

Greg-Orca commented Jun 29, 2026

Uh oh!

Greg-Orca commented Jun 29, 2026

Uh oh!

SukuWc commented Jun 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

SukuWc commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Part 1 — auto-close & replace

Part 2 — inline editing

Ctrl+S to commit/save (#967)

Notes

Uh oh!

github-actions Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Greg-Orca commented Jun 24, 2026

Uh oh!

SukuWc commented Jun 27, 2026

Uh oh!

Greg-Orca commented Jun 29, 2026

Uh oh!

Greg-Orca commented Jun 29, 2026

Uh oh!

SukuWc commented Jun 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SukuWc commented Jun 23, 2026 •

edited

Loading

github-actions Bot commented Jun 23, 2026 •

edited

Loading

github-actions Bot commented Jun 24, 2026 •

edited

Loading