Skip to content

ADD - module source code editor with Monaco integration - #40

Open
Kureii wants to merge 1 commit into
TBU-AILab:mainfrom
Kureii:feature/module-editor
Open

ADD - module source code editor with Monaco integration#40
Kureii wants to merge 1 commit into
TBU-AILab:mainfrom
Kureii:feature/module-editor

Conversation

@Kureii

@Kureii Kureii commented May 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Full-stack feature for reading and editing imported Python module source code through the management UI. Includes a reusable Monaco Editor component for Python with syntax highlighting, hot-reload support, and client-side basic validation.

New Reusable Component

PythonCodeEditor.razor (Shared/Components/Forms/) — wraps Monaco Editor with Blazor JS interop. Parameters: Value, ValueChanged, Height. Usable anywhere via <PythonCodeEditor @bind-Value="@code" Height="460px" />.

Architecture (full stack)

Python Core (GET/PUT /system/read|update/{short_name})
  |
CoreConnector -> CoreService -> CoreAppService -> CoreController
  |                                                    |
ICoreConnector  ICoreService  ICoreAppService   GET/PUT /api/core/module/{name}
                                                        |
                                            CoreApiService (client HTTP)
                                                        |
                                        ModuleEditModal.razor
                                            (Monaco Editor UI)

Changed Files

New files (3)

  • Shared/Components/Forms/PythonCodeEditor.razor — reusable Monaco Editor component
  • Pages/.../Core/Modules/Edit/ModuleEditModal.razor — edit modal with Monaco editor
  • Shared/Data/DTOs/Management/Core/Modules/CoreModuleContentDto.cs — shared DTO

Modified files (15)

Layer File Change
Client index.html Monaco Editor CDN (loader.js + require.config)
Client app.js monacoCreate/getValue/setValue/dispose JS functions
Client _Imports.razor Added @using for new Edit namespace
Client CoreModuleListItemHeader.razor Added Edit (pen icon) button
Client CoreApiService.cs / ICoreApiService.cs GetTaskCoreModuleContent / UpdateTaskCoreModule HTTP methods
Server CoreController.cs GET/PUT /api/core/module/{name} endpoints (Admin-only)
Application CoreAppService.cs / ICoreAppService.cs ReadModule, UpdateModule pass-throughs
Domain CoreService.cs / ICoreService.cs Pass-through methods
Domain CoreConnector.cs / ICoreConnector.cs HTTP calls to Python Core
Infrastructure DefaultResourcesConfiguration.cs 2 new EN validation resources
Shared UIValidationConstants.cs ModuleContentNotEmpty, ModuleContentPythonSyntax

Features

  • Python syntax highlighting via Monaco Editor (vs-dark theme)
  • Edit modal opens from module list item header (pen icon)
  • Loads module source code on modal open
  • Save with client-side validation (non-empty, contains class/def)
  • Module hot-reloads in Core after save (no restart needed)

Dependencies

  • Monaco Editor v0.52.0 (CDN, MIT license)
  • Requires corresponding EASE Core PR for the Python read/update endpoints

Full-stack feature for reading and editing imported Python module source
code through the management UI. Adds ModuleEditModal with Monaco Python
editor, GET/PUT endpoints on the server and client API layers, and
corresponding domain/connector pass-throughs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant