CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
monaco-editor-lsp-next
266 Commits 8 Branches 0 Tags 7.3 MiB
TypeScript 92.5%
CSS 6.4%
Dockerfile 0.8%
JavaScript 0.2%
PLpgSQL 0.1%
7ade2f8e90
Go to file
cfngc4594 7ade2f8e90
Some checks failed
Docker Build and Push / docker-build-and-push (., Dockerfile, monaco-editor-lsp-next) (push) Failing after 15s
Details
Docker Build and Push / docker-build-and-push (./docker/lsp/clangd, ./docker/lsp/clangd/Dockerfile, lsp-c) (push) Failing after 13s
Details
Docker Build and Push / docker-build-and-push (./docker/lsp/clangd, ./docker/lsp/clangd/Dockerfile, lsp-cpp) (push) Failing after 13s
Details
fix(docker): update matrix strategy for clearer context and file assignment
2025-03-05 15:44:26 +08:00
.github/workflows fix(docker): update matrix strategy for clearer context and file assignment 2025-03-05 15:44:26 +08:00
docker/lsp/clangd feat(docker): simplify docker compose commands and add compose.yml for service configuration 2025-02-21 19:56:49 +08:00
public docs: add placeholder .gitkeep file to 'public' folder 2025-02-20 01:31:14 +08:00
src refactor(code-editor): dynamically fetch lspConfig from LanguageServerConfig 2025-03-05 13:29:17 +08:00
.dockerignore feat(docker): add Dockerfile and .dockerignore for containerized environment setup 2025-02-19 17:13:31 +08:00
.env.example fix(language-server): update configuration to use environment variables for WebSocket settings 2025-02-24 00:22:34 +08:00
.gitignore chore: update .gitignore to explicitly commit env files 2025-02-20 08:42:01 +08:00
bun.lock feat(components/ui): add Sidebar-13 component from shadcn/ui 2025-03-03 14:51:13 +08:00
components.json chore: initialize shadcn/ui 2025-02-19 09:07:30 +08:00
compose.yml feat(compose): add docker socket mount and root user permission configuration 2025-03-01 16:06:33 +08:00
demo.png chore(images): replace demo image with new version 2025-03-05 10:30:27 +08:00
Dockerfile chore: update Dockerfile to specify Node.js v20 or higher for resolving ReferenceError 2025-02-20 08:54:37 +08:00
eslint.config.mjs chore: initialize the project 2025-02-19 09:00:15 +08:00
LICENSE chore: add MIT License file to the repository 2025-02-19 18:38:49 +08:00
next.config.ts feat(next.config): add dockerode to serverExternalPackages 2025-02-26 21:18:33 +08:00
package.json feat(components/ui): add Sidebar-13 component from shadcn/ui 2025-03-03 14:51:13 +08:00
postcss.config.mjs chore: initialize the project 2025-02-19 09:00:15 +08:00
README.md docs(README): add version lock requirements for monaco-editor and monaco-languageclient 2025-03-02 12:20:04 +08:00
tailwind.config.ts feat(components/ui): add Sidebar-13 component from shadcn/ui 2025-03-03 14:51:13 +08:00
tsconfig.json chore: initialize the project 2025-02-19 09:00:15 +08:00

README.md

monaco-editor-lsp-next

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

demo

⚠️ 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:

  1. Open WSL settings ⚙️
  2. Navigate to Network section 🌐
  3. Select Mirrored mode 🔄
  4. 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:

  1. API Stability

    • Newer monaco-editor (≥0.40.0) breaks monaco-languageclient integration
    • v0.36.1 matches @codingame/monaco-vscode-api@1.76.9 requirements

  2. LSP Feature Breakdown

    • Version mismatches disable:
      • Auto textDocument/didOpen events
      • textDocument/inlayHint resolution
      • textDocument/documentLink functionality

  3. 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.