Implement editable CSV files with table-based editor #139
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.
This PR implements a comprehensive CSV editor for BlockPy, addressing the need for easy CSV file editing in the introductory block-based data science environment.
Implementation Overview
The CSV editor provides a user-friendly table interface for editing CSV data, following the same architectural patterns as existing editors (JSON, Markdown, etc.). It integrates seamlessly with BlockPy's file system and editor switching mechanism.
Key Features
Table Editing Interface: Edit CSV data in a structured table format with individual cell editing, making it intuitive for users to work with tabular data.
Dynamic Row/Column Management: Add and delete rows and columns with dedicated buttons, allowing users to reshape their data structure as needed.
Raw Text Mode: Toggle between table view and raw CSV text editing for advanced users who need direct access to the CSV format.
Robust CSV Parsing: Handles complex CSV cases including:
Visual Selection: Click-to-select functionality for rows and columns, with visual highlighting to indicate what will be deleted.
Technical Implementation
The implementation consists of:
src/editor/csv.js: New CSV editor component (331 lines) with custom CSV parser and table renderingsrc/editors.js: Registration of CSV editor for.csvfile extensionsrc/css/blockpy.css: Comprehensive styling for table interface, including hover effects, selection highlighting, and responsive designThe CSV editor follows the
AbstractEditorpattern, ensuring consistent behavior with file watching, upload/download functionality, and read-only mode support.Demonstration
The screenshot shows the CSV parser correctly handling complex data with commas and quotes, demonstrating the robust implementation that can handle real-world CSV files.
Quality Assurance
This implementation provides the foundation for making BlockPy a leading data science education platform by enabling intuitive CSV file editing capabilities.
Fixes #100.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.