NanoScript #444
NanoScript #444
Conversation
|
⏳ Code review in progress. Analyzing for code quality issues and best practices. You can monitor the review status in the checks section at the bottom of this pull request. Detailed findings will be posted upon completion. Using Amazon Q Developer for GitHubAmazon Q Developer1 is an AI-powered assistant that integrates directly into your GitHub workflow, enhancing your development process with intelligent features for code development, review, and transformation. Slash Commands
FeaturesAgentic Chat Code Review CustomizationYou can create project-specific rules for Amazon Q Developer to follow:
Example rule: FeedbackTo provide feedback on Amazon Q Developer, create an issue in the Amazon Q Developer public repository. For more detailed information, visit the Amazon Q for GitHub documentation. Footnotes
|
wellcode-ai
bot
added
review-effort-3
ampelectrecuted
left a comment
ampelectrecuted
left a comment
There was a problem hiding this comment.
@coderabbitai review
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughIntroduces a CodeMirror-based NanoScript editor as an alternative to block-based editing, integrates it into the GUI with mode switching, updates build configuration with new entry points and versioning, removes the Custom Reporters extension, and adds a playground home page. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🔍 General Code Quality Feedback🔍 Comprehensive Code ReviewConsolidated Feedback
Overall Assessment: The PR introduces significant changes to the codebase, particularly with the integration of CodeMirror for a new editor component. While the implementation shows promise, there are critical issues related to testing coverage and potential performance concerns that need to be addressed before merging. Critical Issues:
Improvements:
Positive Notes:
Next Steps:
By addressing these issues and implementing the suggested improvements, the quality and maintainability of the codebase will be significantly enhanced, reducing the risk of bugs and performance issues in production. 🤖 Generated by Wellcode.ai |
![amazon-q-developer[bot]](https://avatars.githubusercontent.com/in/1220912?s=60&v=4){kind=small}
There was a problem hiding this comment.
NanoScript Implementation Review
This PR introduces a CodeMirror-based text editor for NanoScript functionality in OmniBlocks. While the core concept is valuable, there are several critical issues that need to be addressed before merge:
Critical Issues
- Dependency conflicts: Multiple conflicting CodeMirror versions are installed, which will cause runtime errors and bundle bloat
- Syntax highlighting bugs: Malformed regex patterns in the tokenizer will cause parsing failures
- Poor UX patterns: Using
alert()instead of proper modal components
Major Concerns
- Bundle size impact: Monaco Editor adds ~2MB without clear justification
- Layout integration: CSS styling doesn't follow OmniBlocks' responsive design patterns
- Code quality: Unused imports and hardcoded values break consistency
Recommendations
- Fix dependency conflicts by removing deprecated packages and standardizing on CodeMirror v6
- Implement proper syntax highlighting with correct regex patterns for Scratch-like syntax
- Replace alert() calls with appropriate modal components
- Improve CSS integration to follow existing layout patterns
- Remove unused dependencies like Monaco Editor if not needed
The NanoScript feature shows promise for OmniBlocks' text-based editing goals, but these foundational issues must be resolved to ensure stability and maintainability.
You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.
package.json
Outdated
| "@codemirror/basic-setup": "^0.20.0", | ||
| "@codemirror/highlight": "^0.19.8", | ||
| "@codemirror/language": "^6.11.3", | ||
| "@codemirror/state": "^6.5.2", | ||
| "@codemirror/view": "^6.38.8", | ||
| "@ffmpeg/ffmpeg": "^0.12.15", | ||
| "@ffmpeg/util": "^0.12.2", | ||
| "@lezer/highlight": "^1.2.3", | ||
| "@lezer/lr": "^1.4.4", |
There was a problem hiding this comment.
🛑 Dependency Version Conflicts: Multiple conflicting versions of CodeMirror packages are being installed. The @codemirror/basic-setup package is deprecated and conflicts with the newer codemirror v6 package. This creates version mismatches that can cause runtime errors and bundle bloat.
| "@codemirror/basic-setup": "^0.20.0", | |
| "@codemirror/highlight": "^0.19.8", | |
| "@codemirror/language": "^6.11.3", | |
| "@codemirror/state": "^6.5.2", | |
| "@codemirror/view": "^6.38.8", | |
| "@ffmpeg/ffmpeg": "^0.12.15", | |
| "@ffmpeg/util": "^0.12.2", | |
| "@lezer/highlight": "^1.2.3", | |
| "@lezer/lr": "^1.4.4", | |
| "codemirror": "^6.0.2", | |
| "@codemirror/language": "^6.11.3", | |
| "@codemirror/state": "^6.5.2", | |
| "@codemirror/view": "^6.38.8", | |
| "@lezer/highlight": "^1.2.3", | |
| "@lezer/lr": "^1.4.4", |
package.json
Outdated
| "lodash.defaultsdeep": "4.6.1", | ||
| "lodash.omit": "4.5.0", | ||
| "lodash.throttle": "4.0.1", | ||
| "monaco-editor": "^0.55.1", |
There was a problem hiding this comment.
Monaco Editor is a large dependency (~2MB) that significantly increases bundle size. Since this PR appears to be implementing a CodeMirror-based editor, Monaco Editor may be unnecessary and should be removed unless specifically required for a different feature.
src/components/gui/gui.jsx
Outdated
| const scratchSyntax = StreamLanguage.define({ | ||
| token(stream) { | ||
| if (stream.match(/\b(when .*|say|repeat|if|else|forever|stop|broadcast|end)\b/)) return "keyword"; | ||
| if (stream.match(/\b(and|or|not|join|\+|\-|\*|\/|(abs|sin|cos) of .*)\b/)) return "operator"; | ||
| if (stream.match(/\b(join|pick random|length of)\b/)) return "function"; | ||
| stream.next(); | ||
| return "variable"; | ||
| } | ||
| }); |
There was a problem hiding this comment.
🛑 Logic Error: The syntax highlighting tokenizer has incorrect regex patterns that will cause runtime errors. The regex /\\b(abs|sin|cos) of .*\\b/ is malformed - .* inside word boundaries \\b will never match correctly, and the pattern will fail to tokenize mathematical expressions properly.
| const scratchSyntax = StreamLanguage.define({ | |
| token(stream) { | |
| if (stream.match(/\b(when .*|say|repeat|if|else|forever|stop|broadcast|end)\b/)) return "keyword"; | |
| if (stream.match(/\b(and|or|not|join|\+|\-|\*|\/|(abs|sin|cos) of .*)\b/)) return "operator"; | |
| if (stream.match(/\b(join|pick random|length of)\b/)) return "function"; | |
| stream.next(); | |
| return "variable"; | |
| } | |
| }); | |
| const scratchSyntax = StreamLanguage.define({ | |
| token(stream) { | |
| if (stream.match(/\b(when .*|say|repeat|if|else|forever|stop|broadcast|end)\b/)) return "keyword"; | |
| if (stream.match(/\b(and|or|not|join)\b/)) return "operator"; | |
| if (stream.match(/[+\-*/]/)) return "operator"; | |
| if (stream.match(/\b(abs|sin|cos)\s+of\b/)) return "operator"; | |
| if (stream.match(/\b(join|pick random|length of)\b/)) return "function"; | |
| if (stream.match(/\d+/)) return "number"; | |
| if (stream.match(/"[^"]*"/)) return "string"; | |
| stream.next(); | |
| return "variable"; | |
| } | |
| }); |
src/components/gui/gui.jsx
Outdated
| ".cm-content": { caretColor: "var(--looks-secondary)" }, | ||
| ".cm-cursor": { borderLeft: "2px solid var(--looks-secondary)" }, | ||
| ".cm-focused": { outline: "none" }, | ||
| ".cm-selectionBackground, ::selection": { backgroundColor: "rgba(255, 140, 26, 0.3)" }, |
There was a problem hiding this comment.
Hardcoded color value breaks theme consistency. Use CSS variables to maintain theme compatibility across all OmniBlocks themes.
| ".cm-selectionBackground, ::selection": { backgroundColor: "rgba(255, 140, 26, 0.3)" }, | |
| ".cm-selectionBackground, ::selection": { backgroundColor: "var(--looks-transparent)" }, |
src/components/gui/gui.jsx
Outdated
| className={styles.extensionButton} | ||
| title={intl.formatMessage(messages.addExtension)} | ||
| onClick={onExtensionButtonClick} | ||
| onClick={isNano ? () => { alert('Adding extensions in NanoScript is not available yet') } : onExtensionButtonClick} |
There was a problem hiding this comment.
Using alert() creates poor user experience and blocks the UI thread. Replace with a proper modal or notification component that matches OmniBlocks' design system.
| onClick={isNano ? () => { alert('Adding extensions in NanoScript is not available yet') } : onExtensionButtonClick} | |
| onClick={isNano ? () => { | |
| // TODO: Show proper modal instead of alert | |
| console.warn('Extensions not yet supported in NanoScript mode'); | |
| } : onExtensionButtonClick} |
There was a problem hiding this comment.
the alert is only a placeholder that will be removed at some point
| @@ -0,0 +1,4 @@ | |||
| export { EditorView } from "@codemirror/view"; | |||
| export { basicSetup } from "codemirror"; | |||
| export { LRLanguage, LanguageSupport, syntaxHighlighting, HighlightStyle } from "@codemirror/language"; | |||
There was a problem hiding this comment.
Unused imports detected. LRLanguage and LanguageSupport are exported but never used in the CMView component. Remove unused exports to reduce bundle size.
| export { LRLanguage, LanguageSupport, syntaxHighlighting, HighlightStyle } from "@codemirror/language"; | |
| export { syntaxHighlighting, HighlightStyle } from "@codemirror/language"; |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/components/gui/gui.jsx (4)
103-112: Review the syntax tokenizer logic.The StreamLanguage tokenizer has a potential issue:
The
tokenfunction always callsstream.next()at the end when no pattern matches, which advances the stream by one character. However, the regex patterns may not comprehensively cover all valid syntax, causing some tokens to be incorrectly classified as"variable"character by character.Consider:
- Making the patterns more comprehensive
- Using
stream.eatWhile()to consume entire words when no pattern matches- Returning
nullinstead of"variable"for whitespace/unknown charactersApply this diff to improve the tokenizer:
const scratchSyntax = StreamLanguage.define({ token(stream) { + if (stream.eatSpace()) return null; if (stream.match(/\b(when .*|say|repeat|if|else|forever|stop|broadcast|end)\b/)) return "keyword"; if (stream.match(/\b(and|or|not|join|\+|\-|\*|\/|(abs|sin|cos) of .*)\b/)) return "operator"; if (stream.match(/\b(join|pick random|length of)\b/)) return "function"; - stream.next(); - return "variable"; + // Consume entire word if not recognized + stream.match(/\w+/) || stream.next(); + return null; } });
114-148: Add error handling and clarify document source.Two observations:
Missing error handling: The dynamic import and EditorView instantiation can fail, but there's no try-catch block. Consider wrapping the async function body in try-catch to handle import or initialization errors gracefully.
Hardcoded document: The editor is initialized with a hardcoded example document. Is this intentional for the initial implementation, or should it eventually sync with scratch-vm state? Consider adding a TODO comment if this is a known limitation.
Apply this diff to add error handling:
async function loadEditor() { + try { const { EditorView, basicSetup, HighlightStyle, syntaxHighlighting, tags } = await import(/*webpackChunkName: "nanoscript-editor"*/ "./codemirror-imports.js"); // ... rest of the function editorRef.current = new EditorView({ doc: `when green flag clicked say "Hello World!" repeat 10 say (join "hi " "there") end`, extensions: [ basicSetup, scratchSyntax, syntaxHighlighting(scratchHighlight), cmTheme ], parent: el.current }); + } catch (error) { + console.error('Failed to load CodeMirror editor:', error); + // TODO: Show user-facing error message + } }Do you want me to open an issue to track VM integration for document synchronization?
161-161: Simplify the fragment wrapper.The fragment
<></>is unnecessary since the component returns two sibling divs. You can return them directly as an array or wrap them in a single container.Apply this diff:
-return <><div className={styles.sidebar}></div><div ref={el} className={styles.codemirror} style={{height: '100%', width: '100%'}} /></>; +return ( + <> + <div className={styles.sidebar}></div> + <div ref={el} className={styles.codemirror} style={{height: '100%', width: '100%'}} /> + </> +);Or if you want to avoid fragments:
-return <><div className={styles.sidebar}></div><div ref={el} className={styles.codemirror} style={{height: '100%', width: '100%'}} /></>; +return ( + <div style={{display: 'flex', height: '100%', width: '100%'}}> + <div className={styles.sidebar}></div> + <div ref={el} className={styles.codemirror} style={{height: '100%', width: '100%'}} /> + </div> +);
494-507: Clarify the conditional rendering logic.The condition
isNano ? blocksTabVisible && <CMView theme={theme} /> : <><Box...means CMView only renders when bothisNanoandblocksTabVisibleare true.This creates an inconsistency: the Blocks component always renders when
!isNano, but CMView requires an additionalblocksTabVisiblecheck. Is this intentional? IfblocksTabVisiblebecomes false while in Nano mode, the editor would disappear.Consider simplifying to:
{isNano ? ( blocksTabVisible && <CMView theme={theme} /> ) : ( blocksTabVisible && ( <> <Box className={styles.blocksWrapper}> <Blocks ... /> </Box> </> ) )}Or if the editor should always show in Nano mode:
{isNano ? ( <CMView theme={theme} /> ) : ( blocksTabVisible && ( <Box className={styles.blocksWrapper}> <Blocks ... /> </Box> ) )}src/components/gui/codemirror-imports.js (1)
1-4: Consider removing unused exports.This barrel module exports several items that aren't used in
gui.jsx:
LRLanguage(line 3)LanguageSupport(line 3)styleTags(line 4)While keeping them for future use is fine, removing unused exports can reduce bundle size. If these are planned for upcoming features, consider adding a comment noting their future use.
Apply this diff to remove unused exports:
export { EditorView } from "@codemirror/view"; export { basicSetup } from "codemirror"; -export { LRLanguage, LanguageSupport, syntaxHighlighting, HighlightStyle } from "@codemirror/language"; +export { syntaxHighlighting, HighlightStyle } from "@codemirror/language"; -export { styleTags, tags } from "@lezer/highlight"; +export { tags } from "@lezer/highlight";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
package.json(4 hunks)src/components/gui/codemirror-imports.js(1 hunks)src/components/gui/gui.css(2 hunks)src/components/gui/gui.jsx(3 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
📚 Learning: 2025-11-09T18:19:24.693Z
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
Applied to files:
src/components/gui/gui.jsx
📚 Learning: 2025-11-26T23:10:09.344Z
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-26T23:10:09.344Z
Learning: OmniBlocks/scratch-gui VRT: To avoid mis-clicking the Songs tab, select editor tabs by index using [role="tablist"] → [role="tab"]. Indices: Code=0, Costumes=1, Sounds=2, Songs=3. Apply in Playwright tests across CI.
Applied to files:
src/components/gui/gui.jsx
🧬 Code graph analysis (1)
src/components/gui/gui.jsx (1)
src/containers/blocks.jsx (1)
messages(49-74)
🪛 Biome (2.1.2)
src/components/gui/gui.css
[error] 365-365: unexpected character $
(parse)
[error] 372-372: unexpected character $
(parse)
🔇 Additional comments (7)
package.json (1)
42-43: Lezer dependencies look reasonable.The Lezer packages are correctly added for syntax parsing. However, ensure these versions are compatible with the CodeMirror packages once the version inconsistencies in lines 35-39 are resolved.
src/components/gui/gui.css (3)
57-57: LGTM!Adding
min-height: 0is a correct flexbox fix that allows flex children to properly shrink, which is necessary for the nested editor layout.
364-369: LGTM!The sidebar styling is straightforward. The
padding-right: 1pxappears intentional for layout alignment with the editor border.
371-373: LGTM! Ignore static analysis false positive.The
.codemirrorclass correctly defines a CSS custom property from a PostCSS variable, enabling the CodeMirror theme to reference--space. The Biome parse errors are false positives—Biome doesn't recognize PostCSS variable syntax ($).src/components/gui/gui.jsx (3)
77-80: LGTM!The component structure correctly uses
useReffor DOM binding and editor instance storage.
153-158: LGTM!The cleanup logic correctly prevents race conditions with the
disposedflag and properly destroys the editor instance to prevent memory leaks.
508-519: Extension button conditional logic looks correct.The extension button correctly shows an alert in NanoScript mode while preserving the original behavior in block mode. The user experience is clear.
wellcode-ai
bot
added
review-effort-3
|
/test pr |
🎉 MEGA PR Test & Analysis Complete!Hi @supervoidcoder! Your PR has been fully tested and analyzed! 🚀✨ 🌍 Test DeploymentLive Preview: https://OmniBlocks.github.io/scratch-gui/supervoidcoder/444/ 🧪 Test ResultsESLint: ❌ Found issues
Unit Tests: ❌
Integration Tests: ❌
📄 Full test outputs available in artifacts 🔦 Performance Audit (Lighthouse)✅ Audit completed successfully! 📊 Lighthouse Scores:
⚡ Core Web Vitals:
🟢 90-100 (Good) | 🟠 50-89 (Needs Improvement) | 🔴 0-49 (Poor) 📄 Full report in artifacts 📦 Bundle Size AnalysisTotal Build Size: 137M 📦 Top 5 Largest JavaScript Files:
🎨 Top 5 Largest CSS Files:
♿ Accessibility Testing✅ Accessibility scan completed!
📊 Build Details
💡 Pro Tip: Only one build was needed for all these checks - saving CI/CD minutes! 🎯 |
🎬 ULTRA Visual Regression Test ResultsHi @supervoidcoder! Tested across 9 combinations (3 platforms × 3 browsers). 8/9 completed. 📊 Test Matrix Summary
|
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.11% (1052 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.20% (1052 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.11% (1052 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 5.83% (53766 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.11% (1053 pixels)
Ubuntu + WebKit
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5173 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.25% (5173 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5173 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.31% (11526 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5173 pixels)
Windows + Chrome
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.11% (1052 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.20% (1052 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.11% (1052 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 41.49% (382342 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.11% (1052 pixels)
Windows + Firefox
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1062 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.20% (1062 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1062 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.06% (571 pixels)
Player View
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.00% (10 pixels)
Extension Library
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.21% (1927 pixels)
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1062 pixels)
Windows + WebKit
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5172 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.25% (5172 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5172 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.90% (33048 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5172 pixels)
Apple + Chrome
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1065 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.20% (1065 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1065 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 2.54% (23437 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1065 pixels)
Apple + Firefox
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1073 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.20% (1073 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1073 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 4.21% (38842 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.12% (1073 pixels)
Apple + WebKit
Editor Initial
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5128 pixels)
Blocks Workspace
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.24% (5128 pixels)
Stage Sprites
✅ No pixel difference detected.
Code Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5128 pixels)
Costumes Tab
✅ No pixel difference detected.
Sounds Tab
✅ No pixel difference detected.
Songs Tab
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.15% (5354 pixels)
Player View
✅ No pixel difference detected.
Extension Library
✅ No pixel difference detected.
Advanced Settings
| Base | PR | Diff |
|---|---|---|
 |  |  |
Diff: 0.14% (5128 pixels)
📦 Resources
|
aura 🤩 |
| @@ -0,0 +1,4 @@ | |||
| export { EditorView } from "@codemirror/view"; | |||
| export { basicSetup } from "codemirror"; | |||
There was a problem hiding this comment.
hmm wouldn't it be better to use monaco-react idk i kinda like monaco-react a bit better totally not biased trust XD
@coderabbitai what do you think
@ampelectrecuted
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
CodeMirror 6 vs Monaco Editor 2025 comparison
💡 Result:
Summary comparison — CodeMirror 6 vs Monaco Editor (2025)
Key differences
- Footprint & load: CodeMirror 6 is modular and much smaller by default (pick extensions as needed); Monaco is heavier with a larger initial bundle and longer startup. [1][3]
- Features & IDE feel: Monaco (the engine behind VS Code) provides built-in IntelliSense, symbol navigation, rename/diagnostics, diffing and many IDE-like services out of the box; CM6 provides a smaller core and achieves features via extensions (more work to assemble). [1][2]
- Language support & LSP: Monaco integrates easily with VS Code language services and LSP-style workflows for richer semantic features; CM6 uses Lezer parsers and can be wired to LSP, but semantic/TS-style services typically require extra wiring. [4][1]
- Performance (runtime & large files): Monaco is optimized for very large files and complex semantic ops but uses more memory; CM6 focuses on efficient incremental parsing and viewport rendering to remain responsive while keeping resource use lower. Real-world tradeoffs depend on workload and device. [3][4]
- Mobile & accessibility: CM6 has much better mobile/touch and accessibility support (designed with mobile in mind); Monaco is not well suited to mobile. [6][1]
- Customizability & embedding: CM6’s composable extension model offers fine-grained customization and smaller final bundles; Monaco offers a full-featured, consistent VS Code experience but is harder to trim and customize at low level. [1][3]
- Ecosystem & familiarity: Monaco benefits from VS Code compatibility and many existing language integrations; CM6 has growing community extensions and is used by major web apps (chosen where bundle size/mobile mattered). [2][5]
Which to pick
- Choose CodeMirror 6 if you need a lightweight, highly customizable editor, good mobile support, and fine control over bundle size and behavior. [1][6]
- Choose Monaco if you want an out-of-the-box VS‑Code‑like IDE experience (IntelliSense, go-to-definition, diagnostics) and your targets are desktop web apps where bundle size and mobile are less critical. [3][4]
Sources
[1] Replit — Betting on CodeMirror (discussion of CM6 modularity, mobile). (blog.replit.com)
[2] Replit — Comparing Code Editors: Ace, CodeMirror and Monaco (editor pros/cons, mobile). (blog.replit.com)
[3] PARA Garden / Jeff Hicks — CodeMirror vs Monaco Editor (2025 comparison: bundle, performance). (agenthicks.com)
[4] Grokipedia — technical differences: Lezer vs Monarch/LSP, rendering & large-file notes. (grokipedia.com)
[5] PlayCanvas blog — example of switching from CodeMirror to Monaco for large-file/features. (blog.playcanvas.com)
[6] Community reports / Reddit & blogs — real-world notes on CM6 complexity when implementing advanced UIs but strong mobile/accessibility. (reddit.com)
If you want, I can run a focused benchmark (bundle size, startup time, memory) for a specific feature set and target browsers/devices you care about.
Citations:
- 1: https://blog.replit.com/codemirror?utm_source=openai
- 2: https://blog.replit.com/code-editors?utm_source=openai
- 3: https://www.agenthicks.com/research/codemirror-vs-monaco-editor-comparison?utm_source=openai
- 4: https://grokipedia.com/page/Comparison_of_JavaScript-based_source_code_editors?utm_source=openai
- 5: https://blog.playcanvas.com/upcoming-code-editor-upgrade-to-monaco/?utm_source=openai
- 6: https://www.reddit.com//r/void_project/comments/1m9bpl1?utm_source=openai
🌐 Web query:
monaco-react package benefits React integration
💡 Result:
Key benefits of using the monaco-react package for React integration
- Easy React wrapper for Monaco Editor — provides a ready-to-use component so you don’t have to manually mount the editor DOM or manage lifecycle. (npmjs.com)
- No bundler hacks — works with CRA, Vite, Next.js, etc., without ejecting or custom webpack/rollup config. (npmjs.com)
- Lazy/managed loader & instance access — integrates with @monaco-editor/loader and exposes the monaco and editor instances (and hooks like useMonaco) for advanced customization. (npmjs.com)
- TypeScript-first + typings — rewritten in TypeScript and relies on monaco-editor types for better DX in TS projects. (npmjs.com)
- Features for common needs — supports multi-model editors, validation hooks, value/getters, editor options, custom themes, and controlled/uncontrolled patterns. (npmjs.com)
If you want, I can show a minimal React example using @monaco-editor/react or compare it to other wrappers (react-monaco-editor / typefox) with pros/cons.
Citations:
- 1: https://www.npmjs.com/package/%40monaco-editor/react?utm_source=openai
- 2: https://www.npmjs.com/package/%40monaco-editor/react?utm_source=openai
- 3: https://www.npmjs.com/package/%40monaco-editor/react?utm_source=openai
- 4: https://www.npmjs.com/package/%40monaco-editor/react?utm_source=openai
- 5: https://www.npmjs.com/package/%40monaco-editor/react?utm_source=openai
@supervoidcoder Ooh, spicy take! 🌶️ Let me break this down for you both!
The monaco-react case (I see you, void 😄):
- @monaco-editor/react provides a ready-to-use
<Editor>component without manual DOM mounting or lifecycle management - Way cleaner React integration than the current lazy-load-then-mount approach in the PR
- Works with CRA, Vite, Next.js without bundler hacks
- VS Code-like IntelliSense and IDE features out of the box
BUT... the CodeMirror 6 case (what amp implemented):
- CodeMirror 6 is modular and much smaller by default; Monaco has a larger initial bundle and longer startup
- CM6 has much better mobile/touch and accessibility support (designed with mobile in mind); Monaco is not well suited to mobile
- More customizable for creating a Scratch-specific coding experience
- CM6 offers fine-grained customization and smaller final bundles
My take for NanoScript specifically:
Given that this is going into an educational platform where kids might use tablets, and bundle size matters for web performance, CodeMirror 6 is probably the better fit for the project goals. The mobile support alone is huge for Scratch's audience!
However 👀 the current implementation could use some cleanup—monaco-react's API is definitely sleeker than manual useEffect + DOM wiring. If you go CM6, maybe wrap it in a cleaner abstraction?
Hot idea: You already have both in package.json... maybe prototype both and let users beta test? 🤔
What's the priority: bundle size + mobile, or dev convenience + IDE features?
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:40:39.943Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder (“void”) prefers a collaboration model where CodeRabbit authors the code PRs and Amazon Q performs the review; follow-ups should be submitted as single, self-contained PRs when possible.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, team member supervoidcoder can be called "void" in reviews and conversations.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-12-01T12:10:19.348Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder prefers a division of labor where Amazon Q handles fast review for ethics and project vision concerns, while CodeRabbit performs deep technical review of code quality, security, architecture, and implementation details.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T03:54:03.320Z
Learning: OmniBlocks/scratch-gui preference: supervoidcoder wants energetic, playful tone in CI sticky comments (emojis, fun copy), while preserving single-comment strategy and not @-mentioning bots.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T21:20:08.837Z
Learning: In the OmniBlocks/scratch-gui repository, supervoidcoder (“void”) prefers single, complete PRs over multi-part (“Part 1/2”) submissions. If a split is unavoidable, they want explicit linkage and gating before approval.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:00:40.666Z
Learning: In OmniBlocks/scratch-gui, when cleanup is requested, supervoidcoder prefers deletion of CodeRabbit’s spam comments (not just minimizing) on the PR; for non-CodeRabbit bot comments, minimize unless a maintainer explicitly asks for hard deletion.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: The team members in OmniBlocks/coders include: supervoidcoder, Graison-P (gvyt), ampelectrecuted (amp), NotTheBaton (TheBaton), and kRxZykRxZy.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T04:15:58.834Z
Learning: For conversations and review replies with supervoidcoder in OmniBlocks/scratch-gui, prefer an energetic, playful tone (emojis, fun copy). Avoid terse/stoic phrasing unless they explicitly ask for "serious mode".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-28T03:09:05.973Z
Learning: In the OmniBlocks/scratch-gui repository, supervoidcoder (void) is planning to add a 3D mode and is excited about using PlayCanvas as a full 3D game engine for OmniBlocks.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
There was a problem hiding this comment.
@coderabbitai but does codemirror have syntax highlighting?
There was a problem hiding this comment.
@supervoidcoder Yes! CodeMirror 6 has excellent syntax highlighting! 🎨
In fact, this PR is already using it! Look at the packages amp added:
@codemirror/language— provides syntax highlighting infrastructure@lezer/highlight— the parser-based highlighting system (fast & accurate!)styleTagsandtags— for defining custom highlighting styles
CodeMirror 6 uses Lezer parsers for syntax highlighting, which are:
- ✨ Incremental — only re-parse what changed (super fast!)
- 🎯 Error-tolerant — highlights even when code has syntax errors
- 🔧 Customizable — you can define your own languages & themes
The gui.jsx (from the AI summary) even mentions creating a "custom syntax highlighting scheme and theme" for the NanoScript editor! So yep, syntax highlighting is definitely there and working.
The main difference vs Monaco is that CM6 gives you more granular control over the highlighting rules — you build your language definition with Lezer, while Monaco uses TextMate grammars or Language Server Protocol.
Still want to prototype both editors and see which one feels better? 🤔
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T03:54:03.320Z
Learning: OmniBlocks/scratch-gui preference: supervoidcoder wants energetic, playful tone in CI sticky comments (emojis, fun copy), while preserving single-comment strategy and not @-mentioning bots.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:40:39.943Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder (“void”) prefers a collaboration model where CodeRabbit authors the code PRs and Amazon Q performs the review; follow-ups should be submitted as single, self-contained PRs when possible.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-12-01T12:10:19.348Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder prefers a division of labor where Amazon Q handles fast review for ethics and project vision concerns, while CodeRabbit performs deep technical review of code quality, security, architecture, and implementation details.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:50:28.065Z
Learning: OmniBlocks/scratch-gui: When cleaning PR noise, prefer minimizing CodeRabbit auto-generated comments matching headers like "This is an auto-generated reply by CodeRabbit", "Rate Limit Exceeded", and "automated status update", while preserving human-directed conversation.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:00:40.666Z
Learning: In OmniBlocks/scratch-gui, when cleanup is requested, supervoidcoder prefers deletion of CodeRabbit’s spam comments (not just minimizing) on the PR; for non-CodeRabbit bot comments, minimize unless a maintainer explicitly asks for hard deletion.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, team member supervoidcoder can be called "void" in reviews and conversations.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T21:20:08.837Z
Learning: In the OmniBlocks/scratch-gui repository, supervoidcoder (“void”) prefers single, complete PRs over multi-part (“Part 1/2”) submissions. If a split is unavoidable, they want explicit linkage and gating before approval.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: The team members in OmniBlocks/coders include: supervoidcoder, Graison-P (gvyt), ampelectrecuted (amp), NotTheBaton (TheBaton), and kRxZykRxZy.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T04:15:58.834Z
Learning: For conversations and review replies with supervoidcoder in OmniBlocks/scratch-gui, prefer an energetic, playful tone (emojis, fun copy). Avoid terse/stoic phrasing unless they explicitly ask for "serious mode".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-28T03:09:05.973Z
Learning: In the OmniBlocks/scratch-gui repository, supervoidcoder (void) is planning to add a 3D mode and is excited about using PlayCanvas as a full 3D game engine for OmniBlocks.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
There was a problem hiding this comment.
@coderabbitai but does codemirror have syntax highlighting?
i just implemented it look below
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
CodeMirror 6 custom language Lezer grammar tutorial
💡 Result:
Here’s a concise step‑by‑step tutorial + essential resources to create a custom language for CodeMirror 6 using a Lezer grammar.
Quick steps
-
Install tools
- npm install @lezer/generator @lezer/lr @codemirror/lang-lezer (and codemirror packages you need). [6][1]
-
Create a .grammar file
- Write grammar rules (tokens in @tokens, nonterminals, @top, @precedence, etc.). Follow Lezer’s grammar notation and examples. [1][3]
-
Iterate with examples
- Start from the Lezer “Basics” and “Setup” examples to learn token vs nonterminal rules, precedence, and exported node IDs. Use the JavaScript and Basic examples for larger patterns. [2][3][7]
-
Generate a parser
- Run lezer-generator to convert your .grammar into JS: lezer-generator mylang.grammar -o mylang.js (or use the programmatic API). This produces parser and terms files. [1]
-
Build a language package
- Use the CodeMirror language package template (clone codemirror/lang-example) to structure a package (src/syntax.grammar, src/index.ts, tests). Adapt metadata and build scripts. [4][5]
-
Integrate into CodeMirror 6
- Import the generated parser and create an LRLanguage (or use @codemirror/lang-lezer helpers). Configure highlighting, indentation, folding via language props. Example pattern:
import {parser} from "./mylang"
import {LRLanguage, indentNodeProp, foldNodeProp} from "@codemirror/language"
export const myLang = LRLanguage.define({ name: "mylang", parser: parser.configure({ props: [...] }), languageData: {...} }) - Or use @codemirror/lang-lezer to quickly load ad‑hoc grammars. [5][6]
- Import the generated parser and create an LRLanguage (or use @codemirror/lang-lezer helpers). Configure highlighting, indentation, folding via language props. Example pattern:
-
Add syntax highlighting
- Map tree node names to highlight tags (via highlightTree/Lezer node props or @lezer/highlight). See Lezer “Syntax Highlighting” examples. [2]
-
Test and iterate
- Use the generator’s test tooling and the template’s test/cases.txt to add regression tests. Use the Lezer test harness examples. [2][4]
-
Publish / reuse
- Package as an npm module (codemirror-lang-) or include directly in your app. Follow the template README for publishing/build steps. [4]
Key resources (read in this order)
- Lezer System Guide (grammar syntax, generator usage). [1]
- Lezer Examples (Basics, Syntax Highlighting, Indentation, JavaScript example). [2][3]
- CodeMirror language package template (example repo to clone and adapt). [4]
- @codemirror/language repository (integration examples: LRLanguage, props). [5]
- @codemirror/lang-lezer npm (helper for loading Lezer grammars into CM6). [6]
If you want, I can:
- review a small .grammar you’re working on and point out fixes, or
- generate a minimal example grammar + CM6 integration you can paste into a project. Which would you prefer?
🌐 Web query:
CodeMirror 6 custom linter implementation example
💡 Result:
Here's a minimal, working CodeMirror 6 custom linter example (based on the official example) that flags RegExp literals and offers an action to remove them.
JavaScript (ESM):
import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup";
import {javascript} from "@codemirror/lang-javascript";
import {syntaxTree} from "@codemirror/language";
import {linter, lintGutter} from "@codemirror/lint";
// create a linter source
const regexpLinter = linter(view => {
const diagnostics = [];
syntaxTree(view.state).cursor().iterate(node => {
if (node.name === "RegExp") {
diagnostics.push({
from: node.from,
to: node.to,
severity: "warning",
message: "Regular expressions are forbidden",
actions: [{
name: "Remove",
apply(view, from, to) { view.dispatch({changes: {from, to}}); }
}]
});
}
});
return diagnostics;
});
// editor
const state = EditorState.create({
doc: "const r = /abc/;",
extensions: [basicSetup, javascript(), regexpLinter, lintGutter()]
});
new EditorView({state, parent: document.body});
Notes:
- Diagnostics must include from, to, severity, and message; actions are optional. Use lintGutter() to display gutter markers and Ctrl/Cmd-Shift-M to open the diagnostics panel. [1][2]
Sources:
- Official CodeMirror linter example (RegExp linter). [1]
- CodeMirror lint API / reference documentation. [2]
References:
[1] codemirror.net — Linter example.
[2] codemirror.com/docs/ref and @codemirror/lint package docs.
@supervoidcoder Ooh, great question! 🎯 This is totally doable but requires two pieces working together:
🏗️ Part 1: Define NanoScript's Syntax (Lezer Grammar)
First, you create a custom Lezer grammar that teaches CodeMirror what valid NanoScript looks like:
// nanoscript.grammar
@top Program { statement* }
statement {
WhenBlock |
MoveStatement |
SayStatement |
...
}
WhenBlock { "when" Trigger "do" Block }
MoveStatement { "move" Number "steps" }
...
@tokens {
Number { @digit+ }
...
}Steps:
- Install
@lezer/generator - Write a
.grammarfile describing NanoScript's syntax (blocks, statements, expressions) - Run
lezer-generatorto create a parser - Wrap it in an
LRLanguageand plug into CodeMirror
This gives you syntax highlighting and a parse tree for free! 🌳
🔍 Part 2: Add Custom Linting Rules
Then, write a custom linter that walks the parse tree and validates Scratch-specific rules:
import { syntaxTree } from "@codemirror/language";
import { linter } from "@codemirror/lint";
const nanoscriptLinter = linter(view => {
const diagnostics = [];
syntaxTree(view.state).cursor().iterate(node => {
// Example: Flag invalid sprite references
if (node.name === "SpriteReference") {
const spriteName = view.state.doc.sliceString(node.from, node.to);
if (!validSprites.includes(spriteName)) {
diagnostics.push({
from: node.from,
to: node.to,
severity: "error",
message: `Unknown sprite: ${spriteName}`,
actions: [/* optional quick fixes */]
});
}
}
// Example: Enforce Scratch-specific constraints
if (node.name === "WhenBlock" && !hasValidTrigger(node)) {
diagnostics.push({
from: node.from,
to: node.to,
severity: "warning",
message: "When blocks must have a valid trigger"
});
}
});
return diagnostics;
});Your linter can validate:
- ✅ Valid sprite/costume/sound names
- ✅ Scratch-specific block nesting rules
- ✅ Variable scoping (stage vs sprite)
- ✅ Custom block definitions
- ✅ Missing required parameters
- ✅ Anything else unique to Scratch!
🚀 Putting It Together
import { LRLanguage } from "@codemirror/language";
import { linter, lintGutter } from "@codemirror/lint";
import { parser } from "./nanoscript.js"; // generated by Lezer
const nanoscriptLanguage = LRLanguage.define({
name: "nanoscript",
parser: parser.configure({/* props */})
});
// In your editor setup:
const extensions = [
basicSetup,
nanoscriptLanguage,
nanoscriptLinter,
lintGutter() // Shows squiggles & gutter markers
];📚 Resources
- Lezer System Guide — grammar syntax
- Lezer Examples — real grammars to learn from
- CodeMirror lang-example template — starter template
- CM6 Lint API — linter examples
💡 The Bottom Line
Yes, it's some work to define NanoScript's grammar and validation rules, BUT:
- You get full control over syntax highlighting, error messages, and validation
- The Lezer parser is incremental & fast ⚡
- Once built, it's reusable and extensible
- You can start simple (basic syntax) and add rules over time
Monaco alternative: Monaco's language services expect TypeScript/LSP-style semantics, so building a Scratch language would require similar effort plus more boilerplate.
Want me to sketch out a minimal NanoScript grammar to get you started? Or would you rather prototype both editors first and see which one feels better for the team? 🤔
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T04:15:58.834Z
Learning: For conversations and review replies with supervoidcoder in OmniBlocks/scratch-gui, prefer an energetic, playful tone (emojis, fun copy). Avoid terse/stoic phrasing unless they explicitly ask for "serious mode".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, team member supervoidcoder can be called "void" in reviews and conversations.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T03:54:03.320Z
Learning: OmniBlocks/scratch-gui preference: supervoidcoder wants energetic, playful tone in CI sticky comments (emojis, fun copy), while preserving single-comment strategy and not @-mentioning bots.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:58:09.061Z
Learning: Extend spam-cleanup patterns in OmniBlocks/scratch-gui to include “auto-generated comment: … by coderabbit.ai” and structural markers (tips_start, analysis chain, agentComponentType, rawResChunk) to fully minimize CodeRabbit auto-noise.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:50:28.065Z
Learning: OmniBlocks/scratch-gui: When cleaning PR noise, prefer minimizing CodeRabbit auto-generated comments matching headers like "This is an auto-generated reply by CodeRabbit", "Rate Limit Exceeded", and "automated status update", while preserving human-directed conversation.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:40:39.943Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder (“void”) prefers a collaboration model where CodeRabbit authors the code PRs and Amazon Q performs the review; follow-ups should be submitted as single, self-contained PRs when possible.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:55:33.086Z
Learning: OmniBlocks/scratch-gui: Never reply to CodeRabbit’s own auto-generated comments (status, tips, rate-limit); when a bot loop is detected on a PR, post a single apology, minimize CodeRabbit auto-noise, and then remain silent unless a human asks for more.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, team member supervoidcoder can be called "void" in reviews and conversations.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-12-01T12:10:19.348Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder prefers a division of labor where Amazon Q handles fast review for ethics and project vision concerns, while CodeRabbit performs deep technical review of code quality, security, architecture, and implementation details.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T21:20:08.837Z
Learning: In the OmniBlocks/scratch-gui repository, supervoidcoder (“void”) prefers single, complete PRs over multi-part (“Part 1/2”) submissions. If a split is unavoidable, they want explicit linkage and gating before approval.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:00:40.666Z
Learning: In OmniBlocks/scratch-gui, when cleanup is requested, supervoidcoder prefers deletion of CodeRabbit’s spam comments (not just minimizing) on the PR; for non-CodeRabbit bot comments, minimize unless a maintainer explicitly asks for hard deletion.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: The team members in OmniBlocks/coders include: supervoidcoder, Graison-P (gvyt), ampelectrecuted (amp), NotTheBaton (TheBaton), and kRxZykRxZy.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T04:15:58.834Z
Learning: For conversations and review replies with supervoidcoder in OmniBlocks/scratch-gui, prefer an energetic, playful tone (emojis, fun copy). Avoid terse/stoic phrasing unless they explicitly ask for "serious mode".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-28T03:09:05.973Z
Learning: In the OmniBlocks/scratch-gui repository, supervoidcoder (void) is planning to add a 3D mode and is excited about using PlayCanvas as a full 3D game engine for OmniBlocks.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
CodeMirror 6 autocomplete autocompletion
💡 Result:
Short guide — CodeMirror 6 autocompletion
-
Install and include the package: npm i @codemirror/autocomplete and enable the extension autocompletion() in your editor extensions. [1][4]
-
Basic usage: add autocompletion() to your EditorView extensions; language packages often supply completion data automatically. You can also attach completions to a language via language.data.of({ autocomplete: ... }). Example: jsonLanguage.data.of({ autocomplete: ["id","name"] }). [1][2]
-
Provide custom sources:
- completionSource: write a function (context) => CompletionResult | null that returns completions based on context.matchBefore(...) and context.explicit.
- helpers: use completeFromList([{label, detail, info, apply, snippet, ...}]) for simple lists. [3][1]
-
Commands / keybindings: default keymap binds Ctrl-Space to start completion, arrows to select, Enter to accept, Esc to close. You can override or add commands such as startCompletion, acceptCompletion, closeCompletion in your keymap. [2][3]
-
Advanced features:
- Completions can include detail, info (rich info node or string), icons, and snippet insertion (snippet field). [3]
- You can control when the widget appears (automatic on typing vs explicit only) via autocompletion({ activateOnTyping: true/false }) and by returning null from a source when not appropriate. [2][3]
Minimal example
import {EditorView} from "@codemirror/view";
import {autocompletion, completeFromList} from "@codemirror/autocomplete";
import {jsonLanguage} from "@codemirror/lang-json";
const view = new EditorView({
parent: document.body,
extensions: [
jsonLanguage,
autocompletion(),
jsonLanguage.data.of({
autocomplete: completeFromList([
{label: "id"}, {label: "name"}, {label: "address"}
])
})
]
});
Sources: CodeMirror autocomplete README (GitHub). [1] CodeMirror autocompletion example docs. [2] CodeMirror reference (Completion API). [3] npm package page. [4]
@ampelectrecuted Yes! CodeMirror 6 absolutely has autocomplete! 🎯✨
It comes from the @codemirror/autocomplete package:
import { autocompletion, completeFromList } from "@codemirror/autocomplete";
// Basic setup with custom completions
const extensions = [
basicSetup,
autocompletion(), // Enables Ctrl-Space to trigger
yourLanguage.data.of({
autocomplete: completeFromList([
{ label: "move", detail: "steps", info: "Move sprite forward" },
{ label: "say", detail: "message", info: "Display speech bubble" },
{ label: "when", detail: "event", info: "Event trigger block" },
// ... NanoScript keywords
])
})
];Features you get:
- 💬 Popup suggestions triggered by Ctrl-Space or automatically while typing
- 📝 Detail text (shown next to each completion)
- ℹ️ Info tooltips (rich documentation for selected item)
- 🎨 Custom icons for different completion types
- ⚡ Snippet insertion (insert templates with placeholders)
For NanoScript specifically, you can create a smart completion source:
import { autocompletion } from "@codemirror/autocomplete";
const nanoscriptCompletions = (context) => {
let word = context.matchBefore(/\w*/);
if (!word || (word.from === word.to && !context.explicit)) return null;
return {
from: word.from,
options: [
{ label: "when", type: "keyword", detail: "Event block" },
{ label: "move", type: "function", detail: "(steps)", apply: "move ${steps} steps" },
{ label: "say", type: "function", detail: "(message)", apply: "say \"${}\"" },
// Dynamic completions based on sprites/variables/etc.
]
};
};
const extensions = [
autocompletion({ override: [nanoscriptCompletions] })
];The bottom line: CodeMirror 6 has everything you need for autocomplete—syntax highlighting ✓, error squiggles ✓, autocomplete ✓. You just need to wire up NanoScript-specific completion data (sprite names, block names, variables, etc.). 🚀
Want me to sketch out a more complete NanoScript completion source that pulls from the Scratch VM's available blocks/sprites? 🤔
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T04:15:58.834Z
Learning: For conversations and review replies with supervoidcoder in OmniBlocks/scratch-gui, prefer an energetic, playful tone (emojis, fun copy). Avoid terse/stoic phrasing unless they explicitly ask for "serious mode".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, team member supervoidcoder can be called "void" in reviews and conversations.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: The team members in OmniBlocks/coders include: supervoidcoder, Graison-P (gvyt), ampelectrecuted (amp), NotTheBaton (TheBaton), and kRxZykRxZy.
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T03:54:03.320Z
Learning: OmniBlocks/scratch-gui preference: supervoidcoder wants energetic, playful tone in CI sticky comments (emojis, fun copy), while preserving single-comment strategy and not @-mentioning bots.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:58:09.061Z
Learning: Extend spam-cleanup patterns in OmniBlocks/scratch-gui to include “auto-generated comment: … by coderabbit.ai” and structural markers (tips_start, analysis chain, agentComponentType, rawResChunk) to fully minimize CodeRabbit auto-noise.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:40:39.943Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder (“void”) prefers a collaboration model where CodeRabbit authors the code PRs and Amazon Q performs the review; follow-ups should be submitted as single, self-contained PRs when possible.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:50:28.065Z
Learning: OmniBlocks/scratch-gui: When cleaning PR noise, prefer minimizing CodeRabbit auto-generated comments matching headers like "This is an auto-generated reply by CodeRabbit", "Rate Limit Exceeded", and "automated status update", while preserving human-directed conversation.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
CodeMirror 6 autocomplete API usage
💡 Result:
Short guide — how to use CodeMirror 6's autocomplete API, plus a minimal example.
Key points
- The autocompletion system is provided by @codemirror/autocomplete and enabled with the autocompletion() extension. Completions come from one or more "completion sources": functions that receive a CompletionContext and return either null or a completion result (optionally a Promise). [1][2]
- A completion result is an object with from/to and options (array of Completion objects). Completion fields: label (required), displayLabel, type, detail, info, apply (string or function), sortText, validFor (regex or fn) etc. Use validFor to let the engine reuse results while typing. [2]
- You can register a source globally via autocompletion({override: [mySource]}) or associate it with a language using language.data.of({autocomplete: mySourceOrList}). Sources may inspect the syntax tree (syntaxTree) or use context.matchBefore() to decide what to return. [1][2]
Minimal example (JS/TS)
import {EditorView} from "@codemirror/view"
import {autocompletion, CompletionContext} from "@codemirror/autocomplete"
import {basicSetup} from "codemirror"
function myCompletions(context: CompletionContext) {
let word = context.matchBefore(/\w*/)
if (!word || (word.from == word.to && !context.explicit)) return null
return {
from: word.from,
options: [
{label: "foo", type: "keyword", detail: "example"},
{label: "bar", type: "variable", apply: "bar()"}
],
validFor: /^\w*$/
}
}
const view = new EditorView({
parent: document.body,
extensions: [basicSetup, autocompletion({override: [myCompletions]})]
})
Notes
- Sources can be async (return a Promise). Use apply functions for complex insertion logic and info to show rich documentation for a completion. [1][2]
- The project repo, README and examples page are useful references and contain more advanced patterns (e.g., combining language-provided completions, customizing keymaps, and detail/info rendering). [1][3]
Sources
- CodeMirror autocompletion example and docs. [1]
- CodeMirror reference manual (completion types & API). [2]
- @codemirror/autocomplete repository / npm page. [3]
@ampelectrecuted Nice! 🎨 Saw you already got the syntax highlighting wired up!
And yes! CodeMirror 6 absolutely has autocomplete via the @codemirror/autocomplete package! 💡
Quick overview:
- Add the
autocompletion()extension to your editor - Define "completion sources" — functions that return suggestion lists
- Supports async completions (great for API-based suggestions!)
- Can show documentation popups, custom apply logic, filtering, etc.
Minimal example:
import { autocompletion } from "@codemirror/autocomplete";
function myCompletions(context) {
let word = context.matchBefore(/\w*/);
if (!word || (word.from == word.to && !context.explicit)) return null;
return {
from: word.from,
options: [
{label: "move", type: "keyword", detail: "Move sprite"},
{label: "say", type: "keyword", apply: "say()"}
]
};
}
// Add to your editor extensions:
extensions: [basicSetup, autocompletion({override: [myCompletions]})]You can make it language-aware by inspecting the syntax tree and suggesting context-appropriate NanoScript blocks! Pretty powerful for building a Scratch-like autocomplete experience. 🚀
BUT — you'll need to add @codemirror/autocomplete to package.json (I see it's not there yet alongside the other CM6 packages).
Citations:
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T03:54:03.320Z
Learning: OmniBlocks/scratch-gui preference: supervoidcoder wants energetic, playful tone in CI sticky comments (emojis, fun copy), while preserving single-comment strategy and not @-mentioning bots.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:58:09.061Z
Learning: Extend spam-cleanup patterns in OmniBlocks/scratch-gui to include “auto-generated comment: … by coderabbit.ai” and structural markers (tips_start, analysis chain, agentComponentType, rawResChunk) to fully minimize CodeRabbit auto-noise.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:40:39.943Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder (“void”) prefers a collaboration model where CodeRabbit authors the code PRs and Amazon Q performs the review; follow-ups should be submitted as single, self-contained PRs when possible.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:50:28.065Z
Learning: OmniBlocks/scratch-gui: When cleaning PR noise, prefer minimizing CodeRabbit auto-generated comments matching headers like "This is an auto-generated reply by CodeRabbit", "Rate Limit Exceeded", and "automated status update", while preserving human-directed conversation.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
CodeMirror 6 autocomplete API implementation
💡 Result:
Summary + minimal example
- Use @codemirror/autocomplete. A completion source is a function (ctx: CompletionContext) that returns null or a CompletionResult {from, options, validFor} (can be Promise). Register it with autocompletion({override: [mySource]}) or as language data (language.data.of({autocomplete: mySource})). [1][2][3]
Minimal TypeScript example:
import {EditorView} from "@codemirror/view"
import {autocompletion, CompletionContext, Completion} from "@codemirror/autocomplete"
import {basicSetup} from "codemirror"
const words = ["apple","banana","cherry"].map(w => ({label: w, type: "keyword"}))
function myCompletions(context: CompletionContext) {
const word = context.matchBefore(/\w*/)
if (!word || (word.from == word.to && !context.explicit)) return null
return {
from: word.from,
options: words,
validFor: /^\w*$/
}
}
const view = new EditorView({
parent: document.body,
extensions: [basicSetup, autocompletion({override: [myCompletions]})]
})
Notes / useful features
- Sources may be async (return a Promise). Use context.explicit to decide when to run automatically. Provide validFor (regex or function) so the UI can reuse/filter results efficiently. Each completion item may set apply (string or function), detail, info (or info DOM), sortText, etc. See Completion interface. [1][2]
References
- CodeMirror autocompletion example and guide. [1]
- Autocomplete reference / Completion interface (API details). [2]
- @codemirror/autocomplete npm README (install & usage). [3]
@ampelectrecuted Yes! CodeMirror 6 has autocomplete! 🎉
It's provided by the @codemirror/autocomplete package. Here's how it works:
🔧 Quick Implementation
import { autocompletion, CompletionContext } from "@codemirror/autocomplete";
// Define your completion source
function nanoscriptCompletions(context) {
const word = context.matchBefore(/\w*/);
if (!word || (word.from === word.to && !context.explicit)) return null;
// Your NanoScript keywords/blocks
const options = [
{ label: "move", type: "keyword", detail: "steps" },
{ label: "turn", type: "keyword", detail: "degrees" },
{ label: "say", type: "keyword", detail: "text" },
{ label: "when", type: "keyword", detail: "event trigger" },
// ... all your Scratch blocks!
];
return {
from: word.from,
options: options,
validFor: /^\w*$/
};
}
// Add to your editor
const extensions = [
basicSetup,
autocompletion({ override: [nanoscriptCompletions] })
];✨ Features You Get
- Context-aware suggestions — can inspect cursor position, syntax tree, etc.
- Async support — fetch completions from APIs or compute them lazily
- Fuzzy filtering — users can type partial matches
- Rich UI — icons, details, documentation popups
- Custom apply logic — insert snippets, format code, etc.
🎯 For NanoScript Specifically
You could make autocomplete Scratch-aware:
- Suggest valid sprite names when typing sprite references
- Show available costumes/sounds for the current sprite
- Auto-complete variable names (stage vs sprite scope)
- Suggest valid event types for "when" blocks
- Context-sensitive block parameters
The catch: You need to provide the completion source (the list of suggestions). Monaco has more built-in language services, but CM6 gives you full control to make it Scratch-specific! 🎨
TL;DR: Yep, autocomplete is there, and you can make it as smart as you want! Want me to sketch out a more complete NanoScript autocomplete source? 🤔
Citations:
🧠 Learnings used
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T03:54:03.320Z
Learning: OmniBlocks/scratch-gui preference: supervoidcoder wants energetic, playful tone in CI sticky comments (emojis, fun copy), while preserving single-comment strategy and not @-mentioning bots.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:40:39.943Z
Learning: In OmniBlocks/scratch-gui, supervoidcoder (“void”) prefers a collaboration model where CodeRabbit authors the code PRs and Amazon Q performs the review; follow-ups should be submitted as single, self-contained PRs when possible.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:58:09.061Z
Learning: Extend spam-cleanup patterns in OmniBlocks/scratch-gui to include “auto-generated comment: … by coderabbit.ai” and structural markers (tips_start, analysis chain, agentComponentType, rawResChunk) to fully minimize CodeRabbit auto-noise.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui workflow preference: Open tracking issues for CI/automation behavior changes; assign to supervoidcoder; include backlinks to the PR and the exact comment requesting the change.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:01:57.123Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T19:25:31.991Z
Learning: In the OmniBlocks/scratch-gui repository, prioritize syntax issues over style issues when reviewing code.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:50:28.065Z
Learning: OmniBlocks/scratch-gui: When cleaning PR noise, prefer minimizing CodeRabbit auto-generated comments matching headers like "This is an auto-generated reply by CodeRabbit", "Rate Limit Exceeded", and "automated status update", while preserving human-directed conversation.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-18T22:18:13.164Z
Learning: For OmniBlocks/scratch-gui small features, supervoidcoder prefers GUI-only changes that avoid modifying scratch-blocks; deliver as a single, self-contained PR.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-22T20:16:15.537Z
Learning: OmniBlocks/scratch-gui has an existing workflow at .github/workflows/prtest.yml named "Mega PR Test & Analysis".
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-28T17:30:18.699Z
Learning: OmniBlocks/scratch-gui: Enhanced VRT workflow successfully completed after multiple build fixes involving rimraf/mkdirp PATH issues, working-directory complications, and cache configuration. Final solution uses native shell commands (rm -rf, mkdir -p) with npx webpack instead of npm run build when in subdirectories.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.
Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-09T18:19:24.693Z
Learning: OmniBlocks/scratch-gui: The Blocks component now bridges FieldCustom in componentDidMount by assigning this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom immediately after ScratchMsgs.setLocale (added Nov 9, 2025 via PR #159). This enables SPjavascriptV2’s registerInput usage at runtime.
Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.
|
@coderabbitai does codemirror have autocomplete (asking here because i didnt get a reply in the review coments) |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🌐 Web query: 💡 Result: Key references for CodeMirror 6 autocompletion:
Quick summary (how to get started)
Sources @ampelectrecuted Yes! CodeMirror 6 absolutely has autocomplete! 🎉 It comes as a separate package called 1. Install the package: npm i @codemirror/autocomplete2. Import and enable in your editor: import { autocompletion, CompletionContext } from "@codemirror/autocomplete";
// Add to your editor extensions
const editor = new EditorView({
extensions: [
basicSetup,
autocompletion(), // 👈 Enable autocomplete
// ... your other extensions
]
});3. Provide custom completions (optional): function myCompletions(context) {
return {
from: context.pos,
options: [
{ label: "move", type: "keyword" },
{ label: "turn", type: "keyword" },
// ... your NanoScript keywords
]
};
}
// Register it
autocompletion({ override: [myCompletions] })I notice you haven't added 📚 Official autocomplete docs have more examples and advanced options (like custom info panels, apply functions, etc.). 🧠 Learnings used |
ampelectrecuted
removed
Medium-Priority
High-Priority
🕐 Stale PR ReminderHey @8to16! 🌟 Just swinging by to check in on your "NanoScript" PR #444! It looks like you’re working on something super exciting, and I can't wait to see those creative ideas come to life! 🎉 I noticed it’s been a little while since the last update—do you need any help or is there anything that’s been blocking your progress? I’m here to support you however I can! Let’s keep the momentum going! 🚀✨ This is an automated friendly reminder. No pressure! 💙 |
🕐 Stale PR ReminderHey @8to16! 🌟 Just swinging by to check on your awesome PR #444, "NanoScript"! It looks like you're doing some exciting work there, and we’re all eager to see it come to life. 🎉 It's been a week since our last update, and I wanted to see if there's anything you need help with, or if something's keeping you from moving forward. We're here to support you! 🚀 Keep up the great work, and let us know how we can help! This is an automated friendly reminder. No pressure! 💙 |
🕐 Stale PR ReminderHey @ampelectrecuted! 👋 This PR has been quiet for a while. Need any help getting it across the finish line? Feel free to ask! 🚀 This is an automated friendly reminder. No pressure! 💙 |
2 similar comments
🕐 Stale PR ReminderHey @ampelectrecuted! 👋 This PR has been quiet for a while. Need any help getting it across the finish line? Feel free to ask! 🚀 This is an automated friendly reminder. No pressure! 💙 |
🕐 Stale PR ReminderHey @ampelectrecuted! 👋 This PR has been quiet for a while. Need any help getting it across the finish line? Feel free to ask! 🚀 This is an automated friendly reminder. No pressure! 💙 |
3 participants
MVP checklist:
Tested on Firefox 145, Arch Linux