monaco-editor-lsp-next

✨ A seamless Next.js integration of the Monaco Editor with robust LSP support – all without SSR hassles.

⚠️ WSL Users: Critical Configuration

🐧 Network Mode Requirement

When using Windows Subsystem for Linux (WSL), you must configure your network mode as Mirrored to ensure proper LSP server connectivity. Standard WSL network configurations may create IPv6 conflicts that block Monaco-LSP communication.

🔧 Mirror Mode Setup:

Open WSL settings ⚙️
Navigate to Network section 🌐
Select Mirrored mode 🔄
Restart WSL instance 💻

Complete these steps before launching the editor for seamless LSP integration! 🎉

🚀 Getting Started

🐳 Docker Deployment (Recommended)

# Clone repository
git clone https://github.com/cfngc4594/monaco-editor-lsp-next
cd monaco-editor-lsp-next

# Build and launch containers
docker compose up -d --build

🔨 Manual Installation

# Clone repository
git clone https://github.com/cfngc4594/monaco-editor-lsp-next
cd monaco-editor-lsp-next

# Start core LSP containers
docker compose up -d --build lsp-c lsp-cpp

# Install dependencies (using Bun)
bun install

# Launch development server
bun run dev

⚙️ Technical Configuration

LSP Server Mapping

Language	LSP Server	Port
`C`	`clangd`	`4594`
`C++`	`clangd`	`4595`

📦 Dependency Management

🔒 Version Lock Requirements

Critical Pairing:

Package	Max Version	Reference
`monaco-editor`	≤0.36.1	Compatibility Matrix
`monaco-languageclient`	≤5.0.1

Version Lock Rationale:

API Stability
- Newer monaco-editor (≥0.40.0) breaks monaco-languageclient integration
- v0.36.1 matches @codingame/monaco-vscode-api@1.76.9 requirements
LSP Feature Breakdown
- Version mismatches disable:
  - Auto textDocument/didOpen events
  - textDocument/inlayHint resolution
  - textDocument/documentLink functionality
Version Conflict
- @codingame package versioning (e.g., 11.1.2) ≠ monaco-editor versions (e.g., 0.36.1)
- @monaco-editor/react depends on monaco-editor versioning scheme

Failure Indicators:

✔️ WebSocket connection established
❌ Missing syntax highlighting
❌ No autocomplete suggestions
❌ Silent LSP initialization failures

🎨 Shiki Compatibility Notice

Syntax highlighting depends on rehype-pretty-code's deprecated getHighlighter API from shiki@legacy.

Key Points:

Affected File: src/components/mdx-preview.tsx
Dependency Chain: rehype-pretty-code → shiki@legacy

Version Constraints:

"shiki": "<=2.5.0"
"@shikijs/monaco": "<=2.5.0"

Maintenance Note:
While shiki@3.0.0+ introduces modern APIs (createHighlighter/getSingletonHighlighter), upgrading requires rehype-pretty-code updates. Track progress here.

3.4 KiB Raw Blame History Unescape Escape