Planned Migration: CodeMirror v5 → v6 for Studio

[robfrank]

Overview

This issue tracks the planned migration of ArcadeDB Studio from CodeMirror v5.65.19 to CodeMirror v6.x. This is a major version upgrade that requires significant code changes and should be treated as a dedicated project, not a simple dependency update.

Background

Why we're staying on v5 for now:

• CodeMirror v5.65.19 is secure for our use case (we don't use the vulnerable Markdown mode affected by CVE-2025-6493)
• v6 requires a complete API rewrite (~8-10 hours of development effort)
• v5 meets all current Studio requirements

Why we need v6 eventually:

• v5 is in maintenance mode (legacy software)
• v6 is more accessible, mobile-friendly, and actively maintained
• Better performance and modern architecture
• Future security updates will only target v6

Related:

• Closed PR chore(studio-deps)(deps): bump codemirror from 5.65.19 to 6.0.2 in /studio #2301 (Dependabot attempted automatic upgrade)
• Analysis in PR comments: chore(studio-deps)(deps): bump codemirror from 5.65.19 to 6.0.2 in /studio #2301

Current CodeMirror Usage in Studio

Files affected:

• studio/src/main/js/studio-main.js (imports and initialization)
• studio/src/main/js/components/QueryEditor.js (or similar - TBD during migration)
• CSS files using CodeMirror classes
• Webpack configuration for mode/addon bundling

Current features used:

• SQL mode (codemirror/mode/sql/sql)
• JavaScript mode (codemirror/mode/javascript/javascript)
• Show-hint addon (codemirror/addon/hint/show-hint)
• SQL-hint addon (codemirror/addon/hint/sql-hint)
• Custom Cypher mode (needs investigation - likely custom implementation)

Migration Requirements

1. Package Changes

Remove:

"codemirror": "^5.65.19"

Add:

"codemirror": "^6.0.0",
"@codemirror/lang-sql": "^6.0.0",
"@codemirror/lang-javascript": "^6.0.0",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0"

2. API Migration

v5 initialization:

import CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';

const editor = CodeMirror(element, {
  mode: 'text/x-sql',
  lineNumbers: true,
  // ...options
});

v6 initialization:

import { EditorView, basicSetup } from 'codemirror';
import { sql } from '@codemirror/lang-sql';
import { autocompletion } from '@codemirror/autocomplete';

const editor = new EditorView({
  doc: '',
  extensions: [
    basicSetup,
    sql(),
    autocompletion()
  ],
  parent: element
});

3. Custom Cypher Mode

Challenge: CodeMirror v6 does NOT have an official Cypher language mode.

Options:

• Port the v5 Cypher mode to v6 Lezer grammar (high effort)
• Use a community Cypher mode if available
• Temporarily use generic syntax highlighting as fallback

Investigation needed: Determine if ArcadeDB has a custom Cypher mode in v5.

4. CSS Updates

• v6 uses different CSS class names (.cm-editor instead of .CodeMirror)
• Theme system is different (JavaScript-based instead of CSS-based)
• All custom Studio styles need updating

5. Webpack Configuration

• v6 has modular ES6 packages (no separate mode files to copy)
• Update webpack rules for CodeMirror assets
• Remove v5-specific file copying

Migration Plan

Phase 1: Investigation & Planning (2 hours)

• Audit all CodeMirror usage in Studio codebase
• Identify custom modes/addons (especially Cypher)
• Document current editor configurations
• Research v6 alternatives for custom functionality

Phase 2: Development (4-6 hours)

• Install v6 packages
• Migrate editor initialization code
• Implement SQL mode with autocomplete
• Implement JavaScript mode
• Port or create Cypher mode for v6
• Update CSS for v6 class names
• Update Webpack configuration
• Maintain feature parity with v5

Phase 3: Testing (2-3 hours)

• Manual testing of SQL editor
• Manual testing of Cypher editor (if applicable)
• Manual testing of JavaScript editor
• Test autocomplete functionality
• Test syntax highlighting
• Cross-browser testing
• Mobile/responsive testing
• Create/update Playwright tests for editor functionality

Phase 4: Deployment & Monitoring (1 hour)

• Code review
• Deploy to staging
• Production deployment
• Monitor for issues

Estimated Effort

Total: 8-12 hours of development + testing

Skills required:

• Frontend development (JavaScript/ES6)
• CodeMirror v6 API knowledge
• Webpack configuration
• CSS/styling

Success Criteria

• All editor instances working with v6
• SQL mode with autocomplete functional
• JavaScript mode functional
• Cypher mode functional (if applicable)
• No visual regressions
• All existing editor features maintained
• Performance equal or better than v5
• Playwright tests passing
• Documentation updated

References

• CodeMirror v6 Documentation
• CodeMirror v6 Migration Guide
• CodeMirror v5 → v6 Examples
• PR #2301 Analysis
• @codemirror/lang-sql Package
• Lezer Grammar System (for custom modes)

Timeline

Suggested: Q2 2026 (non-urgent, planned migration)

This should be scheduled when:

• Dedicated frontend resource is available
• Studio has no other high-priority changes in progress
• Adequate testing time is available

---

Labels: enhancement, studio, technical-debt
Priority: Medium (not urgent, but important for long-term maintenance)

[ExtReMLapin]

Out of curiosity, what's the real need behind this version upgrade ?

I mean for studio, a textarea input box itself would be good enough.

[robfrank]

Context
I've inherited Studio with CodeMirror inside. Dependabot is opening PRs to upgrade the versions and security scans are red since a while. CodeMirror 5.x is now legacy, AFAIU, so the security issues are gonna stay. My intention is to remove all the security issues, or at least most of them.
AFAIU, code mirror offers syntax highlight, maybe there's something better or less complex: I'm not a js/ts developer at all and I don't know the eco-system: all my commits related to the frontend are developed using AIs.

Answer
Any suggestion is welcome. So you are proposing to remove the lib and don't care about syntax highlight, right?

[ExtReMLapin]

Yeah, to be frank (no pun here) I would have moved to a simpler ui component.

I don’t have the bandwidth right now to held with that tho

[robfrank]

Alternative Editor Options Analysis

After researching alternatives to CodeMirror, here are viable options that could be easier to maintain:

---

Option 1: Prism Code Editor ⭐ RECOMMENDED FOR SIMPLICITY

Best for: Lightweight syntax highlighting and basic editing with minimal maintenance

Key Facts:

• Bundle size: ~30KB total (vs 135KB+ for CodeMirror v6)
• API complexity: Very simple, easiest to integrate
• SQL support: ✅ Built-in via Prism.js
• Cypher support: ⚠️ Custom implementation needed (but simpler than other editors)
• Maintenance: 🟢 Modern, actively maintained

Use case: Perfect for query editors, code snippets, forms, playgrounds

Trade-offs:

• Limited advanced features (no complex IntelliSense)
• Not optimized for large documents
• Custom Cypher grammar needed

Links:

• Prism Code Editor GitHub
• Live Demo
• npm Package

---

Option 2: Monaco Editor (VS Code's Editor)

Best for: Feature-rich experience with professional IntelliSense

Key Facts:

• Bundle size: ~1.26MB gzipped (significantly larger)
• API complexity: High, steeper learning curve
• SQL support: ✅ Excellent, built-in (monaco-sql-languages)
• Cypher support: ✅ Official support via @neo4j-cypher/editor-support
• Maintenance: 🟢 Backed by Microsoft, very active

Notable: Neo4j Browser switched to Monaco in 2021 (blog post)

Trade-offs:

• Large bundle size impact
• More complex to integrate
• Overkill for simple query editors

Links:

• Monaco Editor
• Monaco SQL Languages
• Neo4j's Migration Story

---

Option 3: Ace Editor

Best for: Middle ground between features and simplicity

Key Facts:

• Bundle size: ~200-300KB
• API complexity: Medium
• SQL support: ✅ Built-in
• Cypher support: ⚠️ Custom mode needed
• Maintenance: ⚠️ Less active than Monaco/CodeMirror

Trade-offs:

• Older architecture (less modern than CM6/Monaco)
• Maintenance concerns (less active development)
• No official Cypher support

Links:

• Ace vs CodeMirror Comparison

---

Option 4: Stay on CodeMirror v5 (Current)

Best for: Zero-effort solution while evaluating alternatives

Key Facts:

• Bundle size: Current implementation (~100KB)
• Migration effort: 0 hours (already done)
• SQL support: ✅ Working perfectly
• Cypher support: ✅ Likely already implemented
• Maintenance: ⚠️ Legacy, maintenance-mode only

Trade-offs:

• No future features
• v5 is in maintenance mode

---

Decision Matrix

Priority	Best Choice
Simplest to maintain	Prism Code Editor
Smallest bundle size	Prism Code Editor
Best Cypher support	Monaco Editor
Best SQL experience	Monaco Editor
Least work right now	CodeMirror v5 (keep current)
Best long-term investment	CodeMirror v6 or Monaco

---

Recommended Strategy

Short-term (Now - Q1 2026)

Stay on CodeMirror v5

• No work required
• Secure for our use case
• Works perfectly
• Buys time to evaluate

Mid-term (Q2 2026)

Evaluate based on priorities:

If simplicity is paramount:
→ Migrate to Prism Code Editor

• Effort: ~4-6 hours (much less than CM6)
• Bundle savings: ~100KB
• Simple maintenance forever

If rich features are needed:
→ Migrate to Monaco Editor

• Effort: ~6-8 hours
• Get professional editing experience
• Cypher works out-of-the-box
• Following Neo4j's lead

If staying in CodeMirror ecosystem:
→ Migrate to CodeMirror v6

• Effort: 8-10 hours (as documented above)
• Best mobile/accessibility support
• Active development

---

Bundle Size Comparison

Prism Code Editor:      ~30KB
CodeMirror v5:         ~100KB (current)
CodeMirror v6:         ~135KB (basic setup)
Ace Editor:            ~200-300KB
Monaco Editor:         ~1.26MB gzipped

---

Next Steps

1. Decide on strategic direction:

   • Prioritize simplicity → Prism
   • Prioritize features → Monaco
   • Stay in ecosystem → CodeMirror v6

2. Prototype chosen solution (2-3 hours)

   • Test with SQL queries
   • Test with Cypher queries
   • Validate bundle size impact

3. Full migration (see effort estimates above)

---

References:

• Code Editor Comparison by Replit
• Best React Code Editor Components
• CodeMirror Bundle Size
• Neo4j Monaco Migration
• @neo4j-cypher/codemirror