Feature/monaco editor

[Muniya-64bit]

• Replaces code mirror using Monaco editor
• UI update obo code mobile view now elements fit into screen
• Monaco added as a comman package

[AnasSAV]

• Give Reasoning/fixes for the changes requested

[AnasSAV]

• Why are we globally suppressing errors?

[Muniya-64bit]

Error: Canceled
  at Object.canceled (monaco.js:...)
  at processRequest (monaco.js:...)
  ...dozens of these per second while editing

monaco normally throws these kind of harmless errors.
I should have supress them in globally it affect to whole system fixed it now only supress silent errors by monaco

[AnasSAV]

• Consider conditional rendering based on device detection

[Muniya-64bit]

• This is a small widget comes with monaco to access keyboard but in mobile displays its kind block. So ia removed it .

[AnasSAV]

Critical Changes in overall

Incorrect Power Operator - generator.ts:183

Uses ^ instead of ** for Python power operation
This will produce incorrect Python code (^ is XOR in Python, not power)

const code = value_left + " ^ " + value_right; // WRONG - should be **

forBlock["power_block"] = function (block: any, generator: any) {
  const value_left = generator.valueToCode(block, "left", Order.ATOMIC);
  const value_right = generator.valueToCode(block, "right", Order.ATOMIC);
  const code = value_left + " ^ " + value_right;
  return [code, Order.ATOMIC];
};

---

Division by Zero Not Handled - generator.ts:183

Division block generates code without safety checks
Will crash at runtime with ZeroDivisionError

---

SQL-Injection Style Issue in String Block - generator.ts:183

No escaping of quotes in user input
User entering " will break generated Python code

const code = '"' + text_input + '"'; // Breaks if text_input contains "

forBlock["string_block"] = function (block: any, _generator: any) {
  const text_input = block.getFieldValue("input");
  const code = '"' + text_input + '"';
  return [code, Order.ATOMIC];
};

Function Definition in Obo Blocks

As the function is defined it doesnt show in UI

[AnasSAV]

Feature Testing Rubric – Monaco Editor Migration

Feature Overview

Field	Details
Feature Name	Monaco Editor Migration (Replace CodeMirror)
PR Number	#5
Apps Covered	OBO Blocks, OBO Code
Branch	feature/monaco_editor
Environment	Development
Tested By	[@AnasSAV ]
Test Date	[2026/02/16]

---

Scoring Guide

Score	Meaning
1	✅ Satisfied
0	❌ Unsatisfied
N/A	Not Applicable

---

1. Requirements & UI Coverage

Page/App	Criteria	Score	Review
OBO Blocks	Monaco editor renders correctly	✅	Code editor visible and functional
OBO Blocks	Syntax highlighting works (Python)	✅	Python keywords properly highlighted
OBO Blocks	Minimap hidden on mobile (<768px)	⬜	Check commit message claims this
OBO Blocks	All previous CodeMirror features present	✅	Line numbers, autocomplete, bracket matching
OBO Code	Monaco editor renders correctly	✅	Code editor visible and functional
OBO Code	Syntax highlighting works (Python)	✅	Python keywords properly highlighted
OBO Code	Clear button disabled state shows	✅	Button grayed out when code running
OBO Code	Viewport prevents unwanted zoom	✅	Mobile doesn't zoom on input focus

---

2. Functional UI Testing

OBO Blocks

Test Case	Expected Behavior	Score
Type Python code	Editor accepts input, syntax highlights	✅
Generate code from blocks	Monaco displays generated Python	✅
Edit generated code	Can manually edit in Monaco	✅
Copy code button	Copies Monaco content to clipboard	✅
Export code button	Downloads Monaco content as .py file	✅
Code persists on refresh	localStorage saves Monaco content	✅
Run code button	Executes Monaco editor content	✅

OBO Code

Test Case	Expected Behavior	Score
Type Python code	Editor accepts input, syntax highlights	✅
Run turtle graphics code	Code executes, canvas updates	✅
Copy code button	Copies Monaco content to clipboard	✅
Export code button	Downloads Monaco content as .py file	✅
Clear button while running	Button disabled, shows tooltip	✅
Clear button when stopped	Clears output and canvas	✅
Stop code execution	Code stops, button re-enables	✅

---

3. Editor Features Parity Check

Compare with previous CodeMirror functionality:

Feature	CodeMirror Had	Monaco Has	Score	Notes
Line numbers	✓	✅	✅	Check lineNumbers: "on" works
Syntax highlighting	✓	✅	✅	Python language support
Auto-indent	✓	✅	✅	Tab/Enter behavior
Bracket matching	✓	✅	✅	Highlights matching ()[]{}
Search/Replace	✓	✅	✅	Ctrl+F / Cmd+F
Undo/Redo	✓	✅	✅	Ctrl+Z / Ctrl+Shift+Z
Code folding	✗	⬜	N/A	Functions are not Visible in Obo Blocks

---

4. Input Validation & Edge Cases

Scenario	Expected Behavior	Score	Review
Empty editor + Run	Shows "No code to run"	✅
Empty editor + Copy	Shows "No code to copy"	✅
Empty editor + Export	Shows "No code to export"	✅
Very long code (>10k lines)	Editor handles without lag	✅	Performance test
Special characters in code	Renders correctly (quotes, unicode)	✅	Test: print("Hello \"World\"")
Rapid typing	No input lag or dropped characters	✅
Paste large code block	Handles without freezing	✅
Code with tabs and spaces	Preserves formatting	✅	Check insertSpaces: true

---

Devices & Viewports

Device/Width	Minimap Hidden?	Editor Usable?	Score	Issues
Desktop (1920px)	Should show	✅	✅
Laptop (1366px)	Should show	✅	✅
Tablet (768px)	Should hide	✅	✅	Critical test
Mobile (375px)	Should hide	✅	✅	Check zoom disabled
Mobile (320px)	Should hide	✅	✅	iPhone SE

---

6. Performance Testing

Runtime Performance

Metric	Target	OBO Blocks	OBO Code
Initial page load	< 3s	✅	✅
Time to Interactive	< 5s	✅	✅
Editor ready time	< 2s	✅	✅
Typing responsiveness	< 50ms	✅	✅

---

7. Critical Issues from Code Review

Must be tested/verified:

Issue	Severity	Test Status	Notes
Power operator ^ vs **	🚨 Critical	⬜	generator.ts:183 - Not in this PR but affects blocks
Console.error override	🚨 Critical	⬜	Suppresses errors - BAD
iPad keyboard hidden	⚠️ Medium	⬜	Does it hurt UX?

---

8. Migration Checklist

Item	Status	Notes
CodeMirror dependencies removed	✅	All Good
Monaco dependencies installed	✅	All Good
All CodeMirror imports removed	✅	All Good
Config files updated	✅	All Good
Build succeeds	❌	Failed – ESLint import/order violations in src/app/layout.tsx: • There should be at least one empty line between import groups • next/font/google import should occur before type import of next → pnpm run build exited with code 1 in obo-playground
No TypeScript errors	✅	All Good

---

Tester Sign-off

Name	Role	Date
@AnasSAV	QA Engineer	2026/02/16
@Muniya-64bit	Developer	2026/02/14