📄 LSP Integration Design Guide

⚡ CodeMirror 6 LSP Integration Quick-Start

🔌 Autocomplete Extension

graph LR
  Trigger[Trigger Char] --> Source[completionSource Async]
  Source --> Map[Candidate Mapping]
  Map --> View[UI Render]

• Trigger: Async query fires on matching trigger characters.
• Candidate Mapping (Completion object):
  • label: Target text to insert.
  • detail: Inline type/info signature.
  • type: LSP Kind ➡️ UI Icon string.
  • apply(view, completion, from, to): Custom callback for complex text edits & cursor placement.

---

🔍 Diagnostic Linter

• Core Plugin: Import linter from @codemirror/lint.
• Sync Flow: Push LSP diagnostics ➡️ Map to CodeMirror ➡️ Render.

LSP Property	CM6 Target	Mapping Logic / Conversion
range	from/to	Convert LSP (line, character) ➡️ CM6 absolute 1D offsets.
severity	severity	Map Error/Warning/Info/Hint ➡️ "error" | "warning" | "info".
message	message	Raw string displayed on hover/panel.

---

🛠️ Quick-Fix Actions

1. Request: Query LSP textDocument/codeAction at diagnostic range.
2. Parse: Map returned WorkspaceEdits to CodeMirror diagnostic actions:

   actions: [{
     name: "Fix issue",
     apply(view, from, to) { /* Dispatch edits */ }
   }]

3. Apply: User clicks action ➡️ Dispatch transaction via view.dispatch().

---

🔄 State-to-View Pipeline

• State Fields (StateField):
  • pendingRequests: Debounce/cancel active flyweight LSP requests.
  • cachedCompletions: Client-side cache for instant local filtering.
• View Updates (ViewPlugin):
  • Listens to LSP WebSocket events.
  • Must apply updates to state asynchronously using EditorView.dispatch() on the main thread.

---