OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-011-advanced-code-editor

TASK-011: Advanced Code Editor Features

Status: 📝 Planned (Future)
Priority: Low-Medium
Estimated Effort: 1-2 weeks
Dependencies: TASK-009 (Monaco Replacement)

---

Problem Statement

The current JavaScriptEditor (from TASK-009) is functional and reliable but lacks advanced IDE features:

• No syntax highlighting (monochrome code)
• No autocomplete/IntelliSense
• No hover tooltips for variables/functions
• No code folding
• No minimap

These features would improve the developer experience, especially for:

• Complex function nodes with multiple variables
• Script nodes with longer code
• Users coming from IDEs who expect these features

---

Proposed Solutions

Option A: Add Syntax Highlighting Only (Lightweight)

Use Prism.js - 2KB library, just visual colors

Pros:

• Very lightweight (~2KB gzipped)
• No web workers needed
• Works with textarea overlay
• Many language support
• Easy to integrate

Cons:

• No semantic understanding
• No autocomplete
• Just visual enhancement

Implementation:

import Prism from 'prismjs';

import 'prismjs/components/prism-javascript';

// Overlay highlighted version on top of textarea
function HighlightedCode({ code }) {
  const highlighted = Prism.highlight(code, Prism.languages.javascript, 'javascript');
  return <div dangerouslySetInnerHTML={{ __html: highlighted }} />;
}

---

Option B: Upgrade to CodeMirror 6 (Moderate)

CodeMirror 6 - Modern, modular editor library

Pros:

• Lighter than Monaco
• Works well in Electron
• Syntax highlighting
• Basic autocomplete
• Extensible plugin system
• Active development

Cons:

• Larger bundle (~100KB)
• More complex integration
• Learning curve
• Still need to configure autocomplete

Features Available:

• ✅ Syntax highlighting
• ✅ Line numbers
• ✅ Code folding
• ✅ Search/replace
• ✅ Multiple cursors
• ⚠️ Autocomplete (requires configuration)
• ❌ Full IntelliSense (not as good as Monaco/VSCode)

---

Option C: Monaco with Web Worker Fix (Complex)

Go back to Monaco but fix the web worker issues

Pros:

• Best-in-class editor
• Full IntelliSense
• Same as VSCode
• TypeScript support
• All IDE features

Cons:

• Very complex web worker setup in Electron
• Large bundle size (~2MB)
• We already abandoned this approach
• High maintenance burden

Verdict: Not recommended - defeats purpose of TASK-009

---

Recommended Approach

Phase 1: Syntax Highlighting with Prism.js

• Low effort, high impact
• Makes code more readable
• No performance impact
• Keeps the editor simple

Phase 2 (Optional): Consider CodeMirror 6

• Only if users strongly request advanced features
• After Phase 1 has proven stable
• Requires user feedback to justify effort

---

Phase 1 Implementation: Prism.js

Architecture

/**
 * Enhanced JavaScriptEditor with syntax highlighting
 */
<div className={css.EditorContainer}>
  {/* Line numbers (existing) */}
  <div className={css.LineNumbers}>...</div>

  {/* Syntax highlighted overlay */}
  <div className={css.HighlightOverlay} dangerouslySetInnerHTML={{ __html: highlightedCode }} />

  {/* Actual textarea (transparent text) */}
  <textarea
    className={css.Editor}
    style={{ color: 'transparent', caretColor: 'white' }}
    value={code}
    onChange={handleChange}
  />
</div>

CSS Layering

.EditorContainer {
  position: relative;

  .HighlightOverlay {
    position: absolute;
    top: 0;
    left: 50px; // After line numbers
    right: 0;
    bottom: 0;
    padding: 16px;
    pointer-events: none; // Don't block textarea
    overflow: hidden;
    white-space: pre;
    font-family: var(--theme-font-mono);
    font-size: 13px;
    line-height: 1.6;
  }

  .Editor {
    position: relative;
    z-index: 2;
    background: transparent;
    color: transparent; // Hide actual text
    caret-color: var(--theme-color-fg-default); // Show cursor
  }
}

Color Theme

// Prism.js theme customization
.token.comment {
  color: #6a9955;
}
.token.keyword {
  color: #569cd6;
}
.token.string {
  color: #ce9178;
}
.token.number {
  color: #b5cea8;
}
.token.function {
  color: #dcdcaa;
}
.token.operator {
  color: #d4d4d4;
}
.token.variable {
  color: #9cdcfe;
}

Dependencies

{
  "dependencies": {
    "prismjs": "^1.29.0"
  }
}

---

Phase 2 Implementation: CodeMirror 6 (Optional)

When to Consider

Only move to CodeMirror if users report:

• "I really miss autocomplete"
• "I need code folding for large functions"
• "Can't work without IDE features"

Migration Path

// Replace JavaScriptEditor internals with CodeMirror

import { javascript } from '@codemirror/lang-javascript';
import { EditorView, basicSetup } from 'codemirror';

const view = new EditorView({
  doc: initialCode,
  extensions: [
    basicSetup,
    javascript()
    // Custom theme
    // Custom keymaps
    // Validation extension
  ],
  parent: containerEl
});

Effort Estimate

• Setup: 2 days
• Theme customization: 1 day
• Autocomplete configuration: 2 days
• Testing: 1 day
• Total: ~1 week

---

User Feedback Collection

Before implementing Phase 2, collect feedback:

Questions to ask:

1. "Do you miss syntax highlighting?" (Justifies Phase 1)
2. "Do you need autocomplete?" (Justifies CodeMirror)
3. "Is the current editor good enough?" (Maybe stop here)
4. "What IDE features do you miss most?" (Priority order)

Metrics to track:

• How many users enable the new editor?
• How long do they use it?
• Do they switch back to Monaco?
• Error rates with new editor?

---

Cost-Benefit Analysis

Syntax Highlighting (Prism.js)

Benefit	Cost
+50% readability	2KB bundle
Faster code scanning	1 day implementation
Professional appearance	Minimal complexity

ROI: High - Low effort, high impact

Full IDE (CodeMirror)

Benefit	Cost
Autocomplete	100KB bundle
Better UX for power users	1 week implementation
Code folding, etc	Ongoing maintenance

ROI: Medium - Only if users demand it

Monaco (Web Worker Fix)

Benefit	Cost
Best editor available	2MB bundle
Full TypeScript support	2-3 weeks setup
IntelliSense	Complex Electron config

ROI: Low - Too complex, we already moved away

---

Decision Framework

User reports: "I miss syntax highlighting"
→ Implement Phase 1 (Prism.js)
→ Low effort, high value

After 3 months with Phase 1:
→ Collect feedback
→ Users happy? → Stop here ✅
→ Users want more? → Consider Phase 2

Users demand autocomplete:
→ Implement CodeMirror 6
→ Medium effort, medium value

Nobody complains:
→ Keep current editor ✅
→ Task complete, no action needed

---

Recommendations

Now:

• ✅ Keep current JavaScriptEditor (TASK-009)
• ✅ Monitor user feedback
• ❌ Don't implement advanced features yet

After 3 months:

• Evaluate usage metrics
• Read user feedback
• Decide: Phase 1, Phase 2, or neither

If adding features:

1. Start with Prism.js (Phase 1)
2. Test with users for 1 month
3. Only add CodeMirror if strongly requested
4. Never go back to Monaco

---

Success Metrics

Phase 1 (Prism.js):

• Code is more readable (user survey)
• No performance regression
• Bundle size increase <5KB
• Users don't request more features

Phase 2 (CodeMirror):

• Users actively use autocomplete
• Fewer syntax errors
• Faster code writing
• Positive feedback on IDE features

---

Alternative: "Good Enough" Philosophy

Consider: Maybe the current editor is fine!

Arguments for simplicity:

• Expression nodes are typically 1-2 lines
• Function nodes are small focused logic
• Script nodes are rare
• Syntax highlighting is "nice to have" not "must have"
• Users can use external IDE for complex code

When simple is better:

• Faster load time
• Easier to maintain
• Less can go wrong
• Lower cognitive load

---

Future: AI-Powered Features

Instead of traditional IDE features, consider:

• AI code completion (OpenAI Codex)
• AI error explanation
• AI code review
• Natural language → code

These might be more valuable than syntax highlighting!

---

Next Action: Wait for user feedback. Only implement if users request it.