Feat: Add inline code editor (#1156) (#1232) (#1220) (#1235)

## 🚀 Feature: Inline Code Editor

This PR adds a comprehensive inline code editing experience to the
DyadWrite component.

###  What's New

- **Inline Monaco Editor**: Edit code directly within the component
using Monaco Editor
- **Cancel/Revert**: Cancel changes and revert to original code state
- **Language Detection**: Automatic syntax highlighting based on file
extensions
- **Theme Support**: Proper dark/light mode theming integration



https://github.com/user-attachments/assets/c44ab622-6b86-403c-904d-3f327f9719e8


    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds an inline Monaco-based code editor to DyadWrite so users can edit
code blocks in place, then save or cancel changes. Saves stream edits
back to the chat as a dyad-edit block.

- **New Features**
- Inline editor with Edit, Save, and Cancel; preserves original code and
auto-expands when editing.
  - Language detection from file extension and dark/light theme support.
- Save streams edits via useStreamChat as <dyad-edit
path="...">...</dyad-edit> tied to the selected chat.
- Non-edit view still uses CodeHighlight; visibility toggle and
in-progress state respected.

- **Refactors**
- ChatMessage now uses DyadMarkdownParser instead of
VanillaMarkdownParser.

<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Adeniji Adekunle James
2025-09-17 07:03:22 +01:00
committed by GitHub
parent 8c3fdb0ad0
commit 2edd122d9b
5 changed files with 155 additions and 5 deletions

View File

@@ -431,6 +431,27 @@ export class PageObject {
async clickRestart() {
await this.page.getByRole("button", { name: "Restart" }).click();
}
////////////////////////////////
// Inline code editor
////////////////////////////////
async clickEditButton() {
await this.page.locator('button:has-text("Edit")').first().click();
}
async editFileContent(content: string) {
const editor = this.page.locator(".monaco-editor textarea").first();
await editor.focus();
await editor.press("Home");
await editor.type(content);
}
async saveFile() {
await this.page.locator('[data-testid="save-file-button"]').click();
}
async cancelEdit() {
await this.page.locator('button:has-text("Cancel")').first().click();
}
////////////////////////////////
// Preview panel