This repository was archived by the owner on May 18, 2026. It is now read-only.
feat: replace Ace Editor with Monaco Editor#513
Merged
Conversation
- Replace react-ace and ace-builds with @monaco-editor/react - Implement basic Monaco Editor integration in RubyTab component - Maintain Ruby syntax support and basic editor features - Update editor focus and cursor positioning for conversion errors - Fix: Ensure editor focuses correctly when switching tabs or on errors This is the initial minimal implementation for Issue #16. 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Add Monaco-compatible completion provider using existing snippets - Convert snippet documentation from HTML to Markdown - Implement real-time error markers using setModelMarkers - Ensure markers are cleared on successful conversion - Improve tooltip formatting for code snippets 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Define custom 'smalruby' language with Monarch - Highlight Smalruby-specific methods (move, turn_right, etc.) as distinct tokens - Restrict syntax highlighting to keywords and methods relevant to Smalruby - Update RubyTab to use the new 'smalruby' language mode - Fix lint errors and improve regex robustness for the language definition 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Add fontSize state and updateRubyFontSize action to rubyCode reducer - Implement font size selector UI in RubyTab - Link Monaco Editor fontSize option to Redux state - Fix varios lint errors and typos in reducer and container 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Implement zoom-in, zoom-out, and zoom-reset functionality for the Ruby editor - Use Scratch-style SVG icons (zoom-in.svg, zoom-out.svg, zoom-reset.svg) - Style zoom buttons to match Scratch UI conventions (stacked vertically above download button) - Use a step-based sequence for font size adjustment 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Remove background, border, and hover effects from zoom buttons - Set zoom icon size to 36x36px (2.25rem) - Background is now transparent as requested 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Change .wrapper height from fixed 2.75rem to auto - Remove border-radius: 100% from .wrapper - This allows the zoom buttons to be properly positioned above the download button 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Set position to bottom: 12px and right: 27px (12px margin + 15px scrollbar) - Use 36px fixed size for zoom buttons and icons - Set 8px margin between buttons (MARGIN_BETWEEN) - Center zoom buttons above the download button using flexbox 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Rename .button to .downloadButton and .img to .downloadIcon - Set icon size to 28x28px - Remove hover effect from download button - Ensure proper positioning within the vertical flex container 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
…right - Separate download and zoom controls into independent wrappers - Position download button at top: 1rem, right: 1rem - Position zoom controls at bottom: 12px, right: 27px (Blockly alignment) - Remove unused .wrapper and .zoomWrapper classes 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Add minWidth: 0 to the Monaco Editor's container div - This ensures the flex child can shrink below its initial content size, allowing Monaco's automaticLayout to respond correctly to window narrowing. 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Add ResizeObserver to monitor editor container size changes - Manually trigger editor.layout() on resize events - Add overflow: 'hidden' to the editor container to allow shrinking - Implement proper cleanup for ResizeObserver in componentWillUnmount - Call layout() when editor becomes visible to ensure correct initial size 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
…onsiveness" This reverts commit a442e77.
This reverts commit dad6125.
- Revert previous failed ResizeObserver and minWidth attempts - Implement window 'resize' listener to manually trigger editor.layout() - Add minWidth: 0, overflow: 'hidden', and position: 'relative' - This ensures the container can shrink and editor recalculates size. 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Add ResizeObserver to manually trigger editor.layout() - Set minWidth: 0 and overflow: hidden on editor container - This follows recommendations from Monaco Editor issue scratchfoundation#3393 - Ensures editor shrinks correctly when window size decreases 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Wrap Editor in a div with position: 'absolute' and inset: 0 - This ensures the editor doesn't inflate the flex container's min-width - This allows the parent container to shrink correctly when the window narrows - Retain manual layout() calls on window resize for maximum robustness 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Fix 'TypeError: Expected a function' caused by missing method in bindAll - Ensure all methods bound in constructor are correctly defined in the class 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Move inline styles to CSS - Remove redundant automaticLayout option (handled by ResizeObserver) - Organize code and remove investigative comments/ignored variables
takaokouji
force-pushed
the
feature/monaco-editor
branch
from
a04dad0 to
d6360b8
Compare
- Remove ace-builds and react-ace dependencies - Fix regex escaping in smalruby-mode.js - Implement localStorage persistence for rubyFontSize - Dispose completionProvider in componentWillUnmount - Fix typo in ruby-code reducer
- Always expose window.monacoEditor and window.monaco for integration tests - Update Monaco markers when Redux errors change (fixes 'Go' button behavior) - Add Monaco API-based error helper methods to RubyHelper - Replace Ace-specific XPaths with Monaco error detection in ruby-tab.test.js Co-Authored-By: Gemini <noreply@google.com>
- Implement dynamic localization using loader.config with fixed CDN path (0.55.1) - Force re-mounting Editor on locale change to ensure i18n is applied - Clear error markers and close zone widgets when switching away from Ruby tab - Enable fixedOverflowWidgets to prevent error popups from being cut off at the top
- Clear error markers and close zone widgets when switching away from Ruby tab - Enable fixedOverflowWidgets to prevent error popups from being cut off at the top - Reverted unsuccessful dynamic localization changes for further investigation
… attempt) - Clear error markers and close zone widgets when switching away from Ruby tab - Enable fixedOverflowWidgets to prevent error popups from being cut off at the top - Add .ttf support to webpack config to handle Monaco fonts - Reverted failed local monaco-editor import for further investigation
- Added monaco-i18n-helper.js to handle Monaco UI localization (menus, context menus) - Configured Monaco loader to use v0.55.1 from CDN with Japanese NLS messages - Re-mount Monaco editor when locale changes to apply translation - Removed unused monaco-editor-webpack-plugin and monaco-editor-nls - Added "Hira" to cspell.json 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Trigger 'editor.action.marker.next' when errors are detected - Applied to live updates and block conversion failures 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Moved download button from top-right to bottom-right to prevent overlap with Monaco error widgets - Positioned it just left of the zoom controls - Updated tooltip placement to 'top' and adjusted its arrow CSS 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
- Set scrollBeyondLastLine to true to allow scrolling past the end of the code 🤖 Generated with [Gemini Code](https://gemini.google.com/code) Co-Authored-By: Gemini <noreply@google.com>
github-actions Bot
pushed a commit
that referenced
this pull request
Jan 12, 2026
…o-editor feat: replace Ace Editor with Monaco Editor closes #509
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
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
This PR replaces the Ace Editor with Monaco Editor (v0.55.1) in the Ruby tab, significantly improving the code editing experience in Smalruby 3.
Implementation Details
react-aceto@monaco-editor/reactusing CDN-based loading (v0.55.1).fixedOverflowWidgetsto prevent error popups from being cut off.scrollBeyondLastLinefor a better editing experience at the end of files (similar to VS Code).window.monacoEditorandwindow.monacoin production builds to support existing integration tests.ruby-helper.jsand integration tests to compatible with Monaco API.ace-builds,react-ace,monaco-editor-webpack-plugin, andmonaco-editor-nls.Related Issue
Closes smalruby/smalruby3-develop#16 (Phase 1)
Testing
test/integration/ruby-tab/pass.🤖 Generated with Gemini Code
Co-Authored-By: Gemini noreply@google.com